<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>div를 display 속성으로 table처럼 보이게 하기</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
.table {display:table;}
.tr {display:table-row;background:blue;}
.td {display:table-cell}
</style>
</head>
<body>
<div class="table">
<div class="tr">
<div class="td">니가 길어지면 나도 길어진다</div>
<div class="td">난 길어진다<br>난 길어진다<br>난 길어진다<br>난 길어진다<br>난 길어진다<br>난 길어진다<br>난 길어진다<br>난 길어진다<br></div>
</div>
</div>
</body>
</html>http://trio.co.kr/webrefer/css2/visuren.html#propdef-display
diplay 속성값은 아주 다양하다.
CSS2에 정의된 display 속성값
- inline
- block
- list-item
- run-in
- compact
- marker
- table
- inline-table
- table-row-group
- table-header-group
- table-footer-group
- table-row
- table-column-group
- table-column
- table-cell
- table-caption
- none
CSS2.1에 정의된 display 속성값
- inline
- block
- list-item
- run-in
- inline-block
- table
- inline-table
- table-row-group
- table-header-group
- table-footer-group
- table-row
- table-column-group
- table-column
- table-cell
- table-caption
- none
하지만 이중에서 나도 다수의 프로젝트를 진행해보고 온갖 파격적인 디자인을 웹퍼블리싱 해봤지만
사용해본 속성이라고는 제일 많이 쓰는 block과 inline, none 그리고 IE버그퇴치용으로 쓰는 inline-block이 고작이다.
위의 예제에서 소개했듯이 table관련 display값을 이용해서
div를 사용해서 table같이 사용하는 방법이다.
예제를 실행해보면 알수 있듯이
float:left라던가 이런속성을 사용하지 않더라고 table스러운 레이아웃을 만들수 있다.
하지만 IE에서 안된다는거. 그게 참 안스럽다.
이올린에 북마크하기
이올린에 추천하기이 블로그를 구독하시려면 
여기를 클릭해주세요
댓글을 달아 주세요
CSS는 알아 나가면 나갈수록 신기한것 같습니다.
2007/11/09 11:29 [ ADDR : EDIT/ DEL : REPLY ]CSS의 능력은 무궁무진한데 활용하기에는 정말 한계가 있는것인지 처음 배운 방식을 고집하는것인지 모르지만 많이 상용을 하지 않는것 같습니다.
그렇지만 한번 시간내서 사용을 해 봐야 겠습니다.