다단 (Multi Columns)

일반 블록 레이아웃을 확장하여 여러 텍스트 다단으로 쉽게 정리하며, 가독성 확보

 

 

columns

다단을 정의

값	의미	기본값
auto	브라우저가 단의 너비와 개수를 설정	auto
column-width	단의 최적 너비를 설정	auto
column-count	단의 개수를 설정	auto

columns : 너비 개수;

.text{
	columns: 100px 2;
 }

 

 

column-width

단의 최적 너비를 설정

값	의미	기본값
auto	브라우저가 단의 너비를 설정	auto
단위	px, em, cm 등 단위로 지정

column-width: 너비;

각 단이 줄어들 수 있는 최적 너비(최소 너비)를 설정하며,
요소의 너비가 가변하여 하나의 단이 최적 너비보다 줄어들 경우 단의 개수가 조정된다.

 

 

 

column-count

단의 개수를 설정

값	의미	기본값
auto	브라우저가 단의 개수를 설정	auto
숫자	단의 개수를 설정

 

 

사용방법

1. column-width, column-count를 나눠서 사용하기

p{
  column-width: 200px;
  column-count: 3;
}

 

2. columns로 한꺼번에 사용하기

p{
  columns: 200px 3;
}

 

 

 

column-gap

단과 단 사이의 간격 설정

값	의미	기본값
normal	브라우저가 단과 단 사이의 간격을 설정(1em)	normal
단위	px, em, cm 등 단위로 지정

column-gap: 간격;

 

 

 

column-rule

단과 단 사이의 (구분)선을 지정

값	의미	기본값
column-width	선의 두께를 지정	medium
column-style	선의 종류를 지정	none
column-color	선의 색상을 지정	요소의 글자색과 동일

column-rule: 두께 종류 색상;

구분선(column-rule)은 단과 단 사이의 간격 중간에 위치한다.

 

 

 

소스코드 해석

p{
  color: blue;
  text-align: justify;
  columns: 200px 3;
  column-gap: 30px;
  column-rule: 2px dashed red;
}

color: blue만 사용한다면 column-rule 에게도 색깔이 영향이 가기 때문에, column-rule에서 색깔을 지정해 줘야 한다. 그래서 만약 글자색깔과 column-rule의 색깔을 같게 하고싶으면 red를 생략해도 된다.

text-align: justify는 글자간격을 좌우로 맞춘다는 뜻이고

columns: 200px 3은 글자너비를 200px씩 3칸으로 나눈다는 뜻이고

column-gap: 30px은 column-rule과 글자 사이의 간격을 30px로 한다는 뜻이고

column-rule은 column-rule을 2px 두께로 dashed에 red색상을 한다는 뜻이다.