CSS3의 다중 열(multi-column) 레이아웃에서 column-rule-width 속성은 열과 열 사이에 그려지는 구분선(열 규칙선)의 너비를 지정하는 데 사용됩니다. 이 속성은 단독으로 사용하기보다는 column-rule-style, column-rule-color와 함께 사용해야 하며, 구분선 스타일이 먼저 지정되지 않으면 너비 값을 설정해도 화면에는 아무것도 표시되지 않습니다.
기본 문법
column-rule-width: thin | medium | thick | <길이값>;
thin(얇게), medium(보통), thick(두껍게) 같은 키워드를 사용할 수도 있고, 5px처럼 원하는 길이 값을 직접 지정할 수도 있습니다.
예제
아래 코드를 실행하면 본문이 4개의 열로 분할되고, 열 사이에 5px 두께의 마젠타색(#ff00ff) 실선 구분선이 표시됩니다.
<html>
<head>
<style>
.multi {
/* 열 개수(column-count) 속성 */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* 열 간격(column-gap) 속성 */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
/* 구분선 스타일 및 색상 속성 */
column-rule-style: solid;
column-rule-color: #ff00ff;
/* 구분선 너비(column-rule-width) 속성 */
-webkit-column-rule-width: 5px;
-moz-column-rule-width: 5px;
column-rule-width: 5px;
}
</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>
코드 설명
- column-count: 4 – 콘텐츠를 4개의 열로 나눕니다.
- column-gap: 40px – 열 사이의 간격을 40px로 설정합니다.
- column-rule-style: solid – 구분선을 실선(solid) 형태로 지정합니다.
- column-rule-color: #ff00ff – 구분선 색상을 마젠타로 지정합니다.
- column-rule-width: 5px – 구분선의 두께를 5px로 지정합니다.
참고 사항
-webkit-, -moz- 접두사는 구형 Safari, Firefox 등 브라우저와의 호환성을 위해 추가한 것입니다. 최신 브라우저에서는 표준 속성인 column-rule-width만으로도 정상적으로 동작합니다. 또한 column-rule 축약 속성을 활용하면 너비, 스타일, 색상을 한 줄로 간결하게 지정할 수 있습니다.