다단 구성하기

<Do it! HTML5+CSS3>을 기본으로 배운 내용입니다.

 

목차

• 1) 단의 너비 고정하고 다단 구성 - column-width
• 2) 단의 개수 고정하고 다단 구성 - column-count
• 3) 단과 단 사이 여백 지정 - column-gap

 

다단 구성하기

• column과 관련된 여러 속성으로 다단으로 편집할 수 있다.
• 다만, 다단 관련 속성은 브라우저별 접두사를 붙여 사용해야 한다.
• 한 화면을 여러 단으로 구성할 때, 단의 너비를 고정하거나 단의 개수를 고정해 화면을 분할할 수 있다.

 

1) 단의 너비 고정하고 다단 구성 - column-width

선택자 { column-width: 크기 | auto }

속성 값	설명
크기	단 너비를 직접 지정한다.
auto	단의 개수(column-count) 같은 다른 속성에 따라 단의 너비가 자동으로 계산된다.

 

 

2) 단의 개수 고정하고 다단 구성 - column-count

단의 개수를 고정해 놓고 다단을 구성하면 브라우저 창의 너비와 상관없이 단의 개수를 항상 일정하게 유지해야 하기 떄문에 창의 너비가 커지면 단의 너비도 커진다.

선택자 { column-count: 숫자 | auto }

속성 값	설명
숫자	단의 개수를 지정한다.
auto	단의 너비(column-width) 같은 다른 속성에 따라 단의 개수가 자동으로 계산된다.

 

 

3) 단과 단 사이 여백 지정 - column-gap

선택자 { column-gap: 크기 | normal }

속성 값	설명
크기	단과 단 사이의 여백을 숫자로 지정한다.
normal	여백을 자동으로 지정한다. W3C에서 권장하는 여백은 1em이다.