CSS column-rule-width 속성으로 열 사이 구분선 너비 설정하기

CSS 멀티컬럼 레이아웃에서 column-rule-width 속성을 사용하면 여러 열(column) 사이에 표시되는 구분선(rule)의 너비를 자유롭게 조절할 수 있습니다.

column-rule-width 속성이란?

다단 레이아웃을 구성할 때 각 열 사이에는 시각적으로 경계를 나타내는 구분선을 넣을 수 있습니다. 이때 column-rule-width는 구분선의 두께를 지정하는 역할을 하며, 픽셀(px) 등의 단위로 값을 설정합니다.

구분선이 화면에 나타나려면 column-rule-style 속성으로 선 스타일(예: dashed, solid)을 반드시 함께 지정해야 하며, column-rule-color로 색상도 지정할 수 있습니다. 세 가지 속성을 한 번에 설정하고 싶다면 축약형 속성인 column-rule을 사용하는 것도 좋은 방법입니다.

예제 코드

아래 코드는 4개의 열로 구성된 다단 레이아웃에서 열 사이 구분선의 너비를 5px로 설정한 예시입니다. 직접 실행해 보며 동작 방식을 확인해 보세요.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .demo {
            column-count: 4;
            column-gap: 50px;
            column-rule-color: maroon;
            column-rule-style: dashed;
            column-rule-width: 5px;
         }
      </style>
   </head>
   <body>
      <div class = "demo">
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
      </div>
   </body>
</html>

코드 설명

column-count: 4; — 콘텐츠를 4개의 열로 나누어 배치합니다.
column-gap: 50px; — 열과 열 사이의 간격을 50px로 지정합니다.
column-rule-color: maroon; — 구분선의 색상을 밤색(maroon)으로 설정합니다.
column-rule-style: dashed; — 구분선을 점선(dashed) 스타일로 표시합니다.
column-rule-width: 5px; — 구분선의 너비를 5px로 지정합니다.

위 예제를 브라우저에서 실행하면, 텍스트가 4개의 열로 나뉘고 각 열 사이에 5px 두께의 밤색 점선 구분선이 표시되는 것을 확인할 수 있습니다.