웹 콘텐츠는 기본적으로 텍스트로 이루어졌지만, 인쇄물에서 자주 사용되는 다단(Multi Column) 구조를 앞서 살펴본 속성들만으로는 구현하기가 어렵습니다. W3C에서는 다단 구조를 구현할 수 있도록 Multi-column Layout Module에 이를 정의했으며 다음과 같은 속성들을 사용할 수 잇습니다.

MDN 멀티 컬럼 레이아웃

📌 column–width

column-width는 다단 구성 시 단의 너비를 지정하는 속성입니다. 기본 값은 auto이며, 단의 너비를 자동으로 계산합니다. column-width 속성 값을 auto로 지정한 후에 다단을 구성하기 위해서는 column-count 속성이 필요합니다.

auto 이외에 단의 너비를 길이 값으로 지정할 수 있습니다. 이때 단의 개수는 요소의 너비에 따라 자동으로 계산됩니다. 여기서 지정된 값은 정확한 길이 값이 아니라 상위 요소가 단을 구성하는 최소 기준 값이됩니다. 만약 요소의 너비가 500px일 때 column-width 속성 값을 200px로 지정하면 200px보다 큰 2개의 단이 요소 500px 너비를 모두 채우게 되고, 요소의 너비가 더 늘어나서 200px짜리 단을 추가할 수 있을 만큼 넓어지면 단이 하나 더 추가되면서 단의 폭이 200px까지 줄어들게 됩니다.

div {
	column-width: 200px;
}

MDN column–width 속성

📌 column-count

column-count는 다단 구성 시 단의 개수를 지정하는 속성입니다. 속성 값에는 단위가 없는 0이 아닌 정수 값으로 단의 개수를 지정합니다. 이때 생성되는 단의 너비는 자동으로 계산됩니다. column-count 속성으로 다단을 구성했을 경우에는 요소의 너비가 증가하더라도 단의 개수가 유지되며, 단의 너비만 더 넓어집니다.

column-count 속성의 기본 값인 auto는 단의 개수를 자동으로 지정합니다. column-count 속성 값을 "auto"로 지정하고, 다단을 구성하기 위해서는 column-width 속성을 지정해야 합니다.

div {
	column-count: 3;
}

MDN column-count 속성

📌 columns

columns는 단의 너비와 개수를 일괄 지정하기 위한 단축 속성(Shorthand Property)입니다. columns 속성에 지정할 속성 값은 column-width 속성, column-count 속성과 동일합니다.