[CSS3] 다단(페이지 나누기) 설정
-
관리자 /
2011.12.07 01:47 /
hit 4,629 추천
0
워드프로세서에서만 가능했던 다단(페이지 나누기)이 CSS3로 표현이 가능합니다.
Safari, Chrome, Firefox에서만 임시로 지원합니다. 이 속성을 사용하려면 속성 앞에다가 브라우저의 특성을 꼭 입력해야 합니다. 브라우저의 특성을 입력하는 방법을 모르신다면 CSS3 가이드북 페이지의 위에 있는 브라우저의 특성 링크를 클릭하세요.
.example-div {
width: 728px;
height: 120px;
color: #696969;
font: 14px 'Myriad Pro';
background: #FFF;
padding: 15px;
border: 1px dashed #CCC;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-moz-column-count: 3;
-moz-column-gap: 10px;
}height: 120px;
color: #696969;
font: 14px 'Myriad Pro';
background: #FFF;
padding: 15px;
border: 1px dashed #CCC;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-moz-column-count: 3;
-moz-column-gap: 10px;
column-count 속성을 사용하면 해당 값만큼 단(페이지)을 나눌 수 있습니다. column-gap 속성은 단과 단 사이의 간격을 지정할 때 사용합니다. 입력하지 않으면 단과 단 사이의 간격은 기본값으로 설정됩니다. column-width 속성은 단의 너비를 지정할 수 있습니다. 그러나 column-gap 속성을 사용할 경우 column-width 속성까지 사용할 필요는 없습니다.