Multi-Columns
텍스트 단을 column 속성으로 다단(Multi-Columns)으로 편집할 수 있습니다.
다단으로 편집한다는 의미는 어떤 레이아웃을 여러 개의 컬럼으로 쪼개서 구성한다는 것을 의미합니다.
보통 다단으로 편집하려면 table 요소를 사용하여 구성하기도 하지만 css의 column 속성으로 간편하게 구현할 수 있습니다.
그렇다면 다단을 다루는 여러가지 속성들에 대하여 알아봅시다.
column-width
column-width를 통해 column으로 표현되는 단의 너비를 고정해 놓고 구성할 수 있습니다.
즉, 단을 고정시켜 놓았을 경우 화면이 커지면 단의 개수가 많아질 것이고 화면이 작아지면 단의 개수가 줄어드는 원리입니다.
주의할 점은 지정된 값으로만 단의 너비가 고정이 되는 것이 아니며 지정된 값을 브라우저가 판단하여 단을 이루기에 최적의 값인 경우에만 지정된 너비로 단의 너비의 설정이 이루어집니다.
column-width: 300px;
column-width: auto;column-count
column-count속성으로 단의 개수를 고정할 수 있습니다. 만일 개수를 고정할 경우 화면이 커지면 단의 넓이가 커지게 되고 화면이 작아지면 단의 넓이가 작아지게 됩니다.
하지만 column-width 값에 의해 브라우저가 최적의 단의 너비를 지정하며 그 너비로 단을 표현할 수 있다면 단의 개수 역시 column-count지정 값과 다르게 조정될 수 있다.
/* 지정 값에 따라 다단을 다룬다 */
/* 다단 개념의 기본값은 1이며 1개의 단을 다룬다 */
column-count: 1;
column-count: 2;
column-count: 3;columns
위의 column-width와 column-count의 단축 속성으로 width, count 순으로 값을 입력한다.
columns: 300px 3;column-rule
단과 단 사이의 선을 설정할 수 있는 단축 속성으로 순서대로 width, style, color에 해당한다.
/* column-rule: 4px solid red; */
column-rule-width: 4px;
column-rule-style: solid;
column-rule-color: red;column-gap
단과 단 사이의 여백을 지정하는 속성입니다. 단과 단 사이에 구분 선을 넣는다면 구분선은 지정 여백 공간의 가운데에 위치하게 됩니다.
column-gap: 40px;실습
참고자료
