CSS3 다중 컬럼 column-rule 속성이란?
CSS3의 다중 컬럼(multi-column) 레이아웃에서 column-rule 속성은 컬럼(열) 사이에 표시되는 구분선의 두께, 스타일, 색상을 한 번에 지정할 수 있는 단축 속성입니다. 신문이나 잡지처럼 텍스트가 여러 열로 나뉘어 있을 때, 각 열을 시각적으로 명확하게 구분해 주는 역할을 합니다.
column-rule 속성은 다음 세 가지 하위 속성으로 구성됩니다.
- column-rule-width: 구분선의 두께를 지정합니다.
- column-rule-style: 구분선의 스타일을 지정합니다. (solid, dotted, dashed, double 등)
- column-rule-color: 구분선의 색상을 지정합니다.
사용 예제
아래 코드는 column-count 속성으로 4개의 컬럼을 생성하고, column-gap 속성으로 컬럼 사이 간격을 40px로 설정한 후, column-rule 속성으로 4px 두께의 마젠타색 실선 구분선을 추가하는 예제입니다.
<html>
<head>
<style>
.multi {
/* 컬럼 개수 지정 */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* 컬럼 간격 지정 */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
/* 컬럼 구분선 스타일 지정 */
column-rule: 4px solid #ff00ff;
}
</style>
</head>
<body>
<div class="multi">
Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.
</div>
</body>
</html>
실행 결과
위 코드를 실행하면 텍스트가 4개의 컬럼으로 나뉘어 배치되고, 각 컬럼 사이에는 40px의 여백과 함께 4px 두께의 마젠타색(#ff00ff) 실선 구분선이 나타납니다.
참고 사항
구형 브라우저와의 호환성을 위해 -webkit-, -moz- 접두사를 함께 사용하는 것이 좋습니다. 최신 브라우저에서는 표준 속성인 column-rule만으로도 정상적으로 동작합니다.