문서형 선언
HTML이나 XHTML과 같은 마크업 문서는 문서가 시작할 때 문서형 선언(Document Type Definition)을 명시하여 문서에 사용되는 마크업을 파서(parser)가 파악할 수 있게 해야 한다. 문법 검사기(validator)도 이 DTD를 기준으로 마크업에 사용된 태그나 속성이 정확한지를 검사한다. 모든 마크업 문서는 이 DTD를 명시해 주어야만 한다.
DTD의 종류
웹에서 사용하는 마크업 언어는 HTML 4.01과 XHTML 1.0, XHTML 1.1이 있다. 각 마크어 언어는 특징에 따라서 트랜지셔널(Transitional), 스트릭트(Strict), 프레임셋(Frameset)으로 세분화 된다. 트랜지셔널은 디자인적인 속성이 포함된 DTD이고 스트릭트는 디자인 적인 속성이 모두 제거된 형식이다. <a>에 타겟(target)속성을 이용하거나 <td>에 너비(width), 높이(height) 등의 속성을 사용하기 위해서는 트랜지셔널 DTD를 사용해야 한다. 프레임셋은 트랜지셔널 DTD에 프레임을 사용할 수 있게 프레임 관련된 선언을 포함한 DTD이다.
- 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">
관련링크
DTD의 선택
문서의 DTD를 선택할 때에 사용되는 절대적인 기준이 있는 것은 아니고 저작자의 판단에 전적으로 의존하게 된다. 문서의 저작 환경을 고려하고 향후 관리를 하는데 용이하도록 DTD를 정하면 된다. 보통 제작 이후에 어떠한 사람들이 사이트를 유지, 관리하고 표준의 준수에 대한 의지가 어느정도인가에 따라서 DTD를 결정하게 된다. 예를 들어서 유지, 관리 하는 인원이 타겟 속성을 사용한다든가 높이, 너비를 마크업 언어에 직접 명시하고자 한다든가, 모든 인원들이 웹표준을 완전히 익히기가 힘든 상황이라면 XHTML DTD를 선택하기 보다는 HTML DTD를 선언하여 사용하는 것이 바람직하다.
HTML 4.01 트랜지셔널(Transitaional)이라고 해서 XHTML 1.1보다 못하거나 수준이 낮은, 또는 웹표준이 아닌 것은 아니다. 상황에 맞는 DTD를 선택하고 선택한 DTD를 완벽하게 준수하는 것이 중요하다.
처음 접근하기 쉬운 DTD
웹표준을 처음 접할 때에는 XHTML을 선택 하는 것 보다는 HTML 4.01 트랜지셔널을 선택하고 문법을 완전히 지킬 수 있게 노력하는 것이 더 좋은 선택이다. 문법검사기를 완전히 통과하지 않는 문서는 CSS를 적용하여 제작했다고 해도 완벽하다고 할 수가 없다.
마임타입(mime-type)과 DTD
XHTML의 경우 문서의 마임타입이 application/xhtml+xml로 제공이 되어야 한다. XHTML 1.0에서는 하위 호환성을 위해서 text/html로 전송하는 것도 허용하고는 있지만 XHTML1.1은 반드시 application/xhtml+xml로 배포 되어야 한다. 이러한 의미에서 본다면 XHTML보다는 HTML 4.01 Strict가 더 좋은 선택이 될 수도 있다.
DTD와 랜더링 모드
이론적으로 DTD와 랜더링은 전혀 무관하지만 요즘의 브라우저들은 DTD에 따라서 랜더링을 다르게 한다. 표준 방식으로 랜더링을 할 경우, 기존의 비표준 방식의 랜더링에서 잘 나오던 웹페이지가 잘못 랜더링 될 수가 있기 때문에 표준 방식으로 랜더링 할지, 비표준 방식으로 랜더링 할지를 이 DTD선언을 참조하여 결정하게 된다.
표준방식 랜더링과 비표준방식 랜더링이 가장 차이가 많이나는 브라우저는 인터넷 익스플로러이다. 인터넷 익스플로러는 레이아웃 제작이나 위치를 설정하는데 영향을 크게 미치는 박스모델이 랜더링 모드에 따라서 차이가 크다. CSS에서 말하는 박스모델에서는 너비(width)는 콘텐츠가 들어가는 영역의 너비를 의미하는데 인터넷 익스플로러의 비표준 방식 랜더링에서는 너비를 콘텐츠의 너비 + 안쪽 여백(padding) + 경계선(border)으로 정의하고 있다. 그래서 어느 DTD를 선택하는지에 따라서 안쪽 여백이나 경계선을 사용한 부분의 디자인이 많이 달라지게 된다.
인터넷 익스플로러에서 랜더링 엔진을 변경하는 기준은 MSDN(CSS Enhancements in Internet Explorer 6)에 잘 나와있다. HTML 4.0 트랜지셔널과 프레임셋의 경우 DTD URL이 있는지 없는지에 따라서 랜더링 모드가 바뀌게 되기 때문에 주의해야 한다.
인터넷 익스플로러의 경우 랜더링 모드에 따라서 캔버스영역이 바뀌기 때문에 주의해야 한다. 비표준방식에서는 캔버스를 이루는 요소가 <body>이지만 표준방식에서는 <html> 요소가 캔버스가 된다. 그래서 스크롤바의 디자인 적용도 <body>가 아닌 <html>로 해야하고 캔버스영역의 값들도 document.body가 아닌 document.documentElement에서 참조 하여야 한다. 스크립트에 대한 자세한 사항은 QuriksMode의 document.body and doctype switching에 상세하게 나와있다.