div를 display 속성을 이용하여 table처럼 보이게 하기

<!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에서 안된다는거. 그게 참 안스럽다.
Tag : ,

Comment List

  • Adeurian 2007.11.09 11:29 신고 address / modify or delete / reply

    CSS는 알아 나가면 나갈수록 신기한것 같습니다.

    CSS의 능력은 무궁무진한데 활용하기에는 정말 한계가 있는것인지 처음 배운 방식을 고집하는것인지 모르지만 많이 상용을 하지 않는것 같습니다.

    그렇지만 한번 시간내서 사용을 해 봐야 겠습니다.