다단으로 문서꾸미기 Column

Column 속성 이용하여 여러 단으로 문서꾸미기.

 

 

워드프레스에서 숏코드를 이용하면 여러만들 수 있는 설정이 있기는 한데 너무 불편합니다.

(모든 사용법을 잘 몰라서 그럴 수도 있습니다. )

<div>를 써서 만드는것보다 더 불편하네요. 그래서 CSS3를 이용합니다.

나중에 페이지를 퍼와서 따로 사용하려면 숏코드를 사용하는 방법은 많이 좋지 않은 듯 합니다.

 

적용한 페이지... http://www.allstemcells.com/blog/bone-marrow-transplant/

 

한글은 몰라도 영어로 기사를 쓸 때는 이렇게 좀 단을 나누어 써야 좀 있어보이네요.

 

Column-width : 너비값;         너비를 지정합니다.

 

예로

div {

     column-width : 120px;

     -webkit-column-width : 120px;

     -moz-column-width : 120px;

}

 

Column-count : 속성값;         단의 개수를 지정합니다.

 

column-gap : 속성값;            단과 단 사이 여백, 숫자로 값으로 표기할 수 있으며, px, em

                                          권장 여백은 1em

                                          normal 로도 자동설정 가능.

column-rule-color : 속성값;

column-rule-style : 속성값;

column-rule-width : 속성값;

column-rule : column-rule-width 속성값 column-rule-style 속성값 column-rule-color 속성값; 

                                    (사이사이에 띄어쓰기로만 표기, 콤마나 마침표를 쓰지 않습니다.) 

 

---

 

 

 

---

 

예를 들면 column-rule:0.5px dotted #eeeeee; 이렇게...

 

아래 속성들은 브라우저에 따라 각각 속성을 주어야 해서.. 추가적으로 적습니다.

 

단을 나누는 위치를 설정할 때는..

break-before : column;

break-after : column;

 

강제로 단이 나뉘지 않도록 하려면,

break-before : avoid-column;

break-after : avoid-column;

 

여러단을 하나로 합치기 (단을 중간에 합칠 수 있습니다.)

column-span : all;         (전체단을 하나로 합치기)

column-span : 1;           (단이 합쳐지지 않음)

 

내용들이 너무 딱딱 붙어있음 안되니까 공백을 넣어주기 속성을 사용하세요.

margin-top : 10px;

margin-bottom : 10px;