반응형

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가지를 사용할수있다

​


반응형

'디자인 > CSS' 카테고리의 다른 글

CSS - box-sizing  (0) 2019.03.04
CSS - GRID  (0) 2019.03.04
CSS - margin 겹침  (0) 2019.03.03
CSS - 우선순위 cascading(캐스캐이딩)  (0) 2019.03.02
CSS - 가상클래스(pseudo)  (0) 2019.03.02

+ Recent posts

티스토리툴바