CSS3 Multi-Colum(다중 칼럼)

1. CSS3 다단(multi-column)이란?

다단(muti-column)은 화면을 분활해서 좀 더 읽기 쉽도록 만든 레이아웃

CSS에서는 이러한 레이아웃을 쉽게 구현할 수 있는 기능을 제공한다.

2. CSS3 다중 칼럼(multi-column) 지원 버전

CSS3 다단(multi-column)을 지원하는 주요 웹 브라우저의 버전은 다음 표와 같고, IE의 경우 10이상에서 지원한다.

속성
column-count column-width column-cap column-rule column-rule-color column-rule-style column-rule-width	10.0	50.0 4.0 -webkit-	2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.1
column-span	10.0	50.0 4.0 -webkit-	지원하지 않음	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.1

3. CSS3 다중 칼럼(multi-column) 속성

다중 칼럼(multi-column)을 위해 제공되는 속성은 다음과 같다.

1. columns : 모든 columns 속성을 이용한 스타일을 한 줄에 설정할 수 있음.

2. column-count

3. column-gap

4. column-width

5. column-span

6. column-fill

7. column-rule

8. column-rule-style

9. column-rule-width

10. column-rule-color

1. columns : 해당요소를 몇 개의 칼럼으로 나눌지를 설정한다.

예제)

<style> #columns_12 { -webkit-columns: 12 8em; -moz-columns: 12 8em; columns: 12 8em; } </style>

2. colum-count : 해당요소를 몇 개의 칼럼으로 나눌지를 설정한다.

예제)

<style>     #origin { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } </style>

3. colum-gap : 칼럼 사이의 간격을 설정한다.

예제)

<style>     #gap { -webkit-column-gap: 70px; -moz-column-gap: 70px; column-gap: 70px; } </style>

4. colum-width : 칼럼의 넓이를 설정한다.

예제)

<style>     #gap { -webkit-column-width: 150px; -moz-column-width: 150px; column-width: 150px; } </style>

5. colum-span : 몇 개의 칼럼을 병합하여 표현할지를 설정한다.

예제)

<style>     #gap { -webkit-column-width: 150px; -moz-column-width: 150px; column-width: 150px; } </style>

8. colum-rule-style : 칼럼사이에 들어갈 라인의 스타일을 설정한다.

예제)

<style>     #line { -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; } </style>

4. 결론

multi-colum을 이용하여 CSS와 HTML만으로도 핀터레스트 스타일인 masonry 레이아웃과 거의 흡사하게 구현이 가능하다.