CSS 간격 장식 모듈 레벨 1

1. 소개

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

CSS Multicol 1 § 4 열 간격 및 규칙은 멀티컬럼 컨테이너에서 열 사이에 규칙을 그릴 수 있도록 허용합니다. 이 명세는 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의 멀티컬럼 컨테이너, 플렉스 컨테이너, 그리드 컨테이너, 매손리 컨테이너 등 다양한 레이아웃은 자식 박스를 서로 인접하게 배치하며, 이 사이에 간격(또는 거터)이 존재합니다. 각 간격에는 간격 장식이 있을 수 있으며, 이는 인접한 박스 사이에 그려지는 눈에 보이는 구분선(예: 선 등)입니다.

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

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

2.1. 레이아웃 및 페인팅

이 명세는 컨테이너 레이아웃에서 간격의 기하학적 형태를 일반적으로 정의하지 않습니다; 이는 다른 명세에서 다루고 있습니다. CSS Box Alignment 3 § 8 박스 사이의 간격에서 멀티컬럼 컨테이너, 플렉스 컨테이너, 그리드 컨테이너에 관한 정의를 참고하세요.

간격 장식은 공간을 차지하지 않습니다. 즉, 간격 장식의 존재나 너비는 다른 요소의 배치에 영향을 주지 않습니다. 만약 간격 장식이 간격보다 넓으면, 인접 박스가 장식과 겹칠 수 있으며, 경우에 따라 장식이 컨테이너 박스 바깥으로 확장될 수 있습니다. 간격 장식은 컨테이너 테두리 바로 위에 그려집니다. 스크롤 가능한 컨테이너의 경우, 컨테이너의 테두리와 배경은 스크롤되지 않지만, 장식은 컨테이너 내 항목과 함께 스크롤되어야 합니다.

간격 교차점은 다음 위치에 존재하도록 정의됩니다:

• 간격과 컨테이너 컨텐츠 엣지가 교차하는 지점의 중앙
• 서로 다른 방향의 간격이 교차하는 지점의 중앙

다음 예시는 간격 교차점의 위치를 보여줍니다. 각 경우마다 자주색 +로 표시되어 있습니다.

.grid {
  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;
}

참고: CSS Box Alignment 3 § 8.1 행 및 열 거터: row-gap과 column-gap 속성은 플렉스 컨테이너에서 교차 방향의 간격을 한 줄 내 인접 플렉스 항목 사이에 있다고 정의합니다. 위의 예시처럼, #4와 #7의 오른쪽 엣지가 일치하고, #5와 #8의 왼쪽 엣지가 일치하더라도, 두 쌍 사이의 공간은 서로 다른 두 개의 간격입니다. 왜냐하면 각각 다른 줄에 있기 때문입니다. 따라서 #4, #5, #7, #8 사이의 교차점에는 위치가 겹치는 두 개의 간격 교차점이 존재합니다: 하나는 #4와 #5 사이 간격의 아래쪽, 다른 하나는 #7과 #8 사이 간격의 위쪽입니다.

간격 장식은 간격 교차점 쌍을 기준으로, 해당 간격의 중앙과 간격의 엣지에 평행하게 그려집니다.

2.2. 간격 장식을 세그먼트로 나누기: column-rule-break, row-rule-break, rule-break 속성

컨테이너 내의 항목에 의해 형성된 보이는 "T" 또는 "십자" 교차점에서 주어진 간격 내의 장식을 세그먼트로 나누는 동작을 설정합니다. 정확한 값 적용 방법은 간격 장식 끝점 쌍 결정 단계에서 설명합니다.

none

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

spanning-item

간격 장식은 보이는 "T" 교차점에서 시작하고 끝나지만, 보이는 "십자" 교차점에서는 계속 이어집니다.

intersection

간격 장식은 보이는 "T" 및 "십자" 교차점에서 시작하고 끝납니다.

이 값들에 대해 네이밍을 논의하세요.

column-rule-break 및 row-rule-break 속성에 동일한 값을 설정합니다.

2.2.1. 간격 교차점을 세그먼트로 쌍짓기

위 단계에서 식별한 각 끝점 쌍 사이에 간격 장식이 그려집니다.

아래의 예시는 *-rule-break 속성의 다양한 설정을 보여줍니다. 차이를 더욱 명확하게 하기 위해 *-rule-outset 속성은 0으로 설정되어 있습니다.

.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;
  rule-outset: 0px;
}

.break-spanning-item-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: spanning-item;
  rule-outset: 0px;
}

.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;
  rule-outset: 0px;
}

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

참고: Flexbox에는 spanning 항목 개념이 없으므로, spanning-item 값은 flexbox에서 none 값과 동일하게 동작합니다.

.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;
  rule-outset: 0px;
}

2.3. 간격 장식 끝점 조정: column-rule-outset, row-rule-outset, rule-outset 속성

이 속성들은 간격 장식의 끝점을 일반적으로 끝점을 결정하는 간격 교차점에 대해 오프셋할 수 있도록 해줍니다. 기본값 50%는 간격 장식 끝점을 교차점의 중앙에 위치시킵니다. 0 값을 사용하면 간격 장식 끝점이 교차점의 가장자리와 일치합니다. 양수 값은 교차점의 중앙으로 확장되고, 음수 값은 중앙에서 멀어지게 됩니다. 이러한 오프셋은 컨테이너의 가장자리에도 적용되며, 양수 값은 컨테이너의 콘텐츠 경계를 넘어 확장될 수 있습니다.

column-rule-outset 및 row-rule-outset 속성에 동일한 값을 설정합니다.

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

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

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

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

주어진 간격 내에서 간격 교차점을 고려할 때, 각 점에는 다음과 같이 교차 간격 너비가 할당됩니다:

컨테이너의 콘텐츠 가장자리에서

교차 간격 너비는 0입니다.

다른 간격과의 교차점에서

교차 간격 너비는 교차하는 간격에 적용되는 column-gap 또는 row-gap 속성의 사용된 값입니다.

오프셋 적용 방법에 대한 자세한 내용은 간격 장식 끝점 쌍 결정 절차를 참조하세요.

2.4. 간격 장식 페인트 순서: rule-paint-order 속성

2차원 컨테이너에서 간격 장식의 페인트 순서를 설정합니다.

아래 예시는 rule-paint-order 속성을 사용한 간격 장식 페인트 순서 조정을 보여줍니다.

.row-over-coulumn {
  rule-paint-order: row-over-column;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
}

rule-paint-order: column-over-row;
row-rule: 6px solid red;
column-rule: 6px solid blue;

3. 색상, 스타일, 너비

이 섹션의 속성 정의는 [CSS-MULTICOL-1]에서 동일한 이름의 속성 정의보다 우선합니다.

3.1. 간격 장식 색상: column-rule-color 및 row-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> ]+ )

<color>

간격 장식의 색상을 설정합니다.

3.2. 간격 장식 스타일: column-rule-style 및 row-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> 값은 collapsing border 모델에서와 같이 해석됩니다.

3.3. 간격 장식 너비: column-rule-width 및 row-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-style의 계산된 값이 none 또는 hidden인 경우, column-rule-width의 계산된 값은 0이 됩니다. 이 동작은 CSS Multicol 1 § 4.4 The Width Of Column Rules: the column-rule-width property와의 하위 호환성을 위해 제공됩니다.

"0으로 강제"하는 동작이 값 목록이 사용될 때에도 적용되어야 할까요? 만약 그렇다면, 맞지 않는 목록과 함께 이 동작을 어떻게 처리해야 할까요?

3.4. 값 목록과 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()의 두 번째 인자는 해당 속성에서 허용되는 값의 공백으로 구분된 목록입니다.

3.5. 갭 장식 축약형: column-rule 및 row-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>

이 축약형 속성들은 해당 너비, 스타일, 색상 속성들을 한 번에 설정합니다.

3.6. 양방향 갭 장식 축약형: rule-color, rule-style, rule-width, 그리고 rule 속성

이 단축 속성들은 해당하는 column과 row 속성을 동일한 값으로 설정합니다.

개인정보 보호 고려사항

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

보안 고려사항

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