단 수나 너비, 간격, 구분선을 정하고 미리보기 상자를 끌어 단 배치를 확인한 뒤 CSS를 복사하세요.
한 주는 늘 같은 모습으로 시작됩니다. 작은 약속으로 가득한 달력, 밤새 쌓인 받은편지함, 언제 적었는지 기억나지 않는 할 일 목록까지요. 더 많이 하는 것이 아니라 첫 한 시간을 어디에 쓸지 정하는 일이 먼저입니다.
신문은 이백 년 전에 긴 줄 문제를 풀었습니다. 줄이 짧을수록 눈이 편해서 글을 좁은 단으로 나누고, 독자는 한 단을 끝까지 읽은 뒤에 다음 단으로 넘어갑니다.
웹에서는 브라우저가 글을 나눕니다. 단마다 끝나는 높이가 비슷해지도록 글을 고르게 배분하므로 카드나 기사를 별도 감싸는 요소 없이도 단정하게 유지할 수 있습니다.
간격이 좁을 때는 단 사이의 가는 구분선이 경계를 또렷하게 해 주고, 간격이 넉넉하면 여백만으로도 같은 역할을 합니다. 둘 다 해 보고 가장 좁은 레이아웃에서 잘 읽히는 쪽을 고르세요.
760px
.columns {
column-count: 3;
column-gap: 32px;
column-rule: 1px solid #8a8f9c;
}
.columns h2 {
column-span: all;
}CSS 다단 레이아웃 생성기는 글을 여러 단으로 나누는 선언, 곧 column-count(또는 column-width), column-gap, column-rule을 만들어 줍니다. 1에서 6까지의 단 수를 고정하거나 이상적인 단 너비를 기준으로 삼을 수 있고, 간격은 px이나 rem, 구분선은 굵기·스타일·색을 따로 정합니다. 미리보기는 끌어서 넓히고 좁힐 수 있는 상자 안에 기사를 흘려 보여 줍니다.
긴 글 한 덩어리를 신문이나 참고 자료처럼 읽히게 하고 싶을 때 다단 레이아웃이 맞습니다. 한 단의 끝에서 다음 단의 맨 위로 글이 이어집니다. 이용약관, 용어집, 릴리스 노트, 짧은 목록에는 잘 맞고 카드 그리드에는 맞지 않습니다. 카드는 CSS Grid가 행 단위로 배치합니다.
입력한 값은 브라우저 안에서 처리되며 업로드되지 않습니다. 출력은 .columns 클래스 규칙 블록이고, 제목을 모든 단에 걸치게 하는 .columns h2 규칙을 선택적으로 덧붙입니다. 그대로 붙여 넣거나 선언만 직접 만든 컨테이너 규칙으로 옮기면 됩니다.
단 수 고정을 고르고 1에서 6 사이 정수를 입력하거나, 단 너비 기준을 고르고 px이나 rem으로 너비를 입력합니다. 너비 기준이면 브라우저가 그 너비 이상의 단을 상자에 들어가는 만큼 만듭니다.
단 사이 간격을 px(0~120)이나 rem(0~7.5)으로 입력합니다. 본문 글에는 보통 24~48px 정도가 읽기 편합니다.
선 스타일(없음, 실선, 파선, 점선, 이중선)을 고르고, 굵기를 0~20px로 정한 뒤 색을 고릅니다. 이중선은 3px보다 얇으면 브라우저에서 실선으로 보이므로, 미리보기와 복사 결과에는 3px로 적용됩니다. 제목 스위치를 켜면 기사 제목에 column-span: all 규칙이 추가됩니다.
미리보기 상자의 오른쪽 가장자리를 끌어(또는 초점을 두고 방향키로) 너비를 바꿔 보세요. 현재 너비의 단 수 카드가 그 너비에 들어가는 단 수를 보여 줍니다. 단이 너무 좁아 보이면 단 수나 간격을 줄입니다.
블록을 복사해 스타일시트에 붙여 넣거나, 선언만 글을 감싸는 요소의 규칙으로 옮깁니다.
CSS Multi-column Layout Module Level 1은 블록의 내용을 단으로 나누는 방법을 정의합니다. column-count는 단 수를 고정하고, 브라우저는 사용 가능한 너비에서 간격을 뺀 만큼을 단들에 나누어 줍니다. 반대로 column-width는 이상적인 최소 너비를 정하고 단 수는 브라우저가 계산하게 합니다. column-gap은 단 사이 간격이며 기본값 normal은 1em입니다.
column-rule은 굵기, 스타일, 색을 한 번에 지정하는 단축 속성이고, 인접한 두 단 사이 간격의 한가운데에 그려집니다. 선은 자리를 차지하지 않으므로 굵기를 바꿔도 글이 밀리지 않습니다. 간격이 선 굵기보다 작으면 선이 글자와 겹칩니다.
.columns {
column-count: 3;
column-gap: 32px;
column-rule: 2px solid #1746d1;
}아래 범위를 벗어나는 값은 입력칸에 오류로 표시합니다. 색은 항상 6자리 hex로 출력하며, 색 입력칸은 #fff를 #ffffff로 펼치고 blue 같은 색 이름은 무시합니다. 굵기가 0이거나 스타일이 none인 구분선은 0px none을 찍지 않고 출력에서 빠집니다. 간격과 너비는 소수 둘째 자리, 선 굵기는 소수 첫째 자리로 반올림됩니다.
| 옵션 | 허용 값 | 단위 |
|---|---|---|
| column-count | 1~6 정수 | 없음 |
| column-width | 40~1000px 또는 2.5~62.5rem | px 또는 rem |
| column-gap | 0~120px 또는 0~7.5rem | px 또는 rem |
| column-rule 굵기 | 0~20 | px |
| column-rule 스타일 | none, solid, dashed, dotted, double | 키워드 |
| column-rule 색 | #rrggbb | hex |
기본값인 column-fill: balance는 단의 높이를 고르게 맞춰서 마지막 단이 거의 비지 않게 합니다. 컨테이너 높이를 고정하고 column-fill: auto를 주면 한 단을 높이만큼 채운 뒤 다음 단으로 넘어갑니다.
그림이나 카드가 두 단에 걸쳐 쪼개지지 않게 하려면 break-inside: avoid를, 제목을 모든 단에 걸쳐 펼치려면 column-span: all을 씁니다. 제목 스위치가 column-span 규칙을 써 주고, break-inside와 column-fill은 출력에 포함되지 않으니 직접 추가하세요.
단 수 고정 3, 간격 32px, 선 2px 실선 #1746d1.columns {
column-count: 3;
column-gap: 32px;
column-rule: 2px solid #1746d1;
}생성기 자체 단위 테스트와 같은 값을 클래스 블록으로 감쌌습니다.
단 너비 14rem, 간격 1.5rem, 선 1px 실선 #8a8f9c, 제목 모든 단에 걸치기.columns {
column-width: 14rem;
column-gap: 1.5rem;
column-rule: 1px solid #8a8f9c;
}
.columns h2 {
column-span: all;
}상자가 760px(글 영역 720px)이면 14rem 이상인 단이 3개 들어가고, 1200px이면 4개가 들어갑니다.
단 수 고정 2, 간격 48px, 선 1px 파선 #888888.columns {
column-count: 2;
column-gap: 48px;
column-rule: 1px dashed #888888;
}단 수 고정 1, 간격 0px, 선 스타일 없음.columns {
column-count: 1;
column-gap: 0px;
}유효한 값이지만 일반 흐름과 같습니다. 스타일이 none이거나 굵기가 0인 구분선은 출력에서 빠집니다.
간격 8rem입력칸 아래 오류: 0에서 7.5rem 사이의 간격을 입력해 주세요.값을 고치기 전까지 결과는 마지막으로 유효했던 CSS를 흐리게 보여 줍니다. 단 수 7도 같은 방식으로 표시됩니다.
column-count만 쓰면 화면 너비와 상관없이 항상 그 수만큼 단이 생겨서, 좁은 휴대폰에서는 3단이 읽기 힘들 만큼 가늘어집니다. 선언을 미디어 쿼리로 감싸 작은 화면에서는 1단으로 줄이세요.
굵기와 색을 정해도 스타일이 none이면 아무것도 그려지지 않습니다. 실선, 파선, 점선, 이중선 중 하나를 고르세요.
선 굵기는 간격에 더해지지 않습니다. 간격이 2px인데 선이 4px이면 선이 양쪽 글자 위에 겹쳐 그려집니다.
한 단이 화면보다 길면 독자는 아래로 스크롤했다가 다음 단을 읽으러 다시 위로 올라가야 합니다. 다단 블록은 짧게 유지하거나 넓은 화면에서만 쓰세요.
다단은 위에서 아래로 채워서 카드가 소스 순서와 다르게 놓입니다. 순서가 중요하면 Grid나 Flexbox를 쓰세요.
글이 든 컨테이너에 column-count: 3;을 주면 브라우저가 같은 너비의 세 단으로 글을 흘려 보냅니다. 간격은 column-gap, 구분선은 column-rule로 정하며, 이 생성기가 바로 그 세 선언을 만듭니다.
column-count는 원하는 단 수를, column-width는 이상적인 단 너비를 정하고 몇 단이 들어갈지는 브라우저가 정합니다. 이 도구는 둘 중 하나를 만들어 줍니다. 단 수를 예측 가능하게 하려면 단 수 고정을, 좁은 화면에서 단이 알아서 줄어들게 하려면 단 너비 기준을 고르세요.
1에서 6까지의 정수입니다. 그보다 많거나 소수이면 거부합니다. 단이 여섯 개를 넘으면 대부분의 레이아웃에서 한 줄이 너무 짧아 읽기 어렵기 때문입니다.
네. 색 입력칸이 #ffffff로 펼쳐 줍니다. 출력에는 항상 6자리 형식을 쓰기 때문입니다. blue 같은 색 이름은 받지 않으니 색상 선택기나 hex 값을 쓰세요.
아니요. 선은 간격의 가운데에 그려질 뿐 단 너비를 바꾸지 않습니다. 선이 글자에 닿지 않게 간격을 선 굵기보다 크게 두세요.
해당 요소에 break-inside: avoid를 주거나, 제목을 모든 단에 걸치게 하려면 column-span: all을 쓰세요. 이 도구의 제목 스위치가 column-span 규칙을 써 주고 break-inside는 출력에 포함되지 않습니다.
마지막 업데이트: