[ HTML ] DTD(Document Type Definition) 란? > html&css

본문 바로가기
사이트 내 전체검색

html&css

[ HTML ] DTD(Document Type Definition) 란?

페이지 정보

작성자 웹지기 댓글 0건 조회 6,055회 작성일 18-09-28 18:06

본문

DTD(Document Type Definition)는
브라우저의 랜더링 모드를 지정해주고
유효성 검증기(Validator)의 기준이 되므로
(X)HTML 문서의 상단에 반드시 선언 해 주어야 합니다.

만일 DTD를 생략하거나 형식이 잘못된 문서일 경우에는
웹 브라우저마다 코드의 해석 방식이 다른 Quirks mode로 랜더링이 되기 때문에
엉뚱한 결과물로 출력되는 문제에 직면하게 됩니다.

DTD의 정확한 역할과 의미등을 알아보고 왜 표현하기 힘든 Strict타입이 권장되는지 알아봅니다.
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


가장 많이 쓰이는 문서형식 선언입니다. 

 

DTD 타입을 선언하는 이유

불과 몇년전만 해도,
DTD를 선언하지 않고도, 제작된 많은 사이트들이 있었고,
실제로도 테이블로 레이아웃을 짜게되면,
DTD에 거의 의존없이 크로스브라우징 사이트를 구현할 수도 있었으며
실무에서도 "높이조절이 잘 안되요"라고 하면 "위에 DTD를 지워보세요" 라는 답변들까지 흔히 볼수있었습니다.

하지만 지금은 수많은 브라우저가 있고
각자의 브라우저는 저마다의 정해진 표현방식이 있으며,
W3C의 표준이 단지 "권고안" 인걸 염두에 둔다면,
어떤 브라우저가 표준이라고 하기가 애매합니다.
파이어폭스에선 맞는형식이 될수 있지만,
사파리나 익스플로러같은 기타 브라우저에겐 잘못된 문서가 될 수 있는것입니다.

또한, 이론적으로 DTD와 랜더링은 전혀 무관하지만
요즘의 브라우저들은 DTD에 따라서 랜더링을 다르게 합니다.
표준 방식으로 랜더링을 할 경우,
기존의 비표준 방식의 랜더링에서 잘 나오던 웹페이지가 잘못 랜더링 될 수가 있기 때문에
DTD선언을 참조하여 렌더링 방식까지 결정하게 됩니다.

이 부분이 가장 차이가 많이나는 브라우저는 인터넷 익스플로러로
레이아웃 제작이나 위치를 설정하는데 영향을 크게 미치는 박스모델이 랜더링 모드에 따라서 차이가 나게 됩니다.
가장 흔한 예로, 너비(width)는 콘텐츠가 들어가는 영역의 너비를 의미하는데
인터넷 익스플로러의 비표준 방식 랜더링에서는
너비를 콘텐츠의 너비 + 안쪽 여백(padding) + 경계선(border)으로 정의하고 있습니다.
그래서 DTD에 따라 디자인적인 면에서도 큰 영향을 끼치게 됩니다.

하지만 W3C에서 기준으로 삼을만한 형식을 배포함으로서 그 형식에 맞게만 코딩한다면
그 문서는 구조적, 디자인적으로 검증기준을 갖게 되고,
해당 DTD를 제대로 수용하지 못하는 브라우저라면,
그 브라우저가 잘못된것이지 문서자체는 올바른 문서가 되는 것입니다.

지금 당장 사이트가 뜨는데 문제없다 하더라도
후에 브라우저의 발전과 미래를 생각해볼때 미래지향적인. 말 그대로 표준HTML이 될수 있습니다.
때문에, 웹표준코딩을 함에 있어서 DTD의 선언이 그 자체이자 필수적인것이라 볼수 있습니다.
 

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/html4/loose.dtd 이다. 
 

앞서 적었던 DTD는 위와같은 뜻을 가지고 있습니다. 하나하나 분리해서 봅니다.

<!DOCTYPE ①최상위엘리먼트네임 ②(국제적,공용||내부적,제한용) "③(ISO공인인증기관 || ISO비공인인증기관)//④기관명//⑤DTD type //⑥인코딩언어(ISO)" "⑦DTD 주소">
 

  1. <!DOCTYPE
    DOCTYPE 태그라고 선언합니다.
  2. 최상위엘리먼트네임(RootElementName)
    html이나 xhtml의 가장 최상위는 무조건 <html>태그 이기 때문에 html로 작성합니다.
    하지만 예외적으로 내부용일경우에는 다른 코드가 삽입될수도 있지만. 여기에서는 국제적인 코드를 생각해서 html이 삽입됩니다.
  3. 국제적,공용|| 내부적,제한용 (PUBLIC || SYSTEM)
    이 문서가 국제적으로 쓰이는 문서인지. 내부적으로 쓰이는 문서인지를 설정합니다.
    내부적일 경우에는 DTD든 최상위엘리먼트든 작성자 마음대로 작성하거나 지정할수 있습니다.
  4. ISO공인인증기관|| ISO비공인인증기관 (Inernational Organization for Standardization || not Inernational Organization for Standardization )
    본 문서가 어디에서 만든 DTD를 사용하는가에 대한 내용입니다.
    공인인증기관일경우 "+"를 비공인인증기관일경우엔 "-"를 사용합니다.
    W3C는 비공인인증기관이므로 "-"가 들어갑니다.
  5. 기관명(Organization)
    DTD를 작성한 기관명입니다.
  6. DTD TYPE
    DTD가 어떤 타입으로 작성되어있는가에 대한 내용으로 3가지로 분류하게 됩니다.
    DTD XHTML (version) Strict => W3C가 권장하는 문서 타입
    DTD XHTML (version) Transitional => 호환성을 위해 만든 중간단계의 문서 타입
    DTD XHTML (version) Frameset => Transitional dtd 기반 위에 Frameset 사용을 위한 태그와 속성을 추가한 문서 타입 
    즉, Strict DTD가 W3C가 의도하는 문서 타입이고, Transitional DTD는 기존에 만들어진 문서들과의 호환성을 위해 만들어진 타입입니다.
  7. 인코딩언어
    xml:lang일때 같이 ISO에서 인증한 언어코드로 문서를 출력합니다.
    (모든 html DTD는 영문이기 때문에 보통 EN이 기본입니다)
  8. DTD경로 (DTD URL)이 문서를 검증할 DTD를 지정합니다.


Strict DTD를 지향해야만 하는 이유

W3C가 제안한 HTML 규격의 DTD 항목에는 다음과 같이 설명되어 있습니다.

"Strict 타입은 W3C가 스타일시트 사용을 장려하기 위해 단계적으로 사라질 '표현'(presentation)에 관한 태그와 속성을 배제한 문서 타입이다.
웹 문서 제작자는 가능하다면 Strict 타입을 사용해야 하지만(should), 불가피하게 표현을 담당하는 속성이 필요할 경우에는 Transitional 타입을 사용할 수도 있다(may)." 

즉, Strict DTD가 W3C가 의도하는 문서 타입이고, Transitional DTD는 기존에 만들어진 문서들과의 호환성을 위해 만들어진 타입입니다.
Strict DTD는 문서의 구조와 표현을 엄격하게 분리시키기 위해 만들어졌습니다. 따라서 규격에 맞게 마크업하기만 하면 자연스럽게 그 목적을 달성할 수 있습니다.
그에 반해서 Transitional DTD는 규격을 지킨다고 해서 '의미 있는' 문서를 보장하지는 않습니다.
앞서 포스팅한 웹 표준에 대한 생각에서 '의미 있는' 마크업의 장점을 다룬 바 있는데 그런 장점을 얻기 위해서는 Strict DTD를 사용하는 것이 최선의 방법입니다.
XHTML 의 최종 권고안(규격)인 XHTML 1.1에서는 세 가지로 나뉘었던 DTD를 하나로 통합시켰는데 그 기반이 XHTML 1.0 Strict DTD라는 것을 생각해보면 앞으로의 웹 환경이 보다 구조적인 문서를 만드는 방향으로 나갈 것을 짐작할 수 있습니다.
그러므로 새로 문서를 작성해야 한다면 Strict DTD를 선언하는 것이 미래의 웹 환경을 위해서도 바람직하리라 생각합니다.
 

현재 쓰이고 있는 DTD의 종류

웹 페이지에서 주로 사용하는 HTML 4.01 과 XHTML 1.0에는(2007년 기준) 각각 Strict, Transitional, Frameset 의 3가지 DTD가 있습니다. (XHTML1.1에서는 Transitional 과 Frameset은 파기되고 Strict 기반으로 재구성 되었습니다.)
 

HTML 4.01 Strict DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">



엄격형은 뛰어난 품질의 코드를 작성할수 있지만
오래된 속성을 지원하지 않기때문에 호환성이 떨어지고,
새창 띄우기와 같은 익숙한 기능을 제한하기 때문에 XHTML 1.0 Transitional의 사용을 권장하며
향후 문서가 이용될 목적에 따라 XHTML 1.1 Strict을 지향하며 코딩해야합니다.  

추천0 비추천0

댓글목록

등록된 댓글이 없습니다.

Total 42건 3 페이지
  • 12 [ CSS ] css 정의 순서
  • css의 우선 순위 규칙 어떻게 될까? 기본적으로 맨뒤에 나오는 css가 우선순위가 높음. !important &gt; inline style attribute &gt; id 다른 attribute &gt; tag element 순으로 우선순위가 높다짐. 우선순위가 같으면 css가 많은 녀석의 우선순위가 높음. !important와 inline style attribute은 실무에서 사용을 제한하는 경우가 많다. !important는 css 값 뒤에 붙여진 ...
  • 웹지기 10-04 5536 0 0 댓글 0
  • 11 [ css ] 최고의 반응형 CSS 프레임워크 18선
  • 1. Bootstrap가장 많은 사람들이 쓰고 가장 널리 알려진 부트스트랩입니다. LESS를 사용하였으며 12컬럼 반응형 그리드 시스템,수많은 위젯, 컴포넌트, 자바스크립트 플러그인을 지원하며 다운받을때 원하는 기능만 커스터마이즈 할수있습니다.2. Foundation013년 2월에 최초의 Mobile first 프레임워크라는 캐치로 릴리즈된 Foundation4. Sass와 Compass를 사용부트스트랩보다 더 오래된 프레임워크로 현재 부트스트랩 아성에 버티는 거의 유일한 프레임워크https://...
  • 웹지기 10-03 10900 0 0 댓글 0
  • 9 [html] 특수문자 / 키보드 자음 특수문자 찾기
  • ㅂ +[한자키]─│┌┐┘└├┬┤┴│━┃┏ ┓┛┗┣┳┫┻╋┠┯┨┷┿┝┰┥┸╂┒┑┚┙┖┕┎┍┞┟┡┢ ┦┧┩┪┭┮┱┲┵┶┹┺┽┾╀╁╃╄╅╆╇╈╉╊ㅈ +[한자키]0123456789ⅰⅱⅲⅳⅴⅵⅶⅷⅸⅹⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩㄷ + [한자키]+-<=>±×÷≠≤≥∞∴♂♀∠⊥⌒∂∇≡≒≪≫√∽∝∵∫∬∈∋⊆⊇⊂⊃∪∩∧∨¬→↔∀∃∮∑∏ㄱ + [한자키] !',./:;?^_`| ̄、、。·‥…¨〃­―∥\∼´~ˇ˘˝˚˙¸˛¡¿ːㅅ + [한자키]㉠㉡㉢㉣㉤㉥㉦㉧㉨㉩㉪㉫㉬㉭㉮㉯㉰㉱㉲㉳㉴㉵㉶㉷㉸㉹㉺㉻㈀㈁㈂㈃㈄㈅㈆㈇㈈㈉㈊㈋㈌㈍㈎㈏㈐㈑㈒㈓㈔㈕...
  • 웹지기 09-30 4357 0 0 댓글 0
  • 열람중 [ HTML ] DTD(Document Type Definition) 란?
  • DTD(Document Type Definition)는브라우저의 랜더링 모드를 지정해주고유효성 검증기(Validator)의 기준이 되므로(X)HTML 문서의 상단에 반드시 선언 해 주어야 합니다.만일 DTD를 생략하거나 형식이 잘못된 문서일 경우에는웹 브라우저마다 코드의 해석 방식이 다른 Quirks mode로 랜더링이 되기 때문에엉뚱한 결과물로 출력되는 문제에 직면하게 됩니다.DTD의 정확한 역할과 의미등을 알아보고 왜 표현하기 힘든 Strict타입이 권장되는지 알아봅니다.&lt;!DO...
  • 웹지기 09-28 6056 0 0 댓글 0
  • 5 [ CSS ] 부모 dom 의 넓이에 따라 자동으로 넓이 조절하기
  • A : 좌측 메뉴(넓이고정)B : 본문 내용(부모dom 의 사이즈에 따라 가변적으로 변할경우)jy관리자스킨, 아이콘샵에 보면 좌측 메뉴바 또는 검색영역이 있습니다.제사이트에만 쓰려면 사이즈를 고정하여 사용하면 상관이 없겠지만,배포해야하는경우에 설치하는 사이트에 따라 사이즈가 틀리므로 B 영역의 사이즈가 가변적이어야 합니다. [code].A {float:left; width:200px;} .B {margin-left:220px;}A 의 사이즈는 고정이며B 의 사이즈는 부모 dom 의 사이즈에 따...
  • 웹지기 09-28 5014 0 0 댓글 0
  • 3 [ html / css ] html / css 효과 튜토리얼 모음
  • HTML / CSS[HTML/CSS] 001.CSS3를 이용한 탭 메뉴(tab menu) 만들기How to Create a CSS3 Tabbed Navigation[미리보기][HTML/CSS] 002.CSS3를 이용한 버티컬 네비게이션 메뉴 만들기Orman Clark’s Vertical Navigation Menu[미리보기][HTML/CSS] 003.CSS3를 이용한 오목한 버튼 이미지 코딩하기Tagtastic Tag Cloud with CSS Transformations[미리보기][HTML/CS...
  • 웹지기 09-28 13728 0 0 댓글 0
  • 2 [ CSS ] 텍스트 줄바꿈, 글자자르기
  • white-space공백 줄바꿈문자 처리방법 (띄어쓰기나 줄바꿈으로 이한 공백부분 등)white-space:normal;normal이 기본값, 여러칸의 공백이나 줄바꿈을 공백 1칸으로 인식한다. 지정된 넓이의 끝에서 자동으로줄바꿈한다.- 코드에서의 원래 텍스트여수 밤바다 이 조명에 담긴 아름다운 얘기가 있어 네게 들려주고파white-space:pre;띄어쓰기는 실제 입력한 칸 수대로, 줄바꿈도 엔터를 친 대로 나온다. 넘어가는 부분에서 강제 줄바꿈은 되지 않는다.white-space:nowr...
  • 웹지기 09-11 20393 0 0 댓글 0
  • 1 [ css ] less && sass 사용
  • less 클라이언트쪽 사용방법head 부분에 다음과 같은 파일을 등록&lt;link rel="stylesheet/less" type="text/css" href="&lt;?php echo G5_THEME_CSS_URL;?&gt;/styles.less" /&gt;less파일을 먼저 올려야 함&lt;script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2...
  • 웹지기 09-11 4771 0 0 댓글 0
게시물 검색

회원로그인

접속자집계

오늘
7,279
어제
56,257
최대
61,067
전체
10,970,881

그누보드5
Copyright © funyphp.com. All rights reserved.