중앙 커뮤니티
가입하기
아직 계정이 없으신가요?
로그인
중앙 커뮤니티
중앙 커뮤니티
631
pages
분류: 도움말
한국어

변경점: 도움말:HTML

돌아가기
편집
잔글 (봇: tr:Yardım:HTML 추가)
 
(사용자 2명의 중간 판 2개는 보이지 않습니다)
6번째 줄: 6번째 줄:
 
** 주로 콘텐츠 레이아웃을 복잡하게 꾸밀 때 HTML이 사용됩니다.
  
** 주로 콘텐츠 레이아웃을 복잡하게 꾸밀 때 HTML이 사용됩니다.
 
* 기본적으로 HTML 태그는 꺾쇠표(<>) 안에 글자가 있는 식으로 되어 있습니다.
  
* 기본적으로 HTML 태그는 꺾쇠표(<>) 안에 글자가 있는 식으로 되어 있습니다.
−
* HTML은 소스 모드에서만 작성할 수 있습니다.
 +
* HTML은 원본 편집 모드에서만 작성할 수 있습니다.
   
 
==사용법==
  
==사용법==
16번째 줄: 16번째 줄:
 
==HTML 목록==
  
==HTML 목록==
 
다음은 위키에서 사용할 수 있는 HTML 태그 목록입니다.
  
다음은 위키에서 사용할 수 있는 HTML 태그 목록입니다.
  +
<div style="column-count: 3;">
−
{| class="article-table" width="100%"
  
  ⚫
* <code><nowiki><abbr></nowiki></code>
−
| width="33%" |
  
−
* <nowiki><abbr></nowiki>
 +
* <code><nowiki><b></nowiki></code>*
−
* <nowiki><acronym></nowiki> (폐지 예정)
 +
* <code><nowiki><blockquote></nowiki></code>
−
* <nowiki><b></nowiki>
 +
* <code><nowiki><br /></nowiki></code>
−
* <nowiki><big></nowiki> (폐지 예정)
 +
* <code><nowiki><caption></nowiki></code>
−
* <nowiki><blockquote></nowiki>
 +
* <code><nowiki><cite></nowiki></code>
−
* <nowiki><br /></nowiki>
 +
* <code><nowiki><code></nowiki></code>
−
* <nowiki><caption></nowiki>
 +
* <code><nowiki><dd></nowiki></code>*
−
* <nowiki><center></nowiki> (폐지 예정)
 +
* <code><nowiki><del></nowiki></code>
−
* <nowiki><cite></nowiki>
 +
* <code><nowiki><dfn></nowiki></code>
−
* <nowiki><code></nowiki>
 +
* <code><nowiki><div></nowiki></code>
−
* <nowiki><dd></nowiki>
 +
* <code><nowiki><dl></nowiki></code>*
−
* <nowiki><del></nowiki>
 +
* <code><nowiki><dt></nowiki></code>*
−
* <nowiki><div></nowiki>
 +
* <code><nowiki><em></nowiki></code>*
−
* <nowiki><dl></nowiki>
 +
* <code><nowiki><h1></nowiki></code>*
−
* <nowiki><dt></nowiki>
 +
* <code><nowiki><h2></nowiki></code>*
−
* <nowiki><em></nowiki>
 +
* <code><nowiki><h3></nowiki></code>*
−
* <nowiki><font></nowiki> (폐지 예정)
 +
* <code><nowiki><h4></nowiki></code>*
  ⚫
* <code><nowiki><h5></nowiki></code>*
−
| width="33%" |
  
−
* <nowiki><h1></nowiki>
 +
* <code><nowiki><h6></nowiki></code>*
−
* <nowiki><h2></nowiki>
 +
* <code><nowiki><hr></nowiki></code>*
−
* <nowiki><h3></nowiki>
 +
* <code><nowiki><i></nowiki></code>*
−
* <nowiki><h4></nowiki>
 +
* <code><nowiki><ins></nowiki></code>
−
* <nowiki><h5></nowiki>
 +
* <code><nowiki><kbd></nowiki></code>
−
* <nowiki><h6></nowiki>
 +
* <code><nowiki><li></nowiki></code>*
−
* <nowiki><hr></nowiki>
 +
* <code><nowiki><ol></nowiki></code>*
−
* <nowiki><i></nowiki>
 +
* <code><nowiki><p></nowiki></code>*
−
* <nowiki><ins></nowiki>
 +
* <code><nowiki><pre></nowiki></code>**
−
* <nowiki><li></nowiki>
 +
* <code><nowiki><q></nowiki></code>
−
* <nowiki><ol></nowiki>
 +
* <code><nowiki><rb></nowiki></code>
−
* <nowiki><p></nowiki>
 +
* <code><nowiki><rp></nowiki></code>
−
* <nowiki><pre></nowiki>
 +
* <code><nowiki><rt></nowiki></code>
−
* <nowiki><q></nowiki>
 +
* <code><nowiki><ruby></nowiki></code>
−
* <nowiki><rb></nowiki>
 +
* <code><nowiki><s></nowiki></code>
−
* <nowiki><rp></nowiki>
 +
* <code><nowiki><samp></nowiki></code>
−
* <nowiki><rt></nowiki>
 +
* <code><nowiki><small></nowiki></code>
  ⚫
* <code><nowiki><span></nowiki></code>
−
| width="33%" |
  
−
* <nowiki><ruby></nowiki>
 +
* <code><nowiki><strong></nowiki></code>
−
* <nowiki><s></nowiki>
 +
* <code><nowiki><sub></nowiki></code>
−
* <nowiki><small></nowiki>
 +
* <code><nowiki><sup></nowiki></code>
−
* <nowiki><span></nowiki>
 +
* <code><nowiki><table></nowiki></code>*
−
* <nowiki><strike></nowiki> (폐지 예정)
 +
* <code><nowiki><td></nowiki></code>*
−
* <nowiki><strong></nowiki>
 +
* <code><nowiki><th></nowiki></code>*
−
* <nowiki><sub></nowiki>
 +
* <code><nowiki><tr></nowiki></code>*
−
* <nowiki><sup></nowiki>
 +
* <code><nowiki><u></nowiki></code>
−
* <nowiki><table></nowiki>
 +
* <code><nowiki><ul></nowiki></code>*
−
* <nowiki><td></nowiki>
 +
* <code><nowiki><var></nowiki></code>
−
* <nowiki><th></nowiki>
 +
* <code><nowiki><!-- --></nowiki></code>
  +
</div>
⚫
* <nowiki><tr></nowiki>
  
  +
<nowiki>*</nowiki>이 태그와 동일한 기능을 수행하는 [[도움말:위키 문법|위키 문법]]이 존재합니다. 이 경우 해당 위키 문법을 쓰는 것을 권장합니다. 보다 자세한 사항은 [[#알아둘 점]] 문단을 참고하십시오.<br/>
−
* <nowiki><tt></nowiki> (폐지 예정)
  
  +
<nowiki>**</nowiki><nowiki><pre></nowiki>는 파서 태그입니다. 이 태그는 내부에 있는 모든 마크업을 무시합니다. 이 점에서 <nowiki><nowiki></nowiki> 태그와 유사합니다.
⚫
* <nowiki><u></nowiki>
  
  +
⚫
* <nowiki><ul></nowiki>
  
  +
==지원 중단 태그==
⚫
* <nowiki><var></nowiki>
  
  +
다음은 지원 중단된 태그 목록입니다. 이 태그들은 여전히 사용 가능하나 추후 버전에서 작동하지 않을 수 있습니다.
−
* <nowiki><!-- ... --></nowiki> ''(에디터 모드에선 [[File:Comment_Icon.png|Comments|link=]] 아이콘으로 표시)''
  
  +
{|class="wikitable"
  +
|+ 지원 중단 태그
  +
|-
  +
! scope="col" | 태그
  +
! scope="col" | 대체
  +
! scope="col" | 예시
  +
! scope="col" | 예시 결과
  +
|-
  ⚫
| <code><nowiki><big></nowiki></code>
  +
| <code><nowiki><span style="font-size: larger;"></nowiki></code>
  +
| <code><nowiki><span style="font-size: larger;">큰 텍스트</span></nowiki></code>
  +
| <span style="font-size: larger;">큰 텍스트</span>
  +
|-
  ⚫
| <code><nowiki><center></nowiki></code>
  +
| <code><nowiki><div style="text-align: center;"></nowiki></code>
  +
| <code><nowiki><div style="text-align: center;">중앙 텍스트</div></nowiki></code>
  +
| <div style="text-align: center;">중앙 텍스트</div>
  +
|-
  +
| rowspan="2" | <code><nowiki><font color="x" size="y" face="z"></nowiki></code>
  +
| rowspan="2" | <code><nowiki><span style="color: x; font-size: y; font-family: z;"></nowiki></code>
  +
| <code><nowiki><span style="color: red;">경고 텍스트</span></nowiki></code>
  +
| <span style="color: red;">경고 텍스트</span>
  +
|-
  +
| <code><nowiki><span style="font-family: Times New Roman;">Times New Roman 글꼴입니다</span></nowiki></code>
  +
| <span style="font-family: Times New Roman;">Times New Roman 글꼴입니다</span>
  +
|-
  +
| rowspan="2" | <code><nowiki><strike></nowiki></code>
  +
| <code><nowiki>del</nowiki></code> (편집 표시용)
  +
| <code><nowiki><del>예</del> 아니요</nowiki></code>
  +
| <del>예</del> 아니요
  +
|-
  +
| <code><nowiki><s></nowiki></code> (그 외 용도)
  +
| <code><nowiki>광자 어뢰 개당 <s>$44.99</s> '''$24.99'''</nowiki></code>
  +
| 광자 어뢰 개당 <s>$44.99</s> '''$24.99'''
  +
|-
  +
| rowspan="5" | <code><nowiki><tt></nowiki></code>
  +
| <code><nowiki><code></nowiki></code> (소스 코드 표시용)
  +
| <code>줄 바꿈 없는 공백을 사용하려면 <nowiki><code>&amp;nbsp;</code></nowiki> 코드를 사용합니다</code>
  +
| 줄 바꿈 없는 공백을 사용하려면 <code>&amp;nbsp;</code> 코드를 사용합니다
  +
|-
  +
| <code><nowiki><kbd></nowiki></code> (사용자 입력값 표시용)
  +
| <code><nowiki><kbd>비밀번호</kbd></nowiki></code>
  +
| <kbd>비밀번호</kbd>
  +
|-
  +
| <code><nowiki><var></nowiki></code> (변수 표시용)
  +
| <code><nowiki><var>나이</var>=65</nowiki></code>
  +
| <var>나이</var>=65
  +
|-
  +
| <code><nowiki><samp></nowiki></code> (출력값 표시용)
  +
| <code><nowiki><samp>유효하지 않은 비밀번호. 다시 시도하십시오.</samp></nowiki></code>
  +
| <samp>유효하지 않은 비밀번호. 다시 시도하십시오.</samp>
  +
|-
  +
| 그 외 용도
  +
| <code><nowiki><span style="font-family: monospace;">텍스트</span></nowiki></code>
  +
| <span style="font-family: monospace;">텍스트</span>
  +
|-
  +
| '''표 칸 가로 정렬:''' <code>align=''X''</code><br/><span style="font-family: monospace, monospace;">''X''</span>는 <span style="font-family: monospace, monospace;">"left"</span>, <span style="font-family: monospace, monospace;">"center"</span>,<span style="font-family: monospace, monospace;">"right"</span> 중 하나 (큰따옴표 없이도 사용)<br/>
  +
| <code>style="text-align: X;"</code>
  +
| <code>style="text-align: right;" &#124; 오른쪽 정렬</code>
  +
| style="text-align: right;" | 오른쪽 정렬
  +
|-
  +
| '''표 칸 세로 정렬:''' <code>valign=''X''</code><br/><span style="font-family: monospace, monospace;">''X''</span>는 <span style="font-family: monospace, monospace;">"top"</span>, <span style="font-family: monospace, monospace;">"middle"</span>, <span style="font-family: monospace, monospace;">"bottom"</span> 중 하나 (큰따옴표 없이도 사용)
  +
| <code>style="vertical-align: X;"</code>
  +
| <code>style="vertical-align: top;" &#124; 위쪽 정렬</code>
  +
| style="vertical-align: top;" | 위쪽 정렬
  +
|-
  +
| '''표 칸 배경 색상:''' <code>bgcolor=''X''</code>
  +
| <code>style="background-color: X;"</code>
  +
| <code>style="background-color: pink" &#124; 분홍색</code>
  +
| style="background-color: pink" | 분홍색
 
|}
  
|}
   
 
==알아둘 점==
  
==알아둘 점==
−
;너무 복잡해지지 않도록 하세요
 +
;너무 복잡해지지 않도록 하십시오
−
: 문서를 꾸밀 때는 최대한 [[도움말:위키 문법|위키 문법]]을 사용하는 게 좋습니다. HTML 태그는 위키 문법보다 복잡하게 이루어져 있으며 신규 사용자가 보기에 어려울 수 있습니다. [[도움말:틀|틀]]을 이용해 복잡한 HTML 태그를 대체할 수 있습니다.
 +
: 문서를 꾸밀 때는 최대한 [[도움말:위키 문법|위키 문법]]을 사용하는 게 좋습니다. HTML 태그는 위키 문법보다 복잡하게 이루어져 있으며 신규 사용자가 보기에 어려울 수 있습니다. [[도움말:틀|틀]]을 이용해 복잡한 HTML 태그 및 CSS를 대체할 수 있습니다.
   
−
;CSS를 활용하세요
 +
;CSS를 활용하십시오
−
: [[도움말:CSS|CSS]]를 이용하면 복잡한 스타일을 ''<code>class="..."</code>'' 하나로 나타낼 수 있습니다. 이렇게 스타일에 쓸 코드를 절약하면 더 보기 편하게 태그를 사용할 수 있습니다.
 +
: [[도움말:CSS|CSS]]를 이용하면 복잡한 스타일을 ''<code>class="..."</code>'' 하나로 나타낼 수 있습니다. 필요한 경우 클래스와 인라인 스타일을 함께 사용할 수도 있습니다. 클래스와 스타일은 [[도움말:표|표]]와 같은 위키 문법에 사용할 수 있습니다. 단, 인라인 스타일 사용은 가능하면 자제하는 것이 좋습니다. 보다 자세한 사항은 [[도움말:인라인 스타일 피하기|이곳]]을 참고하십시오.
   
 
==함께 보기==
  
==함께 보기==
 
*[[도움말:표]]
  
*[[도움말:표]]
 
*[[도움말:편집하기]]
  
*[[도움말:편집하기]]
−
*{{#NewWindowLink:MetaWikipedia:Help:Editing|위키미디어 도움말 문서}}
 +
*[[m:Help:Editing|위키미디어 도움말 문서]]
−
*{{#NewWindowLink:MetaWikipedia:Help:HTML in wikitext|위키문법에서 쓰이는 HTML}}
 +
*[[m:Help:HTML in wikitext|위키문법에서 쓰이는 HTML]]
−
*{{#NewWindowLink:Wikipedia:Wikipedia:Span tags|Span 태그 정보}}
 +
*[[wikipedia:Wikipedia:Span tags|Span 태그 정보]]
   
 
==도움 및 문의==
  
==도움 및 문의==
92번째 줄: 162번째 줄:
 
[[분류:도움말]]
  
[[분류:도움말]]
   
−
[[be:Даведка:HTML]]
 +
[[be:Help:HTML]]
 
[[de:Hilfe:HTML]]
  
[[de:Hilfe:HTML]]
 
[[en:Help:HTML]]
  
[[en:Help:HTML]]
 
[[es:Ayuda:HTML]]
  
[[es:Ayuda:HTML]]
 
[[fr:Aide:HTML]]
  
[[fr:Aide:HTML]]
  +
[[hi:सहायता:HTML]]
 
[[it:Aiuto:HTML]]
  
[[it:Aiuto:HTML]]
 
[[ja:ヘルプ:HTML]]
  
[[ja:ヘルプ:HTML]]

2021년 11월 5일 (금) 23:32 기준 최신판

HTML이란 하이퍼텍스트 마크업 언어(Hypertext Markup Language)의 약자로, 웹사이트의 포맷을 만드는 데 사용되는 언어입니다.

특징[]

  • 위키 문서는 대부분 위키 문법으로 이루어져 있지만 가끔씩 HTML을 사용하기도 합니다.
    • 주로 콘텐츠 레이아웃을 복잡하게 꾸밀 때 HTML이 사용됩니다.
  • 기본적으로 HTML 태그는 꺾쇠표(<>) 안에 글자가 있는 식으로 되어 있습니다.
  • HTML은 원본 편집 모드에서만 작성할 수 있습니다.

사용법[]

  • HTML 태그는 <태그 이름>로 시작해서 </태그 이름>로 끝납니다.
    • 태그의 시작과 끝 사이에 있는 텍스트에 태그가 적용됩니다.
  • 추가적으로 스타일이나 클래스를 설정할 수 있는 경우에는 다음과 같은 식으로 합니다.
<태그 이름 class="클래스" style="스타일">내용</태그 이름>

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''' 광자 어뢰 개당 $44.99 $24.99
<tt> <code> (소스 코드 표시용) 줄 바꿈 없는 공백을 사용하려면 <code>&nbsp;</code> 코드를 사용합니다 줄 바꿈 없는 공백을 사용하려면 &nbsp; 코드를 사용합니다
<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="..." 하나로 나타낼 수 있습니다. 필요한 경우 클래스와 인라인 스타일을 함께 사용할 수도 있습니다. 클래스와 스타일은 표와 같은 위키 문법에 사용할 수 있습니다. 단, 인라인 스타일 사용은 가능하면 자제하는 것이 좋습니다. 보다 자세한 사항은 이곳을 참고하십시오.

함께 보기[]

도움 및 문의[]

분류 목록
언어
Беларуская Deutsch English Español Français हिन्दी Italiano 日本語 Nederlands Polski Português Română Русский Türkçe Українська Tiếng Việt 中文
이 커뮤니티의 콘텐츠는 별다른 언급이 없는 한 CC-BY-SA 라이선스하에 배포됩니다.