다단 나열: 다단으로 나열된 텍스트를 디자인

CSS의 다단 레이아웃(Column Layout) 기능을 사용하면 텍스트나 기타 콘텐츠를 신문이나 잡지처럼 여러 열로 나눠서 표시할 수 있습니다. 이 기능은 긴 텍스트 콘텐츠를 더 읽기 쉽고 시각적으로 매력적인 방식으로 나타내는 데 유용합니다. 다단 레이아웃의 주요 속성과 사용 방법을 상세하게 설명드리겠습니다.

CSS 다단 레이아웃 기본 속성

1. column-count (열의 개수):
   • column-count: 콘텐츠를 나눌 열의 수를 지정합니다.
   • 예: column-count: 3;는 콘텐츠를 세 개의 열로 나눕니다.
2. column-width (열의 너비):
   • column-width: 각 열의 최적 너비를 설정합니다. 열의 수가 유동적으로 조정될 수 있습니다.
   • 예: column-width: 200px;는 각 열의 너비를 200픽셀로 설정합니다.
3. column-gap (열 사이 간격):
   • column-gap: 열 사이의 간격을 지정합니다.
   • 예: column-gap: 20px;는 열 사이의 간격을 20픽셀로 설정합니다.
4. column-rule (열 사이의 구분선):
   • column-rule: 열 사이에 선을 그어 구분합니다. 스타일, 두께, 색상을 지정할 수 있습니다.
   • 예: column-rule: 1px solid black;는 열 사이에 검은색 실선을 추가합니다.
5. column-span (열 걸쳐지기):
   • column-span: 특정 요소가 여러 열에 걸쳐 표시되도록 합니다. 주로 제목이나 중요한 콘텐츠에 사용됩니다.
   • 예: h2 { column-span: all; }는 h2 제목이 모든 열에 걸쳐 표시되도록 합니다.
6. break-inside (열 내부에서의 페이지 나누기 방지):
   • break-inside: 열 내부에서 요소가 나뉘지 않도록 설정합니다. 예를 들어, 단락이 중간에서 나뉘는 것을 방지할 수 있습니다.
   • 예: p { break-inside: avoid; }는 단락이 열 사이에서 나뉘는 것을 방지합니다.

CSS 다단 레이아웃 사용 예시

HTML:

 

<div class="multi-column">
  <h2>제목</h2>
  <p>여기에 긴 텍스트 콘텐츠가 들어갑니다...</p>
</div>

 

 

CSS:

 

.multi-column {
  column-count: 2;
  column-gap: 15px;
  column-rule: 1px solid #ccc;
}

.multi-column h2 {
  column-span: all;
}

.multi-column p {
  break-inside: avoid;
}