[HTML/CSS] 다단으로 편집하기

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

• column-width는 다단으로 편집할 때 단의 너비를 고정해 놓기 위해서 사용한다.

column-width : <크기> | auto

• <크기> : 단 너비를 직접 지정한다.
• auto : 단의 개수(column-count) 같은 다른 속성에 따라 단의 너비가 지동 계산된다.

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

column-count : <숫자> | auto

• <숫자> : 콘텐츠가 들어갈 단의 개수를 지정한다. 0보다 큰 수를 사용
• auto : 단의 너비(column-width) 같은 다른 속성에 따라 단의 개수가 자동 계산된다.

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

column-gap : <크기> | normal

• <크기> : 단과 단 사이의 여백을 숫자로 지정한다.
• normal : 여백을 자동으로 지정한다. W3C에서 권장하는 여백은 1em이다.

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

column-rule-color : <색상>
column-rule-style : none | hidden | dotted | dashed | solid | double | grooce | 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

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

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

column-span : 1 | all

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