HTML5 웹 표준 가이드

[1] 표준 문서 형식 선언

1. DTD 선언 : <DOCTYPE html>

-DTD (Document Type Definition)는 브라우저가 표준 모드에서 페이지를 렌더링하도록 지정하는 구문을 의미하는 것.

- 웹 브라우저마다 코드의 해석방식이 다르기 때문에, DTD 선언을 통하여 웹 문서를 잘 표현할 수 있도록 하는 것이다.

- DTD 선언을 해야 유효선 검사의 기준이 설정됨.

- DTD를 생략하거나 잘못 선언하는 경우 웹 브라우저 문서가 제대로 표현되지 않을 수도 있다.

-DTD는 HTML 문서의 최 상단에 선언하게 되어 있다.

- DTD 선언 이전에 다른 코드가 들어가지 않아야 한다.

​

2. 웹 표준 검사

- 웹 표준 검사는 드림위버의 유효성 검사나 W3C의 공식사이츠에서도 가능하다.

- 단 사이드에는 외부 CSS 파일 등을 업로드하지 못하기 때문에 CSS 파일이나 jQuery 관련 부분에서는 경고나 오류가 발 생할 수도 있다.

​

[2] HTML 요소사용

1. 문자세트 (Character set) 명시하기

- 웹 표준에 적합한 코딩을 하려면 meta 태그를 이용하여 문자세트 (Chatacter set)을 지정해야한다.

- 그 이유는 인터넷 익스플로러는 문자셋이 선언되어 있지 않더라도 문자코딩을 자동으로 감별하여 표시하는 반면, 모질라 계열의 브라우저(파이어폭스 등) 에서는 그렇게 하지 않기 때문에 모든 브라우저에 맞추기 위해서 문자 세트를 지정할 것이다.

- 한국어가 들어가는 웹페이지의 경우는 charset을 euc-kr로 지정한다

- 또한 uft-8은 전 세계 모든 문자를 일관되게 표현하는 다국어 환경에 적합한 문자 세트이다.

- 문자 세트는 다음과 같이 기출 시험에서 주어지는 조건대로 지정한다.

-html 에서는 meta 태그 부분을 다음과 같이 간단히 정의 한다.

<meta charset="uft-8">

​

2. type 속성 포함시키기

- 웹 표준을 지키려면 모든 script 요소에 다음과 같이 type 속성을 포함해야한다

<script type="text/javascript"> </script>

​

3. 소문자 사용

-html에서는 대소문자를 구분하지 않으므로 대문자로 태그를 사용하기도 했다.

- 그러나 웹 표준을 위해서는 모든 요소와 속성은 소문자로 적는것이 더 좋다.

- 또한 속성 값을 줄 때는 겹 따옴표를 사용하는 것을 추천한다

<div name="xxx">

​

4. 요소의 중첩 순서 및 종료 지정

- 모든 요소(한 쌍의 태그)는 중첩 순서가 잘 지켜져야 한다.

- 모든 요소는 종료 태그로 닫아야 유효한 문서가 된다.

- 요소 중에서 내용 부분없이 사용되는 빈요소는 시작 태그만 있는 단독 태그

- html 표준 규격에서 빈 요소는 시작 태그 안에서 후행 슬래시를 사용하여 닫아주는 방법으로 사용되기도함.

<br />, <hr />, <img src="#" />

​

5. 섹션 구분

- 섹션 구분 레이아웃을 구성할 때 각 섹션은 <div>로 구분한다.

- 또 특별한 섹션의 경우는 해당 영역에 맞는 시멘틱 태그인 <header>, <footer>, <section> 을 사용하기도함.

- 문단은 <p> </p>로 감싸서 사용하고, css에서 문단에 대한 스타일을 지정해서 사용한다.

- 줄바꿈이 아닌 문단의 구성 용도로 <br/> 태그를 사용하는 것은 지양한다.

- 섹션 헤딩(타이틀)은 <h1> <h2>같은 태그를 사용하여 표현한다.

<div id="contents" class="wrap"> <div class="notice"> <h2>공지사항</h2>

​

6. 항목 표현

- 항목을 나타내는 자료는 <ul>, <ol>, <li> 태그를 이용합니다.

- 이전 버전의 html 에서 사용되던 디자인 요소는 모두 css를 통해 처리하도록합니다.

바르지 않은 표현	추천 표현
<layer>	<div> </div>
<center>	css에서 표현 : text-align:center
<u>	<del> or <s> 태그로 대체 (줄이 그어진 삭제된 태그)

​

7. class, id 핵심 속성 사용

- class, id는 대부분의 태그에서 사용되는 핵심적인 속성이다.

- class 속성은 클래스의 규칙이나 스타일의 규칙을 적용할 때 사용한다.

-id 속성은 해당 요소를 다은 요소와 구분 지을 때 사용하는 것으로 이전에 사용되던 name 속성 대신 사용한다.

- name 값은 동일한 값을 가진 요소들이 있어도 상관 없지만, id는 같은 문서 내에서 동일한 id 값을 가질 수 없다.

​

8. 외부 CSS 사용

- 웹표준에서 CSS 요소들은 모두 외부 CSS 파일로 별도로 위치 시켜서 관리해야한다.

- html 문서 내에서 내부 css로 정의하지 말아햐 한다.

- css의 문법은 선택자(selector), 속성(property), 속성값(value) 세 가지 요소로 구성된다.

#contents{ height: 500px; padding: 20px; }

​

9. 특수 문자 표현

- 특수문자를 표현해야하는 경우에는 특수 문자를 표현하는 코드(Entity Code)로 표현해야한다.

- 특수문자<,>,&,"" 들은 특정 목적으로 사용되도록 정의되어 있기 때문에 특수 문자를 변환하지 않는 경우 유효성 검사에서 오휴 메세지가 나타나게 됩니다.

& 를 표시하고 싶은 경우 &amp로 표현