[CSS] Multi column

1. Multi column이란?

: 아래와 같이 신문같은 자료에서 글이 많은 경우 column(열)을 여러개로 나누어서 글을 읽기 쉽게 하는 것이 바로 Multi-column이다.

2. column 속성들

column-count

• 입력된 숫자에 따라서 열을 나눈다.

column-count: 2;

 

column-width

• 입력된 숫자의 넓이 만큼 열을 나눈다. 
• 브라우저의 크기가 줄어들면 숫자의 넓이를 유지하기 위해서 단의 개수가 조절된다.

column-width: 200px;

 

💡column-count와 column-width의 관계💡

column-count와 column-width을 같이 사용하면 column-count에 주어진 값 이상의 단락이 생기지 않는다. 다만 브라우저 크기가 줄어들면 단락의 개수는 줄어든다.

 

 

column-gap

• 단락끼리의 간격을 조절할 수 있는 속성이다. 

100px / 10px

 

 

column-rule-style

• 단락 사이에 선을 생성해주는 속성이다. 
• solid, dotted, dashed 등등을 적용할 수 있다.

solid

column-rule-width

• 단락 사이의 선의 굵기를 조절해주는 속성이다.

10px

 

column-rule-color

• 단락 사이의 선의 색상을 조절해주는 속성이다.

 

column-span

• 해당 속성을 작성한 태그는 단락에 포함되지 않는다. 

h1{
	column-span: all;
}