이 문서는 아직 완성되지 않은 상태로, 본문에 다소 난잡하거나 생략된 부분이 포함되어 있을 수 있습니다.
| 김찬 연습장 | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
위키독에서 직접 작성했던 HTML 문법 문서 내용 백업
개요
이하의 내용은 제이위키 문서 편집에 유용하게 쓰일 수 있는 다양한 HTML 태그 및 속성에 관해 서술합니다.
모든 코드는 태그로 적용하며 태그는 소수를 제외하고 여는 태그와 닫는 태그로 이루어집니다.[1] 여는 태그와 닫는 태그는 반드시 함께 사용되어야 합니다.
표의 출력칸 셀은 비교를 위해 볼드체+18pt로 작성된 것을 함께 기재합니다. 코드칸 셀에 작성된 코드에는 글자 크기가 포함되지 않으므로 주의하십시오.
이 뒤로 나올 코드들에는 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> | 오른쪽 그림자 |
| 오른쪽 그림자 |
그림자 효과는 여러 개 중첩할 수 있으며, [가로 움직임]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> | 블록 그림자
|
각주
- ↑ <[태그] [속성]="[요소]: [값];">[태그가 적용된 내용]</[태그]>의 형태. 내용의 앞에 온 슬래시가 붙지 않은 태그가 여는 태그, 내용의 뒤에 온 슬래시가 붙은 태그가 닫는 태그입니다. 즉, 슬래시로 태그의 여닫음을 구분합니다.
