연습장:Kimchan/노트: 두 판 사이의 차이

2022년 12월 3일 (토) 17:25 판

분류:

이 문서는 현재 공사 중입니다.

이 문서는 아직 완성되지 않은 상태로, 본문에 다소 난잡하거나 생략된 부분이 포함되어 있을 수 있습니다.

김찬
관련 문서

[ 펼치기 · 접기 ]

활동 (제이위키) · 사상 · 게임 · 파일 (아이펠루스)
자캐 · 여담 · 군복무 · 단문 (결말 이후의 이야기)
소속 단체	에른스트의 아무튼 공방 · 오펜시브 프로젝트 팀
창작 작품	세계관 프로젝트 [보기] (아이펠루스 · 우리는 죽음 속에 살고 있다 · 뒤편 · 아파란시아 · 프로젝트 옴니버스 · 프로젝트 사쿠라 · 초상세계 · 프로젝트 무협) · 슬래시 앤 서바이브 · 글로리 어게인 · 저승국 등
기여 작품	무도학당 · 칠성고등학교 · 퇴귀야담 · 벌레굴 등
주요 자캐	아릴렌 · 세이넬 아르젠베르크 · 사도원 · 서은우 등
관련 문서	연습장 · CSS · Lua · 분류 · 프로필
이 사용자와 관련한 세계관은 여기를, 생성한 틀은 여기를 참고하십시오.
KimChan

김찬 연습장
연습장
메모	낙서	노트		연구	팁		공부	모듈
틀			CSS			Lua

위키독에서 직접 작성했던 HTML 문법 문서 내용 백업

개요

이하의 내용은 제이위키 문서 편집에 유용하게 쓰일 수 있는 다양한 HTML 태그 및 속성에 관해 서술합니다.

모든 코드는 태그로 적용하며 태그는 소수를 제외하고 여는 태그와 닫는 태그로 이루어집니다.^[1] 여는 태그와 닫는 태그는 반드시 함께 사용되어야 합니다.

표의 출력칸 셀은 비교를 위해 볼드체+18pt로 작성된 것을 함께 기재합니다. 코드칸 셀에 작성된 코드에는 글자 크기가 포함되지 않으므로 주의하십시오.

HTML에서 요소들 사이의 간격 구분

margin

border

padding

content

padding

border

margin

이 뒤로 나올 코드들에는 margin, border, padding이라는 개념들이 자주 등장합니다. 이에 대해 정확히 알고 넘어가면 좋습니다. 표에는 서로의 위아래로만 구분이 되어 있지만 위아래뿐 아니라 상하좌우 모든 방향을 둘러쌉니다.

content는 대부분의 요소들이 차지하는 공간입니다. 텍스트, 이미지, 링크 등 사실상 margin과 border, padding을 제외한 모든 것들이 content에 포함된다고 볼 수 있습니다.
padding은 border로 둘러싸여진 하나의 오브젝트(object) 내부의 공간을 말합니다.
border는 요소의 테두리를 구성합니다. border가 하나의 오브젝트(object)에서 가장 바깥 부분을 담당합니다.
margin은 HTML 문서에서 가장 바깥쪽 여백, 즉 오브젝트(object)에 포함되지 않는 나머지 모든 공간을 말합니다.

그림자 효과

그림자 효과 예시

사용하는 HTML 속성

text-shadow - span, div 등 텍스트에 쓰이는 태그의 하위 속성으로 쓰입니다.
box-shadow - div, table 등 기본 display 값이 block인 요소들에 쓰입니다.

<span style="text-shadow: [가로 움직임]px [세로 움직임]px [번짐 정도]px #[그림자 색];">작성할 내용</span>

텍스트 그림자를 가로세로 2px 움직여 그림자가 진 것과 같은 효과를 냅니다. 그림자 색은 글자 색보다 명도가 살짝 높은 색으로 설정하면 자연스럽습니다.

입력	출력
<span style="text-shadow: 2px 2px 0px gray;">그림자가 있는 글자</span>	그림자가 있는 글자
	그림자가 있는 글자

가로움직임과 세로움직임에 0이나 음수를 넣어 그림자의 방향을 조절할 수도 있습니다.

입력	출력
<span style="text-shadow: -2px -2px 0px gray;">왼쪽 위 그림자</span>	왼쪽 위 그림자
	왼쪽 위 그림자

입력	출력
<span style="text-shadow: 2px 0px 0px gray;">오른쪽 그림자</span>	오른쪽 그림자
<span style="text-shadow: 2px 0px 0px gray;">오른쪽 그림자</span>	오른쪽 그림자

그림자 효과는 여러 개 중첩할 수 있으며, [가로 움직임]px [세로 움직임]px [번짐 정도]px #[그림자 색]이 한 그룹입니다. 그림자 효과를 하나 더 추가하고 싶다면 맨끝 그림자색 뒤에 쉼표(,)를 달고 띄어쓰기하여 그룹을 추가 작성하면 됩니다. 마지막 효과의 맨끝 그림자색 뒤에는 세미콜론(;)을 달아야 합니다.

여러 개의 그림자 효과를 이용하여 텍스트에 글리치 효과를 줄 수도 있습니다.

입력	출력
<span style="text-shadow: 2px 0px 0px #ff0000, 0px 2px 0px #0000ff, -2px 0px 0px #ffff00;">글리치 텍스트</span>	글리치 텍스트
	글리치 텍스트

text-shadow 속성을 입력하면 속성 이름 그대로 텍스트에만 그림자가 생기지만, box-shadow 속성을 입력하면 div나 span 등 요소 전체에 그림자가 생깁니다. text-shadow와는 별개이므로 함께 사용할 수도 있습니다.

입력	출력
<span style="border: 1px solid black; color: black; text-shadow: 2px 2px gray;">글씨 그림자</span>	글씨 그림자
<div style="display: inline-block; border: 1px solid black; color: black; box-shadow: 2px 2px gray;">블록 그림자</div>	블록 그림자

각주

↑ <[태그] [속성]="[요소]: [값];">[태그가 적용된 내용]</[태그]>의 형태. 내용의 앞에 온 슬래시가 붙지 않은 태그가 여는 태그, 내용의 뒤에 온 슬래시가 붙은 태그가 닫는 태그입니다. 즉, 슬래시로 태그의 여닫음을 구분합니다.

이 문서의 내용 중 전체 또는 일부는 연습장:Kimchan 문서의 331280판에서 가져왔습니다. 문서 역사 보러가기

[1] <[태그] [속성]="[요소]: [값];">[태그가 적용된 내용]</[태그]>의 형태. 내용의 앞에 온 슬래시가 붙지 않은 태그가 여는 태그, 내용의 뒤에 온 슬래시가 붙은 태그가 닫는 태그입니다. 즉, 슬래시로 태그의 여닫음을 구분합니다.

[1]

@@ 93번째 줄: / 93번째 줄: @@
 text-shadow 속성을 입력하면 속성 이름 그대로 텍스트에만 그림자가 생기지만, box-shadow 속성을 입력하면 div나 span 등 요소 전체에 그림자가 생깁니다. text-shadow와는 별개이므로 함께 사용할 수도 있습니다.
+{|class="wikitable" style="width: 100%; table-layout: fixed;"
+|-
+!{{nobold|입력}}||{{nobold|출력}}
+|-
+|<nowiki><span style="border: 1px solid black; color: black; text-shadow: 2px 2px gray;">글씨 그림자</span></nowiki>
+|<span style="border: 1px solid black; color: black; text-shadow: 2px 2px gray;">글씨 그림자</span>
+|-
+|<nowiki><div style="display: inline-block; border: 1px solid black; color: black; box-shadow: 2px 2px gray;">블록 그림자</div></nowiki>
+|<div style="display: inline-block; border: 1px solid black; color: black; box-shadow: 2px 2px gray;">블록 그림자</div>
+|}
 == 각주 ==
 {{각주}}
 {{문서 가져옴|연습장:Kimchan|331280}}