글
오늘 구글의 문서 서비스의 코드를 뜯어보고나서 깨달았다.
div로는 구현할 수 없는 table만의 유용한 속성이 존재했던 것이다..
하나 예를 들어보자면..
div 에서 height=100% 값을 쓰면, 화면전체를 매꾸게 된다.
하지만 table의 경우 다르게 쓸수있다.
다음 코드를 보면 쉽게 이해할 수 있을것이다.
<body>
<table height="100%">
<tbody>
<tr height="100px">
</tr>
<tr>
<td height="100%">
<iframe src="test.html">
</td>
</tr>
</tbody>
</table>
</body>
레이아웃이 대충 그려지시는지? :-)
body 전체에 height=100% 값을 가진 테이블을 전체적으로 레이아웃을 잡았다.
이점을 하나하나 꼬집어본다면..
1. 모든 창크기에서, body에는 스크롤바 따위는 생기지 않는다.
2. 위에 100px의 tr은 항상 위에고정 가능하다.
3. 두번째 tr에서 아이프레임 대신에
스타일에 overflow:scroll; 값을 가진 div를 넣어도 된다.
한마디로, 상단 100px 짜리 tr은 "position:fixed" 값과 동일한 결과를 가져올 수 있는것이다.
왜 굳이 간단히 "position:fixed" 를 쓰지않고 위 방법을 썼는가..에 대해서 답하자면
간단하다. IE6을 위해서이다..
IE6에서 스크립트를 이용하여 "position:fixed" 값을 적용할수는 있지만
개인적으로 스크립트는 페이지로드마다 영향을준다...(트래픽발생)
차라리 그런 js보다 몇바이트쯤 더 나가는 위의 방법을 권하고싶다.
난 여기서 중요한 깨달음 하나를 발견했다.
레이아웃을 꼭 DIV로만 짜야되는것은 아니다
...table레이아웃을 천대시하기만 했던 나였는데,
사고가 바뀌었다.^^
편리한 table, 뒤늦게 알아주었어..
posted by dayeong.(praday.com)
div로는 구현할 수 없는 table만의 유용한 속성이 존재했던 것이다..
하나 예를 들어보자면..
div 에서 height=100% 값을 쓰면, 화면전체를 매꾸게 된다.
하지만 table의 경우 다르게 쓸수있다.
다음 코드를 보면 쉽게 이해할 수 있을것이다.
<body>
<table height="100%">
<tbody>
<tr height="100px">
</tr>
<tr>
<td height="100%">
<iframe src="test.html">
</td>
</tr>
</tbody>
</table>
</body>
레이아웃이 대충 그려지시는지? :-)
body 전체에 height=100% 값을 가진 테이블을 전체적으로 레이아웃을 잡았다.
이점을 하나하나 꼬집어본다면..
1. 모든 창크기에서, body에는 스크롤바 따위는 생기지 않는다.
2. 위에 100px의 tr은 항상 위에고정 가능하다.
3. 두번째 tr에서 아이프레임 대신에
스타일에 overflow:scroll; 값을 가진 div를 넣어도 된다.
한마디로, 상단 100px 짜리 tr은 "position:fixed" 값과 동일한 결과를 가져올 수 있는것이다.
왜 굳이 간단히 "position:fixed" 를 쓰지않고 위 방법을 썼는가..에 대해서 답하자면
간단하다. IE6을 위해서이다..
IE6에서 스크립트를 이용하여 "position:fixed" 값을 적용할수는 있지만
개인적으로 스크립트는 페이지로드마다 영향을준다...(트래픽발생)
차라리 그런 js보다 몇바이트쯤 더 나가는 위의 방법을 권하고싶다.
난 여기서 중요한 깨달음 하나를 발견했다.
레이아웃을 꼭 DIV로만 짜야되는것은 아니다
...table레이아웃을 천대시하기만 했던 나였는데,
사고가 바뀌었다.^^
편리한 table, 뒤늦게 알아주었어..
posted by dayeong.(praday.com)
'웹스터디 > xhtmlcss' 카테고리의 다른 글
| 웹폰트 적용방법 (0) | 2009.01.28 |
|---|---|
| 웹 개발자들은 왜 CSS에 끌리기 시작했을까? (0) | 2009.01.05 |
| 모든 디자이너가 해야할 9가지 CSS 원칙 (0) | 2008.12.21 |
| 네이밍 가이드 (0) | 2008.12.21 |
| 아리따체, 한겨레결체 (0) | 2008.11.30 |
| CSS : 테이블 디자인 (0) | 2008.11.30 |
| CSS : 글꼴과 텍스트(3) - 문단 정렬 및 행처리 (0) | 2008.11.30 |
| CSS : 글꼴과 텍스트(2) - 장식과 자간 및 줄간 (0) | 2008.11.30 |
| CSS : 글꼴과 텍스트(1) - font-family & font-size (0) | 2008.11.30 |
| CSS를 이용한 네비게이션 메뉴바 (0) | 2008.11.30 |
RECENT COMMENT