CSS - 다단 스타일 지정

속 성	설 명
column-width	단의 최소 너비 값을 설정. <크기> | auto 중 하나. 브라우저 창의 너비와 관계없이 유지해야 할 단의 너비 값. 단은 자동으로 나뉘어 지고, 단의 너비가 고정이 됨.
column-count	단의 개수를 지정. <개수> | auto 중 하나. 브라우저 창의 너비와 관계없이 단의 개수를 일정하게 보여줘야 할 개수. 단의 개수는 고정이 됨.
column-gap	단과 단 사이의 간격을 지정. <크기> | normal 중 하나
column-rule	단과 단 사이의 여백을 스타일로 지정 column-rule-color: 단 사이의 색상을 지정 column-rule-style: 단 사이의 선 스타일을 지정.   Ex.) solid, dotted …: column-rule-width: 단 사이의 선 크기를 지정. column-rule: 색상, 스타일, 크기를 한꺼번에 지정.   <너비> <스타일> <색상>으로 지정. Ex.) column-rule: 20px solid #EFEFEF;
column-span	단을 하나로 합침. none | all 중 하나
columns	단의 개수와 단의 너비 값을 설정. <크기> <개수> | auto 중 하나 column-width 와 column-count 를 columns 하나로 설정함. Ex.) columns: 100px 3; /* 단의 크기 100px 단의 수 3 */

column-width 속성

단의 너비를 80px로 고정하였습니다.

<style>
.hh1 {
  border: 1px solid;
  width: 100%;
  column-width: 80px;
}
</style>

<div class="hh1">
  하보니 PHP 하보니 PHP 하보니 PHP 하보니 PHP 하보니 PHP 하보니 PHP
</div>

하보니 PHP 하보니 PHP 하보니 PHP 하보니 PHP 하보니 PHP 하보니 PHP

column-count 속성

<style> 
.hh1 { 
  border:1px solid;
  width:300px;
  column-count: 3;
}
</style>

<div class="hh1">
하보니 PHP 하보니 PHP 하보니 PHP 하보니 PHP 하보니 PHP 하보니 PHP
</div>

하보니 PHP 하보니 PHP 하보니 PHP 하보니 PHP 하보니 PHP 하보니 PHP 하보니 PHP 하보니 PHP

column-rule 속성

단을 2개로 하고 단 사이의 색상을 빨간색으로 하였습니다.

<style>
.hh1 {
  border:1px solid;
  width:100%;
  column-rule: 2px dotted red;
  column-count: 2;
}
</style>

<div class="hh1">
하보니 PHP 하보니 PHP 하보니 PHP 하보니 PHP 하보니 PHP 하보니 PHP
</div>

하보니 PHP 하보니 PHP 하보니 PHP 하보니 PHP 하보니 PHP 하보니 PHP