웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
테이블의 세로정렬
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
아 정말 감사합니다. 고민하던부분이 해결되었습니다.
많은 부분에 응용할수 있게 되었습니다.
다시한번 감사드립니다.
제목 | 글쓴이 | 날짜 |
---|---|---|
nzeo처럼 배너누르면 배너다는법 나오게하기! [6] | Rollrang | 2004.02.05 |
옅은 그레이 쓸때 붉은빛 들어가는경우 [10] | 김영호 | 2004.01.29 |
마우스 오버시 서브메뉴 나타나게 하는방법 입니다 [12] | 키드 | 2004.01.26 |
자동으로 새로고침되게 하기 [5] | 권대건 | 2004.01.05 |
Input AccessKey를 이용한 홈페이지 단축키 사용하기 [8] | Juny. | 2003.12.12 |
링크에 마우스 오버 할때 상태표시줄에 원하는 글 뜨게하기 [6] | siche | 2003.11.26 |
IFRAME 삽입 [20] | 박종익 | 2003.10.10 |
해상도에 따라 레이어 위치 바뀌는 것 고정하기 [13] | 김형준 | 2003.10.04 |
[동영상] 제로보드의 주요기능들을 적용한 웹사이트 만들기 1-10장 [51] | 비행소년™ | 2003.09.16 |
[동영상] 테이블태그의 쉽고 확실한 이해와 원프레임 만들기 [30] | 비행소년™ | 2003.08.27 |
스크롤바 왼쪽에 위치하도록 하기(문서 뒤집힘 없음) [6] | 행복한고니 | 2003.08.22 |
[re] 벅스뮤직 음악을 페이지의 배경 음악으로 깔기 (간단) [3] | 윤혜성 | 2003.12.26 |
테이블의 세로정렬 [4] | clo | 2003.08.20 |
홈페이지에 배경 음악 항상 흐르게 하기 (숨김프레임) [5] | 마이템플릿 | 2003.08.13 |
[나모] iframe창에서 다른 iframe창으로 링크걸기, 전체창으로 링크하기 [1] | 김병희 | 2003.08.06 |
<TD>에 스크롤바 생성하기!! [12] | millth | 2003.08.04 |
이미지2장으로 홈페이지만들기 2탄 [3] | Conz | 2003.08.01 |
이미지2장으로 홈페이지만들기 [5] | Conz | 2003.08.01 |
홈제작에 있어 가장중요한 "경로지정의 이해" 1편 입니다. [5] | 김수한 | 2003.07.25 |
HTML필수 항목( 기본구조)- 초보자용 입니다! | 김수한 | 2003.07.25 |