[생활코딩] Multi Column

---

  [ Multi Column이란? ]  

 

신문과 같이 화면에 크기가 큰 매체에서 사용하는 레이아웃 기법입니다.

 

만약 저 많은 텍스트를 한 줄로 늘여 쓴다면 이 글을 읽는 것이 상당히 불편해집니다!

그래서 컬럼(열)을 나눠서, 조각조각으로 만들어서 읽기 편하도록 만드는 기법을 Multi Column이라고 합니다.

 

이렇게 많은글자가 한 줄로 나열되어 있다면 사용자가 읽기에 매우 불편합니다!

 

  [ Multi Column 속성 ]  

 

column-count => 화면을 분할해준다.

text-align : justify => 글자 양옆을 가지런하게 해 준다.

 

column-width => 칼럼의 폭을 지정 해준다. + 화면이 작아지거나 커지면 알아서 단을 줄이고, 늘려준다.

column-gap => 컬럼의 간격을 설정해준다.

 

column-rule-style : solid => 칼럼 사이에 단선이 생긴다.

+ column-rule-width => 선의 넓이를 조절해준다.

+ column-rule-color => 선의 색상을 설정해준다.

 

  [ column-count와 column-width를 같이 사용하게 될 경우 ]  

 

칼럼을 4개 이하로 유지 합니다. 아무리 화면이 커져도 4개를 초과 하지 않습니다.

 

  [ 컬럼을 뛰어넘고 싶을 때 ]  

 

해당 대상에 column-span : all;을 부여할 경우 칼럼에 구애받지 않고 자신의 위치를 찾아갑니다!