[css] 다단 편집(Multiple Colum)

📘 Multiple Colum(다단 편집)

CSS3 다중 칼럼(multi-column) 속성

속성	설명
columns	모든 columns 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
column-count	해당 요소를 몇 개의 칼럼(column)으로 나눌지를 설정함.
column-gap	칼럼 사이의 간격을 설정함.
column-width	칼럼의 너비를 설정함.
column-span	해당 요소가 몇 개의 칼럼(column)을 병합해서 표현할지를 설정함.
column-fill	칼럼을 어떻게 채울지 설정함.
column-rule	모든 columns 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
column-rule-style	칼럼 사이에 들어갈 라인의 스타일을 설정함.
column-rule-width	칼럼 사이에 들어갈 라인의 두께를 설정함.
column-rule-color	칼럼 사이에 들어갈 라인의 색상을 설정함.

      .gmother {
        width: 550px;
        font: 12px "굴림", gulim;
        background: beige;
        text-align: justify; /* 양쪽정렬 */
        column-count: 4; /* 3단박스 */
        column-gap: 30px; /* 단 사이의 간격 */
        column-rule: 1px solid black; /* 단과 단 사이 구분선 */
      }

Reference

http://www.tcpschool.com/css/css3_expand_multicolumn