📰 멀티컬럼 CSS 생성기 | 단 수·간격 골라 복사

단 지정 방식

단 수 (column-count)

단

단 최소 너비 (column-width)

컨테이너 폭 (단 너비 계산용)

단 사이 간격 (column-gap)

구분선 종류 (column-rule-style)

구분선 두께

구분선 색 (HEX)

단 채움 방식 (column-fill)

제목을 전체 폭으로 (column-span)

미리보기

멀티컬럼은 글이 한 단을 다 채우면 다음 단으로 흐르는 방식입니다. 단 수와 간격을 바꾸면 글이 다시 흐릅니다.

신문 지면처럼 읽는 흐름이 위에서 아래로 내려간 뒤 오른쪽 단으로 넘어갑니다.

단 안의 요소에는 break-inside 속성으로 잘림을 막을 수 있습니다.

붙여 쓸 CSS

단 수를 고정할지 너비를 고정할지

멀티컬럼은 글이 한 단을 채우면 다음 단으로 흐르는 레이아웃입니다. 단 수를 고정하는 column-count 와 단의 최소 너비를 고정하는 column-width 중 하나를 고르고, 간격과 구분선, 채움 방식을 지정하면 그대로 붙여 쓸 CSS가 만들어집니다. 컨테이너 폭을 넣으면 그 폭에서 단 하나가 실제로 몇 px 이 되는지도 함께 나옵니다.

단 너비는 컨테이너 폭에서 간격의 합을 뺀 뒤 단 수로 나눠 구합니다. column-width 방식에서는 W3C CSS Multi-column Layout 규격의 계산 순서에 따라 들어갈 수 있는 단 수를 먼저 구한 뒤 같은 식으로 너비를 냅니다. 구분선은 간격 안쪽에 그려져 폭을 따로 차지하지 않습니다. 2026년 10월 기준 표기입니다.

실제 브라우저는 글꼴과 여백, 안쪽 요소의 최소 폭에 따라 결과가 조금 달라질 수 있어 이 값은 계산상의 기준입니다. 단 안의 요소가 잘리는 문제를 다루는 break-inside 선언이나 그리드·플렉스 레이아웃은 지원하지 않습니다.

자주 묻는 질문

column-count 와 column-width 는 어떻게 다른가요?

column-count 는 단 수를 고정하고 너비를 폭에 맞춰 늘립니다. column-width 는 단의 최소 너비를 정해 두고 들어갈 수 있는 만큼 단 수를 늘리므로 화면이 좁아지면 단이 줄어듭니다.

단 너비는 어떻게 계산한 값인가요?

컨테이너 폭에서 단 사이 간격의 합을 빼고 단 수로 나눕니다. 구분선은 간격 안에 그려지므로 너비를 따로 차지하지 않습니다.

제목만 단을 가로질러 놓을 수 있나요?

가능합니다. 전체 폭 제목 옵션을 켜면 제목 요소에 column-span 선언을 따로 붙여, 제목이 모든 단을 가로지르고 본문만 단으로 나뉩니다.

📰CSS 다단 멀티컬럼 레이아웃 코드 생성기

관련된 도구

CSS 다중 배경 레이어 코드 생성기

CSS conic-gradient 코드 생성기

단 수를 고정할지 너비를 고정할지

자주 묻는 질문

관련된 도구

CSS 다중 배경 레이어 코드 생성기

CSS conic-gradient 코드 생성기

단 수를 고정할지 너비를 고정할지

자주 묻는 질문

같은 카테고리 도구