다단 레이아웃

https://codepen.io/ohmy0418/pen/PoaJaEw

다단 레이아웃(multi-column)은 다단 텍스트 정의가 쉽도록 블록 레이아웃 모드를 확장한다.

단 사용

column-count

• 단 수를 특정 숫자로 설정한다.
• 예) column-count: 3

column-width

• 희망하는 최소 단 너비를 설정한다.
• column-count 가 설정되지 않은 경우, 브라우저는 자동으로 이용 가능한 너비에 맞는 많은 단을 만든다.
• 예) column-width: 120px

colums 단축

• 예) columns: 3 120px

column-gap

• 다단 사이의 간격 지정

column-rule

• 다단 사이 스타일 추가
• column-rule-color : 칼럼 사이에 들어갈 색상 설정
• column-rule-style : 칼럼 사이에 들어갈 스타일 설정
• column-rule-width : 칼럼 사이에 들어갈 라인의 두께 설정

column-span

• 몇 개의 칼럼을 병합해서 표현할지 설정함