웹마스터 팁
테이블의 세로정렬
2003.08.20 13:58
http://www.itinside.net/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>
출처 http://www.itinside.net/
제가 자주 드나드는 곳인데 아주 유용한 정보가 많습니다.^^
예를 들어 웹 브라우저 윈도우 크기/모양과 상관없이 테이블로 꽉 차게 만들고 싶다면 다음과 같이 코딩 하는 방법을 생각하는 사람이 많이 있을 것이다.
<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>
출처 http://www.itinside.net/
제가 자주 드나드는 곳인데 아주 유용한 정보가 많습니다.^^
댓글 4
-
토끼군
2003.08.20 18:07
XHTML을 쓰는 사람이라면 저런 것 정도는 당연히 알아야 할 겁니다. :-) (저도 XHTML 1.1로 페이지를 작성한다는;;) -
토끼군
2003.08.20 18:08
이와 비슷한 상황으로 u, s 태그의 실종(..-_-)을 들 수 있습니다. deprecated..되었던가요. 아무튼 이런 경우에는 u 태그 대신 text-decoration:underline; 스타일을, s 태그(또는 strike...) 대신 text-decoration:line-through; 스타일을 써야 합니다. -
박영섭
2003.10.20 00:04
아~ 뭔말인지 모르겄다... ㅠ.ㅜ(쥘~) -
천상계
2004.01.12 21:58
아 정말 감사합니다. 고민하던부분이 해결되었습니다.
많은 부분에 응용할수 있게 되었습니다.
다시한번 감사드립니다.
