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을 지향하며 코딩해야합니다.
추천 : 