다단으로 만들기

CSS

작성일 2026-10-27 최근 수정일 2026-10-27

columns는 하나의 글을 신문처럼 여러 단에 이어 흐르게 하는 CSS 속성입니다. 기본 실습에서는 원하는 단 너비와 단 수를 지정하며, 각 단은 왼쪽 위에서 아래로 읽은 뒤 다음 단으로 이어집니다. 서로 독립적인 카드나 페이지의 본문·사이드바를 배치하려는 경우에는 Grid나 Flex가 더 적합합니다.

단 수와 너비를 정하는 기본 문법

/* 너비는 자동, 단 수 3개 */
.text-a { columns: 3; }

/* 200px을 기준으로 공간에 맞는 단 수 */
.text-b { columns: 200px; }

/* 200px을 기준으로 하되 최대 3단 */
.text-c { columns: 200px 3; }

단 수만 정하면 사용 가능한 폭을 그 수만큼 나눕니다. 너비만 정하면 그 너비와 단 사이 간격을 고려해 들어갈 단 수가 정해집니다. 너비와 개수를 함께 정하면 공간이 부족할 때 단 수가 줄어듭니다. 단 너비는 정확히 고정되는 값이 아니며, 남는 공간을 나누어 실제 단은 더 넓어질 수 있습니다. 컨테이너가 지정 너비보다 좁으면 한 단도 그 컨테이너 폭에 맞게 줄어듭니다.

위 세 문법은 column-count와 column-width를 조합하는 기본 형태입니다. 최신 명세에는 슬래시 뒤에 column-height를 지정하는 확장 문법도 있지만 지원 범위를 따로 확인해야 합니다. 이 글의 예제는 해당 확장을 사용하지 않고 일반적인 너비·개수 제어에 집중합니다.

전체 예제: 넓으면 3단, 좁으면 1단

아래 코드를 columns.html로 저장한 뒤 브라우저에서 엽니다. 외부 파일은 필요하지 않습니다. 창을 넓힌 상태에서 각 문단의 순서를 확인하고, 390px 안팎의 모바일 폭으로 좁혀 같은 내용을 다시 읽어 보세요.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>문장이 이어지는 다단 레이아웃</title>
  <style>
    body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
* { box-sizing: border-box; }
    h1 { font-size: 24px; }
    .article { max-width: 900px; columns: 200px 3;
      column-gap: 24px; column-rule: 1px solid #9db7c8; }
    .article p { margin: 0 0 1em; }
    .note { padding: 12px; border: 1px solid #84b8c0;
      background: #e5f5f4; break-inside: avoid; }
  </style>
</head>
<body>
<h1>폭에 따라 달라지는 단 수</h1>
<article class="article">
  <p><strong>첫 번째 문단.</strong> 다단 레이아웃은 하나의 글을 여러 단으로 이어서 보여 줍니다. 왼쪽 단의 위에서 아래로 읽고, 그다음 오른쪽 단의 위로 이동합니다. 화면의 한 행을 왼쪽에서 오른쪽으로 훑으며 서로 다른 카드를 읽는 배치와는 다릅니다.</p>
  <p><strong>두 번째 문단.</strong> 단 너비를 200px로 정하고 최대 단 수를 3개로 지정했습니다. 공간이 충분하면 세 단이 만들어집니다. 창을 좁히면 단 수가 줄어들고, 남은 단들은 사용 가능한 공간을 나누어 채웁니다.</p>
  <p><strong>세 번째 문단.</strong> 단 사이에는 24px 간격이 있습니다. 가는 구분선은 그 간격 안에 그려집니다. 글자 크기는 그대로 두고 화면 너비만 바꾸어 보면 단 수와 문장이 나뉘는 위치의 관계를 확인하기 쉽습니다.</p>
  <aside class="note">안내 상자는 break-inside: avoid로 가능한 한 한 단 안에 유지합니다. 상자가 들어갈 수 없는 크기라면 분할이나 넘침 조건을 다시 검토해야 합니다.</aside>
  <p><strong>마지막 문단.</strong> 읽는 순서는 HTML의 순서와 같습니다. 고정 높이를 주지 않았으므로 글이 많아지면 필요한 높이도 달라집니다. 긴 글을 읽다가 다음 단으로 가기 위해 다시 위로 스크롤해야 한다면 한 단이 더 편할 수 있습니다.</p>
</article>
</body>
</html>

본문의 최대 폭은 900px이고 단 너비 기준은 200px, 최대 단 수는 3개입니다. 단 사이 간격을 제외한 공간을 나누므로 넓은 창에서는 200px보다 넓은 세 단이 만들어질 수 있습니다. 화면이 좁아질수록 두 단, 한 단이 되며, 모바일에서는 긴 세로 흐름으로 읽게 됩니다. 높이는 지정하지 않아 내용에 맞춰 늘어납니다.

같은 화면 너비에서 columns: 200px 3의 숫자 3만 2로 바꾸면 최대 두 단으로 제한됩니다. 원래 3으로 되돌린 뒤 column-gap만 40px로 바꾸어 단 사이가 넓어지는지 비교하세요. 경계 폭에서는 간격 변경 때문에 들어갈 단 수까지 달라질 수 있습니다. 비교를 마치면 24px로 복원합니다.

간격·구분선·단 나누기 제어하기

column-gap은 단 사이 간격이고 column-rule은 그 사이에 그리는 선입니다. 구분선은 간격 안에 그려지므로 선 너비만큼 별도 열이 추가되지는 않습니다. 본문을 충분히 읽을 수 있는 간격을 먼저 정하고 구분선의 색과 굵기를 조절하세요.

문단이나 그림·설명이 단 중간에서 갈라지는 것이 부적절하면 해당 묶음에 break-inside: avoid를 적용할 수 있습니다. 예제의 안내 상자가 그 대상입니다. 이는 분할 회피 요청이며, 요소가 한 단보다 큰 경우까지 무조건 한 덩어리로 들어간다는 보장은 아닙니다. 너무 큰 이미지·긴 URL·고정 폭 코드가 있다면 요소 자체의 크기나 줄바꿈도 조절해야 합니다.

.article h2 {
  column-span: all;
}
.article figure {
  break-inside: avoid;
}
.article .new-column {
  break-before: column;
}

column-span: all은 제목처럼 모든 단을 가로지르게 할 요소에 사용합니다. break-before: column은 해당 요소 앞에서 새 단을 시작하도록 강제합니다. 위 코드는 선택적으로 추가하는 규칙이며, 전체 예제에 h2나 figure를 넣지 않았다면 그 규칙만 추가해도 보이는 변화는 없습니다.

읽기 어려운 다단을 피하는 기준

짧은 단을 만들기 위해 컨테이너 높이를 고정하면 내용이 옆으로 더 이어지거나 넘칠 수 있습니다. 페이지 본문에서는 우선 높이를 자동으로 두고, 모바일에서 전체 페이지에 가로 스크롤이 생기지 않는지 확인하세요. 기본적으로 단을 균형 있게 채우려 하지만 글의 분할 위치와 요소 크기에 따라 단 끝 높이가 완전히 같지는 않을 수 있습니다.

다단은 하나의 문서가 이어지는 구조입니다. 카드별 높이를 독립적으로 맞추거나 가로 방향으로 항목 순서를 읽게 하려면 Grid·Flex를 검토하세요. 긴 본문을 다단으로 만들 때는 다음 단의 시작으로 돌아가는 스크롤 부담, 글자 크기와 줄 길이도 함께 판단해야 합니다.

구문은 MDN columns 문서, 내용의 분할 제어는 다단 레이아웃의 내용 나누기 설명에서 확인할 수 있습니다.

CSS