09-2 다단으로 편집하기

예시와 실행화면은 책 참고.

column-width - 단의 너비 고정하고 다단 구성하기

속성 값

• 크기(px)
• auto

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

속성 값

• 숫자
• auto

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

속성 값

• 크기(px)
• normal

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
  • 너비
  • 스타일
  • 색상

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

• break-after : 특정 요소 뒤
  • column : 단 나눔
  • avoid-column : 단 나누지 않음
• break-before : 특정 요소 앞
  • column
  • avoid-column
• break-inside : 특정 요소 안
  • column
  • avoid-column

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

속성 값

• 1 : 합치지 않는 것(단이 하나이므로). 기본 값.
• all : 전체 단을 하나로 합쳐 표현한다. 단의 일부만 합칠 수는 없다.