CSS 다단 레이아웃 모듈 레벨 2

1. 소개

(이 절은 비규범적입니다.)

이 모듈은 CSS에서의 다단 레이아웃을 설명합니다. 본 문서에서 설명하는 기능을 사용하여, 스타일시트는 요소의 콘텐츠가 여러 단에 걸쳐 배치되도록 선언할 수 있습니다.

CSS의 다른 레이아웃 방식들은 부모 요소에 적용될 때, 직접 자식들의 display 속성을 변경합니다. 예를 들어 3단 그리드 레이아웃이 만들어지면, 그리드 컨테이너의 직접 자식들은 그리드 아이템이 되어 각 셀에 한 요소씩 들어가고, 필요에 따라 추가 행이 생성됩니다.

그러나 다단 컨테이너의 자식 요소들은 일반적인 플로우를 유지하며, 그 플로우가 여러 개의 단으로 배치됩니다. 이 단들은 인라인 크기가 유동적이어서, 사용 가능한 공간에 따라 단의 크기나 개수가 바뀝니다.

다단 레이아웃은 CSS에서 쉽게 설명할 수 있습니다. 다음은 간단한 예제입니다:

body { column-width: 12em }

단의 개수도 스타일시트에서 명시적으로 지정할 수 있습니다:

body { column-count: 2 }

축약형 columns 속성을 사용하면 한 번의 선언으로 두 속성 중 하나 또는 모두를 설정할 수 있습니다.

body { columns: 2 }
body { columns: 12em }
body { columns: 2 12em }

이 모듈에서 도입된 또 다른 속성 그룹은 단 사이의 간격과 구분선을 설명합니다.

body {
  column-gap: 1em;
  column-rule: thin solid black;
}

column-rule 속성의 값은 CSS의 border 속성과 유사합니다. border와 마찬가지로, column-rule도 축약형 속성입니다.

body {
  column-gap: 1em;
  column-rule-width: thin;
  column-rule-style: solid;
  column-rule-color: black;
}

column-fill과 column-span 속성은 다단 레이아웃에서 스타일시트가 더 다양한 시각적 표현을 할 수 있게 해줍니다.

div { column-fill: balance }
h2 { column-span: all }

이 명세서에서는 위 예시에서 모두 사용된 10개의 새로운 속성을 도입합니다.

모든 단 관련 속성이 초기값을 가질 경우, 해당 요소의 레이아웃은 단이 하나뿐인 다단 레이아웃과 동일하게 동작합니다.

단 간격(사선 해칭)과 구분선은 아래 다단 컨테이너 샘플 렌더링에서 볼 수 있습니다 (패딩은 교차 해칭으로 표시). 해칭 영역은 설명 목적으로만 표시되었습니다. 실제 구현에서는 이러한 영역이 배경에 의해 결정되며, 두 번째 이미지는 다단 컨테이너에 column-rule이 적용된 렌더링을 보여줍니다.

1.1. 값 정의

이 명세서는 CSS 속성 정의 규약을 [CSS21]에서 따르고, 값 정의 문법을 [CSS-VALUES-3]에서 사용합니다. 이 명세서에서 정의되지 않은 값 타입은 CSS Values & Units [CSS-VALUES-3]에서 정의됩니다. 다른 CSS 모듈과의 조합에 따라 이러한 값 타입의 정의가 확장될 수 있습니다.

각 속성 정의에 나열된 속성별 값 이외에도, 이 명세서에서 정의된 모든 속성은 CSS 전역 키워드도 속성값으로 허용합니다. 가독성을 위해, 이 값들은 명시적으로 반복하지 않았습니다.

2. 모듈 상호작용

이 문서는 이전 명세서에 없는 새로운 기능을 정의합니다. 또한 최종화되면 다음을 대체하고 폐기합니다:

• CSS Multi-Column Layout Module Level 1

3. 다단 모델

column-width 또는 column-count 속성이 auto가 아닌 요소는 다단 컨테이너가 되며, (줄여서 multicol container), 따라서 다단 레이아웃의 컨테이너 역할을 합니다.

전통적인 CSS 박스 모델에서는, 요소의 콘텐츠가 해당 요소의 content box에 흐릅니다. 다단 레이아웃은 분할 컨텍스트를 도입하며, 이는 익명 분할 컨테이너로 구성되고, 이들을 컬럼 박스(줄여서 column)라고 합니다. 이러한 컬럼 박스는 독립된 블록 포매팅 컨텍스트를 생성하여 다단 컨테이너의 콘텐츠가 흐르도록 하며, 비포지셔닝 자식들의 컨테이닝 블록을 구성합니다.

이 예제에서 이미지의 너비는 다음 규칙으로 설정됩니다:

img {
  display: block;
  width: 100%;
}

컬럼 박스가 새로운 블록 포매팅 컨텍스트를 생성하므로, width는 컬럼 박스를 기준으로 계산됩니다. 따라서 이미지는 컬럼 박스를 넘치지 않습니다:

컬럼 박스가 새로운 블록 포매팅 컨텍스트를 생성하므로, multicol 컨테이너의 첫 번째 자식 요소에 설정한 top 마진은 multicol 컨테이너의 마진과 병합되지 않습니다.

다단 레이아웃 내부의 플로트는 플로트가 등장한 컬럼 박스를 기준으로 위치가 결정됩니다.

이 예제에서 이 CSS 코드는 이미지의 표시 방식을 설명합니다:

img {
  display: block;
  float: right;
}

HTML에서는 이미지는 "닭다리"라는 문장이 끝난 후에 등장합니다.

컬럼 박스의 블록 축에서 넘치는 콘텐츠는 분할되어 다음 컬럼 박스로 이어집니다.

참고: 익명 박스인 컬럼 박스는 컨테이닝 블록이 되지 않습니다 절대 위치 박스의. 그러한 박스의 컨테이닝 블록을 결정하는 position 속성은 multicol 컨테이너에 적용되며, 이것이 주요 박스가 됩니다.

이 예제에서 다단 컨테이너는 position: relative이므로 컨테이닝 블록이 됩니다. 이미지는 다단 컨테이너의 직접 자식이며, position: absolute를 가집니다. 이미지는 다단 컨테이너를 기준으로 위치가 결정되며, 컬럼 박스를 기준으로 하지는 않습니다.

.container {
  position: relative;
  column-count: 3;
}
img {
  position: absolute;
  top: 20px;
  left: 40px;
}

다단 컨테이너의 out-of-flow 후손은 컬럼 균형에 영향을 주며, 다단 컨테이너의 block-size에도 영향을 줍니다.

컬럼 박스는 multicol 컨테이너의 인라인 기본 방향에 따라 정렬되며, 다단 라인으로 배치됩니다. 단 너비는 인라인 방향에서의 컬럼 박스 길이입니다. 단 높이는 블록 방향에서의 컬럼 박스 길이입니다. 한 라인 내의 모든 컬럼 박스는 같은 단 너비를 가지며, 한 라인 내의 모든 컬럼 박스는 같은 단 높이를 가집니다.

참고: 세로 쓰기 모드를 사용하는 텍스트에서 블록 방향은 수평입니다. 세로 쓰기 모드에서는 단이 수평으로 배치되며, 블록의 흐름 방향은 오른쪽에서 왼쪽 또는 왼쪽에서 오른쪽일 수 있습니다. 따라서 column-width 속성은 컬럼의 인라인 크기를 의미하지, 물리적인 수평 너비를 의미하지 않습니다.

각 다단 라인 내에서는 인접한 컬럼 박스가 단 간격으로 구분되며, 그 안에는 구분선이 있을 수 있습니다. 같은 다단 컨테이너 내의 모든 단 간격은 동일합니다. 같은 다단 컨테이너 내의 모든 구분선도 동일하며, 두 컬럼 모두에 콘텐츠가 있을 때만 나타납니다.

가장 단순한 경우 multicol 컨테이너는 한 줄의 컬럼만 포함하며, 각 컬럼의 높이는 multicol 컨테이너 content box의 사용된 높이와 동일합니다. 그러나 분할 또는 스패너에 의해 다단 컨테이너의 콘텐츠가 여러 다단 라인으로 나뉠 수 있습니다.

다단 컨테이너가 페이지네이션될 경우, 각 컬럼의 높이는 페이지에 의해 제한되며 콘텐츠는 다음 페이지의 새로운 컬럼 라인으로 이어집니다. 컬럼 박스는 절대 페이지를 가로질러 분할되지 않습니다.

동일한 효과는 스패닝 요소가 다단 컨테이너를 분할할 때도 발생합니다: 스패너 전의 컬럼들은 균형 있게 줄어들고, 스패너 이후의 콘텐츠는 새로운 컬럼 라인에 흐르게 됩니다.

다단 컨테이너는 즉, 새로운 독립 포매팅 컨텍스트를 생성하는 일반 블록 컨테이너이며, 그 콘텐츠는 일련의 다단 라인과 multicol 스패너로 구성됩니다. 각 다단 라인은 블록 수준 박스로 동작하며, 자신의 다단 포매팅 컨텍스트를 컬럼 박스에 대해 생성합니다; 각 스패너는 블록 수준 박스로 동작하며, 자신의 독립 포매팅 컨텍스트를 생성하며, 그 타입은 평소처럼 display 값에 따라 다릅니다.

다단 컨테이너의 중첩이 허용되지만, 구현에 따라 제한이 있을 수 있습니다.

참고: 컬럼 박스에는 속성/값을 설정할 수 없습니다. 예를 들어 특정 컬럼 박스의 배경을 지정할 수 없으며, 컬럼 박스는 padding, margin, border 개념이 없습니다. 미래 명세에서 추가 기능이 도입될 수 있습니다. 예를 들어, 컬럼마다 다른 너비·배경을 지원할 수 있습니다.

참고: 컬럼 높이가 뷰포트보다 큰 multicol 컨테이너는 접근성 이슈가 생길 수 있습니다. 자세한 내용은 접근성 고려사항을 참고하세요.

4. 단의 개수와 너비

다단 콘텐츠를 레이아웃할 때 단의 개수와 너비를 결정하는 것은 근본적으로 중요합니다. 아래 속성들은 단의 개수와 너비를 설정하는 데 사용됩니다:

• column-count
• column-width

세 번째 속성인 columns는 column-width와 column-count 모두를 설정하는 축약형 속성입니다.

명시적인 컬럼 나눔, 콘텐츠, 높이 제약 등 다른 요인들도 실제 단의 개수와 너비에 영향을 줄 수 있습니다.

4.1. 단의 인라인 크기: column-width 속성

이 속성은 다단 컨테이너에서 단의 너비를 지정합니다.

auto

컬럼 너비가 다른 속성(예: column-count가 auto가 아닌 값을 가질 때)에 의해 결정됨을 의미합니다.

<length [0,∞]>

최적의 컬럼 너비를 설명합니다. 실제 컬럼 너비는 (공간을 채우기 위해) 더 넓어질 수 있고, (사용 가능한 공간이 지정된 컬럼 너비보다 작을 때) 더 좁아질 수도 있습니다. 음수 값은 허용되지 않습니다. 사용값은 최소 1px로 클램핑됩니다.

div {
  width: 100px;
  column-width: 45px;
  column-gap: 0;
  column-rule: none;
}

div {
  width: 40px;
  column-width: 45px;
  column-gap: 0;
  column-rule: none;
}

column-width가 세로 쓰기 텍스트에도 사용할 수 있도록, 단 너비는 컬럼 안의 라인 박스 길이를 의미합니다.

참고: column-width를 다소 유동적으로 만든 이유는 다양한 화면 크기에 맞는 확장성 있는 디자인을 위해서입니다. 정확한 단 너비를 설정하려면, 컬럼 간격과 multicol 컨테이너의 너비(수평 텍스트 기준)도 반드시 지정해야 합니다.

4.2. 단의 개수: column-count 속성

이 속성은 multicol 컨테이너의 단 개수를 지정합니다.

auto

단의 개수가 다른 속성(예: column-width가 auto가 아닌 값일 때)에 의해 결정됨을 의미합니다.

<integer [1,∞]>

요소의 콘텐츠가 흐를 최적의 단 개수를 지정합니다. 값은 0보다 커야 합니다. column-width와 column-count가 모두 auto가 아닌 값을 가지면, 정수 값은 최대 단 개수를 의미합니다.

body { column-count: 3 }

4.3. column-width와 column-count 축약형: columns 속성

이 속성은 column-width와 column-count를 동시에 설정하는 축약형 속성입니다. 생략된 값은 초기값으로 설정됩니다.

columns: 12em;      /* column-width: 12em; column-count: auto */
columns: auto 12em; /* column-width: 12em; column-count: auto */
columns: 2;         /* column-width: auto; column-count: 2 */
columns: 2 auto;    /* column-width: auto; column-count: 2 */
columns: auto;      /* column-width: auto; column-count: auto */
columns: auto auto; /* column-width: auto; column-count: auto */

4.4. 의사 알고리즘

아래 의사 알고리즘은 column-count(N)와 column-width(W)의 사용값을 결정합니다. 의사 알고리즘에는 또 다른 변수 U(다단 컨테이너의 사용 너비)가 있습니다.

참고: 다단 컨테이너의 사용 너비 U는 요소의 내용에 따라 달라질 수 있으며, 이 경우 column-count 및 column-width의 계산값에도 영향을 받을 수 있습니다. 본 명세서는 U가 어떻게 계산되는지는 정의하지 않습니다. 별도의 모듈(아마도 Basic Box Model [CSS3BOX] 또는 Box Sizing Module [CSS3-SIZING])에서 정의될 예정입니다.

floor(X) 함수는 X 이하의 가장 큰 정수 Y를 반환합니다.

(01)  if ((column-width = auto) and (column-count = auto)) then
(02)      exit; /* 다단 컨테이너가 아님 */
(03)  if column-width = auto then
(04)      N := column-count
(05)  else if column-count = auto then
(06)      N := max(1,
(07)        floor((U + column-gap)/(column-width + column-gap)))
(08)  else
(09)      N := min(column-count, max(1,
(10)        floor((U + column-gap)/(column-width + column-gap))))

그리고:

(11)  W := max(0, ((U + column-gap)/N - column-gap))

auto 반복 컬럼의 개수를 구할 때, UA는 컬럼 크기를 UA가 지정한 값 이하로 내림(floor)해야 하며, 0으로 나눔을 피해야 합니다. 이 하한값은 1px 이하가 권장됩니다.

페이지 매체 등 분할 문맥(fragmented contexts)에서는, UA가 이 계산을 분할별로 할 수 있습니다.

column-count의 사용값은 명시적 컬럼 나눔이나 컬럼 높이 제약과 무관하게 계산되며, 실제 값은 이를 고려합니다.

이 예제에서 명시적인 컬럼 분할 때문에 실제 column-count가 사용값보다 더 높아집니다:

div {
  width: 40em;
  columns: 20em;
  column-gap: 0;
}

p {
  break-after: column;
}

<div>
  <p>one
  <p>two
  <p>three
</div>

div {
  width: 80em;
  height: 10em;
  columns: 20em;
  column-gap: 0;
  column-fill: auto;
}

<div>foo</div>

4.5. 스태킹 컨텍스트

다단 컨테이너의 모든 컬럼 박스는 동일한 스태킹 컨텍스트에 속하며, 그 내용의 그리기 순서는 CSS 2.1에 명시된 대로입니다. 컬럼 박스는 새로운 스태킹 컨텍스트를 생성하지 않습니다.

4.6. 컬럼 스타일링: ::column 가상 요소

::column 가상 요소는 다단 컨테이너 내의 개별 컬럼을 나타냅니다. 오직 다단 컨테이너에만 존재합니다.

다단 컨테이너는 컬럼 수만큼의 ::column 가상 요소를 가집니다. 이들은 개별적으로 선택할 수 없으며, multicol의 ::column 가상 요소에 적용된 스타일은 해당 요소의 모든 컬럼에 적용됩니다. 각 ::column은 해당 컬럼과 동일한 크기와 위치를 가지며, 컬럼의 사용 가능 공간의 인라인 축과 컨테이너의 콘텐츠 박스의 블록 축에서 동일한 크기를 가집니다. (컬럼 간의 간격/구분선은 포함하지 않습니다.)

::column 가상 요소는 자신이 속한 다단 컨테이너의 자식으로 취급되며, 별도의 콘텐츠는 가질 수 없습니다. 이들은 컬럼의 콘텐츠를 감싸지 않고, 동일한 공간만 채웁니다.

::column 가상 요소는 아래 속성만 사용할 수 있습니다:

• scroll-margin, scroll-snap-align, scroll-snap-stop (이 속성들은 스크롤 컨테이너 내부 요소에 적용됩니다)

또한, ::column 가상 요소는 ::scroll-marker 가상 요소를 자식으로 가질 수 있으며, ::column::scroll-marker 형태로 사용합니다. (다른 가상 요소는 ::column에서 사용할 수 없습니다.) 이러한 ::scroll-marker 가상 요소의 상속 기준은 ::column이 아니라 원본 요소에서 상속합니다.

참고: ::column에서 동작하는 속성과 가상 요소 목록은 앞으로 컬럼의 위치만 신경쓰고 콘텐츠에는 신경쓰지 않는 추가 기능들이 개발됨에 따라 확장될 수 있습니다.

5. 컬럼 간격과 구분선

컬럼 간격과 구분선은 동일한 다단 컨테이너 내의 컬럼 사이에 배치됩니다. 컬럼 간격과 컬럼 구분선의 길이는 컬럼 높이와 같습니다. 컬럼 간격은 공간을 차지합니다. 즉, 컬럼 간격은 인접한 컬럼의 콘텐츠를 서로 벌어지게 만듭니다 (같은 다단 컨테이너 내에서).

컬럼 구분선은 컬럼 간격의 중앙에 그려지며, 끝점은 다단 컨테이너의 반대쪽 콘텐츠 엣지에 위치합니다. 컬럼 구분선은 공간을 차지하지 않습니다. 즉, 컬럼 구분선의 존재나 두께는 다른 어떤 것의 배치에도 영향을 미치지 않습니다. 컬럼 구분선이 간격보다 넓으면, 인접 컬럼 박스가 구분선을 덮게 되며, 구분선이 다단 컨테이너의 박스 밖으로 벗어날 수도 있습니다. 컬럼 구분선은 다단 컨테이너의 경계선 바로 위에 그려집니다. 스크롤 가능한 다단 컨테이너의 경우, 컨테이너의 경계선 및 배경은 스크롤되지 않지만, 구분선은 컬럼과 함께 스크롤되어야 합니다. 컬럼 구분선은 두 컬럼 모두에 콘텐츠가 있을 때만 그려집니다.

5.1. 컬럼 사이의 거터: column-gap 속성

column-gap 속성은 [CSS3-ALIGN]에 정의되어 있습니다.

다단 포매팅 컨텍스트에서 normal로 지정된 column-gap의 사용값은 1em입니다. 이는 초기값을 사용할 때 컬럼이 읽기 쉽게 보장합니다. 컬럼 사이에 구분선이 있다면, 그 구분선은 간격의 중앙에 표시됩니다.

5.2. 컬럼 구분선 색상: column-rule-color 속성

<color>

컬럼 구분선의 색상을 지정합니다.

5.3. 컬럼 구분선 스타일: column-rule-style 속성

column-rule-style 속성은 요소의 컬럼 사이 구분선의 스타일을 지정합니다. <line-style> 값은 collapsing border model과 같이 해석됩니다.

none 및 hidden 값은 column-rule-width의 계산값을 0으로 강제합니다.

5.4. 컬럼 구분선 너비: column-rule-width 속성

이 속성은 컬럼 사이 구분선의 너비를 지정합니다. 음수 값은 허용되지 않습니다.

5.5. 컬럼 구분선 축약형: column-rule 속성

이 속성은 column-rule-width, column-rule-style, column-rule-color를 스타일시트에서 한 번에 설정할 수 있는 축약형 속성입니다. 생략된 값은 초기값으로 설정됩니다.

이 예제에서 컬럼 구분선과 컬럼 간격의 너비가 동일합니다. 그래서 완전히 동일한 공간을 차지합니다.

body {
  column-gap: 35px;
  column-rule-width: 35px;
  column-rule-style: solid;
  column-rule-color: black;
}

6. 컬럼 나눔

여러 단으로 콘텐츠를 배치할 때, 사용자 에이전트는 컬럼 나눔 위치를 결정해야 합니다. 콘텐츠를 단으로 분할하는 문제는 페이지로 분할하는 문제와 유사하며, 이는 CSS 2.1, 13.3.3절에 설명되어 있습니다 [CSS21].

컬럼 나눔도 페이지 나눔과 동일한 속성에서 기술할 수 있도록, 세 가지 새로운 속성이 도입되었습니다: break-before, break-after, break-inside.

6.1. 분할 제어: break-before, break-after, break-inside 속성

break-before, break-after, break-inside 속성은 [CSS3-BREAK]에 정의되어 있습니다.

7. 컬럼 병합

column-span 속성을 사용하면 요소가 여러 컬럼을 가로지를 수 있습니다. 본 명세서는 이전 레벨의 값에 <integer> 값을 추가합니다.

7.1. column-span

이 속성은 요소가 몇 개의 컬럼을 가로지를지 지정합니다. 값은 다음과 같습니다:

none

요소가 여러 컬럼을 가로지르지 않습니다.

all

요소는 컬럼 나눔을 강제로 만들고 플로우 외(out of flow)로 처리되어 동일 블록 포매팅 컨텍스트 내에서 가장 가까운 다단 조상(multicol ancestor)의 모든 컬럼을 가로지릅니다. 해당 요소보다 앞에 나타나는 플로우 내(normal flow) 콘텐츠는 자동으로 바로 앞 다단 라인 전체에 균등 분산되며, 이후 콘텐츠는 해당 요소 뒤의 새로운 다단 라인에 흐릅니다. 이 요소는 독립 포매팅 컨텍스트를 생성합니다.

참고: 해당 요소가 새로운 포매팅 컨텍스트를 생성하는지 여부는 다단 후손인지와 관계가 없습니다. column-span이 all일 때는 항상 생성합니다. 이는 향후 다단이 제거되거나, 미디어 쿼리 등으로 다단을 끄는 상황에서도 디자인의 견고성을 높입니다.

<integer [1,∞]>

요소가 지정한 개수의 컬럼을 가로지릅니다. 값은 0보다 커야 합니다. 지정한 정수 값이 다단 요소의 컬럼 수와 같거나 크면, column-span: all과 동일하게 처리됩니다.

이 정의는 불충분합니다.

• column-span: 1은 column-span: none과 같은가, 아니면 스패너(즉, BFC)를 생성하는가?
• 어떤 컬럼을 가로지르는가?
• 높이 계산, column-fill과의 상호작용은?

auto

요소가 가로지를 컬럼 수는 해당 요소의 min-content outer size와 다단 컨테이너의 인라인 방향에 따라 결정됩니다. 만약 이 값이 column-width의 사용값보다 작으면, column-span: none과 동일하게 처리됩니다. 그렇지 않으면, 가로지를 컬럼 수는 n에 대해 n × column-width + (n - 1) × column-gap 이 min-content outer size보다 커지는 가장 작은 양의 정수 n입니다. 이 값이 컬럼 수보다 크면, column-span: all과 동일하게 처리됩니다.

column-span: 1이 column-span: none과 동일하지 않다면, 요소가 충분히 작을 때 column-span: 1로 취급해야 할지 column-span: none으로 취급해야 할지?

2개 이상의 컬럼을 가로지르는 요소를 다단 스패닝 요소라고 하며, 생성된 박스를 다단 스패너라고 합니다.

스패너의 컨테이닝 블록은 다단 컨테이너 자체입니다. 따라서 스패너 자체가 내부의 절대 위치 박스의 컨테이닝 블록이 되지 않는 경우, 컨테이닝 블록 체인은 다단 컨테이너까지 바로 건너뜁니다(스패너와 다단 컨테이너 사이의 조상은 건너뜀).

스패너가 플로우 외(out-of-flow)로 처리되더라도, 이는 스패닝 요소의 페인팅 순서 [CSS21]에는 영향을 주지 않습니다.

이 예제에서 h2 요소가 샘플 문서의 여섯 번째 문장(즉, "the leg of a" 뒤)에 추가되었습니다. 적용된 스타일:

h2 { column-span: all; background: silver }

column-span을 all로 지정하면, h2 요소 앞에 등장하는 모든 콘텐츠가 h2 위에 표시됩니다.

스패너가 다단 라인을 분할하므로, 컬럼 구분선도 중단됩니다(컬럼 구분선은 컬럼이 한 다단 라인에 있을 때만 그려짐).

스패닝 요소는 첫 번째 레벨의 후손이 아니어도, 동일한 포매팅 컨텍스트 내에 속하고, 스패닝 요소와 다단 컨테이너 사이에 고정 위치 자손의 컨테이닝 블록을 생성하는 무언가가 없다면, 사용할 수 있습니다.

<article>
  <section>
    <div class="spanner">Attempted spanner</div>
  </section>
</article>

article {
  columns: 2;
}

section {
  transform: rotate(90deg);
}

.spanner {
  column-span: all;
  background: silver;
}

스패너 앞의 단편(fragment)이 비어 있을 경우, 별다른 일이 일어나지 않습니다; 상단 margin/border/padding은 빈 fragment처럼 스패닝 요소 위에 나타납니다.

이 예제에서 다단 컨테이너는 article 요소입니다. 이 부모 안에는 문단과 section 요소가 있습니다. section은 all로 지정된 h2 제목을 포함하고 있으며, 이는 세 컬럼 전체를 가로지릅니다. 하지만 section은 계속 컬럼 박스 내부에 남아 있습니다.

h2는 section의 첫 번째 자식입니다. 따라서 section의 margin, 테두리(그림에서는 빨간색), padding은 이 스패닝 h2 앞에 빈 fragment처럼 표시됩니다.

<article>
  <p>...</p>
  <section>
    <h2>An h2 element</h2>
    <p>...</p>
  </section>
</article>

section {
  border: 2px solid red;
  margin-top: 65px;
  padding-top: 20px;
}

h2 {
  column-span: all;
  background: silver
}

스패닝 요소는 일반적으로 요소가 차지하는 공간보다 더 많은 공간을 차지할 수 있습니다. 공간이 부족한 경우 스패닝 요소를 배치할 수 없을 수도 있습니다. 이 경우 사용자 에이전트는 해당 요소에 대해 none이 지정된 것처럼 처리할 수 있습니다.

이 예제에서 h2 요소는 콘텐츠 후반에 나타나며, 다단 컨테이너의 높이가 제한되어 있습니다. 따라서 h2 요소는 오버플로우 컬럼에 나타나고, 스패닝 처리를 할 공간이 없습니다. 결과적으로 이 요소는 column-span: none이 지정된 것처럼 나타납니다.

이 예제는 앞 예제와 유사하나 H2 요소가 자연스럽게 마지막 컬럼에 나타납니다. 그래도 스패닝 처리를 할 공간이 없습니다.

분할 문맥(fragmented contexts)에서는 스패닝 요소가 모든 fragment에서 존중됩니다. 이 예제는 페이지 매체 상황입니다. 처음 세 문단 뒤에 컬럼 나눔이 있습니다. 네 번째 문단 뒤에 스패닝 H2 요소가 등장합니다.

스패너는 블록 수준 박스이므로 인접한 두 스패너의 마진은 서로 병합됩니다. 절대 위치 아이템만으로 분리된 두 스패너의 마진도 병합됩니다(절대 위치 아이템은 컬럼 박스를 생성하지 않음). 컬럼 박스는 새로운 블록 포매팅 컨텍스트를 생성하므로, 컬럼 박스 내부 요소의 마진은 스패너와 병합되지 않습니다.

스패너는 새로운 포매팅 컨텍스트를 생성하지만, 마진은 주변에 의해 영향을 받을 수 있습니다. 이 예제에서 두 스패너가 자연스럽게 페이지 상단에 배치됩니다. 첫 번째 스패너의 위쪽 마진은 강제되지 않은 나눔과 맞닿아 잘려나갑니다. 두 스패너 사이의 마진은 서로 병합됩니다. 그러나 두 번째 스패너의 아래쪽 마진은 그 다음 요소의 위쪽 마진과 병합되지 않습니다.

h2 {
  margin: 16px 0;
  column-span: all;
  background: silver
}
p { margin-top: 16px }

8. 컬럼 채우기

컬럼을 채우는 전략은 두 가지가 있습니다: 컬럼을 균형 있게 채우거나, 그렇지 않거나. 균형 있게 채우는 경우, 사용자 에이전트는 컬럼 높이의 차이를 최소화하려고 시도해야 하며, 강제 나눔, widows, orphans 등 컬럼 높이에 영향을 줄 수 있는 속성도 고려해야 합니다. 균형을 맞추지 않으면, 컬럼을 순차적으로 채워 일부 컬럼이 부분적으로 채워지거나 완전히 비게 됩니다.

8.1. 컬럼 균형: column-fill 속성

이 속성은 다단 라인에서 즉시 앞에 스패너가 없는 경우 컬럼이 균등 분배되는지 여부를 지정합니다.

값은 다음과 같습니다:

balance

가능한 한 컬럼에 균등하게 콘텐츠를 분배합니다. 분할 문맥(fragmented contexts)에서는 마지막 fragment만 균형을 맞춥니다.

balance-all

가능한 한 컬럼에 균등하게 콘텐츠를 분배합니다. 분할 문맥에서는 모든 fragment에서 균형을 맞춥니다.

auto

컬럼을 순차적으로 채웁니다

연속 문맥(continuous contexts)에서는 오버플로우 컬럼이 있을 때 이 속성이 효과가 없습니다.

이 예제에서 article은 짧은 문단 하나만 가지고 있고, 3줄로 나뉩니다. 컬럼 균형 덕분에 3줄이 각각 다른 컬럼에 표시됩니다.

article {
  width: 60em;
  height: auto;
  columns: 4;
  column-fill: balance;
}

이 예제에서는 컬럼 균형(balance)을 끄고 article에 높이를 지정했습니다:

article {
  width: 60em;
  height: 4em;
  columns: 4;
  column-fill: auto;
}

결과적으로 첫 번째 컬럼에 모든 콘텐츠가 표시됩니다:

이 예제에서 article에는 두 개의 문단이 있습니다: 첫 번째는 길고, 두 번째는 더 짧습니다. 적용된 코드는 다음과 같습니다:

article {
  width: 60em;
  height: auto;
  columns: 4;
  column-fill: balance;
}

p {
  break-after: column;
}

최단 컬럼 높이는 5줄입니다. 컬럼 높이가 정해지면, 컬럼은 순차적으로 채워집니다. 결과적으로 세 번째 컬럼은 앞의 두 컬럼과 같은 높이가 되고, 마지막 컬럼은 훨씬 짧아집니다.

article {
  width: 60em;
  height: auto;
  columns: 4;
  column-fill: balance;
}

이 예제에서 article은 나눌 수 없는 figure로 시작하여 컬럼 높이가 결정됩니다. 이후 콘텐츠는 나머지 컬럼에 순차적으로 채워집니다:

9. 오버플로우

9.1. 다단 컨테이너 내부의 오버플로우

컬럼 나눔을 유발하는 경우를 제외하고, 컬럼 박스를 벗어나는 콘텐츠는 컬럼 박스에 클리핑되지 않고 눈에 띄게 넘쳐 보입니다. column box.

참고: 컬럼 나눔은 § 6 컬럼 나눔을, 오버플로우가 다단 컨테이너의 콘텐츠 박스에 클리핑되는지는 § 9.2 다단 컨테이너 외부의 페이지네이션 및 오버플로우를 참고하세요.

이 예제에서 이미지는 컬럼보다 넓습니다:

9.2. 다단 컨테이너 외부의 페이지네이션 및 오버플로우

다단 컨테이너의 가장자리에서 컬럼 박스를 벗어나는 콘텐츠와 컬럼 구분선은 overflow 속성에 따라 클리핑됩니다.

다음과 같은 경우 다단 컨테이너는 공간보다 더 많은 컬럼을 가질 수 있습니다:

• 컬럼 높이를 제한하는 선언이 있는 경우 (예: height 또는 max-height를 사용하는 경우). 이 경우 추가 컬럼 박스가 인라인 방향으로 생성됩니다.
• 페이지의 크기가 제한적인 경우. 이 경우 추가 컬럼 박스가 다음 페이지로 이동됩니다.
• 명시적인 컬럼 나눔이 있는 경우. 이 경우 연속 문맥에서는 추가 컬럼 박스가 인라인 방향에 생성되고, 분할 미디어에서는 추가 컬럼 박스가 다음 fragment로 이동됩니다.

연속 문맥에서 다단 컨테이너 외부에 나타나는 컬럼을 오버플로우 컬럼이라고 합니다. 오버플로우 컬럼은 다단 컨테이너의 높이에 영향을 줄 수 있습니다.

이 예제에서는 다단 컨테이너의 높이가 최대 높이로 제한되어 있습니다. 또한 스타일시트에서 오버플로우 콘텐츠를 보이도록 지정했습니다:

div {
  max-height: 5em;
  overflow: visible;
}

그 결과, 컬럼 개수가 늘어납니다.

연속 문맥에서는 오버플로우 컬럼이 다단 컨테이너의 높이에 영향을 줄 수 있습니다. 이 예제에서는 오버플로우에 네 줄의 텍스트가 있는 컬럼이 등장합니다. 다단 컨테이너는 이 컬럼이 들어갈 수 있도록 충분히 높아집니다.

분할 문맥에서는 오버플로우 콘텐츠가 이후 fragment의 컬럼에 들어갑니다. 예제 31과 동일한 콘텐츠와, 포맷된 텍스트 5줄만 들어갈 수 있는 페이지 박스를 가정하면, 첫 번째 페이지에는 다음과 같이 나타납니다:

컬럼 균형이 가정된 상태에서, 두 번째 페이지에는 다음과 같이 표시됩니다:

이 예제에서는 문단 뒤에 명시적으로 컬럼 나눔이 생성됩니다:

p {
  break-after: column;
}

그 결과, 컬럼 개수가 늘어나며 추가 컬럼이 인라인 방향에 추가됩니다:

페이지 매체에서는 추가 컬럼이 다음 페이지에 표시됩니다. 이전 예제와 동일한 코드를 가정하면, 마지막 문단이 두 번째 페이지에 나타납니다. 첫 번째 페이지에는 다음과 같이 나타납니다:

두 번째 페이지에는 다음과 같이 표시됩니다:

컬럼 균형으로 인해 마지막 문단이 세 개의 컬럼에 걸쳐 분할됩니다.

부록 B. 변경 이력

이 부록은 참고용입니다.

2024년 5월 16일 CSS-MULTICOL-1 후보 권고(CR) 이후 변경점

• ::column 가상 요소 추가. 2024년 9월 27일 결정.
• <integer>와 auto 값을 위한 column-span 제안 초안 추가.

프라이버시 고려사항

Multicol은 새로운 프라이버시 유출 사항을 도입하지 않습니다.

보안 고려사항

Multicol은 새로운 보안 고려사항을 도입하지 않습니다.

접근성 고려사항

컨테이너 높이와 라인 길이 설정은 시각 또는 인지 장애가 있는 사람들에게 어려움을 줄 수 있습니다. 사용자 요구를 이해하려면 WCAG 성공 기준 1.4.10 리플로우 및 WCAG 1.4.8 시각적 프레젠테이션을 참고하세요.

감사의 글

이 문서는 Håkon Wium Lie의 [CSS3-MULTICOL] 작업을 기반으로 하며, 여러 이전 제안 및 그에 대한 코멘트를 참고했습니다. 기여자에는 다음이 포함됩니다:

Alex Mogilevsky, Andy Clarke, Anton Prowse, Bert Bos, Björn Höhrmann, Cédric Savarese, Chris Lilley, Chris Wilson, Daniel Glazman, Dave Raggett, David Hyatt, David Singer, David Woolley, Elika Etemad, Giovanni Campagna, Ian Hickson, Joost de Valk, Kevin Lawver, L. David Baron, Markus Mielke, Melinda Grant, Michael Day, Morten Stenshorne, Øyvind Stenhaug, Peter Linss, Peter-Paul Koch, Robert O’Callahan, Robert Stevahn, Sergey Genkin, Shelby Moore, Steve Zilles, Sylvain Galineau, Tantek Çelik, Till Halbach