[표준화 - 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를 지키라는 것입니다.
표준규칙을 잘 지키면 표준성을 만들기 위해 엄청나게 많은 코드를 입력해야 할 것도 한두 줄에 표현이 가능할 수도 있습니다.
예를 들어, 브라우저의 가운데에 컨텐츠가 위치하게 하기 위해 많은 코드를 입력해야 할 것도 margin: 0 auto;같은 소스 한줄에 해결할 수도 있는 것입니다.
만약, style이나 CSS파일에 margin: 0 auto;를 넣었음에도 중앙 정렬이 되지 않는다면 DTD선언을 하지 않았기 때문일 수도 있습니다.
(로그인 필요없음)
