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

1. 소개

(이 섹션은 규범적이지 않습니다.)

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

CSS의 다른 레이아웃 방식은 부모 요소에 적용될 때, 직속 자식의 디스플레이 속성을 변경합니다. 예를 들어 3단 그리드 레이아웃이 생성되면, 그리드 컨테이너의 직속 자식들은 그리드 아이템이 되어 각 단 트랙에 배치되고, 한 셀마다 한 요소가 들어가며 필요에 따라 추가 행이 만들어집니다.

하지만 다단 컨테이너의 자식 요소들은 일반적인 흐름을 유지하고, 그 흐름이 여러 단으로 배열됩니다. 이 단들은 유연한 인라인 크기를 가지며, 사용 가능한 공간에 따라 표시되는 단의 크기 또는 개수가 바뀝니다.

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

body { column-width: 12em }

이 예시에서 body 요소는 최소 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;
}

위 예시의 첫 번째 선언은 인접한 두 단 사이의 간격을 1em로 설정합니다. 단 간격은 패딩 영역과 유사합니다. 간격의 중앙에는 column-rule 속성으로 설명되는 구분선이 그려집니다.

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

이 예시에서는 위 예제의 축약형 column-rule 선언이 풀어서 기술되어 있습니다:

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

column-fill 및 column-span 속성은 다단 레이아웃에서 스타일 시트에 더 다양한 시각적 표현을 제공합니다.

이 예시에서는 단이 균형 있게 설정되어 (즉, 길이가 거의 비슷하게), h2 요소가 모든 단에 걸치도록 설정되어 있습니다.

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

테스트

multicol-fill-balance-029.html (실시간 테스트) (소스)

이 명세서는 새로운 10개의 속성을 소개하며, 모두 위 예시에서 사용되었습니다.

모든 단 속성이 초기값을 갖는다면, 요소의 레이아웃은 단 하나만 있는 다단 레이아웃과 동일합니다.

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

다단 레이아웃의 여러 부분을 보여주는 다이어그램 — 다단 컨테이너 내부의 보이지 않는 column-span과 패딩이 강조된 다단 레이아웃.

다이어그램의 보이지 않는 부분을 표시하는 데 사용된 약속의 키 — 다단 컨테이너 내부의 보이지 않는 column-span과 패딩이 강조된 다단 레이아웃.

1.1. 값 정의

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

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

2. 다단 모델

column-width 또는 column-count 속성이 auto가 아닌 요소는 다단 컨테이너(약칭으로 multicol container), 즉 다단 레이아웃의 컨테이너 역할을 하게 됩니다.

테스트

기본 다단 테스트.

auto 값이 다단 컨테이너를 생성하지 않음을 보여주는 테스트.

multicol-count-computed-004.xht (실시간 테스트) (소스)

다단 속성은 상속되지 않음.

inheritance.html (실시간 테스트) (소스)

스크롤되는 단이 있는 다단.

multicol-scroll-content.html (실시간 테스트) (소스)

높이가 0인 다단.

전통적인 CSS 박스 모델에서는 요소의 콘텐츠가 해당 요소의 콘텐츠 박스로 흐릅니다. 다단 레이아웃은 분할 컨텍스트를 도입하는데, 이는 익명 분할 컨테이너로 이루어져 있으며, 이를 단 박스(약칭으로 단)라 부릅니다. 이 단 박스들은 독립적인 블록 포맷팅 컨텍스트를 생성하며, 다단 컨테이너의 콘텐츠가 이곳으로 흐르고 포지션이 적용되지 않은 자식들의 포함 블록 역할을 합니다.

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

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

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

단 박스 내부에 포함된 이미지 — 이미지는 자신이 표시되는 단 박스에 의해 제한됩니다.

단 박스가 새로운 블록 포맷팅 컨텍스트를 생성하므로, 다단 컨테이너의 첫 자식 요소에 설정된 상단 마진은 다단 컨테이너의 마진과 겹치지 않습니다.

첫 번째 단락 위의 마진이 겹치지 않아 다단 컨테이너의 첫 줄 위에 1em 마진이 남아 있습니다.

테스트

다단 레이아웃 내부에 등장하는 float는 float가 등장하는 단 박스 기준으로 위치가 잡힙니다.

이 예시에서 이미지는 다음 CSS로 표시됩니다:

img {
  display: block;
  float: right;
}

HTML에서는 이미지는 "닭다리"로 끝나는 문장 뒤에 나타납니다.

단 박스 내부에서 float된 이미지 — 이미지는 자신이 속한 단 박스 내부에서 float됩니다.

단 박스에서 블록 축 방향으로 콘텐츠가 넘치면, 분할(fragment)되어 다음 단 박스로 이어집니다.

참고: 익명 박스인 단 박스는 포함 블록이 절대 위치 박스에 대해 되지 않습니다. 이러한 박스의 포함 블록을 생성하는 position 속성은 multicol container에 적용되며, 이것이 주 박스가 됩니다.

테스트

이 예시에서 다단 컨테이너는 position: relative로 설정되어 포함 블록이 됩니다. 이미지는 다단 컨테이너의 직속 자식이며, position: absolute를 가지고 있습니다. 이미지는 다단 컨테이너를 기준으로 위치가 정해지며, 단 박스 기준이 아닙니다.

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

절대 위치 지정된 이미지는 [=column box=]가 아니라 [=multi-column container=]를 기준으로 위치가 정해집니다. — 이 그림은 절대 위치 이미지는 단 박스가 아니라 다단 컨테이너를 기준으로 위치가 정해짐을 보여줍니다.

다단 컨테이너의 흐름에서 벗어난 자손(out-of-flow)은 단 균형 맞추기와 다단 컨테이너의 block-size에 영향을 줍니다.

테스트

단 박스는 다단 컨테이너의 인라인 기본 방향으로 정렬되며, 다단 라인으로 배열됩니다. 단 너비는 인라인 방향에서 단 박스의 길이입니다. 단 높이는 블록 방향에서 단 박스의 길이입니다. 한 라인의 모든 단 박스는 동일한 단 너비를 가지며, 한 라인의 모든 단 박스는 동일한 단 높이를 가집니다.

테스트

다음 테스트는 단 내용의 기준선 정렬과 관련되어 있으며, 이는 이 명세에서 정의되지 않았습니다.

다음 테스트는 다단 컨테이너인 리스트 아이템의 동작을 확인합니다.

다단 내부의 그리드 아이템 테스트

balance-grid-001.html (실시간 테스트) (소스)

다음 테스트는 테이블 요소의 동작을 확인합니다.

다음 테스트는 페인트 순서가 올바른지 확인합니다.

다음 테스트들은 다단 속성의 애니메이션 또는 변형과 관련되어 있습니다.

구현 버그와 관련된 테스트이며, 특정 규범 텍스트와 연결되어 있지 않습니다.

멀티컬럼과 관련된 인쇄 및 페이지 매체에 관한 테스트입니다.

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

첫 번째 이미지는 LTR 인라인 방향의 수평 텍스트를 보여줍니다. 두 번째 이미지는 블록이 오른쪽에서 왼쪽으로 흐르는 세로 텍스트를 보여줍니다. 세 번째 이미지는 블록이 왼쪽에서 오른쪽으로 흐르는 세로 텍스트를 보여줍니다. — 다양한 쓰기 모드에 따라 컬럼이 배열되는 방식을 보여주는 다이어그램입니다.
왼쪽에서 오른쪽 순서: horizontal-tb, vertical-rl, vertical-lr.

테스트

세로 쓰기 모드에 관한 테스트입니다.

멀티컬럼 컨테이너의 각 멀티컬럼 라인 내에서, 인접한 컬럼 박스들은 컬럼 간격으로 분리되며, 이 간격에는 컬럼 규칙이 포함될 수 있습니다. 동일한 멀티컬럼 컨테이너 내의 모든 컬럼 간격은 동일합니다. 동일한 멀티컬럼 컨테이너 내에 존재하는 모든 컬럼 규칙도 동일하며, 컬럼 규칙은 두 컬럼 모두에 콘텐츠가 있을 때만 나타납니다.

가장 단순한 경우, 멀티컬럼 컨테이너는 한 줄의 컬럼만 포함하며, 각 컬럼의 높이는 멀티컬럼 컨테이너의 콘텐츠 박스의 사용된 높이와 동일합니다. 하지만 단편화 또는 스패너로 인해 멀티컬럼 컨테이너의 콘텐츠가 여러 멀티컬럼 라인으로 분할될 수 있습니다.

멀티컬럼 컨테이너가 페이지화된 경우, 각 컬럼의 높이는 페이지에 의해 제한되며, 콘텐츠는 다음 페이지의 새로운 컬럼 박스로 이어집니다. 컬럼 박스는 절대 페이지를 나눠 분할되지 않습니다.

동일한 효과는 스패닝 요소가 멀티컬럼 컨테이너를 나눌 때도 발생합니다: 스패닝 요소 이전의 컬럼들은 균형 있게 콘텐츠에 맞게 짧아집니다. 스패닝 요소 이후의 콘텐츠는 새로운 다음 줄의 컬럼 박스로 흐르게 됩니다.

스패닝 요소로 인해 위쪽 컬럼이 짧아지고, 아래쪽 컬럼으로 텍스트가 이어지는 다이어그램 — 스패닝 요소가 멀티컬럼 컨테이너를 어떻게 나누는지 보여주는 예시입니다.

멀티컬럼 컨테이너는 일반적인 블록 컨테이너로서 새로운 독립 포매팅 컨텍스트를 설정하며, 그 안의 콘텐츠는 멀티컬럼 라인들과 멀티컬럼 스패너로 구성됩니다. 각 멀티컬럼 라인은 블록 레벨 박스로 동작하며, 그 컬럼 박스들을 위한 멀티컬럼 포매팅 컨텍스트를 설정합니다; 그리고 각 스패너는 블록 레벨 박스로 동작하며, 독립 포매팅 컨텍스트를 설정하며, 이는 display 값에 따라 달라집니다.

중첩된 멀티컬럼 컨테이너도 허용되지만, 구현에 따라 제한이 있을 수 있습니다.

테스트

참고: 컬럼 박스에 속성/값을 설정하는 것은 불가능합니다. 예를 들어, 특정 컬럼 박스의 배경을 설정할 수 없으며, 컬럼 박스에는 패딩, 마진 또는 테두리 개념이 없습니다. 향후 명세에서는 추가 기능이 도입될 수 있습니다. 예를 들어, 서로 다른 너비와 배경을 가진 컬럼이 지원될 수 있습니다.

참고: 뷰포트보다 컬럼 높이가 큰 멀티컬럼 컨테이너는 접근성 문제를 야기할 수 있습니다. 자세한 내용은 접근성 고려 사항을 참고하세요.

3. 컬럼의 개수와 너비

멀티컬럼 콘텐츠를 레이아웃할 때 컬럼의 개수와 너비를 찾는 것은 기본적입니다. 다음 속성들은 컬럼의 개수와 너비를 설정하는 데 사용됩니다:

column-count
column-width

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

명시적인 컬럼 분리, 콘텐츠, 높이 제한과 같은 다른 요소들도 실제 컬럼의 개수와 너비에 영향을 미칠 수 있습니다.

3.1. 컬럼의 인라인 크기: column-width 속성

이름:	column-width
값:	auto \| <length [0,∞]>
초기값:	auto
적용 대상:	블록 컨테이너 (단, 테이블 래퍼 박스 제외)
상속:	아니오
백분율:	해당 없음
계산된 값:	키워드 auto 또는 절대 길이
정식 순서:	문법에 따름
애니메이션 타입:	계산된 값 타입 기준

이 속성은 멀티컬럼 컨테이너에서 컬럼의 너비를 정의합니다.

auto

컬럼 너비가 다른 속성(예: column-count에 auto가 아닌 값이 있는 경우 등)에 의해 결정됨을 의미합니다.

<length [0,∞]>

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

테스트

예를 들어, 다음 스타일 시트를 고려해보세요:

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

100px 너비의 요소 안에는 45px 너비의 컬럼 두 개가 들어갈 수 있습니다. 사용 가능한 공간을 채우기 위해 실제 컬럼 너비는 50px로 증가합니다.

또한, 다음 스타일 시트를 고려해보세요:

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

사용 가능한 공간이 지정된 컬럼 너비보다 작으므로 실제 컬럼 너비는 줄어듭니다.

column-width가 세로 텍스트와 함께 사용할 수 있도록, 컬럼 너비는 컬럼 내부의 line box 길이를 의미합니다.

참고: column-width를 다소 유연하게 만든 이유는 다양한 화면 크기에 맞는 확장 가능한 디자인을 구현하기 위해서입니다. 정확한 컬럼 너비를 지정하려면, 컬럼 간격과 멀티컬럼 컨테이너의 너비(수평 텍스트를 가정)를 함께 지정해야 합니다.

3.2. 컬럼의 개수: column-count 속성

이름:	column-count
값:	auto \| <integer [1,∞]>
초기값:	auto
적용 대상:	블록 컨테이너 (테이블 래퍼 박스 제외)
상속:	아니오
백분율:	해당 없음
계산된 값:	지정된 값
정식 순서:	문법 기준
애니메이션 타입:	계산된 값 기준

이 속성은 멀티컬럼 컨테이너의 컬럼 개수를 정의합니다.

auto: 컬럼의 개수가 다른 속성(예: column-width에 auto가 아닌 값이 있는 경우 등)에 의해 결정됨을 의미합니다.
<integer [1,∞]>: 요소의 콘텐츠가 흐를 최적의 컬럼 개수를 설명합니다. 값은 0보다 커야 합니다. column-width와 column-count 모두 auto가 아닌 값을 가진 경우, 정수 값은 컬럼의 최대 개수를 나타냅니다.

테스트

예시:

body { column-count: 3 }

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

이름:	columns
값:	<'column-width'> \|\| <'column-count'>
초기값:	각 속성별 참조
적용 대상:	각 속성별 참조
상속:	각 속성별 참조
백분율:	각 속성별 참조
계산된 값:	각 속성별 참조
애니메이션 타입:	각 속성별 참조
정식 순서:	문법 기준

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

columns 속성을 사용한 유효한 선언 예시:

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 */

테스트

3.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; /* not a multicol container */
(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))

자동 반복 컬럼의 개수를 찾기 위해, UA는 컬럼 크기를 UA에서 지정한 값으로 내림하여 0으로 나누는 것을 방지해야 합니다. 이 값은 1px 이하로 설정할 것을 권장합니다.

페이지 매체와 같은 단편화된 컨텍스트에서는, 사용자 에이전트가 이 계산을 단편별로 수행할 수 있습니다.

column-count의 사용된 값은 명시적 컬럼 분리나 제한된 컬럼 높이를 고려하지 않고 계산되며, 실제 값은 이를 고려합니다.

테스트

column-count-used-001.html (실시간 테스트) (소스)

이 예시에서는 명시적 컬럼 분리로 인해 실제 column-count가 사용된 column-count보다 높습니다:

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

p {
  break-after: column;
}

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

컨테이너 안에 두 개의 컬럼, 컨테이너 밖에 하나의 컬럼이 그려진 그림 — 계산된 column-count는 auto, 사용된 column-count는 2, 실제 column-count는 3입니다.

실제 column-count가 사용된 column-count보다 낮을 수도 있습니다. 다음 예시를 참고하세요:

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

<div>foo</div>

계산된 column-count는 auto, 사용된 column-count는 4, 실제 column-count는 1입니다.

3.5. 스태킹 컨텍스트

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

테스트

multicol-rule-stacking-001.xht (실시간 테스트) (소스)

4. 컬럼 간격과 규칙

컬럼 간격과 규칙은 동일한 멀티컬럼 컨테이너의 컬럼 사이에 배치됩니다. 컬럼 간격과 컬럼 규칙의 길이는 컬럼 높이와 같습니다. 컬럼 간격은 공간을 차지하며, 인접한 컬럼(같은 멀티컬럼 컨테이너 내) 사이의 콘텐츠를 밀어냅니다.

테스트

컬럼 규칙은 컬럼 간격의 중앙에 그려지며, 끝점은 멀티컬럼 컨테이너의 반대되는 콘텐츠 엣지에 위치합니다. 컬럼 규칙은 공간을 차지하지 않습니다. 즉, 컬럼 규칙의 존재나 두께는 다른 요소의 위치에 영향을 주지 않습니다. 만약 컬럼 규칙이 간격보다 넓다면, 인접한 컬럼 박스가 규칙을 겹치게 되고, 규칙이 멀티컬럼 컨테이너 박스 밖으로 확장될 수도 있습니다. 컬럼 규칙은 멀티컬럼 컨테이너의 테두리 바로 위에 그려집니다. 스크롤 가능한 멀티컬럼 컨테이너의 경우, 멀티컬럼 컨테이너의 테두리와 배경은 스크롤되지 않지만, 규칙은 컬럼과 함께 스크롤되어야 한다는 점에 유의하세요. 컬럼 규칙은 두 컬럼 모두에 콘텐츠가 있을 때만 그려집니다.

테스트

기본 컬럼 규칙 테스트

컬럼 규칙이 간격보다 넓으면, 인접한 박스들이 겹칩니다.

multicol-rule-001.xht (실시간 테스트) (소스)
multicol-rule-large-001.xht (실시간 테스트) (소스)
multicol-rule-large-002.xht (visual test) (소스)

컬럼 규칙은 콘텐츠가 있는 두 컬럼 사이에만 그려집니다.

배경과 컬럼 규칙의 동작에 대한 테스트입니다.

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

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

멀티컬럼 포매팅 컨텍스트에서 normal 값이 사용된 column-gap 속성의 사용 값은 1em입니다. 이는 초기값이 사용될 때 컬럼이 읽기 쉽게 보장합니다. 컬럼 사이에 컬럼 규칙이 있을 경우, 규칙은 간격의 중앙에 나타납니다.

테스트

간격이 애니메이션될 수 있음을 테스트합니다.

4.2. 컬럼 규칙의 색상: column-rule-color 속성

이름:	column-rule-color
값:	<color>
초기값:	currentcolor
적용 대상:	멀티컬럼 컨테이너
상속:	아니오
백분율:	해당 없음
계산된 값:	계산된 색상
정식 순서:	문법 기준
애니메이션 타입:	계산된 값 타입 기준

<color>: 컬럼 규칙의 색상을 지정합니다.

테스트

4.3. 컬럼 규칙의 스타일: column-rule-style 속성

이름:	column-rule-style
값:	<line-style>
초기값:	none
적용 대상:	멀티컬럼 컨테이너
상속:	아니오
백분율:	해당 없음
계산된 값:	지정된 키워드
정식 순서:	문법 기준
애니메이션 타입:	불연속적

column-rule-style 속성은 요소의 컬럼 사이에 그려지는 규칙의 스타일을 설정합니다. <line-style> 값은 collapsing border model에서처럼 해석됩니다.

테스트

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

4.4. 컬럼 규칙의 너비: column-rule-width 속성

이름:	column-rule-width
값:	<line-width>
초기값:	medium
적용 대상:	멀티컬럼 컨테이너
상속:	아니오
백분율:	해당 없음
계산된 값:	절대 길이, 테두리 너비로 스냅됨; 0 (컬럼 규칙 스타일이 none 또는 hidden일 때)
정식 순서:	문법 기준
애니메이션 타입:	계산된 값 타입 기준

이 속성은 컬럼 사이에 그려지는 규칙의 너비를 설정합니다. 음수 값은 허용되지 않습니다.

테스트

4.5. 컬럼 규칙 축약형: column-rule 속성

이름:	column-rule
값:	<'column-rule-width'> \|\| <'column-rule-style'> \|\| <'column-rule-color'>
초기값:	개별 속성 참조
적용 대상:	개별 속성 참조
상속:	개별 속성 참조
백분율:	개별 속성 참조
계산된 값:	개별 속성 참조
애니메이션 타입:	개별 속성 참조
정식 순서:	문법 기준

이 속성은 스타일 시트 내에서 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;
}

The rule completely covers any gap. — 컬럼 규칙과 컬럼 간격이 동일한 공간을 차지합니다.

테스트

5. 컬럼 나눔

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

컬럼 나눔을 페이지 나눔과 동일한 속성으로 지정할 수 있도록 세 가지 신규 속성이 도입되었습니다: break-before, break-after, break-inside.

5.1. 단편화 제어: break-before, break-after, break-inside 속성

break-before, break-after, break-inside는 [CSS3-BREAK]에서 정의됩니다.

테스트

multicol-break-000.xht (실시간 테스트) (소스)
multicol-break-001.xht (실시간 테스트) (소스)
multicol-br-inside-avoidcolumn-001.xht (실시간 테스트) (소스)
moz-multicol3-column-balancing-break-inside-avoid-1.html (manual test) (소스)

6. 컬럼 펼치기

column-span 속성을 사용하면 요소가 여러 컬럼에 걸쳐 펼칠 수 있습니다.

6.1. 요소를 여러 컬럼에 펼치기: column-span 속성

이름:	column-span
값:	none \| all
초기값:	none
적용 대상:	인플로우 블록 레벨 요소
상속:	아니오
백분율:	해당 없음
계산된 값:	지정된 키워드
정식 순서:	문법 기준
애니메이션 타입:	불연속적

테스트

column-span-invalid.html (실시간 테스트) (소스)

이 속성은 요소가 몇 개의 컬럼에 걸쳐 펼쳐지는지를 설명합니다. 값은 다음과 같습니다:

none

요소가 여러 컬럼을 펼치지 않습니다.

테스트

multicol-span-none-001.xht (실시간 테스트) (소스)

all

요소가 컬럼 나눔을 강제하며 out of flow가 되어 가장 가까운 멀티컬럼 상위 요소의 모든 컬럼에 펼쳐집니다 (동일한 block formatting context에서). 정상 흐름에 있는 요소 앞의 콘텐츠는 요소가 나오기 직전의 멀티컬럼 라인 전체에 자동으로 균형 있게 배치되고, 이후의 콘텐츠는 요소 뒤의 새로운 멀티컬럼 라인으로 흐릅니다. 해당 요소는 독립적인 포매팅 컨텍스트를 생성합니다.

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

테스트

두 개 이상의 컬럼에 걸쳐있는 요소를 멀티컬럼 스패닝 요소라고 하며, 이 요소가 만드는 박스를 멀티컬럼 스패너라고 합니다.

스패너의 컨테이닝 블록은 멀티컬럼 컨테이너 자체입니다. 따라서, 스패너 자체가 컨테이닝 블록을 생성하지 않는 경우, 스패너 내부의 절대 위치 박스는 그들의 컨테이닝 블록 체인이 바로 멀티컬럼 컨테이너로 건너뛰게 됩니다 (즉, 스패너와 멀티컬럼 컨테이너 사이의 모든 상위 요소를 건너뜁니다).

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

이 예시에서는 h2 요소가 샘플 문서의 여섯 번째 문장 이후 ("the leg of a"라는 단어 이후)에 추가되었습니다. 적용되는 스타일은 다음과 같습니다:

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

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

An element spans all three columns — h2 요소가 column-span: all로 설정되어 있습니다.

스패너가 멀티컬럼 라인을 분할하기 때문에, 컬럼 규칙도 중단됩니다 (컬럼 규칙은 컬럼 박스 사이의 멀티컬럼 라인에서만 그려집니다).

스패닝 요소는 동일한 포매팅 컨텍스트 내에 속해 있고, 스패닝 요소와 멀티컬럼 컨테이너 사이에 고정 위치 자손을 위한 컨테이닝 블록을 생성하는 요소가 없다면, 첫 번째 수준의 자손보다 더 하위에 위치해도 됩니다.

이 예시에서는 column-span: all 속성이 적용된 요소가 transform: rotate(90deg)가 적용된 요소 내부에 있습니다. transform은 고정 위치 자손을 위한 컨테이닝 블록을 생성하므로, 이 경우에는 스패너가 생성되지 않습니다.

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

article {
  columns: 2;
}

section {
  transform: rotate(90deg);
}

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

테스트

스패너 앞의 단편이 비어 있으면 특별한 동작은 발생하지 않습니다; 상단 마진/테두리/패딩이 스패닝 요소 위에, 빈 fragment로 표시됩니다.

이 예시에서 멀티컬럼 컨테이너는 article 요소입니다. 이 부모 요소 내부에는 하나의 단락과 section 요소가 있습니다. section에는 h2 제목이 들어가 있으며, all로 설정되어 있어 모든 세 컬럼을 가로지릅니다. section 자체는 컬럼 박스 안에 남아 있습니다.

h2는 section의 첫 번째 자식입니다. 즉, 마진, 테두리(다이어그램에서 빨간색으로 표시됨), 그리고 패딩이 스패닝 h2 앞에 빈 단편으로 나타납니다.

<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
}

An element spans all three columns, the red border around the section breaks before the spanner. — `h2` 요소는 column-span: all로 설정되어 있고, section에는 빨간색 테두리와 상단 패딩, 마진이 적용되어 있습니다.

테스트

스패닝 요소는 일반적으로 차지하는 공간보다 더 많은 공간을 차지합니다. 공간이 제한적일 경우, 스패닝 요소를 위한 공간을 찾는 것이 불가능할 수 있습니다. 이런 경우에는 사용자 에이전트가 해당 속성에 none이 지정된 것처럼 요소를 처리할 수 있습니다.

이 예시에서는 h2 요소가 콘텐츠의 뒷부분에 나타나며, 멀티컬럼 컨테이너의 높이가 제한되어 있습니다. 따라서 h2 요소가 오버플로우 영역에 나타나고, 요소를 스패닝으로 만들 공간이 없습니다. 결과적으로 이 요소는 column-span: none이 지정된 것처럼 표시됩니다.

The h2 element is in an overflow column — h2 요소가 오버플로우 컬럼에 있으며, column-span none이 지정된 것처럼 나타납니다.

이 예시는 이전 예시와 유사하지만, H2 요소가 마지막 컬럼에 자연스럽게 나타납니다. 그래도 요소를 스패닝으로 만들기에는 충분한 공간이 없습니다.

The h2 element is in the final column — h2 요소가 마지막 컬럼에 있으며, column-span none이 지정된 것처럼 나타납니다.

테스트

multicol-span-all-002.xht (실시간 테스트) (소스)

단편화된 컨텍스트에서는 모든 단편에서 스패닝 요소가 적용됩니다. 이 예시에서는 페이지 미디어 환경이며, 처음 세 단락 뒤에는 컬럼 나눔이 있습니다. 스패닝 H2 요소가 네 번째 단락 뒤에 나타납니다.

Three columns with two lines of text each — 이 내용은 첫 번째 페이지에 나타납니다.

A spanning element across the three columns, text above and below. — 이 내용은 두 번째 페이지에 나타납니다.

스패너는 블록 레벨 박스이므로, 두 인접한 스패너의 마진은 서로 겹칩니다. 오직 절대 위치 아이템에 의해만 분리된 두 스패너의 마진도 서로 겹칩니다. 절대 위치 아이템은 컬럼 박스를 생성하지 않기 때문입니다. 컬럼 박스는 새로운 블록 포매팅 컨텍스트를 생성하므로, 컬럼 박스 내부 요소의 마진은 스패너의 마진과 겹치지 않습니다.

테스트

스패너는 새로운 포매팅 컨텍스트를 생성하지만, 주변에 의해 마진이 영향을 받을 수 있습니다. 이 예시에서는 두 개의 스패너가 자연스럽게 페이지 상단에 위치하게 됩니다. 첫 번째 스패너의 상단 마진은 강제되지 않은 나눔과 인접하여 잘립니다. 두 스패너 사이의 마진은 서로 겹칩니다. 그러나 두 번째 스패너의 하단 마진은 다음 요소의 상단 마진과 겹치지 않습니다.

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

두 스패닝 요소 사이의 마진은 겹치지만, 스패너의 하단 마진과 다음 요소의 상단 마진은 겹치지 않습니다.

테스트

스패너 관련 추가 테스트.

7. 컬럼 채우기

컬럼을 채우는 전략은 두 가지가 있습니다: 컬럼을 균형 있게 채우거나, 그렇지 않거나입니다. 컬럼이 균형 있게 채워지는 경우, 사용자 에이전트는 컬럼 높이의 변동을 최소화하려고 시도해야 합니다. 이때 강제 나눔, widows 및 orphans, 그리고 컬럼 높이에 영향을 줄 수 있는 기타 속성들을 고려해야 합니다. 균형을 맞추지 않는 경우, 컬럼은 순차적으로 채워집니다; 일부 컬럼은 부분적으로만 채워지거나, 아무 내용도 없을 수 있습니다.

7.1. 컬럼 균형 맞추기: column-fill 속성

이름:	column-fill
값:	auto \| balance \| balance-all
초기값:	balance
적용 대상:	멀티컬럼 컨테이너
상속:	아니오
백분율:	해당 없음
계산된 값:	지정된 키워드
정식 순서:	문법 기준
애니메이션 타입:	불연속적

이 속성은 멀티컬럼 라인에서 즉시 스패너 앞에 있지 않은 콘텐츠가 컬럼 전체에 균형 있게 배분되는지 여부를 지정합니다.

테스트

값은 다음과 같습니다:

balance

컬럼 간에 콘텐츠를 최대한 균등하게 분배합니다. 단편화된 컨텍스트에서는 마지막 단편만 균형을 맞춥니다.

테스트

balance-all

가능한 한 컬럼 간에 콘텐츠를 균등하게 분배합니다. 단편화된 컨텍스트에서는 모든 단편을 균형 있게 맞춥니다.

auto

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

테스트

연속적인 컨텍스트에서는 오버플로우 컬럼이 있을 때 이 속성이 아무런 효과를 주지 않습니다.

이 예시에서 article에는 세 줄로 구성된 짧은 단락 하나만 있습니다. 컬럼 균형 맞추기 때문에 세 줄이 각각 다른 컬럼에 표시됩니다.

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

Four columns, the first three have content. — 컬럼 균형 때문에 세 줄이 각각 세 컬럼에 표시됩니다.

이 예시에서는 컬럼 균형이 꺼져 있고, article에 높이가 지정되어 있습니다:

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

결과적으로 첫 번째 컬럼에 모든 내용이 들어갑니다:

Four columns, the first one has content. — 균형을 맞추지 않아 전체 텍스트가 하나의 단락에 표시됩니다.

이 예시에서 article에는 두 개의 단락이 있습니다: 첫 번째는 긴 단락이고, 두 번째는 더 짧은 단락입니다. 이 코드가 적용됩니다:

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

p {
  break-after: column;
}

가장 짧은 컬럼의 높이는 다섯 줄의 텍스트를 포함합니다. 컬럼 높이가 결정된 후에는 컬럼이 순차적으로 채워집니다. 결과적으로 세 번째 컬럼은 첫 번째와 두 번째 컬럼만큼 높이가 맞춰지고, 마지막 컬럼은 훨씬 짧게 끝납니다.

Four columns, all have content. — 컬럼 높이가 결정된 후 컬럼이 순차적으로 채워집니다.

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

이 예시에서는 article이 끊을 수 없는 figure로 시작하며, 이 figure가 컬럼의 높이를 결정합니다. 이후의 콘텐츠는 나머지 컬럼에 순차적으로 채워집니다:

Column one contains an image, two and three have content. — 컬럼의 높이는 figure로 결정됩니다.

테스트

out-of-flow 요소와 컬럼 균형 조합에 대한 테스트입니다.

균형 맞추기와 관련된 기타 테스트

8. 오버플로우

8.1. 멀티컬럼 컨테이너 내부의 오버플로우

컬럼 나눔을 유발하는 경우를 제외하고, 컬럼 박스 밖으로 확장되는 콘텐츠는 눈에 띄게 오버플로우되며 컬럼 박스에 클리핑되지 않습니다.

참고: 컬럼 나눔에 대해서는 § 5 컬럼 나눔 그리고 멀티컬럼 컨테이너의 콘텐츠 박스에 클리핑되는지에 대해서는 § 8.2 멀티컬럼 컨테이너 외부의 페이지네이션 및 오버플로우를 참고하세요.

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

첫 번째 컬럼의 이미지가 눈에 띄게 오버플로우됨 — 콘텐츠가 눈에 띄게 오버플로우되며 컬럼 박스에 클리핑되지 않습니다.

테스트

8.2. 멀티컬럼 컨테이너 외부의 페이지네이션 및 오버플로우

멀티컬럼 컨테이너의 가장자리에서 컬럼 박스 밖으로 확장되는 콘텐츠와 컬럼 규칙은 overflow 속성에 따라 클리핑됩니다.

멀티컬럼 컨테이너는 다음과 같은 이유로 표시할 공간보다 더 많은 컬럼을 가질 수 있습니다:

컬럼 높이를 제한하는 선언이 있을 때 (예: height 또는 max-height 사용). 이 경우에는 추가 컬럼 박스가 인라인 방향으로 생성됩니다.
페이지의 크기. 이 경우에는 추가 컬럼 박스가 다음 페이지로 이동합니다.
명시적인 컬럼 나눔. 이 경우에는 연속적 컨텍스트에서는 인라인 방향으로 추가 컬럼 박스가 생성되고, 단편화된 미디어에서는 추가 컬럼 박스가 다음 단편으로 이동합니다.

테스트

스크롤 가능한 컨테이너가 여러 컬럼에 걸쳐 분할되지 않는지 확인하는 테스트입니다.

연속적인 컨텍스트에서 멀티컬럼 컨테이너 밖에 나타나는 컬럼을 오버플로우 컬럼이라고 합니다. 오버플로우 컬럼은 멀티컬럼 컨테이너의 높이에 영향을 줄 수 있습니다.

이 예시에서는 멀티컬럼 컨테이너의 높이가 최대 높이로 제한되어 있습니다. 또한 스타일시트에서 넘치는 콘텐츠가 보이도록 지정되어 있습니다:

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

결과적으로 컬럼의 개수가 늘어납니다.

네 개의 컬럼, 하나는 멀티컬럼 컨테이너 밖에 있음 — 오버플로우 컬럼이 인라인 방향으로 생성됩니다.

연속적인 컨텍스트에서는 오버플로우 컬럼이 멀티컬럼 컨테이너의 높이에 영향을 줄 수 있습니다. 이 예시에서는 오버플로우에 네 줄의 텍스트가 있는 컬럼이 나타납니다. 멀티컬럼 컨테이너는 이 컬럼을 수용할 수 있을 만큼 높게 만들어집니다.

네 개의 컬럼, 오버플로우 컬럼이 앞의 세 컬럼보다 더 높음 — 마지막 컬럼은 오버플로우 컬럼이며, 다른 컬럼보다 더 높습니다. 컨테이너는 이 컬럼을 수용할 수 있을 만큼 높습니다.

단편화된 컨텍스트에서는 오버플로우 콘텐츠가 이후 단편의 컬럼으로 이동합니다. 예시 31과 동일한 콘텐츠, 그리고 한 페이지 박스에 서식화된 텍스트 5줄만 표시할 수 있다고 가정하면, 첫 번째 페이지에는 다음과 같이 나타납니다:

컬럼 균형을 가정하면, 두 번째 페이지에는 다음과 같이 나타납니다:

이 예시에서는 단락 뒤에 명시적인 컬럼 나눔이 생성됩니다:

p {
  break-after: column;
}

결과적으로 컬럼의 개수가 늘어나며, 추가 컬럼이 인라인 방향으로 추가됩니다:

페이지 미디어에서는, 추가 컬럼이 다음 페이지에 표시됩니다. 이전 예시와 같은 코드가 적용되면, 마지막 단락은 두 번째 페이지에 나타납니다. 첫 번째 페이지에는 다음과 같이 표시됩니다:

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

컬럼 균형 때문에 마지막 단락이 세 개의 컬럼에 걸쳐 나뉩니다.

부록 B. 변경 사항

이 부록은 참고용입니다.

2021년 10월 12일 후보 권고안(CR) 이후의 변경 사항

스패닝 요소와 멀티컬럼 컨테이너 사이에 고정 위치 자손을 위한 컨테이닝 블록을 생성하는 요소가 없다는 문구 추가. 2022년 3월 9일 해결

2021년 2월 12일 작업 초안(WD) 이후의 변경 사항

멀티컬럼 컨테이너의 out-of-flow 자손이 컬럼 균형과 블록 크기에 영향을 준다는 문구 추가. 2021년 5월 12일 해결
절대 위치 아이템만으로 분리된 두 스패너의 마진이 서로 겹친다는 문구 추가. 2021년 5월 12일 해결
접근성 고려사항 섹션 추가. APA 요청
세로 쓰기 모드에서 컬럼이 어떻게 배치되는지에 대한 설명과 예시 추가. i18n WG 요청

2019년 10월 15일 작업 초안(WD) 이후의 변경 사항

스패닝 요소가 자손에 대해 컨테이닝 블록을 생성하면 해당 내부의 절대 위치 박스에 대해 스패너가 컨테이닝 블록이 되고, 그렇지 않으면 컨테이닝 블록 체인이 멀티컬럼 컨테이너로 이어진다는 문구 추가. 2020년 10월 23일 해결
멀티컬럼 라인에서 스패너 바로 앞이 아닌 콘텐츠가 컬럼 전체에 균형 있게 배분되는지 여부를 지정한다는 문구 추가. 2020년 4월 29일 해결

2018년 5월 28일 작업 초안(WD) 이후의 변경 사항

비규범 텍스트 "However, as described below, setting both the width and number of columns rarely makes sense." 삭제. 편집 2019년 9월 16일, 이슈 4291.
두 인접한 스패너의 마진이 서로 겹치고, 컬럼 박스가 새로운 블록 포매팅 컨텍스트를 생성하므로 컬럼 박스 내부 요소의 마진은 스패너의 마진과 겹치지 않는다는 문단 추가. 2018년 10월 22일 해결, 이슈 2582 참조.
스패닝 요소가 out-of-flow로 처리되어 강제 나눔이 남는다는 설명 추가. "A spanning element is taken out-of-flow, leaving a forced break. This does not affect the painting order of the spanning element." 문단 추가. 2019년 2월 28일 해결.
column-gap 속성 정의를 [CSS3-ALIGN]으로 이동하고, 멀티컬럼에서 column-gap의 사용 값을 설명하는 문단 추가:
"멀티컬럼 포매팅 컨텍스트에서 column-gap 속성의 normal 사용 값은 1em입니다. 이는 초기값을 사용할 때 컬럼이 읽기 쉽도록 보장합니다. 컬럼 규칙이 있다면 gap의 가운데에 나타납니다." 2019년 6월 4일 해결.
멀티컬럼 모델 섹션을 Morten Stenshorne의 의견을 반영하여 재작성.
column-gap의 length-percentage 값에서 at-risk 마커 제거. 2019년 6월 4일 해결.
도입부에서 멀티컬럼의 장점에 대한 언급을 제거하고, 대신 멀티컬럼만의 고유 특성에 대해 언급하도록 수정. 편집 이슈 3654 참조.
2016년 1월 7일 결의 이후 의사 알고리즘 섹션에서 추가된 문장을 규격에 정의되지 않은 tracks 대신 columns로 변경. 2019년 3월 13일 해결.
규격에 사용된 SVG 이미지의 변경 및 명확화.
음수/0이 아닌 값에서 괄호 범위 표기법 사용하도록 구문 변경.

2017년 10월 5일 작업 초안(WD) 이후의 변경 사항

페이지 미디어 참조를 단편화된 컨텍스트 참조로 변경. 2018년 4월 12일 해결.
column-fill 속성에 대한 문장 변경:
연속 미디어에서 이 속성은 오버플로우 컬럼에 아무런 효과가 없습니다.
를
연속 미디어에서 오버플로우 컬럼이 있을 때 이 속성은 아무런 효과가 없습니다.로 변경. 2018년 4월 12일 해결
오버플로우 컬럼이 멀티컬럼 컨테이너 높이에 영향을 줄 수 있음을 보여주는 텍스트와 예시 추가. 2018년 4월 12일 해결
HTML 예시를 SVG 버전으로 교체, 기존 예제가 불명확하다는 이유. 이슈 1087.
column-gap의 normal 값을 UA 지정 길이 대신 1em으로 변경, 1em 권장 문구 삭제. 2018년 4월 4일 해결
column-width에 음수 값 허용하지 않음 명확화, 0 지정은 가능하나 실제 사용 값은 최소 1px로 고정됨. 2018년 3월 14일 해결
스패닝 요소가 있을 때 그 앞의 컬럼 행이 자동으로 균형 있게 배치됨을 명확히 함. 2017년 11월 9일 해결
스패닝 요소가 하위 자손일 경우, 마진/테두리/패딩이 스패너 위쪽에 그려진다는 설명과 예시 추가. 2017년 11월 8일 해결
컬럼 규칙 페인팅에 대한 설명 변경: 컬럼 규칙은 인라인 콘텐츠 레이어에서 페인팅되지만, 멀티컬럼 요소 내부의 모든 인라인 콘텐츠 아래에 그려진다.에서 컬럼 규칙은 멀티컬럼 요소의 테두리 바로 위에 그려진다. 스크롤 가능한 멀티컬럼 요소의 경우 테두리와 배경은 스크롤되지 않지만, 컬럼 규칙은 컬럼과 함께 스크롤되어야 한다.로 변경. 2017년 11월 7일 해결
멀티컬럼을 적용한 요소를 multi-column/multicol "element"에서 "container"로 언급 방식 변경. 2017년 11월 22일 해결
높은 이미지를 컬럼 다음 페이지로 이동한 경우, 컬럼이 비어 있더라도 컬럼 규칙을 그려야 한다는 예시 삭제. 2017년 9월 7일 해결

2011년 4월 12일 후보 권고안(CR) 이후의 변경 사항

2016년 7월 결의에 따라 track 크기 최소값을 CSS Grid 규격에 맞게 UA 지정 값으로 변경. 2016년 1월 7일 해결
column-fill이 오버플로우 컬럼에 효과가 없다는 진술에서 오버플로우 컬럼이 연속 미디어에만 있다는 제한 삭제. 2013년 9월 해결.
balance-all 키워드와 예시 추가. 2013년 9월 해결.
의사 알고리즘 수차례 개정. 2013년 2월 최신 변경.
columns, column-width, column-count가 "블록 컨테이너"에 적용된다는 명확화. 2013년 2월 참조.
나눔 속성이 본 규격에서 CSS Fragmentation Module로 이동.
column-fill이 페이지 나눔 전에 적용된다는 문구로 변경. 2012년 1월 참조.
마진 겹침과 스패닝 요소 처리 예시 및 텍스트 명확화. 2013년 10월 참조.
column-rule-width가 컬럼 크기나 위치에 영향을 주지 않는다는 명확화. 2013년 9월 참조.
각 컬럼 스패닝 요소가 별도의 BFC를 생성하며, 그 사이의 마진은 겹침. 2011년 12월 참조.
컬럼 규칙은 인라인 컨텐츠 레이어에서 페인팅되지만 멀티컬럼 내부의 모든 인라인 컨텐츠 아래에 그려짐. 2013년 2월 참조.
column-span이 멀티컬럼에 있지 않아도 요소가 포매팅 컨텍스트를 생성함을 명확화.
컬럼 스패너가 항상 블록 포매팅 컨텍스트를 생성하지 않음 명확화.
column-gap이 <length-percentage> 값을 허용하도록 변경.
column-width와 column-count가 블록 컨테이너에 적용되지만 테이블 래퍼 박스에는 적용되지 않음.
컬럼을 넘치는 콘텐츠는 클리핑되지 않음.

프라이버시 고려사항

멀티컬럼은 새로운 프라이버시 유출을 발생시키지 않습니다.

보안 고려사항

멀티컬럼은 새로운 보안 고려사항을 발생시키지 않습니다.

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

감사의 글

이 문서는 여러 이전 제안서와 그에 대한 코멘트를 바탕으로 작성되었습니다. 기여자:

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

준수

문서 규약

준수 요구사항은 설명적 주장과 RFC 2119 용어의 조합으로 표현됩니다. “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, “OPTIONAL”이라는 주요 단어들은 문서의 규범적 부분에서 RFC 2119에 명시된 대로 해석해야 합니다. 다만, 가독성을 위해 이 단어들은 본 명세서에서 모두 대문자로 표기되진 않습니다.

이 명세서의 모든 텍스트는 명시적으로 비규범적임을 표시한 부분, 예시, 그리고 참고(not) 부분을 제외하고는 규범적입니다. [RFC2119]

이 명세서의 예시들은 “예를 들어”라는 말로 소개되거나 class="example"로 규범 텍스트와 구분되어 표시됩니다, 다음과 같이:

참고 노트는 “Note”라는 단어로 시작하고 class="note"로 규범 텍스트와 구분되어 표시됩니다, 다음과 같이:

권고(advisements)는 특별한 주의를 환기시키기 위해 스타일링된 규범적 섹션이며 <strong class="advisement">으로 규범 텍스트와 구분되어 표시됩니다, 다음과 같이: UA는 반드시 접근 가능한 대안을 제공해야 합니다.

준수 클래스

이 명세서에 대한 준수는 세 가지 준수 클래스로 정의됩니다:

스타일 시트가 이 명세에 적합하려면, 이 모듈에서 정의한 문법을 사용하는 모든 선언문이 해당 모듈의 개별 문법 및 일반 CSS 문법에 따라 유효해야 합니다.

렌더러가 이 명세에 적합하려면, 스타일 시트를 적절한 명세대로 해석하는 것 외에도, 이 명세서에서 정의한 모든 기능을 올바르게 파싱하고 이에 따라 문서를 렌더링해야 합니다. 단, UA가 기기 한계로 인해 문서를 올바르게 렌더링하지 못하더라도 불적합하다고 간주하지 않습니다. (예를 들어, UA가 모노크롬 모니터에서 색상을 렌더링할 필요는 없습니다.)

저작 도구가 이 명세에 적합하려면, 스타일 시트를 작성할 때, 이 모듈의 각 기능에 대한 개별 문법과 일반 CSS 문법에 맞는 문법적으로 올바른 스타일 시트를 작성해야 하며, 이 모듈에서 설명된 스타일 시트의 모든 다른 준수 요구 사항을 충족해야 합니다.

부분 구현

저자가 향후 호환 파싱 규칙을 활용해 대체값을 지정할 수 있도록, CSS 렌더러는 반드시 사용할 수 없는 수준의 지원을 가진 at-rule, 속성, 속성 값, 키워드 및 기타 구문 구조를 무효로 처리하고 (적절히 무시)해야 합니다. 특히, 사용자 에이전트는 단일 다중 값 선언에서 지원되지 않는 값만 선택적으로 무시하고 지원되는 값을 적용해서는 안 됩니다: 어떤 값이 무효(지원되지 않는 값이어야 함)로 간주되면, CSS에서는 전체 선언을 무시해야 합니다.

불안정 및 독점 기능 구현

향후 안정적인 CSS 기능과의 충돌을 피하기 위해, CSSWG는 최선의 구현 관례를 따를 것을 권장합니다. 불안정 기능 및 독점 확장 CSS 구현에 대해.

비실험적 구현

명세서가 후보 권고 단계에 도달하면, 비실험적 구현이 가능하며, 구현자는 명세에 따라 올바르게 구현된 CR 수준 기능에 대해 접두어 없는 구현을 출시해야 합니다.

CSS의 구현 간 상호 운용성을 확립하고 유지하기 위해, CSS 워킹 그룹은 비실험적 CSS 렌더러가 어떤 CSS 기능의 접두어 없는 구현을 출시하기 전에 구현 보고서(필요할 경우 해당 테스트 케이스 포함)를 W3C에 제출할 것을 요청합니다. W3C에 제출된 테스트 케이스는 CSS 워킹 그룹에 의해 검토 및 수정될 수 있습니다.

테스트 케이스 및 구현 보고서 제출에 관한 추가 정보는 CSS 워킹 그룹 웹사이트 https://www.w3.org/Style/CSS/Test/에서 확인할 수 있습니다. 문의는 public-css-testsuite@w3.org 메일링 리스트로 하세요.

CR 종료 기준

이 명세서가 제안 권고로 진전되기 위해서는, 각 기능에 대해 최소 두 개의 독립적이고 상호 운용 가능한 구현이 있어야 합니다. 각 기능은 서로 다른 제품군에서 구현될 수 있으며, 모든 기능을 단일 제품이 구현할 필요는 없습니다. 이 기준을 위해, 다음 용어를 정의합니다: