[참고 NHN Web Standardization Guide, 유니버설 디자인을 위한 실전 UI(HTML/CSS)개발 가이드]
작성이 완료된 순수 HTML 문서는 W3C HTML Validation 검사를 실시하고 Pass 될 때까지 디버깅 한 후 개발팀에 넘긴다.
개발이 완료된 문서는 W3C HTML Validation 검사를 실시하고 Pass 될 때까지 개발팀에서 디버깅을 한다.
개발에서 처리되지 않은 디버깅 내역은 반드시 그 사유를 기록해 둔다.
1. DTD:Document Type Definition 를 반드시 선언한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Transitional : XHTML 문법에 익숙하지 않은 협업 프로젝트에 적합하다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Transitional : XHTML 문법에 대한 이해를 필요로 합니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Quirks Mode : Quirks Mode를 사용중인 서비스를 부분 개편 하거나 완전히 개편하더라도 기존의 HTML/CSS 데이터 의존도가 높은 경우에 사용한다.
2. 자연어를 명시한다.
DTD가 HTML인 경우
<html lang="ko"> 한국어
<html lang="en"> 영어
<html lang="ja"> 일본어
<html lang="zh"> 중국어
DTD가 XHTML인 경우
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko"> 한국어
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 영어
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> 일본어
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh"> 중국어
HTML ISO Language Code Reference - http://www.w3schools.com/tags/ref_language_codes.asp
3. 문자셋(charset)은 UTF-8로 선언한다.
HTML
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
XHTML
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
전세계 모든 문자를 컴퓨터에서 일관되고 풍부하게 표현할 수 있기 때문에 다국어 환경에 적합하다.
EUC-KR 보다 표현할 수 있는 한글 표현이 더 많아서 온라인 사전 콘텐츠는 반드시 UTF-8 문자셋을 사용한다.
파일 저장시 UTF-8방식으로 저장해야 문자가 깨지지 않습니다.
EditPlus의 설정에서 기본 인코딩을 UTF-8로 세팅해 준다.
character set lists - http://www.w3.org/International/O-charset-list.html
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
4. 의미에 맞는 태그로 마크업 한다.
태그의 적합한 의미와 용도는 HTML 4 요소 색인 문서(http://trio.co.kr/webrefer/html/index/elements.html)를 참조 한다.
제목, 머리글, 조건등에 해당하는 내용은 Heading( head , title , h1~h6 , dt , caption , thead , th , legend ) 요소를 적절히 사용하고, 특히 h1~h6 요소는 그 순서를 건너뛰지 않도록 한다.
의미와는 무관한 레이아웃 목적의 Table 은 사용하지 않습니다. 단, CSS만으로 구현이 불가능한 레이아웃의 경우 예외상황으로 분류 한다.
중복되거나 의미를 갖지 못하는 태그의 중첩은 되도록 피합니다. 특히, div, span 요소는 콘텐츠를 그룹핑 하거나 분리하는 요소로서 적당한 의미를 지닌 다른 마크업이 없는 경우에만 사용합니다.
<div><div>...</div></div> (△)
<span><span>...</span></span> (△)
<a>...</a> 의 href 속성은 hypertext reference 입니다. href의 값으로 아무 의미 없는 "#" 을 사용한다는 것은 <a>...</a> 요소를 본래의 의미(자원의 참조)와 다르게 사용했다는 것을 반증합니다. 참조하는 자원이 있다면 유효한 URL 값을 넣어 준다. 다른 자원을 참조하는 의미 없이 버튼이나 텍스트가 키보드 포커스를 받아야 한다면 <button type="button">...</button> 요소를 사용해야 한다. 물론 form을 전송하기 위한 버튼이라면 <input type="submit" /> 또는 <input type="image" /> 요소를 사용해야 한다.
<a href="#">...</a> (X)
<a href="#destination">...</a> (O)
'id/class' 네이밍 기법
카멜 케이스 : 영문 소문자를 사용하되 두 번째 단어부터 첫 번째 문자를 대문자로 처리하는 기법. ex) camelCase
파스칼 케이스 : 영문 소문자를 사용하되 모든 단어의 첫 번째 문자를 대문자로 처리하는 기법. ex) PacalCase
CSS 선택자와 DOM에 필요한 선택자를 분리하기 위하여 CSS 선택자용으로 카멜 케이스를 사용하고, DOM 객체 식별용으로 파스칼 케이스를 사용하는 방법도 있다.
5. 특수문자는 Entity 코드로 입력한다.
| " | " | quotation mark |
|---|---|---|
| & | & | ampersand |
| < | < | less-than |
| > | > | greater-than |
| © | © | copyright |
| ® | ® | registered trademark |
| ™ | ™ | trademark |
| × | × | multiplication |
| ÷ | ÷ | division |
| • | • | bullet |
| · | · | middle dot |
| ⋅ | ⋅ | dot operator |
6. HTML 4.01 Strict 의 요건에 맞추어 마크업한다.
- 모든 웹 페이지는 문서 형식 정의 태그 <DOCTYPE! ...>로 시작한다.
- 가장 상위 태그(엘리먼트)인 <html>로 시작해 종료 태그 </html>로 문서의 끝을 마감한다.
- <head>와 <body>엘리먼트만이 <html>태그에 포함될 수 있다.
- <head>엘리먼트 안에는 반드시 <title>엘리먼트가 포함된다.
- <head>엘리먼트에만 <meta>와 <style>엘리먼트를 넣을 수 있다.
- <body>, <blockquote> 엘리먼트 안에는 반드시 블록 엘리먼트만을 사용한다.
- 블록 엘리먼트들은 문단 엘리먼트 <p> 바깥에 두어야 한다.
- 인라인 엘리먼트는 <p>등의 블록 엘리먼트로 감싸 구성하며 독립적으로 사용하지 않는다.
- 인라인 엘리먼트 내부에는 블록 엘리먼트가 들어갈 수 없다.
- 리스트 엘리먼트 <ul>과 <ol>의 내부에는 오직 리스트 아이템 엘리먼트인 <li>만이 들어갈 수 있다.
- 정의 엘리먼트 <dl>의 내부에는 오직 <dt>와 <dd>만이 들어갈 수 있다.
- <li>, <dd>엘리먼트 안에는 텍스트, 인라인, 블록 엘리먼트 모두를 넣을 수 있다.
- 인라인 엘리먼트가 서로 중첩되지 않도록 주의를 기울인다.
- <img>엘리먼트에는 반드시 alt=""속성을 덧붙인다.
- 프리젠테이션(장식)을 위한 태그 요소는 사용하지 않는다.
'all' 카테고리의 다른 글
| xhtml / flash 바로 삽입 코드 (0) | 2010.04.30 |
|---|---|
| block/inline element (0) | 2010.03.23 |
| frameset (0) | 2010.03.19 |
| font, generic font families (0) | 2010.03.19 |
| [jQuery] FAQ (display:none; display:block 사용) (0) | 2010.03.19 |