CSS 입문 | CSS3 확장 | 다중 칼럼 레이아웃

다중 칼럼(multi-column) 레이아웃

CSS에서는 신문과 같이 여러 개의 칼럼(column)으로 구성되는 구조를 column 속성을 이용하여 손쉽게 만들 수 있다.

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

속성	설명
columns	모든 columns 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
column-count	해당 요소를 몇 개의 칼럼(column)으로 나눌지를 설정함.
column-gap	칼럼 사이의 간격을 설정함.
column-width	칼럼의 너비를 설정함.
column-span	해당 요소가 몇 개의 칼럼(column)을 병합해서 표현할지를 설정함.
column-fill	칼럼을 어떻게 채울지 설정함.
column-rule	모든 columns 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
column-rule-style	칼럼 사이에 들어갈 라인의 스타일을 설정함.
column-rule-width	칼럼 사이에 들어갈 라인의 두께를 설정함.
column-rule-color	칼럼 사이에 들어갈 라인의 색상을 설정함.

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

CSS3 다중 칼럼(multi-column)을 지원하는 주요 웹 브라우저의 버전은 다음과 같다.
브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했다.

속성	ie	chrome	firefox	safari	opera
column-count / column-cap / column-rule/ column-rule-color / column-rule-style / column-rule-width / column-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

column-count 속성

column-count 속성은 해당 요소를 몇 개의 칼럼(column)으로 나눌지를 설정한다.

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

column-gap 속성

column-gap 속성은 칼럼(column) 사이의 간격을 설정한다.

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

column-width 속성

column-width 속성은 칼럼의 너비를 설정한다. 웹 브라우저는 설정한 너비의 칼럼을 만든 후, 나머지 영역을 동일하게 나누어 칼럼 사이의 간격으로 자동 설정한다.

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

column-span 속성

column-span 속성은 해당 요소가 몇 개의 칼럼을 병합하여 표현할지를 설정한다.

<style>
    #merge { -webkit-column-span: all; column-span: all; }
</style>

column-count 속성은 파이어폭스와 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

column-rule-style 속성

column-rule-style 속성은 칼럼 사이에 들어갈 라인의 스타일을 설정한다.

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

column-rule-width 속성

column-rule-width 속성은 칼럼 사이에 들어갈 라인의 두께를 설정한다.

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

column-rule-color 속성

column-rule-color 속성은 칼럼 사이에 들어갈 라인의 색상을 설정한다.

<style>
    #line {
        -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid;
        -webkit-column-rule-width: 5px; -moz-column-rule-width: 5px; column-rule-width: 5px;
        -webkit-column-rule-color: #6495ED; -moz-column-rule-color: #6495ED; column-rule-color: #6495ED;
    }
</style>

column-rule 속성

모든 columns-rule 속성을 이용한 스타일을 한 줄에 설정할 수 있다.

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

최종 수정 : 2021-08-27