CSS 다단 레이아웃(css3 column)

CSS 다단 레이아웃

여러레이아웃을 별도로 나누는것은 일일이 지정하기귀찮은 법이다.특히 같은 크기의 레이아웃으로 나눌떄는 귀찮다.다음그림과 같은경우를 보면 이걸 일일이 div태그로 정하고 class 로 이름을 달아주고 나눠줘여한다.코드는 다음과 같다.

첫번째 단입니다.
두번째 단입니다.
세번째 단입니다.

columns이라고 일일이 클래스를 지정해주었다.

#contents{ width:800px;}
#contents div{ float:left; border-right:2px solid #000;}
.columns{ padding:10px; width:200px;}

CSS3 columns 이용

첫번째 단입니다.
두번째 단입니다.
세번째 단입니다.

#colcontents{ 
width:800px;
column-count:3 ;
}

아주간단히 column-count:3 ;로 정하여 단이 나누어진다. 예제를 보려면

여기

그러나 아직까지 이 다단column-count

을 지원하는브라우저는 파이어폭스 뿐이다.그것도 -moz-column으로 지정해야한다.

월드와이드웹에서 column에 대한정보는http://www.w3.org/TR/css3-multicol이다.

column 자세히보기

마지막 column과 그 값은 다음과 같이 정의한다.

div{
columns: 200px 3;
/*단의 길이 , 나눌 갯수*/
column-width:200px;
column-count:3;
column-gap:
column-rule : 1px soild #000;
/*단의 보더의 두깨, 스타일, 색깔*/
column-rule-color:#000;
column-rule-style:soild;
column-rule-width:1px;
}