웹마스터 팁
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
제목 | 글쓴이 | 날짜 |
---|---|---|
노프레임 홈만들기 (2) - 로그인, 최근게시물 설치
[31]
![]() | @kihwa | 2003.07.26 |
노프레임 홈만들기 (3) - 서브 페이지 만들고 제로보드에 적용하기
[27]
![]() | @kihwa | 2003.07.26 |
이미지2장으로 홈페이지만들기 [5] | Conz | 2003.08.01 |
이미지2장으로 홈페이지만들기 2탄 [3] | Conz | 2003.08.01 |
<TD>에 스크롤바 생성하기!! [12] | millth | 2003.08.04 |
[나모] iframe창에서 다른 iframe창으로 링크걸기, 전체창으로 링크하기 [1] | 김병희 | 2003.08.06 |
홈페이지에 배경 음악 항상 흐르게 하기 (숨김프레임) [5] | 마이템플릿 | 2003.08.13 |
테이블의 세로정렬 [4] | clo | 2003.08.20 |
[re] 벅스뮤직 음악을 페이지의 배경 음악으로 깔기 (간단) [3] | 윤혜성 | 2003.12.26 |
벅스뮤직 음악을 페이지의 배경 음악으로 깔기 (수정 #1)
[31]
![]() | 토끼군 | 2003.08.20 |
스크롤바 왼쪽에 위치하도록 하기(문서 뒤집힘 없음) [6] | 행복한고니 | 2003.08.22 |
[동영상] 테이블태그의 쉽고 확실한 이해와 원프레임 만들기 [30] | 비행소년™ | 2003.08.27 |
노프레임 홈페이지에서 상하좌우에 원하지 않는 간격이 생길때...
[9]
![]() | PHASE | 2003.09.08 |
[동영상] 제로보드의 주요기능들을 적용한 웹사이트 만들기 1-10장 [51] | 비행소년™ | 2003.09.16 |
마우스 커서에 대해서...
[16]
![]() | impre | 2003.09.20 |
해상도에 따라 레이어 위치 바뀌는 것 고정하기 [13] | 김형준 | 2003.10.04 |
IFRAME 삽입 [20] | 박종익 | 2003.10.10 |
링크에 마우스 오버 할때 상태표시줄에 원하는 글 뜨게하기 [6] | siche | 2003.11.26 |
Input AccessKey를 이용한 홈페이지 단축키 사용하기 [8] | Juny. | 2003.12.12 |
스크롤바 색상을 아름답게.
[17]
![]() | 해리포터포에버 | 2003.12.16 |