관리 메뉴

키스세븐

표준화 - DTD 선언 : 종류와 사용 방법 / DTD와 쿼크모드 본문

홈피와 블로그

표준화 - DTD 선언 : 종류와 사용 방법 / DTD와 쿼크모드

키스세븐 2015. 1. 12. 01:00
공유하기 링크
필요하면 공유하세요 ^^
이 블로그를 북마크 하세요! 좋은 정보가 계속 이어집니다.

[표준화 - DTD 선언 : 종류와 사용 방법 / DTD와 쿼크모드





웹브라우저는 익스플로러 외에도 크롬, 파이어복스, 싸파리 등등 매우 많습니다. 

만드는 제작 업체마다 여러가지 기능을 넣다보니 각각의 표현방법이 달라집니다. 

그러다 보니 같은 홈페이지라도 어떤 브라우저에서는 잘 보이고 어떤 브라우저에서는 깨져 보이는 현상이 발생합니다. 

이를 극복하기 위한 표준화 방법이 DTD인 것입니다.  



 




DTD와 쿼크모드 


DOCTYPE를 규정하는 말입니다. 어떤 방식의 언어로 제작되었는가를 알려주는 것입니다. 

물론 DTD선언을 하지 않고 홈페이지를 만들어도 됩니다. 

그런 것을 쿼크 모드(Quirks mode)라고 하는데, 선언을 하지 않고 홈페이지를 만들면 코드입력을 조금 실수하거나 꼭 필요한 요소를 다 입력하지 않아도 브라우저가 알아서 표현을 해 줍니다. 


그렇다면 DTD를 선언하지 않은 것이 더 편한 것 아닌가?하는 생각이 들 것입니다. 

제작자 입장에서야 편할 수 있지만 브라우저마다 알아서 표현해 주는 허용도와 방식이 다 달라서 보는 사람입장에서는 문서의 모양이 이상해지는 현상을 보게 됩니다. 

그러므로 DTD를 선언하고 제작을 하는 것이 옳다고 하겠습니다. 


 


 


사용방법과 특징 


HTML 또는 PHP 등의 웹문서의 가장 최상단 첫 줄에 선언문을 넣는 것이 정석입니다. 

 <!DOCTYPE html PUBLIC "구격형식" "규정링크">

기본적으로는 위와 같은 구조로 구성됩니다. 


DTD선언을 하면 제작이 까다로워지나 어떤 브라우저에서도 똑같은 모양의 웹문서를 볼 수있게 됩니다. 

차이에 대해 아래와 같이 예를 들어 봅니다. 

일반 html문서의 경우, <center>라는 태그를 쓴 후에 깜빡하고 </center>로 태그를 닫지 않아도 어떤 브라우저에서는 문제 없이 표현되지만 어떤 브라우저에서는 이상하게 보입니다. 그러나 DTD선언을 한 문서에서는 태그표현이 맞지 않으면 에러가 발생하니 반드시 열고 닫음을 확실히 적어 줘야 합니다. 


일반 html은 영문의 대소문자를 구별하지 않고 사용가능하지만 DTD선언을 하면 Abc와 abc가 다른 태그로 인식이 되듯이 반드시 구분이 필요해 집니다. 일반적으로 DTD선언 후엔 소문자를 사용합니다. 

일반 html문서에서는 속성에 반드시 따옴표를 넣지 않아도 되며 그냥 <br>이라고 비표준 형식을 써서 만들기도 하지만 DTD선언을 했다면 따옴표를 필수로 써야하며 <br />처럼 표준을 따라야 합니다. 



 

 



종류 


DTD의 종류는 아래와 같이 여러가지가 있으므로 맞는 것을 선택해서 사용합니다. 

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


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


 3. <!DOCTYPE html> 



1번이 가장 많이 쓰이는 타입입니다. 

표준 규격이 엄격하면서도 타 선언을 포용하는 범위를 가지고 있으므로 호환성 높은 문서를 만들 수가 있습니다. 

여기서 Transitional부분을 strict로 바꾸면 가장 엄격하고 까다로운 표준 방법만 허용하므로 정확도 높은 문서를 만들 수 있습니다. 

예) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



2번은 1번 보다 비표준을 조금 더 용인해 주는 타입니다. 

표준에 맞추려고 하나, 약간의 융통성을 가집니다. 융통성은 많으나 항상 정확한 문서가 되지는 않을 수도 있습니다. 그러나 위의 strict방법처럼 바꾸면 규정이 강화됩니다. 

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



3번은 새로운 표준으로서 각광을 받고 있는 HTML5형식의 문서를 기준으로 하는 선언입니다. 

점점 많이 사용하는 추세가 될 것으로 전망됩니다. 


 


 


덧붙이는 말 


추세는 DTD를 지키라는 것입니다. 

표준규칙을 잘 지키면 표준성을 만들기 위해 엄청나게 많은 코드를 입력해야 할 것도 한두 줄에 표현이 가능할 수도 있습니다. 

[저작권법 표시] 이 글의 원본: 키스세븐(www.kiss7.kr)


예를 들어, 브라우저의 가운데에 컨텐츠가 위치하게 하기 위해 많은 코드를 입력해야 할 것도 margin: 0 auto;같은 소스 한줄에 해결할 수도 있는 것입니다. 

만약, style이나 CSS파일에 margin: 0 auto;를 넣었음에도 중앙 정렬이 되지 않는다면 DTD선언을 하지 않았기 때문일 수도 있습니다. 


★ 이 정보가 도움이 된다면 아래의 공감을 부탁드립니다! ^^
(로그인 필요없음)


키스세븐지식은 키스세븐과 그룹 사이트입니다.

아래로 더 내려 가 보세요!

혹시 읽을만한 것이 또 있을지도 모르잖아요? ^^

이 블로그를 북마크 하세요! 좋은 정보가 계속 이어집니다.
http://kiss7.tistory.com

Tag
, , , , , , ,
공유하기 링크
필요하면 공유하세요 ^^
2 Comments
  • 프로필사진 Favicon of https://hisastro.com BlogIcon 그별 2015.01.12 09:48 신고 표준이란 정말 중요하다고 생각합니다.
    물론 다수의 합의가 아닌, 어떤 특정 힘에 의해
    강요된 것이어서는 안되겠죠. ^^

    html5가 보편화되면 현재 문제가 되는 웹문서의 일정 부분은
    대부분 해소되리라 생각했는데... 아직은 아닌듯 보여지기도 합니다.
    그만큼 다루기 어려운 것도 같구요. ^^;

    그러고 보면 키스세븐님께서는 프로그래밍에 조예가 깊으신 것 같습니다.
    혹? 프로그래머?? ^^
  • 프로필사진 Favicon of https://kiss7.tistory.com BlogIcon 키스세븐 2015.01.12 11:40 신고 아휴... 전혀 조예 깊지 않아요.^^ 프로그래머가 되고 싶었던 적은 있었구요. 그냥 궁금해서...ㅎㅎ
    html5의 다다음 버전 즈음엔 진짜 뭔가 대단한 것이 나타날 거 같은 느낌입니다.
댓글쓰기 폼