2025-02-03T13:25:31

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

@@ -0,0 +1,99 @@
+# 멀티 컬럼(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를 사용하여 컬럼을 설정!
+
+```css
+.container {
+  column-count: 3;
+  column-gap: 20px;
+} /* 내용이 3개의 컬럼으로 정렬되고, 컬럼 사이 간격은 20px! */
+```
+
+## 주요 속성
+
+### column-count
+내용을 몇 개의 컬럼으로 나눌지 설정
+```css
+.container {
+  column-count: 3;
+} /* 텍스트가 3개의 열로 나뉘어 표시됨! */
+```
+
+### column-width
+각 컬럼의 최소 너비를 설정, 자동으로 열 개수 조절
+```css
+.container {
+  column-count: 3;
+  column-width: 150px;
+} /* 최소 너비 150px을 유지하면서 3개의 컬럼을 생성하려고 시도! */
+```
+
+### column-gap
+각 컬럼 사이의 간격을 설정
+```css
+.container {
+  column-count: 3;
+  column-gap: 30px;
+}
+```
+
+### column-rule
+컬럼 사이에 구분선을 추가
+
+```css
+.container {
+  column-count: 3;
+  column-rule: 2px solid gray;
+}
+```
+#### column-rule-width / column-rule-style / column-rule-color
+
+### column-span
+특정 요소가 여러 개의 컬럼을 차지하도록 설정
+* none :	기본값 (컬럼 하나만 차지)
+* all :	모든 컬럼을 가로질러 확장
+```css
+h2 {
+  column-span: all;
+} /* <h2> 요소가 여러 컬럼을 가로질러 확장됨! */
+```
+
+### column-fill
+내용을 컬럼에 어떻게 배분할지 설정
+* balance :	모든 컬럼을 균등하게 채움 (기본값)
+* auto :	한 컬럼을 먼저 채우고 넘칠 경우 다음 컬럼으로 이동
+```css
+.container {
+  column-count: 3;
+  column-fill: auto;
+} /* 한 컬럼이 가득 차면 다음 컬럼으로 넘어감! */
+```
+
+### break-inside
+컬럼이 분할되는 부분에서 특정 요소가 잘리지 않도록 방지
+* auto :	기본값 (자동 줄바꿈 허용)
+* avoid :	컬럼이 나뉠 때 잘리지 않도록 방지
+```css
+h2 {
+  break-inside: avoid;
+} /* <h2>가 컬럼이 바뀌는 부분에서 분리되지 않도록 설정 */
+```
+
+
+
+