css3: display:table;

tutsplus.com 의 새로 올라온 HTML 5 and CSS 3: The Techniques You’ll Soon Be Using 내용중에 나온 css 3 의 display: 속성에 대한 부분이 나온다

#content {
	display: table;
}

	#mainContent {
		display: table-cell;
		width: 620px;
		padding-right: 22px;
	}

	aside {
		display: table-cell;
		width: 300px;
	}

스타일은 이렇다

일단 #content 라는 대략 900px 정도의 큰 레이어가 있고 그 속에 좌 #maincontent 620px 과 우 aside 300px

일반적으로 css 2.x 에서는 float: left 에 컨텐츠 float: right 에 사이드 바가 위치 해있지만 css 3 에서는 테이블 셀로 나눠줄수가 있다

이 display:table 의 의미는 크다
그동안 컨텐츠/사이드바를 구성 하기 위해서 여러 편법과 IE핵 등 여러가지가 존재 했지만 이 display:table 의 출현으로 레이아웃을 어느정도 평정 가능 할거같다

지금 당장은 firefox 3.5 에서 적용된 모습을 볼수 있다
(사파리 크롬 오페라 에서는 아직 테스트해보지 못했다)

이 예제에서 눈여겨 볼점은 코멘트 출력 부분까지 article header 를 사용 한점
보더 라운드를 당연하다는듯이 사용한점(익스플로러에선 지원안함)
text-shadow 과 같은 효과를 보여주는 box-shadow

하지만 익스플로러 6.0때문에 css 3 도 한국에선 망할듯 ㅋ