티스토리 뷰
728x90
반응형
<!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에서 안된다는거. 그게 참 안스럽다.
728x90
반응형
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 아이폰
- JavaScript
- CSS
- 앱스토어
- 애플
- 자바스크립트
- 벤처
- 웹표준
- android
- 게임
- 아이디어
- AWS
- 스마트폰
- 모바일
- 안드로이드
- 소프트웨어
- iPhone
- 대학생
- 창업
- 어플리케이션
- Apple
- 경진대회
- 앱
- 공모전
- 구글
- php
- 네이버
- 트위터
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
글 보관함