CSS - multi-column (다단)

l column-count : 본문의 단을 나눌때 정수를 써서 몇단으로 나눌지 표시한다

l column-width : 단을 나누는 기준을 단의 크기(너비)로 지정한다

l column-gap : 단을 나누는 기준을 단과 단사이의 넓이로 지정한다(px,rem)

l columns : count 와 width를 합쳐서 쓰거나 따로 쓸수있다.

​

​

◎ column-count 속성

div{ column-count: 5; //단을 5개로 나눔 }

​

◎ column-width 속성

div{ column-width: 300px; // 단의 크기를 300px로 나눔 }

​

◎ column-gap 속성

div{ columns : 5; column-gap: 20em; // 단과 단사이의 크기 지정 }

​

◎ columns 속성

div{ columns: 5 300px; } h1{ columns: 5; // column-count } h2{ columns: 300px; //column-width } //이렇게 3가지를 사용할수있다

​