[CSS 입문] 다단 관련 속성

1. column-width 속성 - 단의 너비를 고정하고 다단 구성하기

column-width: <크기> | auto;

화면이 커지면 단의 개수가 많아지고 화면이 좁아지면 단의 개수가 줄어듭니다.

2. column-count 속성 - 단의 개수를 고정하고 다단 구성하기

column-count: <숫자> | auto;

브라우저 창의 너비와 상관없이 단의 개수가 일정하며 창의 너비에 따라 단의 너비가 바뀝니다.

3. column-gap 속성 - 단과 단 사이 여백 지정하기

column-gap: <크기> | auto;

4. column-rule 속성 - 구분선의 색상, 스타일, 너비 지정하기

column-rule-color: <색상>

column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset |                        outset

column-rule-width: <크기> | thin | medium | thick

column-rule: <너비> | <스타일> | <색상>

5. break-after 속성 - 다단 위치 지정하기

속성	단 나눌 위치	동작
		단 나눔	단 나누지 않음
break-before	특정 요소 앞	column	avoid-column
break-after	특정 요소 뒤
break-inside	특정 요소 안

6. column-span 속성 - 여러 단을 하나로 합치기

column-span: 1 | all;

<출처> Do it! HTML5+CSS3 웹 표준의 정석