multi-column

multi column은 문단을 다단으로 편집하는 속성이다. 

속성	속성값	설명
column-count	number	다단의 개수
column-gap	px	다단 사이의 간격
column-rule-style	solid | dotted | double	구분선의 종류
column-rule-width	px	구분선의 두께
column-rule-color	color	구분선의 색상
column-rule	solid 1px #333	short hand
column-span	all	다단 안의 요소를 다단편집에서 해제시킴, column안에 h2태그가 있을때, h2 {   column-span: all; }
column-width	px | %	브라우저에 대한 최소 너비를 지정함 즉, 브라우저가 작아질때, 단의 최소 너비

---

column-count:3;
column-gap:30px;
column-rule:1px solid #777;

---

 

※ 다단편집 문단과  자연스럽게 높이값이 변하면서 내려오는 서브메뉴 

: 핵심 속성은 hegiht | opacity | transition

---

 

See the Pen multi-column vs submenu by LimsUIUX (@LimsUIUX) on CodePen.