❗multi-column❗

개념

multi-column 속성은 텍스트를 여러 개의 열로 나누어 레이아웃을 구성할 수 있게 해준다.

기본속성

1. column-count: 텍스트를 몇 개의 열로 나눌지를 지정합니다

.multi-column {
  column-count: 3; /* 3개의 열로 나누기 */
}

2. column-width: 각 열의 너비를 지정합니다. 이 속성은 열 수를 자동으로 조정할 수 있다.

.multi-column {
  column-width: 200px; /* 각 열의 너비를 200px로 설정 */
}

3. column-gap: 열 사이의 간격을 지정한다.

.multi-column {
  column-gap: 20px; /* 열 사이의 간격을 20px로 설정 */
}

4. column-rule: 열 사이에 선을 추가합니다.

.multi-column {
  column-rule: 1px solid #000; /* 열 사이에 1px 두께의 검은색 선 추가 */
}

주의사항

• 최신 브라우저에서 지원하지만, 특정 구버전에서는 지원되지 않을 수 있다.
• 블록 레벨 요소에 적용할 수 있다.

사용예시

-html-
<div class="multi-column">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

-css-
.multi-column {
  column-count: 3; /* 3열 */
  column-gap: 20px; /* 20px 간격 */
  column-rule: 1px solid #ccc; /* 열 사이에 경계선 추가 */
}