본문 바로가기
html

html 가이드

by 포샵질 2017. 2. 1.

W3C의 표준 문법을 준수합니다

▲Top
  • DTDDocument Type Definition는 생략할 수 없으며 반드시 명시 합니다.
    (X)
    <html lang="ko">
    ...
    </html>

    (O)
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="ko">
    ...
    </html>
  • DTD와 관계없이 모든 요소(Element)와 속성(Properties) 및 값(Value)은 영문 소문자로 마크업 합니다. 요소와 속성을 소문자로 처리하는 것은 XHTML 문서로의 확장을 용이하게 합니다. 속성의 값을 소문자로 처리하는 것은 대부분의 브라우저에서 Quirks Mode DTD일때 대소문자를 구분하지 않기 때문이며, 이러한 이유로 id/class의 속성 값을 소문자로 처리하는 것은 공통 지침입니다.
    <STRONG CLASS="NEW"> (X)
    <strong class="new"> (O)
  • 작성이 완료된 순수 HTML 문서는 W3C HTML Validation 검사를 실시하고 Pass 될 때까지 디버깅 한 후 협업부서에 넘깁니다.
  • 개발이 완료된 문서는 다시 한번 W3C HTML Validation 검사를 실시하고 Pass 될 때까지 협업부서에 디버깅을 요청 합니다. 협업부서에서 처리되지 않은 디버깅 내역은 반드시 그 사유를 기록해 둡니다.

2. 문서형(DTD)을 선언합니다

▲Top

제시된 3 종류의 DTD 가운데 하나를 사용할 수 있으며 권장되는 순서는 아래와 같습니다. DTD별 코드 내려받기 : HTML 4.01 Transitional _ utf-8 | HTML 4.01 Transitional _ euc-kr | XHTML 1.0 Transitional _ utf-8 | XHTML 1.0 Transitional _ euc-kr 콘텍스트 메뉴(마우스 오른버튼)를 이용하여 '다른 이름으로 저장' 하세요.

  • HTML 4.01 Transitional :
    가장 기본이 되는 공식 DTD 입니다. 별도의 협의가 없거나 신규 서비스 개발시 사용합니다. XHTML 문법에 익숙하지 않은 협업부서에서 다루기 쉽습니다.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • XHTML 1.0 Transitional :
    유관부서와 협의되는 경우 신규 서비스 개발시 사용합니다. XHTML 문법에 대한 이해를 필요로 합니다.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • Quirks Mode :
    Quirks Mode를 사용중인 서비스를 부분 개편 하거나 완전히 개편하더라도 기존의 HTML/CSS 데이터 의존도가 높은 경우에 사용합니다.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

XHTML DTD를 선언하는 경우 다음과 같은 특징에 유의 합니다.

  • 문법적으로 엄격하게 구성되어 있어야 합니다.
    HTML은 종료태그가 없는 것을 허용하였으나 XHTML은 반드시 종료태그를 갖습니다. HTML은 태그의 중첩이 잘못된 것을 허용하였으나 XHTML은 잘못된 중첩을 허용하지 않습니다. 잘못된 중첩은 화면표시(렌더링)에 직접적인 영향을 주기도 합니다.
  • 요소와 속성은 소문자로 표기되어야 합니다.
    HTML은 요소와 속성에 대소문자를 함께 사용하는 것을 허용하였으나 XHTML의 마크업 '요소'와 '속성'들은 반드시 소문자로 표기되어야 합니다. 단, 속성의 '값'에는 대소문자 혼합 표기가 가능합니다. 하지만 대소문자를 명확하게 구분하기 때문에 대문자로 구성된 '값'과 소문자로 구성된 '값'은 동일하지 않고 확실히 구별됩니다.
  • 모든 태그는 종료태그를 갖습니다.
    HTML의 경우 <p>, <td> 등의 태그에서 종료태그를 생략하는 것을 허용하였지만 XHTML의 경우 반드시 닫아야 합니다.
  • 속성 "값"들은 항상 따옴표로 감싸주어야 합니다.
    HTML의 경우 속성 값들을 따옴표로 감싸지 않는 것을 허용하였지만 XHTML 에서는 반드시 속성 "값"은 따옴표 안에 있어야 합니다.
  • 속성과 값의 단축표기를 허용하지 않습니다.
    HTML에서는 속성과 속성 값의 단축표기를 허용하였으나 XHTML 에서는 단축표기 하는 것을 허용하지 않습니다. <input checked> 는 <input checked="checked"> 와 같이 표기되어야 합니다.
  • 비어있는 태그(콘텐츠를 담지 않는 태그)도 종료 되어야 합니다.
    HTML에서 <br>, <hr> 과 같이 콘텐츠를 담지 않는 빈 태그들은 <br />, <hr /> 과 같이 표기하여 시작태그에서 곧 종료됨을 표기해 주어야 합니다.
  • a, applet!, frame, iframe, img, map 요소의 name 속성은 폐기되었으며 다음 버전부터는 지원하지 않습니다.
    상기 마크업의 name 속성은 모두 id 속성으로 교체되어야 합니다. name 속성은 공식적으로 폐기하였지만 여전히 XHTML 1.0 Transitional 버전의 문서까지는 지원하고 있습니다. 하지만 XHTML 1.0 Strict 버전에서는 지원하지 않으며 다음 버전에서는 폐기됩니다.

3. 문자셋(charset)과 자연어를 명시합니다

▲Top
  • 권장하는 하는 인코딩은 'utf-8' 입니다. 하지만 반드시 협업부서와 협의과정을 거쳐야 합니다.
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  • utf-8 인코딩 사용이 불가한 것으로 판정되는 경우의 문자셋은 'euc-kr' 으로 지정합니다.
    <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
  • 현재 문서의 주된 자연어를 명시 합니다. 국가별 언어코드 표준 명세 : ENG , KOR
    <html lang="ko"> 한국어
    <html lang="en"> 영어
    <html lang="ja"> 일본어
    <html lang="zh"> 중국어
  • 문서 중간에 자연어가 바뀌는 경우에도 자연어를 명시 합니다. 자연어를 정확히 명시하게 되면 하나의 문자가 여러 국가에서 다르게 사용되는 경우에도 검색엔진이나 음성장치가 이것을 구분할 수 있습니다. 단, 문서 중간에 빈번하게 등장하는 자연어에 대한 언어코드 명시는 단지 권장하는 수준입니다.
    <html lang="ja">
    ...
    <blockquote lang="zh">

4. 의미에 맞는 태그로 마크업 합니다

▲Top
  • 태그의 적합한 의미와 용도는 Index of the HTML 4 Elements Eng또는 HTML 4 요소 색인 Kor문서를 참조 합니다.
  • 제목, 머릿글, 조건등에 해당하는 내용은 Heading( head , title , h1~h6 , dt , caption , thead , th , legend ) 요소를 적절히 사용하고, 특히 h1~h6 요소는 그 순서를 건너뛰지 않도록 합니다.
  • 의미와는 무관한 레이아웃 목적의 Table 은 사용하지 않습니다. 단, CSS만으로 구현이 불가능한 레이아웃의 경우 예외상황으로 분류 합니다.
  • 중복되거나 의미를 갖지 못하는 태그의 중첩은 되도록 피합니다. 특히, div, span 요소는 콘텐츠를 그룹핑 하거나 분리하는 요소로서 적당한 의미를 지닌 다른 마크업이 없는 경우에만 사용합니다. 
    <div><div>...</div></div> (△)
    <span><span>...</span></span> (△)
  • 작성이 완료된 순수 HTML 문서는 의미론적(Semantic) 마크업 구현에 대한 전수검사를 실시 합니다.
  • 개발이 완료된 문서는 다시한번 의미론적 마크업 구현에 대한 전수검사를 실시하고 부적합 마크업이 발견되면 이를 바르게 수정한 후 협업부서에 디버깅을 요청 합니다. 협업부서에서 처리되지 않은 디버깅 내역은 반드시 그 사유를 기록해 둡니다.

5. Table의 바른 사용법

▲Top

Table 요소는 2차원의 격자형 데이터를 표현할 때 사용되며 예외적으로 dt, dd 형식으로 마크업 할 수 있는 데이터도 표현할 수 있습니다. Table 요소는 표를 설명하는 적절한 제목을 지녀야 하는데 h1~h6, caption, summary 중 한가지 요소 또는 속성을 반드시 사용하여야 합니다. 아래 예제를 통하여 올바른 사용법을 익힐 수 있습니다.

  • caption :
    표의 제목 요소. table요소 바로 뒤에만 허용되며 한 번만 표시할 수 있습니다.
  • summary :
    표의 요약 속성. table요소에 동반되는 속성으로서 표의 제목caption이 존재하지 않는 경우나 표에 요약설명이 필요한 경우 사용할 수 있습니다.
  • thead, tbody, tfoot :
    표의 행tr을 그룹핑하는 요소로서 표의 머릿글, 본문, 풋터를 지정합니다. tfoot요소의 경우 보통 이에 해당하는 데이터가 없어서 생략되는 경우가 많습니다.
  • th :
    표의 머릿글 셀을 지정합니다. 표의 머릿글 셀은 scope, abbr 과 같은 속성을 동반합니다. scope 속성은 사용이 강력하게 권장되며 abbr 속성은 필요에 따라 사용할 수 있습니다.
  • scope :
    th 요소에 동반되는 속성으로서 현재의 셀이 어느 셀의 제목인지 그 범위를 명시합니다. scope 속성의 값으로는 col, colgroup, row, rowgroup 이 있습니다.
  • abbr :
    th 요소에 동반되는 속성으로서 포함하고 있는 콘텐츠에 대한 약식표기가 가능한 경우 약어를 표기하는데 사용합니다. th셀의 내용을 반복해서 음성으로 출력하는 도구들은 abbr 속성에 표기된 약어를 읽게 됩니다.
자장면과 짬뽕의 가격과 열량 비교
구분가격(won)열량(kcal)
자장면3,000300
짬뽕3,500350

화면낭독기와 같은 보조공학기기는 현재의 표를 다음과 같이 읽어주어야 합니다.

  • 표 제목 : 자장면과 짬뽕의 가격과 열량 비교
  • 표 요약 : 짬뽕은 자장면보다 500원 비싸고 열량이 50kcal 높다
  • 표 머릿글 : 구분, 가격(won), 열량(kcal)
  • 표 본문 : 자장면-가격-3,000-자장면-열량-300-짬뽕-가격-3,500-짬뽕-열량-350 (표의 제목셀을 먼저 읽어주며 제목셀에 abbr 값이 있는경우 abbr 값을 읽어줌)
<table summary="짬뽕은 자장면보다 500원 비싸고 열량이 50kcal 높다">
    <caption>
    자장면과 짬뽕의 가격과 열량 비교
    </caption>
    <thead>
        <tr>
            <th>구분</th>
            <th scope="col" abbr="가격">가격(won)</th>
            <th scope="col" abbr="열량">열량(kcal)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">자장면</th>
            <td>3,000</td>
            <td>300</td>
        </tr>
        <tr>
            <th scope="row">짬뽕</th>
            <td>3,500</td>
            <td>350</td>
        </tr>
    </tbody>
</table>

6. 문서의 구조와 표현을 분리합니다

▲Top
  • 문서의 마크업 언어(HTML)와 화면 표시(CSS)언어를 본래의 목적에 맞게 최대한 분리합니다.
  • 의미 구조를 마크업 하는 경우 HTML 요소와 속성을 이용 합니다. 표현을 위한 HTML 요소와 속성의 사용은 지양합니다. 단, 테이블 셀의 경우 다양한 너비의 고정폭을 지닐 수 있는데 이것을 모두 CSS로 지정하는 것은 기대했던 효과에 대한 이점이 없으므로 예외의 경우를 허용합니다.
    <b align="center">...</b> (X) 화면표시를 위한 HTML 요소와 속성이 사용되어 유지보수 이점 감소
    <applet!> <basefont> <center> <dir> <font> <isindex> <menu> <s> <strike> <u> <xmp> (X) HTML 4.01 부터 폐기된 요소들 
    <h1>네이버</h1> (O) 의미가 부여된 바른 마크업
    <col width="100"><col width="50"> (△) 테이블 셀의 너비를 지정하는 방법으로 HTML속성을 사용하였지만 허용됨
  • 문서의 표현에 관한 속성은 외부(External) CSS문서에서 정의 합니다. HTML문서 Head에 CSS를 삽입하는 Internal 방식과 HTML요소에 직접 기술하는 Inline 방식의 사용은 되도록 지양합니다.
    <div style="width:100px">...</div> (△) Inline 형식으로 기술하여 유지보수가 어려움 
    <style type="text/css">...</style> (△) Internal 형식으로 기술하여 유지보수가 어려움 
    <link href="default.css" rel="stylesheet" type="text/css"> (O) External 형식으로 기술하여 유지보수가 쉬움

7. 다양한 브라우저의 호환을 지원합니다

▲Top

제작된 모든 문서는 서비스의 종류에 관계없이 아래 명시된 브라우저에서의 호환을 지원하여야 합니다. 한편 접속자 통계에 의하여 가장 사용율이 높은 브라우저에 대하여는 디자인 가이드에서 제시하는 간격등을 엄격하게 준수하여야 합니다. 현재2008년1월 가장 사용율이 높은 브라우저는 Internet Explorer 6.x 이므로 기준 브라우저가 되며 완성된 문서는 가능한 범위 내에서 시안과 정확하게 그리드를 일치시켜야 합니다. 그 밖의 브라우저에서는 주요한 배치등이 깨지지 않고 시각적으로 다르다는 것을 인지할 수 없는 정도의 수준까지 일치시킵니다.

  • Internet Explorer 5.5
  • Internet Explorer 6.x 2008년 1월 현재 가장 사용자가 많은 기준 브라우저
  • Internet Explorer 7.x
  • Firefox 2.x
  • Opera 9.x
  • Safari 3.x

브라우저 호환은 첫째, 동일한 콘텐츠를 제공하는 것을 의미하며 둘째, 가급적 동일한 화면 뷰를 얻는 것입니다. 두 종류 이상의 브라우저를 이용하여 하나의 동일 화면을 탐색할 때 시각적으로 다르다고 느낀다면 그것은 동일한 화면 뷰가 아니므로 브라우저간 차이를 인지하지 못하는 수준까지 개선하여야 합니다.

8. 보편적 접근을 보장합니다

▲Top
  • 텍스트 아닌 콘텐츠는 원문과 동등한 설명력을 지닌 대체 텍스트를 제공해야 합니다.
    NAVER
    <img src="naver.gif" width="85" height="25"> (X) 이미지가 로드되지 않거나 시각을 사용할 수 없는 상황에 대응하지 못함 
    <img src="naver.gif" width="85" height="25" alt="네이버"> (X) 원문과 대체 텍스트 표기가 다름 
    <img src="naver.gif" width="85" height="25" alt="naver"> (X) 대소문자 표기가 다름 
    <img src="naver.gif" width="85" height="25" alt="NAVER 로고"> (X) '로고' 라는 설명 불필요 
    <img src="naver.gif" width="85" height="25" alt="NAVER"> (O) 원문과 정확히 일치
  • 썸네일 이미지에는 제목에 해당하는 대체텍스트를 제공합니다. 제목에 해당하는 텍스트가 존재하지 않는 썸네일은 빈 alt 속성을 사용하고 대체텍스트 표기는 생략할 수 있습니다.
    NAVER STORY
    <img src="thumb123456.gif" width="73" height="102" alt="네이버 스토리"> (O) 
    <img src="thumb123456.gif" width="73" height="102" alt=""> (△)
  • CSS를 지원하지 않는 장치에서도 논리적인 순서가 바뀌지 않고 내용을 이해할 수 있도록 설계합니다.
    PC 브라우징장치의 회원가입화면 렌더링 → 모바일 장치의 회원가입화면 렌더링모바일 장치의 회원가입화면 렌더링
  • Javascript를 지원하지 않는 장치에서도 폼을 전송하거나 핵심 기능을 사용할 수 있도록 설계합니다.
    (X) 폼 전송 기능을 javascript에 전적으로 의존하고 있으며, 스크린리더 사용성이 떨어짐 
    <form>
    ...
    <a href="javascript:confirm!()"><img src="btn_confirm!.gif" width="40" height="20" alt="확인"></a> 
    </form>

    (O) javascript 미지원 환경과 스크린리더 사용 환경을 고려한 코드 
    <form>
    ...
    <input type="image" src="btn_confirm!.gif" alt="확인">
    </form>
  • 마우스가 없는 장치에서도 키보드만으로 인터페이스의 조작이 가능하도록 설계 합니다. 아래 제공된 예제는 마우스와 키보드를 이용하여 실제 테스트가 가능합니다.
    (X) onmouseover 만을 적용한 사례로서 키보드의 접근이 불가능 합니다

    (O) onmouseover & onfocus 를 동시에 적용하여 마우스와 키보드가 동등하게 접근 가능합니다
    단, 아래 예제와는 다르게 onmouseover & onfocus 액션을 이용하여 on/off 토글기능을 구현하는 경우라면 onclick이 onfocus기능을 수행하므로 오작동 여부를 반드시 확인하여야 합니다     

    (X) onfocus="this.blur()" 를 적용하여 키보드의 접근을 차단한 사례로 키보드를 이용하여 조작을 시도하면 포커스가 제 위치를 잃고 페이지 처음으로 이동합니다 

    (O) onclick & onkeydown 현존하는 대부분의 브라우저에서는 onkeydown 이벤트가 onclick 명령을 실행하도록 설계되어 있으므로 onclick만 적용해도 무방합니다 

  • 마우스의 움직임이나 포커스의 이동만으로 콘텐츠의 내용이나 순서가 변하지 않도록 설계합니다.
    onmouseover & onfocus (△) 시각이 없는 사용자는 내용의 변화를 예측하거나 인식하지 못하므로 되도록 지양 
    onclick (O) 시각이 없는 사용자도 내용의 변화를 예측할 수 있음
  • 앵커 <a href="#URI"> 의 참조 값으로 "#" 을 넣거나 Javascript 를 이용하여 URI를 연결하는 방법을 사용하지 않습니다.
    <a href="#" onclick="help() "> (X) href 속성이 참조하는 URI 값이 유효하지 않음 
    <a href="#" onclick="window.open('help.html', '_blank')"> (X) href 속성이 참조하는 URI 값이 유효하지 않음 
    <a href="#help"> (O) 현재 페이지의 #help를 참조하는 유효한 방식 
    <a href="#help" onclick="show('help'); return false;"> (O) href의 값이 유효하고 onclick은 동작만 제어 
    <a href="help.html"> (O) help.html 페이지를 참조하는 유효한 방식 
    <a href="help.html" target="_blank" onclick="window.open(this.href, 'popName', 'width=300,height=200'); return false;"> (O) href의 URI 값이 유효하고 onclick은 동작만을 제어하여 javascript 미지원 환경에서도 새창 띄우기를 지원
  • input 요소는 label 요소 또는 title 속성을 이용하여 설명합니다. 스크린리더 사용자는 주변 맥락에 대한 이해 없이 각 요소에 독립적으로 접근해도 폼을 이해할 수 있게 됩니다.
    아이디 <input type="text" id="user_id" name="user_id"> (X) 
    <label for="user_id">아이디</label> <input type="text" id="user_id" name="user_id"> (O) 

    (X)
    유선전화 
    <input type="text" id="num1" name="num1">
    <input type="text" id="num2" name="num2">
    <input type="text" id="num3" name="num3">

    (O) 
    <label for="num1">유선전화</label> 
    <input type="text" id="num1" name="num1" title="지역번호"> 
    <input type="text" id="num2" name="num2" title="국번"> 
    <input type="text" id="num3" name="num3" title="가입자번호">

9. 특수문자는 Entity 코드로 변환합니다

▲Top

Entity 코드로 표현된 특수문자는 대부분의 브라우저에서 문제없이 출력됩니다. 대표적인 예로 꺽쇠기호 < > 등을 Entity로 처리하지 않는 경우 브라우저들은 이것을 HTML 태그의 시작이나 끝으로 인식할 수 있습니다. 따옴표 " "는 HTML 속성의 값이 시작되거나 끝난 것으로 인식할 수 있으며 & 기호는 Entity기호의 시작으로 오인될 수 있습니다. 이와같은 이유로 Entity 코드를 사용하지 않는 경우 W3C Validator는 오류메시지를 출력합니다. 가장 흔한 실수중의 하나는 URL에 포함된 & 기호를 Entity로 변환하지 않는 경우이며 특히 웹에디터에서 입력되는 특수문자 등은 Entity 코드로 치환되어야 한다는 사실을 협업부서에 알려주어야 합니다. 더 많은 특수문자 코드를 보려면 HTML Latin-1 , HTML Symbols 를 참조합니다.

CharacterEntity NameDescription
""quotation mark
&&ampersand
<<less-than
>>greater-than
©©copyright
?�registered trademark
™™trademark
××multiplication
÷÷division
••bullet
··middle dot
⋅⋅dot operator

10. HTML 주석 가이드

▲Top
  • HTML 주석의 경우 콘텐츠를 그룹핑 하는 코드의 시작과 끝에 삽입합니다. 주석에 사용되는 언어는 한글이든 영문이든 무방하며 개발 및 유지보수에 필요하다고 판단되는 경우 삽입할 수 있습니다.
  • 주석과 관련된 버그를 피하기 위하여 주석 기호와 코멘트 사이에는 빈 공간을 두어야 합니다.
    <!--GNB--> (X) 
    <!-- GNB --> (O)
  • 주석은 한 줄로 표기하지 않으며 반드시 시작과 끝을 표기해야 합니다. '시작/끝' 알림 형식은 다음과 같습니다.
    (X)
    <!-- GNB -->
    <div class="gnb">...</div>

    (O)
    <!-- GNB --> GNB 코드가 시작됨을 선언 
    <div class="gnb">...</div> 
    <!-- //GNB --> GNB 코드가 끝남을 선언
  • HTML 코드와 주석은 항상 행으로 분리되어 있어야 합니다.
    (X)
    <!-- GNB -->...<!-- //GNB -->

    (O)
    <!-- GNB -->
    ...
    <!-- //GNB -->
  • 주석 안쪽에는 코드를 설명하는 문장 외에 다른 기호등을 넣지 않습니다.
    <!--- 주석 ---> (X)
    <!--* 주석 *--> (X)
    <!-- 주석 --> (O)
  • HTML 코드가 추가로 수정되었음을 알리는 경우 수정된 코드의 시작과 끝부분에 오늘의 날짜 'YYMMDD' 를 추가 합니다.
    (O)
    <!-- 080101 --> HTML 코드의 수정이 시작됨
    ...
    <!-- //080101 --> HTML 코드의 수정이 끝남

    (O)
    <!-- 080101 GNB --> GNB 코드의 수정이 시작됨
    ...
    <!-- //080101 GNB --> GNB 코드의 수정이 끝남

11. HTML 코드의 정렬

▲Top
  • 마크업의 중첩이 깊어질 때마다 1tab 들여쓰기 하며 1tab 의 크기는 space 4칸 크기로 설정합니다. 보통의 저작도구에서 이에대한 환경설정을 지원하고 있습니다.
    Dreamweaver : Preferences > Category > Code Format > Indent & Tab Size > Indent with 1 Tabs, Tab size 4
    드림위버 코드포멧 환경설정 예 

    EditPlus : Tools > Preperences > Categories > Files > Settings and syntax > Tab/Indent 
    에디트플러스 환경설정 화면 에디트플러스 탭/들여쓰기 설정화면
  • table 의 자식요소인 caption, thead, tbody, tfoot, tr은 들여쓰기 하지 않으며 th, td만 들여쓰기 합니다.
    <table>
    <caption>...</caption>
    <thead>
    <tr>
        <th>...</th>
        <th>...</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>...</td>
        <td>...</td>
    </tr>
    </tbody>
    </table>
  • ul, ol, dl 의 자식요소인 li, dt, dd 요소는 들여쓰기 하지 않습니다.
    <ul>
    <li>...</li>
    <li>...</li>
    </ul>

    <ol>
    <li>...</li>
    <li>...</li> 
    </ol>

    <dl> 
    <dt>...</dt>
    <dd>...</dd> 
    </dl>
  • HTML 코드의 정돈을 위하여 비어있는 행(line)을 만들지 않습니다.
    (O)
    <head>
    </head>
    <body>
    </body> 

    (X)
    <head>
    </head>

    <body>
    </body>


'html' 카테고리의 다른 글

스르륵 열리는 공지창  (0) 2017.02.01
a href 링크시 페이지 고정하기  (0) 2017.02.01
alt, title, longdesc 정의  (0) 2017.02.01
높이100% 브라우져  (0) 2017.02.01
카렌다  (0) 2017.02.01

관련글

티스토리툴바