다중 칼럼 레이아웃
다중 칼럼(multi-column) 레이아웃
CSS에서는 신문과 같이 여러 개의 칼럼(column)으로 구성되는 구조를 column 속성을 이용하여 손쉽게 만들 수 있습니다.
다중 칼럼(multi-column)을 위해 제공되는 속성은 다음과 같습니다.
1. 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
CSS3 다중 칼럼(multi-column) 지원 버전
CSS3 다중 칼럼(multi-column)을 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.
또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했습니다.
| 속성 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
|
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 속성은 해당 요소가 몇 개의 칼럼을 병합하여 표현할지를 설정합니다.
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>
CSS3 다중 칼럼(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 | 칼럼 사이에 들어갈 라인의 색상을 설정함. |
