6XC

CSS 다단 레이아웃 생성기

열 개수, 간격, 구분선을 신문처럼 다단으로 배치하고 실시간 미리보기와 CSS 코드로 확인하세요.

조회수 786회

다단 레이아웃은 긴 텍스트를 신문 지면처럼 나란히 흘려보냅니다. 개수와 간격을 바꾸면 이 예시 텍스트가 즉시 다시 배치됩니다. 구분선을 켜면 단 사이에 얇은 선이 그려집니다. 긴 글에서는 한 줄의 길이가 짧아져 읽기가 더 편해집니다. 다단 레이아웃은 긴 텍스트를 신문 지면처럼 나란히 흘려보냅니다. 개수와 간격을 바꾸면 이 예시 텍스트가 즉시 다시 배치됩니다. 구분선을 켜면 단 사이에 얇은 선이 그려집니다. 긴 글에서는 한 줄의 길이가 짧아져 읽기가 더 편해집니다.

CSS 다단 레이아웃이란

column-count는 블록의 내용을 신문처럼 동일한 폭의 여러 단으로 나누고, column-gap은 단 사이 간격을, column-rule은 구분선을 그립니다(border와 같은 문법입니다). 텍스트는 한 단에서 다음 단으로 자동으로 흘러가며, 긴 기사, 푸터, 색인 목록에 이상적입니다. 단 사이에서 나뉘면 안 되는 요소에는 break-inside: avoid를 지정하세요.

자주 묻는 질문

column-count와 column-width 중 무엇을 써야 하나요?

column-count는 단의 개수를 고정합니다. column-width는 최소 그 너비를 유지하면서 브라우저가 최대한 많은 단을 배치하도록 합니다 — 반응형 레이아웃에 더 적합합니다. 둘을 함께 지정할 수도 있습니다.

요소가 단 사이에서 나뉘지 않게 하려면?

break-inside: avoid;를 지정하세요 — 카드, 캡션이 있는 이미지, 목록 항목에 유용합니다.

비슷한 도구

CSS 그라데이션 생성기 실시간 미리보기로 선형, 방사형, 원뿔형 CSS 그라데이션을 디자인하고 코드를 복사하세요. 생성하기 CSS 박스 그림자 생성기 오프셋, 흐림 정도, 퍼짐, 색상, 불투명도, 안쪽 그림자(inset)를 시각적으로 조정하며 실시간 미리보기로 그림자를 디자인하세요. 생성하기 CSS 모서리 둥글기 생성기 각 모서리를 개별적으로 또는 한 번에 px나 %로 둥글리고, 실시간 미리보기와 복사 가능한 CSS를 확인하세요. 생성하기 CSS 텍스트 그림자 생성기 오프셋, 흐림, 색상, 불투명도를 조정해 text-shadow를 디자인하고 샘플 텍스트로 실시간 미리보기를 확인하세요. 생성하기