css-examples/docs/09_다단 레이아웃.md

멀티 컬럼(Multi-Column) 레이아웃

CSS 멀티 컬럼(Multi-Column) 레이아웃은 텍스트를 신문이나 잡지처럼 여러 개의 컬럼으로 나누어 표시할 때 사용하는 기능이야.

그리드(Grid)나 플렉스(Flexbox)와 달리, 주로 텍스트 콘텐츠를 정렬하는 데 최적화되어 있어!

속성	설명	옵션
column-count	컬럼 개수 설정
column-width	컬럼 너비 설정
column-gap	컬럼 간격 조정
column-rule	컬럼 사이 구분선
column-span	컬럼 합치기	none, all
column-fill	컬럼 내용 배치 방식	balance, auto
break-inside	컬럼 내 줄바꿈 제어	auto, avoid

멀티 컬럼 기본 개념

멀티 컬럼 레이아웃을 사용하면 컨텐츠를 자동으로 여러 개의 열(column)로 정렬할 수 있어.

• column-count, column-width를 사용하여 컬럼을 설정!

.container {
  column-count: 3;
  column-gap: 20px;
} /* 내용이 3개의 컬럼으로 정렬되고, 컬럼 사이 간격은 20px! */

주요 속성

column-count

내용을 몇 개의 컬럼으로 나눌지 설정

.container {
  column-count: 3;
} /* 텍스트가 3개의 열로 나뉘어 표시됨! */

column-width

각 컬럼의 최소 너비를 설정, 자동으로 열 개수 조절

.container {
  column-count: 3;
  column-width: 150px;
} /* 최소 너비 150px을 유지하면서 3개의 컬럼을 생성하려고 시도! */

column-gap

각 컬럼 사이의 간격을 설정

.container {
  column-count: 3;
  column-gap: 30px;
}

column-rule

컬럼 사이에 구분선을 추가

.container {
  column-count: 3;
  column-rule: 2px solid gray;
}

column-rule-width / column-rule-style / column-rule-color

column-span

특정 요소가 여러 개의 컬럼을 차지하도록 설정

• none : 기본값 (컬럼 하나만 차지)
• all : 모든 컬럼을 가로질러 확장

h2 {
  column-span: all;
} /* <h2> 요소가 여러 컬럼을 가로질러 확장됨! */

column-fill

내용을 컬럼에 어떻게 배분할지 설정

• balance : 모든 컬럼을 균등하게 채움 (기본값)
• auto : 한 컬럼을 먼저 채우고 넘칠 경우 다음 컬럼으로 이동

.container {
  column-count: 3;
  column-fill: auto;
} /* 한 컬럼이 가득 차면 다음 컬럼으로 넘어감! */

break-inside

컬럼이 분할되는 부분에서 특정 요소가 잘리지 않도록 방지

• auto : 기본값 (자동 줄바꿈 허용)
• avoid : 컬럼이 나뉠 때 잘리지 않도록 방지

h2 {
  break-inside: avoid;
} /* <h2>가 컬럼이 바뀌는 부분에서 분리되지 않도록 설정 */