HTML 4, CSS 2가 나온 지 이미 많은 시간이 흘렀으며, XHMTL을 통해 더 다양한 확장을 꾀하고 있는 것이 지금의 흐름이다. 그럼에도 불구하고 여전히 낡고 잘못된 방법으로 코딩 하는 경우를 자주 찾아볼 수 있다.

W3C HTML 4 스펙을 보면 "Deprecated"라는 표현으로 사용하지 말아야 하는 낡은 Element 또는 Attribute에 대하여 언급하고 있다. "Deprecated Element" 또는 "Deprecated Attribute"는 다음 HTML 버전에서는 더 이상 사용할 수 없는 (Obsolete) 또는 유효하지 않는 것이며, 단지 과거에 작성한 문서를 표시할 수 있도록 하위 호환성 유지를 위해 UA에서 당분간 계속 지원한다는 식이다.

이와 같이 지금 현재 HTML 문서를 작성할 때는 사용하지 말아야 하는데, 문제는 과거의 습관대로 계속 같은 방법으로 코딩 하는 것이며 UA 또한 이를 여전히 지원하므로 잘못되었다는 것을 미처 생각하지 못한다는 것에서 찾아볼 수 있다. 여기에서는 놓치기 쉬운 몇가지 예를 다루며, 자세한 내용은 HTML 4를 포함한 각 스펙을 참고하기 바란다.

TABLE 세로 크기를 어떻게 지정할 수 있을까?
HTML 문서에서 조금이라도 복잡하고 정교한 레이아웃은 보통 테이블로 처리하기 마련이다. (각종 워드프로세서 문서에서도 크게 다르지 않다.) 특히 자주 사용하는 것은 WIDTH Attribute이라고 할 수 있는데, 경우에 따라서 세로 크기를 지정할 필요도 있을 것이다.

예를 들어 웹 브라우저 윈도우 크기/모양과 상관없이 테이블로 꽉 차게 만들고 싶다면 다음과 같이 코딩 하는 방법을 생각하는 사람이 많이 있을 것이다.

<table width="100%" height="100%">...</table>

그런데 HTML 4.0 DTD에서는 TABLE element에서 사용할 수 있는 각종 Attribute 중 height attribute을 찾아볼 수 없다. TABLE element의 height attribute는 Netscape Extension일 뿐이기 때문이다. 다시 이야기하여 HTML 자체에서는 TABLE 세로 크기를 지정하는 방법을 전혀 다루고 있지 않다.

그렇다면 어떻게 TABLE 세로 크기를 지정할 수 있을까? 그 해답은 CSS에서 찾아볼 수 있다. Block element의 세로 크기를 처리할 수 있도록 HEIGHT Property를 사용할 수 있다. 따라서 위의 예는 다음과 같은 식으로 바꾸어야 올바른 작성 방법이라고 할 수 있다.

<table width="100%" style="height: 100%;">...</table>

어떻게 가운데 정렬을 할 수 있는가?
많은 작성자들이 가운데 정렬을 하기 위해 CENTER (<center>...</center>) Element를 사용하는 습관을 가지고 있다. 물론 CENTER Element는 Netscape Extension일 뿐으로 유효한 HTML Element가 아니다.

<p align="center">...</p>

그렇다면 이와 같이 CENTER element가 아닌 align attribute를 이용하여 정렬하는 것이 올바른 코딩 방법이라고 할 수 있을까? 그렇게 생각하지 쉽지만, 이는 "Deprecated Example" 중 하나일 뿐이다.

HTML4에서는 이러한 정렬 방법과 같은 레이아웃은 CSS를 이용하도록 이야기하고 있다. 따라서 다음과 같이 CSS Property 중 text-align property 등을 사용하여 레이아웃을 지정하는 것이 제대로 된 코딩 방법이라고 할 수 있다.

H1 {text-align: center;}
P.center {text-align: center;}

리스트의 글머리 기호 모양을 어떻게 지정할 수 있을까?
문단 처리를 위해 P(Paragraph), BR Element를 자주 사용하는 것처럼 UL, OL 등으로 처리하는 리스트도 많이 사용하는 것 중 하나이다. 작성자에 따라서 P Element보다 오히려 UL Element를 더 많이 이용하기도 한다.

글머리 기호 모양을 지정하기 위해서 type attribute를 사용하는 경우를 종종 찾아볼 수 있는데, 이는 HTML4에서 "Deprecated attribute" 중 하나일 뿐이다. 다음과 같이 CSS 중 list-style-type property를 이용하는 방법 등으로 처리해야 한다.

LI.square { list-style-type: square; }
UL.plain { list-style-type: none; }

CSS 에 대한 이해가 필요
HTML 문서를 작성할 때 사용하지 말아야 하는 몇가지 "Deprecated Element" 또는 "Deprecated Attribute"에 대하여 이야기해보았다. 이러한 예를 통해 바람직한 작성 방법은 HTML에 대한 이해만으로 부족하고 CSS를 같이 사용해야 한다는 것을 알 수 있었을 것이다.

문서 구조와 스타일의 분리는 HTML 뿐만 아니라 XML에서 더욱 강조되는 것이기도 하다. CSS는 XHTML 등에서 알 수 있는 것처럼 각 XML 애플리케이션에서도 여전히 활용된다.

출처: http://rinihouse.com
* 빽짱구님에 의해서 게시물 이동되었습니다 (2004-02-28 16:04)