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

말자 전체게시물 작성일13-05-02 05:46 조회3,802회

본문

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 - -


 

비회원도 추천 가능합니다.
유익한 정보였다면, 추천해주세요

추천 1 비추천 0

Css + Html

113개의 게시물
목록
읽기: 1P (1lv), 쓰기: 100P (3lv), 덧글: 10P (2lv), 다운: -10P (2lv)
Css + Html 목록
번호 제목 아이디 날짜 조회수 추천
113 부트스트랩 부트스트랩 모달 (modal) 클릭시 오른쪽에 생기는 여백 17px없애기 무료아이콘 전체게시물 10-12 136 추천: 1
112 css 에어콘 출판사 메인 콘텐츠 레이아웃 관련링크 무료아이콘 전체게시물 09-13 135 추천: 1
111 css float 중앙 정렬 시키기 무료아이콘 전체게시물 09-11 162 추천: 1
110 css 모바일에서 입력창 input 클릭시 확대되는 거 막기 관련링크 무료아이콘 전체게시물 09-04 149 추천: 1
109 jQuery/java 다양한 사이드바 소스 사이드바 플러그인 관련링크 무료아이콘 전체게시물 09-02 162 추천: 1
108 css 크롬 노란 input 배경 없애기 무료아이콘 전체게시물 08-27 206 추천: 1
107 css input에 입력폼에 글자 미리 넣어두기 무료아이콘 전체게시물 08-25 118 추천: 1
106 css 마진 여백 사용시 %넓이 깨지는 경우와 width100%밀림 깨짐 해결하기 무료아이콘 전체게시물 08-17 440 추천: 1
105 etc 브라우저 별 CSS 핵 관련링크 무료아이콘 전체게시물 08-09 151 추천: 1
104 css 목록(리스트)형식의 css에 텍스트 블릿 사용하기 무료아이콘 전체게시물 08-08 111 추천: 1
103 css 넓이 100%에 25%씩 4개값을 줬는데 줄바꿈 되는 경우 ㅠㅠ 댓글1 무료아이콘 전체게시물 07-17 235 추천: 1
102 부트스트랩 동영상 슬라이드 댓글2 관련링크 무료아이콘 전체게시물 01-20 1641 추천: 16
101 부트스트랩 다중,멀티 스타일시트 우선순위 무료아이콘 전체게시물 01-19 1922 추천: 15
100 부트스트랩 부트스트랩 nav 높이를 높였을 때 다른 div 와 겹치는 현상 무료아이콘 전체게시물 01-17 1217 추천: 14
99 부트스트랩 부트스트랩에 swiper로 네이버 터치 스크롤링 메뉴 만들기 관련링크 무료아이콘 전체게시물 01-17 4761 추천: 15
게시물 검색