CSS3 멀티 컬럼 레이아웃에서 열 규칙(column rule)은 여러 개의 열 사이에 표시되는 구분선을 의미합니다. 이 구분선을 설정하려면 단축 속성인 column-rule 속성을 사용하면 되며, 이를 통해 아래의 세 가지 하위 속성을 한 번에 지정할 수 있습니다.
column-rule-width : 열 사이 구분선의 두께 설정 column-rule-style : 열 사이 구분선의 스타일 설정 column-rule-color : 열 사이 구분선의 색상 설정
column-rule 기본 문법
column-rule 속성의 값은 다음과 같이 작성합니다.
column-rule: column-rule-width column-rule-style column-rule-color | initial | inherit;
- width — 구분선의 두께(px, em 등)
- style — 구분선의 스타일(dotted, dashed, solid, double 등)
- color — 구분선의 색상
예제 1: 단축 속성으로 열 규칙 적용하기
아래 예제는 column-rule 단축 속성을 사용하여 두께 5px, 점선(dotted) 스타일, 주황색(orange) 구분선을 적용한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 5;
-webkit-column-count: 5; /* Chrome, Safari, Opera */
-moz-column-count: 5; /* Firefox */
-webkit-column-gap: normal; /* Chrome, Safari, Opera */
-moz-column-gap: normal; /* Firefox */
column-gap: normal;
-webkit-column-rule: 5px dotted orange; /* Chrome, Safari, Opera */
-moz-column-rule: 5px dotted orange; /* Firefox */
column-rule: 5px dotted orange;
}
</style>
</head>
<body>
<h1>PyTorch</h1>
<div class="demo">
PyTorch is defined as an open source machine learning library for Python. It is used for applications such as natural language processing. It is initially developed by Facebook artificial-intelligence research group, and Uber’s Pyro software for probabilistic programming which is built on it.
Originally, PyTorch was developed by Hugh Perkins as a Python wrapper for the LusJIT based on Torch framework. There are two PyTorch variants.
PyTorch redesigns and implements Torch in Python while sharing the same core C libraries for the backend code. PyTorch developers tuned this back-end code to run Python efficiently. They also kept the GPU based hardware acceleration as well as the extensibility features that made Lua-based Torch.
</div>
</body>
</html>실행 결과
위 결과에서 볼 수 있듯이, 5개의 열 사이마다 주황색 점선 구분선이 나타나는 것을 확인할 수 있습니다.
예제 2: 개별 속성으로 열 규칙 세부 설정하기
다음 예제는 앞서 소개한 개별 속성들(column-rule-width, column-rule-color, column-rule-style)을 각각 사용하여 구분선을 설정하는 방법입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
-webkit-column-gap: normal; /* Chrome, Safari, Opera */
-moz-column-gap: normal; /* Firefox */
column-gap: normal;
-webkit-column-rule-width: 5px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 5px; /* Firefox */
column-rule-width: 5px;
-webkit-column-rule-color: blue; /* Chrome, Safari, Opera */
-moz-column-rule-color: blue; /* Firefox */
column-rule-color: blue;
-webkit-column-rule-style: double; /* Chrome, Safari, Opera */
-moz-column-rule-style: double; /* Firefox */
column-rule-style: double;
}
</style>
</head>
<body>
<h1>PyTorch</h1>
<div class="demo">
PyTorch is defined as an open source machine learning library for Python. It is used for applications such as natural language processing. It is initially developed by Facebook artificial-intelligence research group, and Uber’s Pyro software for probabilistic programming which is built on it.
Originally, PyTorch was developed by Hugh Perkins as a Python wrapper for the LusJIT based on Torch framework. There are two PyTorch variants.
PyTorch redesigns and implements Torch in Python while sharing the same core C libraries for the backend code. PyTorch developers tuned this back-end code to run Python efficiently. They also kept the GPU based hardware acceleration as well as the extensibility features that made Lua-based Torch.
</div>
</body>
</html>실행 결과
이번에는 4개의 열 사이에 파란색 이중선(double) 구분선이 표시됩니다.
브라우저 호환성 참고 사항
코드에서 보이는 것처럼 크로스 브라우징을 위해 벤더 프리픽스(vendor prefix)를 함께 작성하는 것이 좋습니다.
-webkit-: Chrome, Safari, Opera 등 WebKit 기반 브라우저-moz-: Firefox
다만 최신 브라우저에서는 column-rule 속성이 표준으로 지원되므로, 대부분의 경우 프리픽스 없이도 정상적으로 동작합니다.