문서 편집 권한이 없습니다. 다음 이유를 확인해주세요: 요청한 명령은 다음 권한을 가진 사용자에게 제한됩니다: 사용자. 문서의 원본을 보거나 복사할 수 있습니다. {{{#!wiki style="border:1px solid gray;border-top:5px solid purple;padding:12px" {{{+1 편집 시 주의사항}}}[br][br]그냥 수정할 경우 태그 예시에 적혀있는 <가 <로 바뀌어 태그가 적용되어 버립니다. (편집버튼을 눌러보면 <가 <로 바뀌어 있는 것을 확인할 수 있습니다.) 따라서 '''[[https://namu.wiki/raw/HTML/%ED%83%9C%EA%B7%B8|여기]]를 복사한 후 편집창에 덮어쓰기해서 수정하시기 바랍니다.'''}}} ##혹시 문제를 해결 가능한 능력자분이 계시다면 수정 바랍니다. * 상위 문서: [[HTML]] [목차] == 개요 == * HTML은 [[웹브라우저]]마다 지원하는 태그가 조금씩 다르며, 같은 태그라도 작동하는 방법이 다르다. 하지만 대체로 비슷한 태그를 지원한다. [[나무위키]]에서도 쓸 수 있지만 그냥 쓰면 안 먹히니 [[나무위키:편집 도움말]]을 참조. * [[http://www.w3schools.com/tags/default.asp|태그 목록]] == 기본 구조 == * <!DOCTYPE>: 마크업 언어용 [[DTD]] 태그이다. [[HTML5]]의 경우 맨 위에 다음과 같이 써 주면 된다. {{{#!html <!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;margin-left:30px;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007700"><!DOCTYPE</span> <span style="color: #0000CC">html</span><span style="color: #007700">></span></div> }}} * <html>: 위의 DTD를 제외한 전체를 이 태그로 둘러싼다. * <head>: HTML 문서의 속성을 지정하기 위한 태그이다. 이 태그 안에 타이틀이나 메타 태그 등을 넣는다. * <body>: HTML 문서의 본 모양을 나타내기 위한 태그이다. 표시될 문서의 레이아웃을 이 태그 안에 넣으면 된다. 속성으로 background=배경그림, bgcolor=배경색, text=글자색, link=링크색, vlink=방문링크색, alink=활성링크색 이렇게 6가지가 있었으나 [[CSS]]가 도입되면서부터 굳이 body 태그에 직접 속성을 지정해야 할 이유가 사라졌고 HTML5에서부터 지원하지 않게 되었다. 예를 들어, HTML 4.01 시절엔 body 태그를 다음과 같은 형식으로 쓸 수 있었다. {{{#!html <!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;margin-left:30px;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007700"><body</span> <span style="color: #0000CC">bgcolor=</span><span style="background-color: #fff0f0">"pink"</span> <span style="color: #0000CC">text=</span><span style="background-color: #fff0f0">"navy"</span> <span style="color: #0000CC">link=</span><span style="background-color: #fff0f0">"#ff0055"</span> <span style="color: #0000CC">vlink=</span><span style="background-color: #fff0f0">"#5500ff"</span> <span style="color: #0000CC">alink=</span><span style="background-color: #fff0f0">"#ff00ff"</span><span style="color: #007700">></span></div> }}} * 이렇게 쓰면 배경색은 핑크, 글자색은 파랑, 링크색은 진분홍, 방문링크색은 보라, 활성링크색은 자주색으로 표시된다. 하지만 HTML5에서는 이렇게 지정하는 것을 지원하지 않기 때문에 다음과 같이 CSS로 대체해야 한다. {{{#!html <!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;margin-left:30px;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007700">body {</span> <span style="color: #0000CC">background-color:</span> <span style="background-color: #fff0f0">pink;</span> <span style="color: #0000CC">color:</span> <span style="background-color: #fff0f0">navy;</span> <span style="color: #007700">}</span> <span style="color: #007700">a:link {</span> <span style="color: #0000CC">color:</span> <span style="background-color: #fff0f0">#ff0055;</span> <span style="color: #007700">}</span> <span style="color: #007700">a:visited {</span> <span style="color: #0000CC">color:</span> <span style="background-color: #fff0f0">#5500ff;</span> <span style="color: #007700">}</span> <span style="color: #007700">a:active {</span> <span style="color: #0000CC">color:</span> <span style="background-color: #fff0f0">#ff00ff;</span> <span style="color: #007700">}</span></div> }}} * <title> : HTML의 제목을 선언하는 태그. * <meta> : HTML의 부가 정보를 선언하는 태그. * <charset> : [[인코딩]]을 선언하는 태그로 HTML5에서 추가되었다. 이전까지는 <meta> 태그로 선언했었다. * <link> : 별도의 [[CSS]] 선언 파일, 파비콘[* 홈페이지 제목과 같이 나오는 아이콘] 등을 연결하는 태그. == 텍스트 관련 == * <h>: 제목(__h__eading)을 표시할 때 사용된다. <h1>이 가장 크고 <h6>이 가장 작다. 크기는 브라우저마다 표시하는 방법이 달라 다르게 나타날 수 있다. CSS를 쓰면 크기, 색상, 폰트 등을 변경할 수 있다. {{{#!html <!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;margin-left:30px;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007700"><h1></span>1단계<span style="color: #007700"></h1></span> <span style="color: #007700"><h2></span>2단계<span style="color: #007700"></h2></span> <span style="color: #007700"><h3></span>3단계<span style="color: #007700"></h3></span> <span style="color: #007700"><h4></span>4단계<span style="color: #007700"></h4></span> <span style="color: #007700"><h5></span>5단계<span style="color: #007700"></h5></span> <span style="color: #007700"><h6></span>6단계<span style="color: #007700"></h6></span> </pre></div> <div style="margin-left:30px;border:.1em solid gray;padding:.2em .6em;border-left:.8em solid gray">}}}{{{+5 1단계}}} {{{+4 2단계}}} {{{+3 3단계}}} {{{+2 4단계}}} {{{+1 5단계}}} 6단계 {{{#!html </div>}}} * <p>: 새 문단(__p__aragraph)을 연다. </p>로 닫는다. 극초창기에는 닫는 태그가 없고 단순히 문단을 구분하는 역할만 했는데 HTML 2.0에서 닫는 태그가 추가되어 문단을 묶어주는 역할을 하게 되었다. 이 태그를 쓸 경우 기본적으로 문단 하단에 약 1줄 가량의 빈 공간이 생기기 때문에 <br>을 선호하는 경우가 많은데, 문단이라면 <p> 태그로 묶어주는 것이 올바른 사용법이다. 빈 공간은 [[CSS]]를 지정해서 없앨 수 있다. {{{#!html <!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;margin-left:30px;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007700"><p></span>2015년 4월 17일에 만들어진 한국어 위키위키. 리그베다 위키의 포크사이트로 시작했다.<span style="color: #007700"></p></span> <span style="color: #007700"><p></span>리그베다 위키는 2015년 4월 약관 개정, 사유화 및 영리화 논란으로 인해 홍역을 앓았으며, 급기야 4월 17일에는 해킹을 당하여 데이터가 4월 15일로 롤백 되고 편집이 모두 막히는 초유의 사태가 일어났다.<span style="color: #007700"></p></span> </pre></div> </div><div style="margin-left:30px;border:.1em solid gray;padding:.2em .6em;border-left:.8em solid gray"><p>2015년 4월 17일에 만들어진 한국어 위키위키. 리그베다 위키의 포크사이트로 시작했다.</p><p>리그베다 위키는 2015년 4월 약관 개정, 사유화 및 영리화 논란으로 인해 홍역을 앓았으며, 급기야 4월 17일에는 해킹을 당하여 데이터가 4월 15일로 롤백 되고 편집이 모두 막히는 초유의 사태가 일어났다.</p></div> }}} * <b>: 두껍게(__b__old) 효과를 준다. 그러나 HTML 4.01부터 비권장 태그로 들어갔는데, 이 이유는 이 태그가 비주얼적인 효과를 주기 위한 태그라 비권장으로 지정된 것. 강조의 의미를 줄 때는 <strong> 태그로 대체하고 그 이외에는 [[CSS]]의 font-weight: bold; 속성으로 쓸 것을 권장하고 있다.[* 이 이외의 HTML 3.2에 들어갔던 이런 비주얼 태그가 4.01에서는 몽땅 비권장으로 들어갔는데, 이것은 HTML 문서에 의미를 부여한다는 W3C의 정책의 영향이다. 이것은 웹 접근성과도 관련이 있는데, 시각 장애인은 비주얼적인 태그가 의미가 없기 때문이다.] 하지만 HTML5에서 <strong>보다 약한 의미의 강조로 다시 복귀했다. <i>: 텍스트를 기울임꼴(__i__talic)로 표시한다. 기술 용어, 외국어, 일반적으로 기울임꼴로 사용되는 용어 등을 강조한다. {{{#!html <!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;margin-left:30px;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007700"><b></span>굵게 표시합니다.<span style="color: #007700"></b></span> <span style="color: #007700"><i></span>기울임꼴로 표시됩니다.<span style="color: #007700"></i></span> </pre></div> <div style="margin-left:30px;border:.1em solid gray;padding:.2em .6em;border-left:.8em solid gray">}}}'''굵게 표시합니다.''' ''기울임꼴로 표시됩니다.''{{{#!html</div> }}} * <strong>: 포함된 텍스트를 강하게 강조할 때 사용한다. <em>: <strong>보다 약한 강조를 나타낼 때 사용한다. {{{#!html <!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;margin-left:30px;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007700"><strong></span>강하게 강조합니다.<span style="color: #007700"></strong></span> <span style="color: #007700"><em></span>약하게 강조합니다.<span style="color: #007700"></em></span> </pre></div> <div style="margin-left:30px;border:.1em solid gray;padding:.2em .6em;border-left:.8em solid gray">}}}'''강하게 강조합니다.''' ''약하게 강조합니다.'' {{{#!html </div>}}} * <ins>: 문서에 삽입(__ins__ert)된 텍스트를 표시한다. <del>: 문서에서 삭제(__del__ete)된 텍스트를 표시한다. ~~당신이 생각하는 그거다~~ {{{#!html <!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;margin-left:30px;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007700"><ins></span>밑줄이 표시됩니다.<span style="color: #007700"></ins></span> <span style="color: #007700"><del></span>취소선이 표시됩니다.<span style="color: #007700"></del></span> </pre></div> <div style="margin-left:30px;border:.1em solid gray;padding:.2em .6em;border-left:.8em solid gray">}}}__밑줄이 표시됩니다.__ ~~{{{#000 취소선이 표시됩니다.}}}~~ {{{#!html </div>}}} * <sup>: 텍스트를 위첨자(__sup__erscript)로 표시한다. <sub>: 텍스트를 아래첨자(__sub__script)로 표시한다. {{{#!html <!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;margin-left:30px;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">E=MC<span style="color: #007700"><sup></span>2<span style="color: #007700"></sup></span> H<span style="color: #007700"><sub></span>2<span style="color: #007700"></sub></span>O는 산소. 물은 O<span style="color: #007700"><sub></span>2<span style="color: #007700"></sub></span>아니냐? 문과출신인 나도 알고있음 </pre></div> <div style="margin-left:30px;border:.1em solid gray;padding:.2em .6em;border-left:.8em solid gray">}}}E=MC^^2^^ H,,2,,O는 [[산소드립|산소]]. 물은 O,,2,,아니냐? 문과출신인 나도 알고있음 {{{#!html </div>}}} * <br />: 문단 내 줄바꿈(line __br__eak). [[강제개행]]을 하는 태그이다. 문단의 흐름을 해치기 때문에 권장되는 태그는 아니다. <hr />: 가로줄(__h__orizontal __r__ule)을 넣는다. <br />, <hr />같은 태그는 닫는 태그 없이 하나만으로 작동하는 태그이다. 이런 태그는 닫는 태그 대신 슬래시를 쓴다. {{{#!html <!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;margin-left:30px;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">2015년 4월 17일에 만들어진 한국어 위키위키.<span style="color: #007700"><br</span> <span style="color: #007700">/></span>리그베다 위키의 포크사이트로 시작했다. <span style="color: #007700"><hr</span> <span style="color: #007700">/></span> 리그베다 위키는 2015년 4월 약관 개정, 사유화 및 영리화 논란으로 인해 홍역을 앓았으며,<span style="color: #007700"><br</span> <span style="color: #007700">/></span>급기야 4월 17일에는 해킹을 당하여 데이터가 4월 15일로 롤백 되고 편집이 모두 막히는 초유의 사태가 일어났다. </pre></div> <div style="margin-left:30px;border:.1em solid gray;padding:.2em .6em;border-left:.8em solid gray">}}}2015년 4월 17일에 만들어진 한국어 위키위키. 리그베다 위키의 포크사이트로 시작했다. ---- 리그베다 위키는 2015년 4월 약관 개정, 사유화 및 영리화 논란으로 인해 홍역을 앓았으며, 급기야 4월 17일에는 해킹을 당하여 데이터가 4월 15일로 롤백 되고 편집이 모두 막히는 초유의 사태가 일어났다. {{{#!html </div>}}} == 목록 관련 == * <ul>: 순서 없는 목록(__u__nordered __l__ist)을 표시한다. <li>: 목록에서 각 항목(__l__ist __i__tem)은 <li>와 </li>사이에 넣는다. {{{#!html <!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;margin-left:30px;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007700"><ul></span> <span style="color: #007700"><li></span>나무위키의 문서는 독자를 위한 문서여야 합니다.<span style="color: #007700"></li></span> <span style="color: #007700"><li></span>나무위키의 문서는 독자에게 정보를 제공해야 합니다.<span style="color: #007700"></li></span> <span style="color: #007700"><li></span>나무위키의 문서는 독자에게 재미를 제공해야 합니다.<span style="color: #007700"></li></span> <span style="color: #007700"></ul></span> </pre></div> <div style="margin-left:30px;border:.1em solid gray;padding:.2em .6em;border-left:.8em solid gray">}}} * 나무위키의 문서는 독자를 위한 문서여야 합니다. * 나무위키의 문서는 독자에게 정보를 제공해야 합니다. * 나무위키의 문서는 독자에게 재미를 제공해야 합니다. {{{#!html </div>}}} * <ol>: 순서 있는 목록(__o__rdered __l__ist)을 표시한다. {{{#!html <!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;margin-left:30px;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007700"><ol></span> <span style="color: #007700"><li></span>태그를 쓴다.<span style="color: #007700"></li></span> <span style="color: #007700"><li></span>태그 사이에 글자를 쓴다.<span style="color: #007700"></li></span> <span style="color: #007700"><li></span>??????<span style="color: #007700"></li></span> <span style="color: #007700"><li></span>PROFIT!!<span style="color: #007700"></li></span> <span style="color: #007700"></ol></span> </pre></div> <div style="margin-left:30px;border:.1em solid gray;padding:.2em .6em;border-left:.8em solid gray">}}} 1. 태그를 쓴다. 1. 태그 사이에 글자를 쓴다. 1. ?????? 1. PROFIT!! {{{#!html </div>}}} * <li>와 </li>사이에 또 목록을 넣으면 하위 목록도 가능하다. {{{#!html <!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;margin-left:30px;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007700"><ul></span> <span style="color: #007700"><li></span>첫 번째<span style="color: #007700"></li></span> <span style="color: #007700"><li></span>두 번째 <span style="color: #007700"><ul></span> <span style="color: #007700"><li></span>두 번째 속 첫 번째<span style="color: #007700"></li></span> <span style="color: #007700"><li></span>두 번째 속 두 번째<span style="color: #007700"></li></span> <span style="color: #007700"></ul></span> <span style="color: #007700"></li></span> <span style="color: #007700"><li></span>세 번째<span style="color: #007700"></li></span> <span style="color: #007700"></ul></span> </pre></div> <div style="margin-left:30px;border:.1em solid gray;padding:.2em .6em;border-left:.8em solid gray">}}} * 첫 번째 * 두 번째 * 두 번째 속 첫 번째 * 두 번째 속 두 번째 * 세 번째 {{{#!html </div>}}} == 링크, 이미지 관련 == * <a>: 하이퍼링크를 생성하는 태그이다. href 속성을 써서 <a href="링크할 페이지">내용</a>와 같이 작성한다. {{{#!html <!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;margin-left:30px;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007700"><a</span> <span style="color: #0000CC">href=</span><span style="background-color: #fff0f0">"https://namu.wiki"</span><span style="color: #007700">></span>나무위키:대문<span style="color: #007700"></a></span> </pre></div> <div style="margin-left:30px;border:.1em solid gray;padding:.2em .6em;border-left:.8em solid gray">}}}[[나무위키:대문]] {{{#!html </div>}}} * <img />: 페이지에 이미지를 추가하는 태그이다. src: 이미지파일의 경로를 지정한다. alt: 이미지를 볼 수 없는 경우에 이미지에 대한 설명을 제공한다.[* IE 구버전(7 이하)에서는 alt 속성이 title 속성으로 렌더링되는 버그가 있다.] title: 이미지에 대한 추가 정보를 제공한다. 세피로트 이미지에 마우스를 갖다대면 말풍선으로 뜨는 것을 확인할 수 있다. height, width: 이미지의 세로, 가로폭을 지정한다. {{{#!html <!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;margin-left:30px;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007700"><img</span> <span style="color: #0000CC">src=</span><span style="background-color: #fff0f0">"/file/세피로트sd1.png"</span> <span style="color: #0000CC">alt=</span><span style="background-color: #fff0f0">"세피로트 SD버전"</span> <span style="color: #0000CC">title=</span><span style="background-color: #fff0f0">"세피로트"</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">"200px"</span> <span style="color: #007700">/></span> </pre></div> <div style="margin-left:30px;border:.1em solid gray;padding:.2em .6em;border-left:.8em solid gray">}}} [[파일:세피로트sd1.png|title="세피로트"&width="200px"]] {{{#!html </div>}}} == 테이블 관련 == * <table>: 테이블을 만드는 태그이다. <tr>: 행(__t__able __r__ow)을 시작한다. <td>: 표의 내용(__t__able __d__ata), 셀을 표현한다. {{{#!html <!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;margin-left:30px;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007700"><table></span> <span style="color: #007700"><tr></span> <span style="color: #007700"><td></span>표<span style="color: #007700"></td></span> <span style="color: #007700"><td></span>를<span style="color: #007700"></td></span> <span style="color: #007700"><td></span>만<span style="color: #007700"></td></span> <span style="color: #007700"></tr></span> <span style="color: #007700"><tr></span> <span style="color: #007700"><td></span>듭<span style="color: #007700"></td></span> <span style="color: #007700"><td></span>니<span style="color: #007700"></td></span> <span style="color: #007700"><td></span>다<span style="color: #007700"></td></span> <span style="color: #007700"></tr></span> <span style="color: #007700"></table></span> </pre></div> <div style="margin-left:30px;border:.1em solid gray;padding:.2em .6em;border-left:.8em solid gray">}}} ||표||를||만|| ||듭||니||다|| {{{#!html </div>}}} * <th>: 테이블의 행, 열의 머리말(__t__able __h__eading)을 나타낸다. 기본적으로 가운데로 정렬되고 굵은 글씨로 표시된다. {{{#!html <!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;margin-left:30px;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007700"><table></span> <span style="color: #007700"><tr></span> <span style="color: #007700"><th></span>날짜<span style="color: #007700"></th></span> <span style="color: #007700"><th></span>수입<span style="color: #007700"></th></span> <span style="color: #007700"><th></span>수출<span style="color: #007700"></th></span> <span style="color: #007700"></tr></span> <span style="color: #007700"><tr></span> <span style="color: #007700"><td></span>1월 1일<span style="color: #007700"></td></span> <span style="color: #007700"><td></span>100,000<span style="color: #007700"></td></span> <span style="color: #007700"><td></span>100,000<span style="color: #007700"></td></span> <span style="color: #007700"></tr></span> <span style="color: #007700"></table></span> </pre></div> <div style="margin-left:30px;border:.1em solid gray;padding:.2em .6em;border-left:.8em solid gray">}}} ||<:>'''날짜'''||<:>'''수입'''||<:>'''수출'''|| ||1월 1일||100,000||100,000|| {{{#!html </div>}}} * colspan, rowspan속성으로 셀을 병합할 수 있다. colspan은 열 병합, rowspan은 행을 병합한다. {{{#!html <!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;margin-left:30px;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007700"><table></span> <span style="color: #007700"><tr></span> <span style="color: #007700"><th></span> <span style="color: #007700"></th></span> <span style="color: #007700"><th></span>월<span style="color: #007700"></th></span> <span style="color: #007700"><th></span>수<span style="color: #007700"></th></span> <span style="color: #007700"><th></span>금<span style="color: #007700"></th></span> <span style="color: #007700"></tr></span> <span style="color: #007700"><tr></span> <span style="color: #007700"><th></span>1교시<span style="color: #007700"></th></span> <span style="color: #007700"><td</span> <span style="color: #0000CC">rowspan=</span><span style="background-color: #fff0f0">"2"</span><span style="color: #007700">></span>국어<span style="color: #007700"></td></span> <span style="color: #007700"><td></span>수학<span style="color: #007700"></td></span> <span style="color: #007700"><td></span>영어<span style="color: #007700"></td></span> <span style="color: #007700"></tr></span> <span style="color: #007700"><tr></span> <span style="color: #007700"><th></span>2교시<span style="color: #007700"></th></span> <span style="color: #888888"><!-- 병합되었으므로 쓰지 않아도 된다. --></span> <span style="color: #007700"><td></span>과학<span style="color: #007700"></td></span> <span style="color: #007700"><td></span>사회<span style="color: #007700"></td></span> <span style="color: #007700"></tr></span> <span style="color: #007700"></table></span> </pre></div> <div style="margin-left:30px;border:.1em solid gray;padding:.2em .6em;border-left:.8em solid gray">}}} || ||<:>'''월'''||<:>'''수'''||<:>'''금'''|| ||<:>'''1교시'''||<|2>국어||수학||영어|| ||<:>'''2교시'''||과학||사회|| {{{#!html </div>}}} == 폼 == [[CGI]]([[PHP]], [[ASP]], [[JSP]] 등)와 상호작용하기 위해 입력값을 받는 역할을 한다. * <form>: 입력값을 받는 영역을 지정한다. 한 페이지에 여러 개가 들어갈 수는 있지만, [[인셉션|영역 안에 영역이 들어가는 것]]은 불가능하다. * <input>: 입력값 요소를 지정한다. type에 따라 다른 입력값을 취한다. * text : 한 줄 짜리 문자열 값. 가본값이다. * number : 숫자. * url : 도메인 주소. * email : 이메일. * tel : 전화번호. * search : 검색어. * range : 지정한 범위의 숫자. * color : 색. * date : 날짜. * time : 시각. * datetime : 날짜+시각. * checkbox : 선택/해제할 수 있는 항목. * radio : 선택/해제할 수 있는 항목이나 중복 선택은 불가능하다. * button : 누를 수 있는 버튼을 생성한다. * submit : 누를 경우 입력값을 전송시키는 버튼을 생성한다. * reset : 누를 경우 입력값을 초기화시키는 버튼을 생성한다. * hidden : [[투명라인]](...). 입력값을 수정하지 않고 곧바로 보낼 때 쓰인다. * file : 파일 업로드에 쓰인다. * <textarea> : 여러 줄의 문자열 값을 받는다. * <button> : <input type="button">와 대동소이하다. 차이점은 태그 내에도 HTML 지정이 가능해서 표현의 폭이 넓다. * <output>: input 태그처럼 입력값이지만 수정할 수 없다. 외형상으로는 [[그냥 시체|그냥 문자열]]. * <datalist> : 검색어에 들어갈 목록을 지정한다. * <select> : 선택 목록. * <option> : 선택 목록에 들어갈 항목. <input type="radio">와 대동소이하다. * <legend> : ~~[[나는 전설이다]]~~ 범례를 지정한다. * <label> : 해당 요소의 이름을 지정한다. 해당 이름을 클릭하면 요소가 자동으로 선택된다. == 기타 == * <iframe>: 페이지 안에서 또 페이지를 볼 수 있다. 예를 들면 문서에서 구글 지도 등을 넣는 것이 있다. src: 넣을 페이지의 주소를 지정한다. height, width: 프레임의 높이, 너비를 지정한다. frameborder: 프레임의 테두리 표시 여부를 지정한다. 0은 표시하지 않음, 1은 표시함. {{{#!html <!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;margin-left:30px;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007700"><iframe</span> <span style="color: #0000CC">src=</span><span style="background-color: #fff0f0">"https://namu.wiki"</span><br /> <span style="color: #0000CC">height=</span><span style="background-color: #fff0f0">"400px"</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">"100%"</span> <span style="color: #0000CC">frameborder=</span><span style="background-color: #fff0f0">"0"</span><span style="color: #007700">></span> <span style="color: #007700"></iframe></span> </pre></div> <div style="margin-left:30px;border:.1em solid gray;padding:.2em .6em;border-left:.8em solid gray"> <iframe src="https://namu.wiki/" height="400px" width="100%" frameborder="0"> </iframe>}}} ---- 이런 식으로 위키 안에서 위키질을 할 수 있다.~~인셉션~~ --위키안에서 위키안에서 위키안에서 위키안에서..... 위키를 해보자.-- ~~[* [[https://www.w3.org/TR/WD-frames-970331|할 수 없다]]. --동심파괴--]~~ {{{#!html </div>}}} * {{{<embed>}}}: 외부 프로그램을 임베드하여 다양한 효과를 준다. HTML 4.01에서 삭제되고 {{{<object>}}}로 대체되었으나 HTML 5 규격에서 다시 표준으로 들어갔다. * {{{<style>}}}: CSS 사용. 되도록이면 <link> 태그를 쓰기를 권장한다. * {{{<script>}}}: 자바스크립트나 VB스크립트 사용. * {{{<div>}}}: 박스 또는 레이어. 일명 '웹 표준' 개념이 많은 사람들에게 퍼지게 된 이후 테이블 태그 대신 레이아웃을 만드는 데 자주 사용되고 있다. [[http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html|{{{<table>}}} 태그를 디자인에 쓰면 안 되는 이유(영어)]] 사실 div만 남발하는 것도 올바른 사용법은 아니고, 용도에 따라 여러가지 태그를 적절히 사용하는 것이 중요하다. {{{<div>}}} 이외에도 많은 태그가 {{{<div>}}}와 같은 박스 스타일로 렌더링되기 때문에 [[CSS]]만 잘 지정하면 된다. == 시맨틱 태그 == HTML5에서 추가된 태그들이다. 디자인을 할 때 {{{<table>}}} 대신 {{{<div>}}}를 쓸 것을 권장했더니 그 부작용으로 코드가 온통 {{{<div>}}} 투성이라 알아보기 어렵다는 지적이 있었다. 그래서 HTML5에서 나온 것이 시맨틱 태그이다. [[HTML5]] 문서 참고. == 비권장 태그 == '''사용하지 않는 것이 권장되는 태그.''' 이 분류에는 '''많이 사용하였지만, HTML5에서 제거된 태그'''나 아직 실험단계이므로 권장하지 않는 태그 등이 들어간다. 앞으로의 홈페이지 제작에서는 사용하지 않는 것을 추천한다. === 폐기된 태그 === 다음은 [[CSS]]로 대체할 수 있어 폐기된 태그들이다. * {{{<font>}}}: [[글꼴]] 특성을 지정한다. 글꼴 이름이나 크기나 기타 등등. '''HTML 4.01 비권장 태그'''이므로 {{{<span style="…">…</span>}}}을 사용하자. 아예 HTML5 규격에서는 '''없어졌다'''. [[CSS]]를 쓰면 글꼴뿐만 아니라 조작할 수 있는 모양이 압도적으로 많으니 그걸 쓰자. 애초에 [[CSS]]가 도입된 이유가 이런 {{{<font>}}} 태그와 같이 HTML 코드에 디자인적인 요소를 욱여넣다 보니 코드가 개판이 되어버리는 상황을 개선하기 위함이었다. * {{{<basefont>}}}: 페이지의 기본 글꼴을 지정한다. 지정 가능한 범위는 글꼴 색과 모양, 크기였다. 하지만 [[CSS]]로 인해 굳이 이 태그를 써야 할 이유가 사라지면서 IE 9를 끝으로 지원 중단됨에 따라 완전히 사장되었다. 당연히 HTML5 규격에서도 '''없어졌다'''. 역시 조작할 수 있는 기본 모양이 압도적으로 많은 [[CSS]]를 쓰길 권장한다. * {{{<big>}}}: [[글꼴]] 크기를 상대적으로 크게 한다. HTML5에서 없어졌으니 크기를 숫자로 표현 할 수 있는 [[CSS]]를 쓰길 권장한다. * {{{<center>}}}: 글자를 가운데 정렬한다. 이것도 HTML5에서 없어졌으니 오른쪽 정렬과 왼쪽 정렬 등 다양하게 표현할수 있는 [[CSS]]를 쓰자. * {{{<tt>}}}: 텔레타이프 글꼴로 한다. HTML5에서 사용이 불가하니 더 다양한 글꼴을 표현할 수 있는 [[CSS]]를 쓰자. 다음은 그 외 사용성이나 접근성 등에 문제가 있어 폐기된 태그들이다. * {{{<bgsound>}}}: [[배경음악]]을 넣는 태그이다. IE 전용 비표준 태그이므로 {{{<embed>}}}나 HTML5에서 추가된 {{{<audio>}}} 등으로 대체하는 것을 추천한다. * {{{<frame>}}}, {{{<frameset>}}}, {{{<noframe>}}}: [[프레임(HTML 태그)]] 참고. * {{{<noembed>}}}: 위의 {{{<noframe>}}}처럼 {{{<embed>}}} 태그를 지원하지 않는 브라우저에서 메시지를 대신 표시하도록 하는 태그였다. 하지만 {{{<embed>}}} 태그가 HTML5 표준에 포함됨에 따라 존재의 의미가 사라진 관계로 폐기되었다. === 아직 실험 단계인 태그 === * {{{<dialog>}}}: 다이얼로그 상자를 위한 태그이다. 아직은 [[크롬(웹 브라우저)|크롬]]과 [[오페라(웹 브라우저)|오페라]]에서만 지원하며 그마저도 아직 완전하지 않다. * {{{<hgroup>}}}: 제목 태그({{{<h1>}}}~{{{<h6>}}})를 그룹으로 묶기 위한 태그이다. * {{{<menu>}}}, {{{<menuitem>}}}: 메뉴를 위한 태그이다. 아직 제대로 지원되는 웹 브라우저가 없다. * {{{<picture>}}}: HTML5에서 추가된 이미지 태그로 {{{<audio>}}} 태그와 {{{<video>}}} 태그에 대응한다. [각주] [include(틀:문서 가져옴,title=HTML,version=155)] [[분류:마크업 언어]][[분류:HTML]] 이 문서에서 사용한 틀: 틀:문서 가져옴 (원본 보기) HTML/태그 문서로 돌아갑니다.