드림위버를 이용하여 기존 문서의 DTD 변경하기.
기존의 문서 형 정의가 지난 버전(HTML4.x)을 참조하고 있다면 최신의 문서 형(XHTML 1.x)으로 변경할 수 있습니다. 드림위버의 Page Properties(Ctrl+J) 대화상자 에서 문서 형 정의(DTD)를 변경하게 되면 기존의 마크업 문법은 자동으로 사용자가 선택한 DTD형식에 맞게 변경됩니다. HTML 에서 XHTML 으로 DTD를 버전업 하는경우 대문자 마크업은 소문자로, 종료태그가 없는 마크업은 종료태그를 자동으로 삽입해 줍니다. 단, Deprecated(폐기) 된 코드를 사용한 경우 이것을 자동으로 삭제하지는 않음에 유의 하여야 합니다. 예를 들어 <font> 라는 폐기된 마크업을 사용한 문서를 XHTML DTD 문서로 전환하는 경우 이 코드는 삭제되지 않고 남아있게 됩니다(Transitional 모드 또는 Strict 모드에서 결과는 동일). 따라서 Deprecated 된 마크업은 직접 제거하거나 또는 찾아바꾸기 하여야 합니다. HTML 4.x 버전부터 Deprecated 되어 사용할 수 없는 마크업은 다음과 같습니다.
<applet> <basefont> <center> <dir> <font> <isindex> <menu> <s> <strike> <u> <xmp>
이 가운데 <xmp> 라는 마크업은 완전히 폐기되어 어떤 문서에도 사용할 수 없으며 나머지 마크업들은 오직 Transitional(호환모드) 에서 여전히 지원하고 있지만 공식적으로 Deprecated 된 것들이므로 사용하지 않는 것이 좋습니다. Transitional 모드란 말 그대로 이전 버전과의 호환성 유지를 위하여 폐기된 마크업까지 여전히 유효하게 취급해주는 완충 모드 입니다. 따라서 드림위버는 이를 자동으로 삭제하거나 또는 붉은색 밑줄로 경고하지도 않습니다. 단, Strict 모드에서는 오류 문법으로 간주 합니다. 어쨌거나 보다 생명력 있는 문서를 만들고 싶다면 Deprecated 된 마크업은 Strict 모드 뿐만 아니라 Transitional 모드에서도 사용하지 않는 것이 좋습니다. 드림위버에서 기존의 낡은 HTML DTD를 최신의 XHTML DTD로 변경하는 방법은 다음과 같습니다.
- 오래된 HTML 4.x 버전의 문서 열기.
- Page Properties (Ctrl+J).
- Title/Encoding 선택.
- Document Type (DTD) 항목에서 XHTML 1.x Transitional 또는 Strict 으로 변경.
- 변경된 DTD에 준하는 마크업으로 수정된 코드를 확인하고 Deprecated 된 코드는 직접 찾아 바꾼다.
참고로 XHTML 은 HTML 을 XML 문법에 맞게 변형하여 다시 한번 공식화 한 것 뿐입니다. 따라서 HTML과는 약간의 문법적 표기에 대한 차이만 갖는데 XHTML 문법은 좀더 엄격함을 요구하고 있습니다. XHTML 1.0 스펙을 보면 별도의 XHTML 요소(엘리먼트)에 대한 규격을 소개하고 있지 않은데 이는 XHTML에서 새롭게 추가된 요소가 존재하지 않고 HTML 을 XML 규격에 맞도록 단지 재 구성 하였기 때문 입니다. 드림위버를 사용하는 경우 DTD만 바르게 설정되어 있다면 설정된 DTD의 표준 문법에 맞게 바른 XHTML을 코딩해 주지만 HTML 과 XHTML의 문법적인 차이를 알고 있을 필요는 있습니다. 한마디로 정의하면 XHTML은 HTML의 W3C 최신 표준이며 보다 엄격하고(Well Formed) 확장가능한(extensible) 형태의 HTML 입니다. 아래는 HTML과 XHTML 의 문법적인 차이점 입니다.
문법적으로 엄격하게 구성되어 있어야 한다.
HTML 은 종료태그가 없는 것을 허용하였으나 XHTML은 반드시 종료태그를 갖는다. HTML 은 태그의 중첩이 잘못된 것을 허용하였으나 XHTML은 잘못된 중첩을 허용하지 않는다.
요소와 속성은 소문자로 표기되어야 한다.
HTML 은 대소문자를 함께 사용하는 것을 허용하였으나 XHTML의 마크업 ‘요소’와 ‘속성’들은 반드시 소문자로 표기한다. 단, 속성의 ‘값’에는 대소문자 혼합 표기가 가능하다. 하지만 대소문자를 명확하게 구분하기 때문에 대문자로 구성된 ‘값’과 소문자로 구성된 ‘값’은 동일하지 않고 확실히 구별된다.
모든 태그는 종료태그를 갖는다.
HTML 의 경우 <p>, <td> 등의 태그에서 종료태그를 생략하는 것을 허용하였지만 XHTML 의 경우 반드시 닫아야 한다.
속성 ‘값’들은 항상 따옴표로 감싸주어야 한다.
HTML 의 경우 속성 값들을 따옴표로 감싸지 않는 것을 허용하였지만 XHTML 에서는 반드시 속성 ‘값’은 따옴표 안에 있어야 한다.
속성과 값의 단축표기를 허용하지 않는다.
HTML 에서는 속성과 속성 값의 단축표기를 허용하였으나 XHTML 에서는 단축표기 하는 것을 허용하지 않는다. <input checked> 는 <input checked="checked"> 와 같이 표기되어야 한다.
비어있는 태그(종료태그가 없는 태그)도 종료 되어야 한다.
HTML 에서 <br>, <hr> 과 같이 표기되는(포함하는 내용이 없이 비어있는) 태그들은 <br />, <hr /> 과 같이 표기하여 시작태그에서 곧 종료됨을 표기해 주어야 한다.
a, applet, frame, iframe, img, map 에서 name 속성은 다음 버전부터 지원하지 않는다.
id 와 name 을 함께 사용하던 마크업의 name 속성은 id 속성으로 교체되어야 한다. name 속성은 공식적으로 폐기하였지만 여전히 XHTML 1.x 모드까지 지원하고 있다. 하지만 다음 버전에서는 분명히 폐기된다.
참조문서
- XHTML 1.0 규격(한국어) http://trio.co.kr/webrefer/xhtml/overview.html
- XHTML 1.0 규격(원문) http://www.w3.org/TR/xhtml1/
- HTML 및 XHTML 요소 http://www.w3schools.com/tags/default.asp
다음 단원에서는 드림위버의 접근성 속성 대화상자를 이용하여 img, object, input, frame 태그에 접근성 관련 속성을 입력하는 방법을 설명합니다. alt, title 속성이나 label 태그 따위를 효과적으로 사용하면 접근성에 대한 장기간의 학습을 하지 않더라도 웹 사이트의 접근성을 80~90% 정도까지 급격하게 향상시킬 수 있습니다.
