HTML이란 하이퍼텍스트 마크업 언어(Hypertext Markup Language)의 약자로, 웹사이트의 포맷을 만드는 데 사용되는 언어입니다.
특징
- 위키 문서는 대부분 위키 문법으로 이루어져 있지만 가끔씩 HTML을 사용하기도 합니다.
- 주로 콘텐츠 레이아웃을 복잡하게 꾸밀 때 HTML이 사용됩니다.
- 기본적으로 HTML 태그는 꺾쇠표(<>) 안에 글자가 있는 식으로 되어 있습니다.
- HTML은 원본 편집 모드에서만 작성할 수 있습니다.
사용법
- HTML 태그는 <태그 이름>로 시작해서 </태그 이름>로 끝납니다.
- 태그의 시작과 끝 사이에 있는 텍스트에 태그가 적용됩니다.
- 추가적으로 스타일이나 클래스를 설정할 수 있는 경우에는 다음과 같은 식으로 합니다.
HTML 목록
다음은 위키에서 사용할 수 있는 HTML 태그 목록입니다.
<abbr>
<b>
*<blockquote>
<br />
<caption>
<cite>
<code>
<dd>
*<del>
<dfn>
<div>
<dl>
*<dt>
*<em>
*<h1>
*<h2>
*<h3>
*<h4>
*<h5>
*<h6>
*<hr>
*<i>
*<ins>
<kbd>
<li>
*<ol>
*<p>
*<pre>
**<q>
<rb>
<rp>
<rt>
<ruby>
<s>
<samp>
<small>
<span>
<strong>
<sub>
<sup>
<table>
*<td>
*<th>
*<tr>
*<u>
<ul>
*<var>
<!-- -->
*이 태그와 동일한 기능을 수행하는 위키 문법이 존재합니다. 이 경우 해당 위키 문법을 쓰는 것을 권장합니다. 보다 자세한 사항은 #알아둘 점 문단을 참고하십시오.
**<pre>는 파서 태그입니다. 이 태그는 내부에 있는 모든 마크업을 무시합니다. 이 점에서 <nowiki> 태그와 유사합니다.
지원 중단 태그
다음은 지원 중단된 태그 목록입니다. 이 태그들은 여전히 사용 가능하나 추후 버전에서 작동하지 않을 수 있습니다.
태그 | 대체 | 예시 | 예시 결과 |
---|---|---|---|
<big>
|
<span style="font-size: larger;">
|
<span style="font-size: larger;">큰 텍스트</span>
|
큰 텍스트 |
<center>
|
<div style="text-align: center;">
|
<div style="text-align: center;">중앙 텍스트</div>
|
중앙 텍스트
|
<font color="x" size="y" face="z">
|
<span style="color: x; font-size: y; font-family: z;">
|
<span style="color: red;">경고 텍스트</span>
|
경고 텍스트 |
<span style="font-family: Times New Roman;">Times New Roman 글꼴입니다</span>
|
Times New Roman 글꼴입니다 | ||
<strike>
|
del (편집 표시용)
|
<del>예</del> 아니요
|
|
<s> (그 외 용도)
|
광자 어뢰 개당 <s>$44.99</s> '''$24.99'''
|
광자 어뢰 개당 | |
<tt>
|
<code> (소스 코드 표시용)
|
줄 바꿈 없는 공백을 사용하려면 <code> </code> 코드를 사용합니다
|
줄 바꿈 없는 공백을 사용하려면 코드를 사용합니다
|
<kbd> (사용자 입력값 표시용)
|
<kbd>비밀번호</kbd>
|
비밀번호 | |
<var> (변수 표시용)
|
<var>나이</var>=65
|
나이=65 | |
<samp> (출력값 표시용)
|
<samp>유효하지 않은 비밀번호. 다시 시도하십시오.</samp>
|
유효하지 않은 비밀번호. 다시 시도하십시오. | |
그 외 용도 | <span style="font-family: monospace;">텍스트</span>
|
텍스트 | |
표 칸 가로 정렬: align=X X는 "left", "center","right" 중 하나 (큰따옴표 없이도 사용) |
style="text-align: X;"
|
style="text-align: right;" | 오른쪽 정렬
|
오른쪽 정렬 |
표 칸 세로 정렬: valign=X X는 "top", "middle", "bottom" 중 하나 (큰따옴표 없이도 사용) |
style="vertical-align: X;"
|
style="vertical-align: top;" | 위쪽 정렬
|
위쪽 정렬 |
표 칸 배경 색상: bgcolor=X
|
style="background-color: X;"
|
style="background-color: pink" | 분홍색
|
분홍색 |
알아둘 점
- 너무 복잡해지지 않도록 하십시오
- 문서를 꾸밀 때는 최대한 위키 문법을 사용하는 게 좋습니다. HTML 태그는 위키 문법보다 복잡하게 이루어져 있으며 신규 사용자가 보기에 어려울 수 있습니다. 틀을 이용해 복잡한 HTML 태그 및 CSS를 대체할 수 있습니다.
- CSS를 활용하십시오
- CSS를 이용하면 복잡한 스타일을
class="..."
하나로 나타낼 수 있습니다. 필요한 경우 클래스와 인라인 스타일을 함께 사용할 수도 있습니다. 클래스와 스타일은 표와 같은 위키 문법에 사용할 수 있습니다. 단, 인라인 스타일 사용은 가능하면 자제하는 것이 좋습니다. 보다 자세한 사항은 이곳을 참고하십시오.
함께 보기
도움 및 문의
- 도움말:콘텐츠에서 더 많은 정보를 찾을 수 있습니다.
- 도움말:팬덤 중앙 커뮤니티에서 도움을 구할 수 있습니다.
- 도움말:문의하기에서 팬덤에 문의하는 법을 찾을 수 있습니다.