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

2024-07-30

요약 설명
CSS에서는 신문과 같이 여러 개의 칼럼(column)으로 구성되는 구조를 column 속성을 이용하여 손쉽게 만들 수 있습니다.
다단(multi-column) 레이아웃 또는 다중 칼럼(multi-column) 레이아웃 다중 칼럼(multi-column)을 위해 제공되는 속성은 다음과 같습니다.
columns column-count column-gap column-width column-span column-fill column-rule column-rule-style column-rule-width column-rule-color

4.6.1. column-count

해당 요소를 몇 개의 칼럼(column)으로 나눌지를 설정합니다.
블록 요소에 있어야 하는 열 수에 대한 정수 값을 사용합니다.
깂이 auto인 경우 열 수는 column-width와 같은 다른 CSS 속성에 의해 결정됩니다.

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

auto : 초기값
number : 평가된 길이로 최적의 컬럼(column,열) 폭이 결정됩니다.

multi-column count 예제

4.6.2. column-gap

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

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

multi-column gap 예제

4.6.3. column-width

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

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

multi-column width 예제

4.6.4. column-span

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

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

multi-column span 예제

4.6.5. column-fill

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

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

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

multi-column fill 예제

4.6.6. 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;
							}

4.6.7. 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);

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

4.6.8. column-rule

모든 columns 속성을 이용한 스타일을 한 줄에 설정할 수 있습니다.

							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 예제

4.6.9. columns