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

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

<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>

줄여서...

<p align="center">...</p> 이러한 코딩도

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

처럼 CSS에서 지정, 사용하여야 한답니다.

Posted by Ji-seong