[CSS] 다단 스타일

단의 너비를 고정해서 화면 분할

선택자 { column-width : 너비 | auto ; }

  - 화면이 커질수록 단의 개수가 많아짐

 

단의 개수를 고정해서 화면 분할

선택자 { column-count : 개수 | auto ; }

  - 화면이 커질수록 단의 너비가 넓어짐

 

 

---

단 합치기

선택자 { column-span : 1 | all ; }

  - 1 (기본값)

      : 합치지 않음

  - all

      : 전체 단을 하나로 합쳐 표현함

      · 단의 일부만 합칠 수는 없음

 

 

---

단 사이의 경계선 

선택자 { column-rule : 선두께 선유형 선색상 ; }

단 사이의 여백

선택자 { column-gap : 여백px ; }

 

---

특정 요소의 앞/뒤에 다단 위치 지정

/* 앞 */
선택자 { break-before : column | avoid-column ; }

/* 뒤 */
선택자 { break-after : column | avoid-column ; }