DTD 관리 (DTD Setting & DTD Switching)

현재 W3C에서 권고하고 있는 HTML DTD의 활성 표준은 XHTML 1.x 입니다. 표준 DTD를 사용하는 것은 최신의 브라우징 도구에서 더욱 안정적이며 Cross Browsing을 위한 첫 번째 원칙 입니다.

새 문서의 기본 DTD 설정하기(Ctrl+U)

Preferences > New Document 에서 새 문서의 기본 DTD를 원하는 형식으로 설정합니다.

  1. Preferences(Ctrl+U)
  2. New Document
  3. Default Document Type(DTD)
  4. HTML 4.01 Transitional → XHTML 1.0 Transitional(권장)

환경설정-새문서

New Document 에서는 새 문서의 기본 DTD 뿐만 아니라 기본 확장자(html, php, asp, jsp...)와 기본 인코딩(euc-kr, utf-8...)을 미리 설정할 수 있습니다. 단축키(Ctrl+N)를 이용한 새창 열기 명령시 대화상자가 뜨는 것을 끌 수도 있습니다.

환경설정-새문서

Default Document Type(DTD) 항목에서 원하는 DTD를 선택하고 OK 버튼을 누릅니다. 환경설정을 마친 후 새문서 열기(Ctrl+N)를 실행하면 사용자가 설정해둔 DTD가 코딩되어 있는 새 문서가 열린 것을 확인할 수 있습니다.

새문서의 DTD 코드 확인

기존 문서의 DTD를 변경하기(Ctrl+J)

웹사이트를 유지보수 하는 과정에서 기존에 이미 코딩되어 있는 HTML 4.01 문서를 현재의 활성버전인 XHTML 1.0 문서로 변경하는 방법 입니다. 기존의 페이지에 코딩 되어 있는 무수히 많은 구식 코드들의 문법을 모두 XHTML로 변경해 주어야 하는데 드림위버는 이것을 매우 간단하게 처리 합니다.

  1. Page Properties(Ctrl+J)
  2. Title/Encoding
  3. Document Type(DTD)
  4. HTML 4.01 Transitional → XHTML 1.0 Transitional(권장)

페이지 속성 대화상자

이 대화상자에서는 현재 열려있는 문서의 DTD, Encoding, Title 요소의 값을 변경할 수 있습니다.

페이지 속성 대화상자

현재 문서의 Document Type(DTD)을 변경합니다.

HTML 4.01 호환모드 코드

HTML 4.01 Transitional 상태로 되어있는 문서의 DTD 변경 전 코드 입니다. 요소와 속성등이 대문자로 코딩 되어 있으며 속성값에 따옴표 처리가 되어 있지 않는등 다소 느슨한 문법을 보여주고 있습니다. 하지만 이 문서는 문법적으로는 문제가 전혀 없습니다. 단지 현재의 DTD가 웹 브라우저의 Quirks Mode를 유발하는 DTD 이며 웹 브라우저 마다 심한 렌더링 차이를 보이기 때문에 Cross Browsing과 최신의 웹 표준 권고안을 따르기 위하여 DTD를 변경할 수 밖에 없는 페이지 입니다. DTD와 함께 <meta> 태그의 닫기 형식도 눈여겨 봅니다.

XHTML 1.0 호환모드 코드

변경 후 코드 입니다. 문서의 DTD가 변경되면서 모든 코드가 XHTML 문법에 맞게 변경 되었습니다. <meta> 태그의 닫기 형식도 변경되었습니다. 이 밖에도 대문자로 코딩되어 있는 Element, Property 등은 모두 소문자로 변경되었으며 속성값에 따옴표가 " " 없는 값은 모두 따옴표 " " 처리 되었습니다. XHTML 문법이 요구하는 엄격한 코드로 자동 변환 되었습니다.

이 기능은 현재 열려있는 문서에만 적용이 가능하며 사이트 전체의 페이지를 모두 자동으로 변환해 주지는 않습니다. 또한 HTML 4.0 버전부터 폐기된 엘리먼트 <applet> <basefont> <center> <dir> <font> <isindex> <menu> <s> <strike> <u> <xmp> 등을 자동으로 제거해 주지는 않습니다. 해당 엘리먼트가 문서에서 어떤 역할을 하고 있는지 판단할 수 없기 때문입니다. 만약 폐기된 엘리먼트에 레이아웃을 위한 스타일시트가 적용되어 있다면 해당 엘리먼트를 제거했을 때 레이아웃이 깨질수도 있겠지요.

» 실습용 예제 코드

아래 HTML 4.01 Quirks Mode 버전의 문서 코드를 드림위버를 이용하여 XHTML 1.0 Transitional 버전의 코드로 변경해 보세요.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV=Content-Type CONTENT="text/html; charset=utf-8">
<TITLE>Untitled Document</TITLE>
</HEAD>
<BODY>
<IMG SRC=blank.gif WIDTH=100 HEIGHT=100 ALT=>
</BODY>
</HTML>

» 보충설명 : HTML과 XHTML의 차이

  1. 문법적으로 엄격하게 구성되어 있어야 한다.
    HTML 은 종료태그가 없는 것을 허용하였으나 XHTML은 반드시 종료태그를 갖는다. HTML 은 태그의 중첩이 잘못된 것을 허용하였으나 XHTML은 잘못된 중첩을 허용하지 않는다. 잘못된 중첩은 화면표시(렌더링)에 직접적인 영향을 주기도 한다.
  2. 요소와 속성은 소문자로 표기되어야 한다.
    HTML 은 요소(=엘리먼트, 태그)와 속성에 대소문자를 함께 사용하는 것을 허용하였으나 XHTML의 마크업 '요소'와 '속성'들은 반드시 소문자로 표기한다. 단, 속성의 ‘값’에는 대소문자 혼합 표기가 가능하다. 하지만 대소문자를 명확하게 구분하기 때문에 대문자로 구성된 ‘값’과 소문자로 구성된 ‘값’은 동일하지 않고 확실히 구별된다.
  3. 모든 태그는 종료태그를 갖는다.
    HTML 의 경우 <p>, <td> 등의 태그에서 종료태그를 생략하는 것을 허용하였지만 XHTML 의 경우 반드시 닫아야 한다.
  4. 속성 ‘값’들은 항상 따옴표로 감싸주어야 한다.
    HTML 의 경우 속성 값들을 따옴표로 감싸지 않는 것을 허용하였지만 XHTML 에서는 반드시 속성 "값"은 따옴표 안에 있어야 한다.
  5. 속성과 값의 단축표기를 허용하지 않는다.
    HTML 에서는 속성과 속성 값의 단축표기를 허용하였으나 XHTML 에서는 단축표기 하는 것을 허용하지 않는다. <input checked> 는 <input checked="checked"> 와 같이 표기되어야 한다.
  6. 비어있는 태그(종료태그가 없는 태그)도 종료 되어야 한다.
    HTML 에서 <br>, <hr> 과 같이 콘텐트를 담지 않는 빈 태그들은 <br />, <hr /> 과 같이 표기하여 시작태그에서 곧 종료됨을 표기해 주어야 한다.
  7. a, applet, frame, iframe, img, map 에서 name 속성은 다음 버전부터 지원하지 않는다.
    id 와 name 을 함께 사용하던 마크업의 name 속성은 모두 id 속성으로 교체되어야 한다. name 속성은 공식적으로 폐기하였지만 여전히 XHTML 1.0 Transitional 버전의 문서까지는 지원하고 있다. 하지만 XHTML 1.0 Strict 버전에서 지원하지 않으며 다음 버전에서는 분명히 폐기된다.