CSS 갭 장식 모듈 레벨 1

1. 소개

이 절은 규범적이지 않습니다.

CSS Multicol 1 § 4 Column Gaps and Rules은 멀티컬럼 컨테이너에서 열 사이에 룰을 그릴 수 있도록 허용합니다. 이 명세는 column-rule-width, column-rule-style, column-rule-color 속성을 확장하여, 행 방향의 동등한 기능을 추가하고, 이를 다른 컨테이너 레이아웃에도 적용하며, 갭 장식이 그려지는 위치와 방식에 대해 고급 제어 기능을 제공합니다.

1.1. 값 정의

이 명세서는 CSS 속성 정의 규칙을 [CSS2]로부터 따릅니다. 값 정의 구문은 [CSS-VALUES-3]를 사용합니다. 본 명세에서 정의하지 않은 값 유형들은 CSS Values & Units [CSS-VALUES-3]에서 정의됩니다. 다른 CSS 모듈과의 조합에 따라 이러한 값 유형의 정의가 확장될 수 있습니다.

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

2. 갭

CSS의 다양한 레이아웃 — 멀티컬럼 컨테이너, 플렉스 컨테이너, 그리드 컨테이너, 그리드 레인 컨테이너 — 들은 자식 박스들을 갭(또는 거터)로 불리는 공간을 사이에 두고 인접하게 배치합니다.

이 명세서에서 갭, 열 갭, 행 갭은 컨테이너 유형에 따라 다음과 같이 정의됩니다:

멀티컬럼 컨테이너

열 방향의 갭(열 갭)은 각 컬럼 박스들 사이의 거터를 의미합니다. (멀티컬럼 라인 내에서) 자세한 내용은 [CSS-MULTICOL-1]을 참고하십시오. 행 방향의 갭(행 갭)은 거터를 의미하며, 이는 컬럼 박스의 행들 사이에 위치하며, column-height로 정의됩니다. 자세한 내용은 [CSS-MULTICOL-2] 참고.

플렉스 컨테이너

메인 축 기준 (예: row column-gap이 적용된 플렉스 컨테이너), 갭(열 갭)은 한 플렉스 라인 내 아이템들 사이의 거터입니다.

크로스 축 기준 (예: row row-gap이 적용된 플렉스 컨테이너), 갭(행 갭)은 인접한 플렉스 라인 사이의 거터입니다.

그리드 컨테이너

행 갭과 열 갭은 각각 거터를 의미하며, 그리드 행과 그리드 열 사이에 위치합니다. 정확한 정보는 CSS Grid Layout 1 § 10.1 Gutters: the row-gap, column-gap, and gap properties 참고.

참고: CSS Box Alignment 3 § 8.1 Row and Column Gutters: the row-gap and column-gap properties에 명시된 바와 같이, justify-content 및 align-content 에 의해 아이템 사이에 추가되는 공간 역시 갭 크기에 포함됩니다.

3. 갭 장식

갭에는 갭 장식이 포함될 수 있으며, 이는 인접 박스 사이에 그려지는 구분선(선 등)입니다.

갭 장식은 공간을 차지하지 않습니다. 즉, 갭 장식의 존재나 너비는 다른 항목의 배치에 영향을 주지 않습니다. 갭 장식이 갭보다 두꺼울 경우, 인접 박스들이 장식 위에 겹쳐질 수 있으며, 어떤 경우에는 장식이 컨테이너 박스 바깥까지 뻗칠 수 있습니다.

갭 장식은 컨테이너의 보더 바로 위에 그려집니다. 스크롤 가능한 컨테이너의 경우에는 컨테이너의 보더와 배경은 스크롤되지 않지만, 장식은 컨테이너 안의 아이템과 함께 스크롤되어야 합니다.

3.1. 기하구조

갭 장식은 갭 안에 하나 이상의 갭 장식 세그먼트로 그려집니다.

3.1.1. 세그먼트 끝점

세그먼트 끝점은 갭의 중심선 위에서 갭 장식 세그먼트가 시작되거나 끝날 수 있는 지점을 의미합니다. 끝점 유형은 두 가지가 있습니다:

• 세그먼트 시작 끝점: 세그먼트가 시작되는 위치.
• 세그먼트 종료 끝점: 세그먼트가 끝나는 위치.

.grid-with-spans {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  background: rgb(255 255 128);
}
.grid > * {
  border: 1px dashed black;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 500px;
  background: rgb(255 255 128);
}
.flex > * {
  border: 1px dashed black;
}

.multi-column {
  column-count: 3;
  column-width: 100px;
  column-height: 50px;
  column-wrap: wrap;
  gap: 20px;
  background: rgb(255 255 128);
}

.multi-column > * {
  height: 100px;
  border: 1px dashed black;
}	

3.1.2. 갭 장식 세그먼트

정의

A 갭 장식 세그먼트는 세그먼트 시작 끝점과 세그먼트 종료 끝점을 쌍으로 연결하여 형성됩니다. 각 갭은 갭 장식 세그먼트들의 집합을 이룹니다.

이 절에서는 갭 장식 세그먼트 s를 s = [s.start, s.end]로 표기하며, 여기서 s.start는 세그먼트의 세그먼트 시작 끝점이고, s.end는 세그먼트의 세그먼트 종료 끝점입니다.

정의하자 UNION(s1, s2) 를 [s1.start, s2.end]와 같다고 한다.

어떤 갭 장식 세그먼트가 스팬하는 아이템들에 의해 양측이 둘러싸여 있다고 하는 것은, 그 끝점들 사이의 모든 갭 접합부에 대해, 해당 접합부에 기여하는 수직(혹은 수평) 갭들을 모두 가로지르는 아이템들이 갭의 반대편 양쪽에 존재할 때를 의미합니다.

주어진 갭의 문맥에서, 두 세그먼트 끝점 쌍 a와 b는 선분이 a에서 b로 그려질 때, 그 선분이 갭과 같은 너비를 가지며 컨테이너의 자식 아이템과 교차하면 비연속적이라고 간주됩니다.

알고리즘

3.2. 교차점에서의 분리 동작: column-rule-break, row-rule-break, rule-break 속성

이 속성들은 컨테이너 내 아이템들에 의해 형성된 눈에 보이는 "T" 또는 "십자" 교차점에서, 데코레이션을 갭 내에서 세그먼트로 분리하는 동작을 설정합니다. 이 값을 적용하는 방법의 정확한 세부사항은 갭 장식 세그먼트 결정 단계에 나와 있습니다.

none

갭 장식이 보이는 "T" 또는 "십자" 교차점에서 시작하거나 끝나지 않습니다. 대신 하나의 연속적인 장식이 갭의 한쪽 끝에서 다른 쪽 끝까지 그려집니다.

normal

동작은 컨테이너 유형에 따라 다릅니다.

그리드 컨테이너

갭 장식은 보이는 "T" 교차점에서 시작하거나 끝나지만, 보이는 "십자" 교차점에서는 연속해 이어집니다.

플렉스 컨테이너

none과 동일하게 동작합니다.

멀티컬럼 컨테이너

column-rule-break에서는 intersection과 동일하게 동작. row-rule-break에서는 none과 동일하게 동작.

intersection

갭 장식은 보이는 "T"와 "십자" 교차점에서 시작 및 끝납니다.

이 축약 속성은 column-rule-break과 row-rule-break에 동일한 값을 설정합니다.

아래의 예제들은 *-rule-break 속성들의 다양한 설정을 보여줍니다.

.break-normal-grid {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: normal;
}

.break-none-grid {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: none;
}

.break-intersection-grid {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: intersection;
}

.break-normal-multicol {
  column-width: 150px;
  column-height: 300px;
  gap: 1em;
  row-rule: 4px solid red;
  column-rule: 4px solid blue;
  rule-break: normal;
}

.break-intersection-multicol {
  column-width: 150px;
  column-height: 300px;
  gap: 1em;
  row-rule: 4px solid red;
  column-rule: 4px solid blue;
  rule-break: intersection;
}

.break-normal-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: normal;
}

각 플렉스 라인은 아이템들 사이에 고유한 갭을 가진다는 점에 주의. 이는 두 가지를 의미함:

1. 인접한 플렉스 라인의 갭 장식은 비록 그 갭이 일치한다고 해도, 서로 분리되어 있음.
2. none은 normal과 동일한 시각적 효과를 가짐.

.break-intersection-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 500px;
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: intersection;
}

3.3. 갭 장식 끝점 조정: rule-inset 속성

이 속성들은 갭 장식의 시작 및 끝점을 데코레이션이 시작되거나 끝나는 세그먼트 끝점에 대해 오프셋할 수 있게 해줍니다.

에지 세그먼트 끝점은 컨테이너의 콘텐츠 에지에서 생성된 모든 세그먼트 끝점이다.

내부 세그먼트 끝점은 갭 접합부에서 생성된 모든 세그먼트 끝점이다.

백분율은 교차 갭 너비를 기준으로 해석하며, 다음과 같이 정의됩니다:

에지 세그먼트 끝점

교차 갭 너비는 0이다.

내부 세그먼트 끝점

교차 갭 너비는 갭 접합부의 같은 방향(행 갭일 때는 가로, 열 갭일 때는 세로) 크기입니다. 갭 안에 세그먼트 끝점이 위치할 때 (행 갭의 경우 수평, 열 갭의 경우 수직).

참고: 일반적으로 이는 교차하거나 인접한 갭에 적용되는 column-gap 또는 row-gap 속성의 사용된 값에, justify-content 또는 align-content로 인한 추가 공간을 더한 것이지만, 갭들이 겹치거나 인접하여 구간이 겹치는 경우에는, 교차 갭 너비는 그런 구간들의 합집합으로 결정됩니다. 그런 예시로는 이 예제 참고.

column-rule-edge-inset-start와 row-rule-edge-inset-start 속성은 세그먼트 시작 끝점 중 에지 세그먼트 끝점에 적용됩니다. column-rule-interior-inset-start와 row-rule-interior-inset-start 속성은 세그먼트 시작 끝점 중 내부 세그먼트 끝점에 적용됩니다. 이 속성들에서 양수 값은 갭 축을 따라 순방향, 음수는 역방향으로 오프셋합니다.

column-rule-edge-inset-end와 row-rule-edge-inset-end 속성은 세그먼트 종료 끝점 중 에지 세그먼트 끝점에 적용됩니다. column-rule-interior-inset-end와 row-rule-interior-inset-end 속성은 세그먼트 종료 끝점 중 내부 세그먼트 끝점에 적용됩니다. 이 속성들에서 양수 값은 갭 축을 따라 역방향, 음수는 순방향으로 오프셋합니다.

3.3.1. -start 및 -end 약어

이 약어들은 작성자가 비대칭 장식을 간결하게 지정할 수 있도록 해줍니다.

.inset-start-8px-end-0px {
  column-rule-inset-start: 8px;
  column-rule-inset-end: 0px;
}

이 약어 속성은 해당 -edge- 및 -interior- 속성에 같은 값을 설정합니다. 예를 들어, column-rule-inset-start는 column-rule-edge-inset-start와 column-rule-interior-inset-start에 동일한 값을 설정합니다.

이 약어 속성은 column-rule-inset-start와 row-rule-inset-start에 동일한 값을 설정합니다.

이 약어 속성은 column-rule-inset-end와 row-rule-inset-end에 동일한 값을 설정합니다.

3.3.2. -edge- 및 -interior- 약어

이 약어들은 작성자가 에지 교차점과 내부 교차점에서 서로 다른 처리를 가능하게 합니다.

.inset-edge-0px-interior-negative-5px {
  column-rule-edge-inset: 0px;
  column-rule-interior-inset: -5px;
  column-rule-break: intersection;
}

이 약어들은 해당 -start 및 -end 속성에 값을 설정합니다. 예를 들어, column-rule-edge-inset은 column-rule-edge-inset-start 및 column-rule-edge-inset-end에 모두 값을 설정합니다. 하나의 값만 지정하면 두 속성 모두 그 값이 설정되고, 두 개의 값을 지정하면 첫 번째 값은 -start, 두 번째는 -end에 각각 설정됩니다.

이 약어 속성은 column-rule-edge-inset 및 row-rule-edge-inset에 동일한 값을 설정합니다.

이 약어 속성은 column-rule-interior-inset 및 row-rule-interior-inset에 동일한 값을 설정합니다.

3.3.3. 범용 약어

이 약어들은 컨테이너 전체에 일관된 처리를 쉽게 지정할 수 있습니다.

.inset-0px {
  column-rule-inset: 0px;
  column-rule-break: intersection;
}

.inset-positive-5px {
  column-rule-inset: 5px;
  column-rule-break: intersection;
}

.inset-negative-5px {
  column-rule-inset: -5px;
  column-rule-break: intersection;
}

.inset-negative-50percent {
  column-rule-inset: -50%;
  column-rule-break: intersection;
}

이 약어들은 해당 edge 및 interior 시작/끝 값을 함께 설정합니다. 값의 순서는 다음과 같습니다:

edge-start edge-end? [/ interior-start interior-end?]?

값이 생략되는 경우 다음 순서로 채웁니다:

1. interior 값이 생략되면 edge 값에서 복사합니다.
2. end 값이 생략되면 해당 start 값에서 복사합니다.

이 약어 속성은 column-rule-inset 및 row-rule-inset에 동일한 값을 설정합니다.

3.4. 갭 장식 표시 여부: rule-visibility-items 속성

이 속성들은 갭 장식 세그먼트가 빈 영역과 인접한 갭의 부분에 그려질지 여부를 제어합니다.

all

인접한 아이템의 존재와 관계없이 모든 갭 세그먼트에 장식을 그린다.

around

두 인접 영역 중 하나라도 아이템이 차지하면 갭 세그먼트에 장식을 그린다.

between

두 인접 영역 모두 아이템이 차지할 때만 갭 세그먼트에 장식을 그린다.

이 약어 속성은 column-rule-visibility-items와 row-rule-visibility-items에 동일한 값을 설정합니다.

.break-normal-with-all-grid {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-visibility-items: all;
}

.break-normal-with-around-grid {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-visibility-items: around;
}

.break-normal-with-between-grid {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-visibility-items: between;
}

3.5. 갭 장식 겹침: rule-overlap 속성

이 속성은 겹치는 갭 장식의 페인트 순서를 설정합니다.

row-over-column

가로(행) 방향 장식이 세로(열) 방향 장식 위에 그려집니다.

column-over-row

세로(열) 방향 장식이 가로(행) 방향 장식 위에 그려집니다.

.row-over-column {
  rule-overlap: row-over-column;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
}

.column-over-row {
  rule-overlap: column-over-row;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
}

3.6. 단편화

CSS Box Alignment 3 § 8.1 Row and Column Gutters: the row-gap and column-gap properties는 갭이 단편화 분기(fragmentation break)와 일치하는 지점에서 사라진다고 명시합니다. 그러한 위치에는 갭이 존재하지 않으므로, 그들 안에는 갭 장식도 그려지지 않습니다.

4. 색상, 스타일 및 너비

이 절의 속성 정의는 동일한 이름을 가진 속성들의 정의를 [CSS-MULTICOL-1]의 정의보다 우선합니다.

4.1. 갭 장식 색상: column-rule-color, row-rule-color, 및 rule-color 속성

<line-color-list>          = <line-color-or-repeat>#

<auto-line-color-list>     = <line-color-or-repeat>#? ,
                             <auto-repeat-line-color> ,
                             <line-color-or-repeat>#?

<line-color-or-repeat>     = [ <color> | <repeat-line-color> ]

<repeat-line-color>        = repeat( [ <integer [1,∞]> ] , [ <color> ]# )

<auto-repeat-line-color>   = repeat( auto , [ <color> ]# )

이들 속성은 갭 장식의 색상을 설정합니다.

이 축약 속성은 column-rule-color와 row-rule-color에 동일한 값을 설정합니다.

4.2. 갭 장식 스타일: column-rule-style, row-rule-style, 그리고 rule-style 속성

<line-style-list>          = <line-style-or-repeat>#

<auto-line-style-list>     = <line-style-or-repeat>#? ,
                             <auto-repeat-line-style> ,
                             <line-style-or-repeat>#?

<line-style-or-repeat>     = [ <line-style> | <repeat-line-style> ]

<repeat-line-style>        = repeat( [ <integer [1,∞]> ] , [ <line-style> ]# )

<auto-repeat-line-style>   = repeat( auto , [ <line-style> ]# )

이 속성들은 갭 장식의 스타일을 설정합니다. <line-style> 값은 border-style에 대해 적용하는 것과 동일하게 적용됩니다.

이 약어 속성은 column-rule-style과 row-rule-style에 동일한 값을 설정합니다.

4.3. 갭 장식 너비: column-rule-width, row-rule-width, 그리고 rule-width 속성

<line-width-list>          = <line-width-or-repeat>#

<auto-line-width-list>     = <line-width-or-repeat>#? ,
                             <auto-repeat-line-width> ,
                             <line-width-or-repeat>#?

<line-width-or-repeat>     = [ <line-width> | <repeat-line-width> ]

<repeat-line-width>        = repeat( [ <integer [1,∞]> ] , [ <line-width> ]# )

<auto-repeat-line-width>   = repeat( auto , [ <line-width> ]# )

이 속성들은 갭 장식의 너비를 설정합니다. 음수 값은 허용되지 않습니다.

이 약어 속성은 column-rule-width 및 row-rule-width에 동일한 값을 설정합니다.

4.4. 갭 장식 축약형: column-rule, row-rule, 그리고 rule 속성

<gap-rule-list>        = <gap-rule-or-repeat>#

<gap-auto-rule-list>   = <gap-rule-or-repeat>#? ,
                         <gap-auto-repeat-rule> ,
                         <gap-rule-or-repeat>#?

<gap-rule-or-repeat>   = <gap-rule> | <gap-repeat-rule>

<gap-repeat-rule>      = repeat( <integer [1,∞]> , <gap-rule># )

<gap-auto-repeat-rule> = repeat( auto , <gap-rule># )

<gap-rule>             = <line-width> || <line-style> || <color>

이 축약 속성들은 column-rule-width, column-rule-style, column-rule-color 속성이나, row-rule-width, row-rule-style, row-rule-color 속성 값들을 각각 설정합니다.

이 축약 속성은 column-rule 및 row-rule에 동일한 값을 설정합니다.

4.5. 값 목록과 repeat() 표기법

이 절의 각 속성은 쉼표로 구분된 값 목록을 허용합니다. 이렇게 여러 값을 지정함으로써 특정 컨테이너 안에서 갭 장식을 다양하게 적용할 수 있습니다.

column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: red, blue;

이런 목록에는 repeat() 표기가 포함될 수 있습니다. CSS Grid Layout 1 § 7.2.3 Repeating Rows and Columns: the repeat() notation과 유사하게, 이 표기는 반복 패턴을 가진 일련의 갭 장식을 더욱 간단하게 작성하도록 해줍니다.

repeat() 구문의 일반 형태는 대략 다음과 같습니다.

repeat( [ <integer [1,∞]> | auto ] , <value># )

repeat()의 첫 번째 인수는 반복 횟수를 지정합니다.

<integer>

정수 반복자를 지정합니다. 정수 반복자는 두 번째 인자의 값 목록을 첫 번째 인수가 지정한 횟수만큼 반복한 것으로 펼쳐집니다.

작성자는 이렇게 쓸 수 있습니다:

column-rule-color: gray, red, blue, red, blue, red, blue, gray;

또는, 아래와 같이 동일한 색 시퀀스를 더 간단히 쓸 수 있습니다:

column-rule-color: gray, repeat(3, red, blue), gray;

auto

auto 반복자를 지정합니다. auto 반복자는 리스트의 다른 부분에서 값을 할당받지 않은 갭에 대해 값을 채우는 데 사용됩니다. 주어진 값 리스트에서 repeat()가 auto 반복자인 경우는 최대 한 번만 쓸 수 있습니다.

앞의 예를 이어서, 레이아웃의 컬럼 개수를 모르는 경우 다음과 같이 쓸 수 있습니다:

column-rule-color: gray, repeat(auto, red, blue), gray;

그러면 첫 번째와 마지막 컬럼 갭에는 회색이, 중간 갭에는 빨강과 파랑이 반복되어 적용됩니다.

repeat()의 두 번째 인수는 해당 repeat()가 들어가는 속성에서 허용하는 값들의 쉼표 구분 목록이어야 합니다.

4.6. 갭에 갭 장식 값 할당하기

갭 장식은 값 할당 전,거터 축소(gutter collapsing)가 적용된 이후입니다. 주어진 축소된 거터 세트는 정확히 하나의 갭 장식을 소비합니다. 그 다음 갭 장식은 다음 거터(혹은 축소된 거터들의 세트)에 적용되므로, 축소된 거터들은 장식 목적상 하나의 갭으로 간주됩니다.

4.7. 목록 값의 보간

repeat() 값이나 rule-color 또는 rule-width의 값 목록을 보간할 때, 보간은 다음의 두 단계로 진행됩니다:

1. 확장: 모든 정수 반복자를 해당하는 값 목록으로 확장합니다.
2. 목록 보간: 확장된 목록들에 대해 반복 가능한 목록 보간 알고리즘을 적용하여, 각 항목을 대응 항목과 보간합니다.

@keyframes example {
  from { column-rule-width: 10px; }
  to   { column-rule-width: 20px, 40px; }
}

From:   10px, 10px
At 50%: 15px, 25px
To:     20px, 40px

@keyframes example {
  from { column-rule-width: repeat(2, 5px, 10px); }
  to   { column-rule-width: repeat(2, 15px, 20px); }
}

From:    5px, 10px,  5px, 10px
At 50%: 10px, 15px, 10px, 15px
To:     15px, 20px, 15px, 20px

@keyframes example {
  from { column-rule-width: repeat(2, 10px, 20px); }
  to   { column-rule-width: 20px; }
}

From:   10px, 20px, 10px, 20px
At 50%: 15px, 20px, 15px, 20px
To:     20px, 20px, 20px, 20px

@keyframes example {
  from { column-rule-width: repeat(2, 10px, 20px); }
  to   { column-rule-width: 20px, 30px; }
}

From:   10px, 20px, 10px, 20px
At 50%: 15px, 25px, 15px, 25px
To:     20px, 30px, 20px, 30px

@keyframes example {
  from { column-rule-width: 10px, repeat(auto, 20px), 30px }
  to   { column-rule-width: 20px, repeat(auto, 40px), 40px }
}

From:   10px, repeat(auto, 20px), 30px
At 50%: 15px, repeat(auto, 30px), 35px
To:     20px, repeat(auto, 40px), 40px

@keyframes example {
  from { column-rule-width: 10px, 20px, repeat(auto, 20px), 30px }
  to   { column-rule-width: 20px, 30px, repeat(auto, 40px, 50px), 40px }
}

From:   10px, 20px, repeat(auto, 20px, 20px), 30px
At 50%: 15px, 25px, repeat(auto, 30px, 35px), 35px
To:     20px, 30px, repeat(auto, 40px, 50px), 40px

@keyframes example {
  from { column-rule-width: 10px, repeat(auto, 20px) }
  to   { column-rule-width: 20px, 30px, repeat(auto, 40px, 50px) }
}

@keyframes example {
  from { column-rule-width: 10px, repeat(auto, 20px), 30px }
  to   { column-rule-width: 20px, repeat(auto, 40px), 40px, 50px }
}

@keyframes example {
  from { column-rule-width: 10px, repeat(auto, 20px), 30px }
  to   { column-rule-width: 20px }
}

4.8. 직렬화

column-rule, row-rule, 및 rule 약어는 구성 요소인 롱핸드 속성들로부터 직렬화되지만, 이는 롱핸드 속성들이 반복자 정렬(repeater aligned)된 경우에만 해당합니다. 롱핸드 속성들이 반복자 정렬되지 않은 경우, 약어는 빈 문자열로 직렬화됩니다.

column-rule: 1px solid red, 2px dashed green, 3px dotted blue;

column-rule-width: 1px, 2px, 3px;
column-rule-style: solid, dashed, dotted;
column-rule-color: red, green, blue;

column-rule: 1px solid red, repeat(2, 2px dashed green);

column-rule-width: 1px, repeat(2, 2px);
column-rule-style: solid, repeat(2, dashed);
column-rule-color: red, repeat(2, green);

column-rule: repeat(auto, 1px solid red, 2px dashed green);

column-rule-width: repeat(auto, 1px, 2px);
column-rule-style: repeat(auto, solid, dashed);
column-rule-color: repeat(auto, red, green);

column-rule: repeat(auto, 1px solid red, 2px dashed green);
column-rule-width: repeat(auto, 3px, 4px, 5px);

column-rule-width: repeat(auto, 3px, 4px, 5px);
column-rule-style: repeat(auto, solid, dashed);
column-rule-color: repeat(auto, red, green);

column-rule: repeat(2, 1px solid red, 2px dashed green);
column-rule-style: dashed, dotted, solid;

column-rule-width: repeat(2, 1px, 2px);
column-rule-style: dashed, dotted, solid;
column-rule-color: repeat(2, red, green);

column-rule: repeat(2, 1px solid red, 2px dashed green);
column-rule-color: repeat(4, red, cyan);

column-rule-width: repeat(2, 1px, 2px);
column-rule-style: repeat(2, solid, dashed);
column-rule-color: repeat(4, red, cyan);

5. 감사의 글

이 명세서는 다음을 포함한 많은 사람들의 기여와 피드백으로 가능해졌습니다: Ahmad Shadeed, Alison Maher, Benoît Rouleau, Elika Etemad, Ian Kilpatrick, Javier Contreras Tenorio, Josh Tumath, Kurt Catti-Schmidt, Lea Verou, Oliver Williams, Rachel Andrew, Sam Davis Omekara Jr., Sebastian Zartner, Tab Atkins-Bittner, 그리고 CSS 워킹 그룹 회원들. Gap Decorations에 대한 초기 제안을 초안해 주신 Mats Palmgren께 특별한 감사를 전합니다.

6. 개인정보 보호 고려사항

이 명세서에 대해 보고된 새로운 개인정보 보호 고려사항은 없습니다.

7. 보안 고려사항

이 명세서에 대해 보고된 새로운 보안 고려사항은 없습니다.

8. 변경 사항

8.1. 2025-04-17 작업 초안 이후의 변경 사항

• 트랙 축소로 인해 갭이 일치하는 경우의 동작을 명시했습니다. (Issue 11814)
• rule-paint-order의 이름을 rule-overlap로 변경했습니다. (Issue 12540)
• 교차(intersections) 정의를 gutter를 사용하도록 업데이트했습니다. (Issue 12084)
• 후행(trailing) 갭 장식 할당을 순방향 순서의 값들을 사용하도록 업데이트했습니다. (Issue 12527)
• 반복자를 포함할 수 있는 값들의 보간 작을 명시했습니다. (Issue 12431)
• column-rule-width 의 계산값이 0이 되는 특수 사례( none 또는 hidden일 때)를 제거했습니다. (Issue 11494)
• rule-outset 속성들을 rule-inset으로 변경하고 관련 속성들을 도입했습니다. (Issue 12603, Issue 12848, Issue 8402)
• inset 속성들의 초기 값을 0으로 업데이트하고 auto 키워드를 제거했습니다. (Issue 13137)
• 갭이 단편화(fragment) 분기 때문에 억제되는 곳에서는 갭 장식이 그려지지 않는다는 문단을 추가했습니다. (Issue 11520)
• 트랙 축소로 인해 갭이 일치하는 경우의 동작을 업데이트했습니다. (Issue 11814)
• 별개의 롱핸드들로부터 약어를 직렬화하는 섹션을 추가했습니다. (Issue 12201)
• 색상, 너비, 스타일 롱핸드 속성들을 공백으로 구분된 목록 대신 쉼표로 구분된 목록을 사용하도록 업데이트했습니다. (Issue 12201)
• 빈 그리드 영역 옆의 갭 장식 섹션을 추가했습니다. (Issue 12602)
• 정렬 공간(alignment space)이 갭 크기에 기여한다는 점을 명확히 했습니다. (Issue 12922)
• break 값 spanning-item의 이름을 normal으로 변경했습니다. (Issue 13127)
• 예시들을 명세 변경에 맞게 새로 고쳤습니다.
• WPT 테스트 스위트에 대한 링크들을 추가했습니다.
• 감사의 글 섹션을 추가했습니다.