[CSS3] 단나누기 column

 

일반적으로 글을 쓰면 아래와 같은 결과가 나옵니다. 

column속성을 이용해 column-count : 3;을 적용하자

단이 3개로 나누어집니다. 

count로 갯수로 나누는게 아닌 

column-width : 300px;를 이용해 width값으로 나눌 수 있습니다. 단의 width값이 300px로 나누어 졌습니다. 

단을 나누는 스타일을 정의할 수 있습니다. 

 

 

단과 단 사이의 간격을 100px 로 설정합니다. 

column-gap : 100px;

 

단을 나누는 선을 추가합니다. 

column-rule-style : dotted; 

선스타일은 dotted 점선 solid 실선 이외에 아래와 같은 값을 가질 수 있다. 

none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset / initial

 

column-rule-width : 3px; //선두께
column-rule-color : #ff0; //선색깔

 

아래와같이 한줄로 정의할 수 있습니다. 

column-rule : 3px dotted #ff0;

 

 

 

또한 span 을 어떻게 처리할 것인지 지정할 수있습니다. 

아래와같이 h2{column-span:all;}일 경우 다른 문자열과 분리되어 단이 나누어 집니다. 

h2는 단에 포함되지 않는 모습을 볼 수 있습니다. 

h2{column-span:none;}일 경우 는 아래와 같습니다. 

단에 포함되어 나누어 집니다.