감성 퍼블리셔 html,css

DOCTYPE 선언의 중요성과 참고자료 본문

HTML/CSS

DOCTYPE 선언의 중요성과 참고자료

빅범 2013. 9. 26. 01:42

 

 

출처 : 하드코딩하는사람들

http://cafe.naver.com/hacosa/15708

 

 

 

 


HTML 문서를 보다 보면 문서 상단에 글들이 놓여 져 있다.

바로 DTD 라는 것인데 DTD란?

Document Type Definition 는 브라우저 랜더링 모드를 지정해주고 유효성 검증기의 기준이 되므로 XHTML 문서의 상단에 반드시 선언해 주어야 한다. 만일 DTD 를 생략 하거나 형식이 잘못된 문서일 경우에는 웹 브라우저마다 코드의 해석방식이 다른 Quirks mode 로 렌더링이 되기 때문에 엉뚱한 결과물로 출력되는 문제에 직면하게 된다.

DTD 기본형식.
    <!DOCTYPE 
      이 문서는 
      html 
      ① HTML 문서로서 
      PUBLIC 
      ① 국제적이며 
      "-//W3C//DTD XHTML 1.0 Transitional//EN"  
      ② 비공인인증인 W3C기관에 의해 XHTML 1.0을 Transitional 방식으로 영어공용어로 출력하며      
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
      ③ 참조할 DTD 문서는"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 이거다 

이런 식으로 되있으며
① 최상위 엘리먼트네임
② 국제적,공용 or 내부적 제한용 
③ ISO공인인증기관 또는 비공인인증기관 등 본문서가 어디에서 만든 DTD를 사용하는 가에 대한 내용이다. 공인 인증기관 일경우 "+"를 비공인인증기관일경우엔 "-"를 사용한다. 참고로 W3C는 비공인 인증기관이다.


DOCTYPE 정의

  - DOCTYPE은 브라우저에게 웹페이지의 문서 종류를 알려주는 선언문이다.
  - DOCTYPE은 HTML 태그가 아닌, DTD로 정의되어 있다.
  - DOCTYPE은 웹페이지에서 제일 처음에 선언되어야 한다.
  - DOCTYPE은 브라우저가 올바른 화면표시(rendering)를 하기 위해 필요하다.
  - DOCTYPE을 선언하지 않는다면, 브라우저는 호환모드(quirks mode)로 웹페이지를 해석해서 화면표시를 한다.
    하지만 호환모드일 경우, 브라우저별로 정확한 화면표시를 보장할 수 없다.

 
XHTML 1.0  Doctypes

  - strict : 선언된 XHTML 버전의 문법과 구조를 정확하게 사용한다. frameset(iframe, frame)이나 지원하지 않는
     태그를 사용해서는 안된다.
  
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  - Transitional : 단어의 뜻 그대로 과도기적으로 사용하기 위한 선언이다. 호환성을 위해서 strict보다 유연하다.
     선언된 XHTML 버전 이외의  문법과 구조를 허용한다.
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   - Frameset : Transitional속성과 더불어, frameset(iframe, frame)을 지원한다.
   
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

* Transitional에서 frameset을 사용해도 화면표시가 일어난다. frameset은 문서의 구조에 관한 태그이기 때문이
   다. 사실 Frameset은 Transitional과 동일하게 취급된다.

XHTML 1.1
  - strict : 선언된 XHTML 버전의 문법과 구조를 정확하게 사용한다. frameset(iframe, frame)이나 지원하지 않는
     태그를 사용해서는 안된다.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"   
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

* XHTML 1.1에서는 Transitional과 Frameset이 없어지고, strict만 남았다. 사실 XHTML의 특성상 모호한 것들
  을 지원하는 것은 사리에 맞지 않는다. XHTML의 문법은 엄격한게 정의되어 있기 때문이다.

HTML
  - strict : 선언된 HTML 버전의 문법과 구조를 정확하게 사용한다. 지원하지 않는 태그를 사용해서는 안된다.

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

   - Transitional : 단어의 뜻 그대로 과도기적으로 사용하기 위한 선언이다. 호환성을 위해서 strict보다 유연하다.
     선언된 HTML 버전 이외의  문법과 구조를 허용한다.

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">

   - Frameset : Transitional속성과 더불어, frameset(iframe, frame)을 지원한다.
     
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
      "http://www.w3.org/TR/html4/frameset.dtd">
 
* Transitional에서 frameset은 위의 XHTML 1.0과 같은 관계이다.

strict DOCTYPE의 필요성

현재 우리나라 대부분의 웹사이트는 Transitional DOCTYPE을 사용하고 있다. 웹사이트가 완전히 새롭게 제작되지 않는한 기존에 사용하고 있던 태그들을 지원해야 하기 때문이다. 사실 이론상으로는 strict DOCTYPE의 해석이 다른 DOCTYPE보다 브라우저상에서 빠르다고 한다. 하지만 PC나 브라우저의 발전속도를 볼때 그것이 뛰어난 장점이라고는 생각하지 않는다. 그렇다면 strict DOCTYPE은 의미가 없다고 생각될지 모른다.
 
하지만 그렇지 않다. 오히려 앞으로 strict DOCTYPE의 중요성이 더욱 커질 것이다. 왜냐하면 빠른 속도로 웹페이지로의 접근 디바이스가 모바일 디바이스로 바뀌고 있기 때문이다. PC보다 제한된 환경에서 웹페이지를 표현해야 하는 모바일환경에서는 strict의 엄격한 제한은 많은 리소스를 투입하지 않고도 화면표시(랜더링)를 할 수 있게 해줄것이다.

또한 웹봇(일종의 자동화된 크롤러, 특정 목적을 가진 크롤러)이 웹페이지를 분석할 경우에도 strict DOCTYPE일 경우, 정해진 문법과 구조상에서 훨씬 정확하게 내용분석이 가능해 질것이다.

* 참조 : 브라우저별 DOCTYPE 해석표

원본 : http://meyerweb.com/eric/dom/dtype/dtype-grid.html

Entry Meaning
Q Quirks mode
A Almost-standards mode
S Standards mode
- Status unknown


 

DOCTYPE given NN6.x NN7.0 Moz1.0 IE5/Mac IE6/Win IE7/Win
No DOCTYPE given Q Q Q Q Q Q
Unrecognized DOCTYPE Q S S S S S
Unrecognized DOCTYPE + URI Q S S S S S
HTML 2.0 Q Q Q Q Q Q
HTML 3.0 Q Q Q Q Q Q
HTML 3.2 Q Q Q Q Q Q
HTML 3.2 + URI Q Q Q Q Q Q
HTML 4.0 Strict S S S S S S
HTML 4.0 Strict + URI S S S S S S
HTML 4.0 Transitional Q Q Q Q Q Q
HTML 4.0 Transitional + URI Q Q Q S S S
HTML 4.0 Frameset Q Q Q Q Q Q
HTML 4.0 Frameset + URI Q Q Q S S S
HTML 4.01 Strict S S S Q S S
HTML 4.01 Strict + URI S S S S S S
HTML 4.01 Transitional Q Q Q Q Q Q
HTML 4.01 Transitional + URI S A S S S S
HTML 4.01 Frameset Q Q Q Q Q Q
HTML 4.01 Frameset + URI S A S S S S
XHTML 1.0 Strict S S S S S S
XHTML 1.0 Strict + URI S S S S S S
XHTML 1.0 Transitional S A S S S S
XHTML 1.0 Transitional + URI S A S S S S
XHTML 1.0 Frameset S A S S S S
XHTML 1.0 Frameset + URI S A S S S S
XHTML 1.0 Strict w/XML S S S S Q S
XHTML 1.0 Strict w/XML + URI S S S S Q S
XHTML 1.0 Transitional w/XML S A S S Q S
XHTML 1.0 Transitional w/XML + URI S A S S Q S
XHTML 1.0 Frameset w/XML S A S S Q S
XHTML 1.0 Frameset w/XML + URI S A S S Q S
Any XML S S S S - -
Any XML + URI S S S S - -


 

'HTML/CSS' 카테고리의 다른 글

[HTML] CSS로 onfocus=this.blur() 효과주기  (0) 2013.10.07
[CSS3] background-size 속성 사용법  (0) 2013.10.04
HTML5, AJAX, CSS3  (0) 2013.10.02
<css,style,html> CSS 컨텐츠 마진,패딩 스타일 margin,padding 속성  (0) 2013.10.02
HTML 특수문자 메뉴보기  (0) 2013.09.26
'HTML/CSS' Related Articles more
Comments