CSS3 다중 열 규칙 스타일 속성이란?
CSS3의 다중 열(multi-column) 레이아웃에서 column-rule-style 속성은 열과 열 사이에 표시되는 구분선(룰 라인)의 스타일을 지정하는 데 사용됩니다. 이 속성은 일반 테두리(border-style)와 마찬가지로 solid, dotted, dashed, double 등의 값을 가질 수 있으며, column-rule-color 속성과 함께 사용하면 구분선의 색상까지 자유롭게 꾸밀 수 있습니다.
아래 예제 코드를 직접 실행해 보면, 네 개의 열로 나뉜 텍스트 사이에 핑크색(#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;
}
</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개의 열로 분할했습니다.
- column-gap: 열과 열 사이의 간격을 설정합니다. 여기서는 40px로 지정하여 열 사이에 충분한 여백을 확보했습니다.
- column-rule-style: 열 사이 구분선의 스타일을 결정합니다.
solid(실선),dotted(점선),dashed(파선),double(이중선) 등의 값을 사용할 수 있습니다. - column-rule-color: 구분선의 색상을 지정합니다. 예제에서는 마젠타 계열인 #ff00ff 색상을 적용했습니다.
브라우저 호환성 팁
구형 브라우저와의 호환성을 위해 -webkit-(Chrome, Safari) 및 -moz-(Firefox) 접두사를 함께 작성하는 것이 좋습니다. 최신 브라우저에서는 표준 속성만으로도 대부분 정상적으로 동작하지만, 가능한 한 다양한 환경에서 일관된 결과를 보장하려면 접두사를 병기하는 습관을 들이는 것이 안전합니다.