[HTML5 & CSS3] 다단으로 편집하기

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

​

기본형)

column-width : <크기> / auto

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

​

 

단의 너비를 지정해서 다단 편집하기

 

​

​

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

​

기본형)

column-count : <숫자> / auto

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

​

단의 개수를 지정해서 다단 편집하기

 

​

​

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

​

기본형)

column-gap : <크기> / normal

속성 값	설명
<크기>	단과 단 사이의 여백을 숫자로 지정.
normla	여백을 자동으로 지정한다. W3C에서 권장하는 여백은 1em입니다.

​

​

​

*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

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

​

원하는 위치에 단 나누기

 

​​

​

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

​

기본형)

column-span : 1 / all

속성 값	설명
1	단을 하나만 합치는 것이므로 합치지 않는 것과 같다.
all	전체 단을 하나로 합쳐 표현한다. 단의 일부만 합칠 수는 없다.

 

여러 단을 하나로 합치기