나무위키:문법 도움말/HTML

  상위 문서: 나무위키:문법 도움말

1. HTML 문법을 이용한 텍스트 효과[편집]

---

1.1. 텍스트 배경 색상 사용[편집]

---

{{{#!html <span style="background-color: #배경색">서술할 내용</span>}}}

아래 표의 예시는 비교를 위하여 원본과 3배본을 함께 서술하였습니다.

1.2. 텍스트 배경 색상과 텍스트 색깔 중첩 사용[편집]

---

서술할 내용1
서술할 내용2
서술할 내용3


HTML 문법을 제대로 적지 않으면 평범한 글자가 됩니다. 중첩을 사용할 때 ;(세미콜론) 뒤에 한 칸을 띄어 쓰면 됩니다. 이를 응용하여 다른 문법에 적용 가능합니다.

주의: HTML 문법 안에 나무위키 문법을 같이 쓸 수 없습니다. ex) '''볼드체'''

같이 쓰려면 볼드체
이와 같이 <b>태그를 사용해야 합니다. 태그는 {{{#!html <태그>}}} 이렇게 사용해야 합니다.

이 외에도 다양한 태그가 있습니다.

아니면은 괄호 밖에서 사용해야 합니다. 볼드체

주의: 문서 목차에는 HTML 문법이 적용되지 않습니다.

1.3. 텍스트 그림자 및 네온 효과[편집]

---

{{{#!html <span style="text-shadow: 가로움직임px 세로움직임px 번짐정도px #그림자색; color:#글자색">서술할 내용</span>}}}
나무위키에서는 px 단위의 값이 0이 아닐 때 항상 px를 써주어야 정상 표시됩니다. 표나 이미지의 크기를 정할 때와 같이, px를 생략하면 자동으로 픽셀 단위로 맞추어 주지는 않음에 주의해야 합니다.
글자색을 그대로 쓸 생각이면 ; color:#글자색부분을 제외하면 됩니다. 아래 표의 예시는 비교를 위하여 원본과 3배본을 함께 서술하였습니다.

1.4. 텍스트 외곽선 효과[편집]

---

{{{#!html <span style="text-shadow: 외곽선두께px 0px #외곽선색, 0px 외곽선두께px #외곽선색, -외곽선두께px 0px #외곽선색, 0px -외곽선두께px #외곽선색, 외곽선두께px 외곽선두께px #외곽선색, 외곽선두께px -외곽선두께px #외곽선색, -외곽선두께px -외곽선두께px #외곽선색, -외곽선두께px 외곽선두께px #외곽선색; color:#글자색">서술할 내용</span>}}}
나무위키에서는 px 단위의 값이 0이 아닐 때 항상 px를 써주어야 정상 표시됩니다. 표나 이미지의 크기를 정할 때와 같이, px를 생략하면 자동으로 픽셀 단위로 맞추어 주지는 않음에 주의해야 합니다.
글자색을 그대로 쓸 생각이면 ; color:#글자색부분을 제외하면 됩니다. 아래 표의 예시는 비교를 위하여 원본과 3배본을 함께 서술하였습니다.

위의 그림자 효과를 응용한 방식입니다.
상, 하, 좌, 우, 좌상, 우상, 좌하, 우하의 8방으로 그림자를 모두 적용한 방식으로 외곽선처럼 표시됩니다.
이 중 상, 하, 좌, 우의 그림자 효과만 적용할 경우 픽셀 폰트처럼 외곽선이 표시됩니다.