CSS 심화 - Columns

다단 (multi-column)

다단 레이아웃 규격은 신문에서 볼 수 있듯이 콘텐츠의 텍스트를 단으로 구분하여 배치하는 방법을 말한다.

column-count

몇 개의 단으로 배치할 것인지 설정한다. 기본값은 auto이고 auto는 곧 1이다.

column-count: 2

column-width

단의 너비를 지정한다. 기본값은 auto이다.
단 px로 설정 시 그대로 적용되는 것은 아니고 최적의 너비를 설정하는 것이다. 따라서 단의 개수가 조정된다.

column-width: 300px;

columns

column-width와 column-count를 한 줄로 작성할 수 있는 단축 속성이다.

columns: 300px 3; /* 너비, 단의 개수 */

column-rule

단과 단 사이에 선을 만든다. (단축 속성)
border와 마찬가지로 색상을 입력하지 않으면 글자의 색상을 상속받는다.

column-rule: 4px dotted blue; /* 너비, 스타일, 색상 */

개별 속성으로 작성하면 아래와 같다.

column-rule-width: 4px; /* 너비 */
column-rule-style: dashed; /* 스타일 */
column-rule-color: blue; /* 색상 */

column-gap

단과 단 사이의 간격을 정의한다. 기본값은 normal이다.
구분선을 포함한다.
gap으로만 작성해도 된다.

gap: 40px;

예제

<div class="container">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>

.container {
	border: 4px solid;
	column-width: auto;
	column-count: 3;
	column-rule: 4px dotted blue;
	gap: 40px;
}