멀티 컬럼 레이아웃 - by. UXKM

Publishing
CSS
CSS 고급
멀티 컬럼 레이아웃

요약 설명
CSS의 멀티 컬럼(multi-column) 레이아웃은 신문과 같이 여러 개의 칼럼(column)으로 콘텐츠를 구성할 수 있도록 해줍니다.
이 기능을 사용하면 긴 텍스트를 여러 칼럼으로 나누어 가독성을 높일 수 있으며, column-count, column-width, column-gap 등의 속성을 통해 칼럼의 개수, 너비, 간격을 조절할 수 있습니다.

또한 column-span으로 칼럼을 병합하거나, column-rule로 칼럼 사이의 구분선을 설정할 수 있으며, columns 단축 속성을 사용하면 column-width와 column-count를 한 번에 설정할 수 있습니다.

column-count

요소를 몇 개의 칼럼(column)으로 나눌지 설정합니다. 블록 요소에 적용할 열 수를 정수 값으로 지정하며, 값이 auto인 경우 열 수는 column-width와 같은 다른 CSS 속성에 의해 결정됩니다.

							div {
								column-count: number | auto | initial | inherits;
							}

auto : 초기값
number : 칼럼(column)의 개수를 지정하는 정수 값입니다.

multi-column count 예제

column-gap

칼럼 사이의 간격을 설정합니다.

							div {
								column-gap: length(px, em) | percentage(%) | normal | initial | inherit;
							}

multi-column gap 예제

column-width

칼럼의 너비를 설정합니다.

							div {
								column-width: auto | length(px, em, vw) | initial | inherit;
							}

multi-column width 예제

column-span

요소가 몇 개의 칼럼(column)을 병합해서 표현할지 설정합니다. 값을 all로 설정하면 요소가 나타나기 전에 모든 열에서 자동으로 균형을 맞추며, 이 요소는 새로운 블록 서식 컨텍스트를 설정합니다. 둘 이상의 열에 걸쳐있는 요소를 스패닝 요소라고 합니다.

							div {
								column-span: none | all | initial | inherit;
							}

multi-column span 예제

column-fill

칼럼을 어떻게 채울지 설정합니다.

							div {
								column-fill: auto | balance | initial | inherit;
							}

balance : 콘텐츠 내용보다 높이가 길다면 균형을 이루어 각 열의 아래쪽 부분을 빈 공간으로 남겨 둡니다.
auto : 열 채우기를 height에 맞추어 자동으로 설정합니다. 다음 열로 이동하기 전에 각 열을 위에서 아래로 완전히 채우는 효과가 있습니다.

multi-column fill 예제

column-rule-style

칼럼 사이에 들어갈 라인의 스타일을 설정합니다.

							div {
								/* <'border-style'> values */
								column-rule-style: none;
								column-rule-style: hidden;
								column-rule-style: dotted;
								column-rule-style: dashed;
								column-rule-style: solid;
								column-rule-style: double;
								column-rule-style: groove;
								column-rule-style: ridge;
								column-rule-style: inset;
								column-rule-style: outset;

								/* Global values */
								column-rule-style: inherit;
								column-rule-style: initial;
								column-rule-style: unset;
							}

column-rule-color

칼럼 사이에 들어갈 라인의 색상을 설정합니다.

							div {
								/* <color> values */
								column-rule-color: red;
								column-rule-color: rgb(192, 56, 78);
								column-rule-color: transparent;
								column-rule-color: hsla(0, 100%, 50%, 0.6);
								/* CSS Colors Level 4부터는 hsl()도 동일하게 작동: hsl(0, 100%, 50%, 0.6) */

								/* Global values */
								column-rule-color: inherit;
								column-rule-color: initial;
								column-rule-color: unset;
							}

column-rule

칼럼 사이의 구분선(rule)에 대한 column-rule-width, column-rule-style, column-rule-color 속성을 한 줄에 설정할 수 있습니다.

							div {
								column-rule: column-rule-width | column-rule-style | column-rule-color | initial | inherit;

								column-rule: dotted;
								column-rule: solid 8px;
								column-rule: solid blue;
								column-rule: thick inset blue;
							}

multi-column rule 예제

columns

column-width와 column-count 속성을 한 줄에 설정할 수 있는 단축 속성입니다.

							div {
								columns: <'column-width'> || <'column-count'>;

								/* Column width */
								columns: 18em;

								/* Column count */
								columns: auto;
								columns: 2;

								/* Both column width and count */
								columns: 2 auto;
								columns: auto 12em;
								columns: auto auto;
							}