div를 display 속성을 이용하여 table처럼 보이게 하기
<iframe style="POSITION: absolute; TOP: 0px; LEFT: 0px" id="aswift_0" vspace="0" height="280" marginheight="0" frameborder="0" width="336" allowTransparency name="aswift_0" marginwidth="0" scrolling="no" hspace="0"></iframe>
<iframe style="POSITION: absolute; TOP: 0px; LEFT: 0px" id="aswift_1" vspace="0" height="280" marginheight="0" frameborder="0" width="336" allowTransparency name="aswift_1" marginwidth="0" scrolling="no" hspace="0"></iframe>
<!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에서 안된다는거. 그게 참 안스럽다.