CSS 박스 정렬 모듈 레벨 3

1. 소개

CSS 레벨 1과 2에서는 text-align을 사용하여 텍스트 정렬과 auto 마진을 균형 있게 맞춰 블록 정렬을 할 수 있었습니다. 하지만 테이블 셀을 제외하면, 수직 정렬은 불가능했습니다. CSS가 더 많은 기능을 추가함에 따라, 박스를 다양한 차원에서 정렬할 수 있는 능력이 더욱 중요해집니다. 이 모듈은 CSS 전체에서 공유할 수 있는 일관되고 공통적인 박스 정렬 모델을 만들고자 합니다.

참고: 텍스트와 인라인 레벨 콘텐츠의 정렬은 [CSS-TEXT-3]와 [CSS-INLINE-3]에서 정의됩니다.

참고: 이 명세는 여기 정의된 속성들이 초기값으로 설정될 때 CSS2.1에서 정의된 동작을 변경하려는 목적이 아닙니다. 구현자나 다른 사람이 불일치를 발견하면, CSSWG에 오류로 보고해 주시기 바랍니다.

위 섹션은 규범적인 내용이 아닙니다.

1.1. 모듈 상호작용

이 모듈은 [CSS2]의 9장과 10장에서 설명된 블록 레이아웃 모델에 새로운 정렬 기능을 추가하고, 과도하게 제약된 블록 레벨 박스 마진이 해결되는 방법을 재정의하며, vertical-align을 사용해 테이블 셀 콘텐츠 정렬과의 상호작용을 정의합니다. 관련 내용은 [CSS2] 17장에 있습니다.

이 속성들의 Grid Layout [CSS-GRID-1] 및 Flexible Box Layout [CSS-FLEXBOX-1]과의 상호작용은 각각의 모듈에서 정의되어 있습니다. 여기의 속성 정의는 [CSS-FLEXBOX-1](더 적고 이전의 허용값 집합)에서의 정의를 대체합니다.

이 모듈의 어떤 속성도 ::first-line 또는 ::first-letter 의사 요소에는 적용되지 않습니다.

1.2. 값 정의

이 명세는 CSS 속성 정의 규약을 [CSS2]에서 따르며, 값 정의 문법은 [CSS-VALUES-3]에서 사용합니다. 이 명세에서 정의되지 않은 값 타입은 CSS 값 및 단위 [CSS-VALUES-3]에서 정의됩니다. 다른 CSS 모듈과의 결합으로 이러한 값 타입의 정의가 확장될 수 있습니다.

속성별 정의에 명시된 값 외에도, 이 명세에서 정의된 모든 속성은 CSS-wide 키워드도 속성 값으로 사용할 수 있습니다. 가독성을 위해 명시적으로 반복하지 않았습니다.

1.3. 부분 구현

이 모듈의 기능 지원이 영향을 받는 다양한 레이아웃 모델에 따라 단계적으로 배포될 것으로 예상되므로, 부분 구현에 대한 규칙이 명확히 적용됩니다. 즉, 지원되지 않는 기능은 무효로 처리해야 하며, 해당 정렬 키워드가 적용되는 모든 레이아웃 모듈에서 지원되지 않는 경우에는 일반적으로 해당 속성을 지원하는 모델에서 무효로 처리해야 합니다.

예를 들어, 어떤 구현이 align-self를 [CSS-GRID-1]과 [CSS-FLEXBOX-1]에서 지원한다면, start가 두 컨테이너(그리드와 플렉스) 모두에서 지원되지 않으면 무효로 처리해야 합니다. 하지만 같은 구현이 블록 레벨 요소에서는 align-self를 전혀 지원하지 않는 경우, align-self: start를 미구현해도 무효로 처리하는 요구 사항이 적용되지 않습니다.

2. 정렬 속성 개요

CSS의 박스 정렬 속성은 박스를 다른 박스 안에서 정렬하는 6개의 속성 집합입니다. 이 속성들은 두 가지 축으로 설명할 수 있습니다:

• 적용되는 차원 (메인/인라인 vs. 교차/블록)
• 박스를 부모 안에서 위치시키는지, 혹은 박스 내부의 콘텐츠를 정렬하는지 여부

참고: 이 명세는 “justify”와 “align” 용어를 사용하여 메인/인라인과 교차/블록 차원에서의 정렬을 구분합니다. 완전히 임의적인 선택이지만, 두 용어를 사용함으로써 CSS의 모든 레이아웃 모델(CSS Flexbox 1 § 2 Flex Layout Box Model and Terminology 포함)에서 일관된 명명 체계를 쓸 수 있습니다.

다음 표는 박스 정렬 속성과 적용 가능한 display 타입을 요약합니다.

공통	축	정렬 대상	적용 대상
justify-content	메인/인라인	요소 내부의 콘텐츠 (실제로 padding 조정)	블록 컨테이너, 플렉스 컨테이너, 그리드 컨테이너
align-content	교차/블록
justify-self	인라인	부모 내 요소 (실제로 margin 조정)	블록 레벨 박스, 절대 위치 박스, 그리드 아이템
align-self	교차/블록		절대 위치 박스, 플렉스 아이템, 그리드 아이템
justify-items	인라인	박스 내부 아이템 (자식 아이템의 justify-self: auto 제어)	블록 컨테이너, 그리드 컨테이너
align-items	교차/블록		플렉스 컨테이너, 그리드 컨테이너

참고: *-items 속성은 해당 요소 자체에는 영향을 미치지 않습니다. 컨테이너에 설정하면, 자식 요소에 사용된 *-self: auto의 해석 방식을 지정합니다.

3. 정렬 용어

이 모듈이 CSS의 모든 레이아웃 모드에 대한 정렬 속성을 정의하므로, 몇 가지 추상적인 용어가 도입됩니다:

정렬 대상

정렬 대상은 해당 속성에 의해 정렬되는 것 또는 것들입니다. justify-self와 align-self의 경우, 정렬 대상은 속성이 설정된 박스의 마진 박스이며, 해당 박스의 쓰기 모드를 따릅니다. justify-content와 align-content의 경우, 정렬 대상은 레이아웃 모드에 따라 정의되며, 해당 콘텐츠의 일부를 의미합니다. 또한, 속성이 설정된 박스의 쓰기 모드를 따릅니다.

정렬 컨테이너

정렬 컨테이너는 정렬 대상이 그 안에서 정렬되는 사각형입니다. 이는 레이아웃 모드에 의해 정의되지만, 일반적으로 정렬 대상의 포함 블록이며, 해당 블록을 설정하는 박스의 쓰기 모드를 따릅니다.

대체 정렬

일부 정렬은 특정 상황에서만 충족될 수 있거나, 사용할 수 있는 공간이 제한됩니다. 예를 들어, space-between은 정렬 대상이 2개 이상일 때만 동작하며, 기준선 정렬이 충족된 후에는 남는 공간을 모두 흡수할 수 없을 수 있습니다. 이 경우 대체 정렬이 적용되어 (아래에 정의됨) 남는 공간을 완전히 소진합니다.

4. 정렬 키워드

모든 정렬 속성은 공통된 키워드 값 집합을 사용하며, 이 섹션에서 정의합니다. 키워드는 세 가지 범주로 나뉩니다:

위치 정렬

이 키워드는 정렬 컨테이너 내에서의 절대 위치로 정렬을 정의합니다.

기준선 정렬

이 키워드는 여러 정렬 대상의 기준선 사이의 관계로 정렬을 정의하며, 정렬 컨텍스트 내에서 적용됩니다.

분포 정렬

이 키워드는 정렬 대상 사이의 공간 분포로 정렬을 정의합니다.

4.1. 위치 정렬: center, start, end, self-start, self-end, flex-start, flex-end, left, right 키워드

위치 정렬 키워드는 정렬 대상을 그 정렬 컨테이너 기준에서 어디에 위치시킬지 지정합니다.

각 값의 의미는 다음과 같습니다:

center (self, content)

정렬 대상을 정렬 컨테이너 안에서 가운데에 맞춥니다.

start (self, content)

정렬 대상을 해당 축에서 정렬 컨테이너의 시작 가장자리에 맞춥니다.

end (self, content)

정렬 대상을 해당 축에서 정렬 컨테이너의 끝 가장자리에 맞춥니다.

self-start (self)

정렬 대상을 정렬 컨테이너의 해당 축에서 정렬 대상의 시작 방향에 맞춥니다.

self-end (self)

정렬 대상을 정렬 컨테이너의 해당 축에서 정렬 대상의 끝 방향에 맞춥니다.

flex-start (self, content)

플렉스 레이아웃에서만 사용됩니다. [CSS-FLEXBOX-1] 정렬 대상을 정렬 컨테이너의 플렉스 컨테이너의 main-start 또는 cross-start 방향에 맞춥니다.

플렉스 포맷팅 컨텍스트 밖에서 사용 시, 이 값은 start처럼 동작합니다. 즉, 플렉스 아이템이 아닌 박스(또는 플렉스 아이템처럼 동작하는 박스, 예를 들어 static position을 결정할 때 플렉스 컨테이너의 자식인 절대 위치 박스)에서는, self-alignment 속성에서 사용 시 start처럼 동작하며, 플렉스 컨테이너가 아닌 박스의 content-distribution 속성에서는 start처럼 동작합니다.

flex-end (self, content)

플렉스 레이아웃에서만 사용됩니다. 정렬 대상을 정렬 컨테이너의 플렉스 컨테이너의 main-end 또는 cross-end 방향에 맞춥니다.

플렉스 포맷팅 컨텍스트 밖에서 사용 시, 이 값은 end처럼 동작합니다. 즉, 플렉스 아이템이 아닌 박스(또는 플렉스 아이템처럼 동작하는 박스, 예를 들어 static position을 결정할 때 플렉스 컨테이너의 자식인 절대 위치 박스)에서는, self-alignment 속성에서 사용 시 end처럼 동작하며, 플렉스 컨테이너가 아닌 박스의 content-distribution 속성에서는 end처럼 동작합니다.

left (justify-*에만 사용)

정렬 대상을 정렬 컨테이너의 line-left 혹은 물리적 왼쪽 가장자리에 맞춥니다. 해당 축에서 적합한 방향을 사용합니다.

속성의 축이 좌↔우 축과 평행하지 않으면, 이 값은 start와 같이 동작합니다. 현재로서는 속성의 축이 좌↔우 축과 평행하지 않은 유일한 경우는 column 플렉스박스입니다.

right (justify-*에만 사용)

정렬 대상을 정렬 컨테이너의 line-right 혹은 물리적 오른쪽 가장자리에 맞춥니다. 해당 축에서 적합한 방향을 사용합니다.

속성의 축이 좌↔우 축과 평행하지 않으면, 이 값은 start와 같이 동작합니다. 현재로서는 속성의 축이 좌↔우 축과 평행하지 않은 유일한 경우는 column 플렉스박스입니다.

이 값들의 특정 부분집합을 나타내는 두 가지 문법 용어가 있습니다:

<self-position>

이 집합은 justify-self와 align-self에서 박스를 정렬 컨테이너 안에서 정렬할 때 사용되며, justify-items, align-items에서도 (justify-self와 align-self의 기본값 지정) 사용됩니다.

<self-position> = center | start | end | self-start | self-end |
        flex-start | flex-end

<content-position>

이 집합은 justify-content와 align-content에서 박스의 콘텐츠를 내부에서 정렬할 때 사용됩니다.

<content-position> = center | start | end | flex-start | flex-end

참고: left와 right는 <self-position> 및 <content-position>에는 포함되지 않습니다. 위치 정렬 값으로 justify-content/justify-self/justify-items에서 유효하지만, align-* 속성에서는 허용되지 않습니다. 대신 justify-* 속성의 문법에 명시적으로 포함됩니다.

"start"와 "end"의 이중 축 특성을 직교 플로우에서 더 이해하기 쉽게 설명 필요.

4.2. 기준선 정렬: baseline 키워드와 first / last 수식어

CSS Writing Modes 3 § 4.1 기준선 소개 참고.

기준선 정렬은 공유 정렬 컨텍스트(예: 한 행의 셀) 내에서 여러 정렬 대상의 정렬 기준선을 맞춰 위치시키는 위치 정렬의 한 형태입니다. 기준선 공유 그룹 내에서 정렬 대상의 위치가 기준선 정렬로 완전히 제약되지 않는 경우(즉, 기준선 정렬을 유지하면서 각각의 정렬 컨테이너 내에서 이동 가능할 때), 가능한 한 기준선 정렬을 유지하며 대체 정렬이 적용됩니다.

기준선 정렬 키워드는 <baseline-position> 문법 용어로 표현됩니다:

<baseline-position> = [ first | last ]? && baseline

first 와 last 값은 박스에 기준선 정렬 선호도를 부여합니다: 각각 “first” 또는 “last”이며, 기본값은 “first”입니다.

각 값의 의미는 다음과 같습니다:

baseline

first baseline으로 계산되며, 아래에 정의되어 있습니다.

first baseline

first-baseline 정렬에 참여: 박스의 첫 번째 기준선 집합의 정렬 기준선을 해당 기준선 공유 그룹의 대응 기준선에 맞춥니다. 자세한 내용은 § 9.3 박스의 기준선 정렬을 참조하세요.

대체 정렬은 first baseline에 대해 safe self-start(self-alignment인 경우) 또는 safe start(content-distribution인 경우)입니다.

last baseline

last-baseline 정렬에 참여: 박스의 마지막 기준선 집합의 정렬 기준선을 해당 기준선 공유 그룹의 대응 기준선에 맞춥니다. 자세한 내용은 § 9.3 박스의 기준선 정렬을 참조하세요.

대체 정렬은 last baseline에 대해 safe self-end(self-alignment인 경우) 또는 safe end(content-distribution인 경우)입니다.

align-content에 지정된 경우, 이 값들은 기준선 콘텐츠 정렬을 유발하여 박스의 콘텐츠가 콘텐츠 박스 내에서 이동하게 하며, 박스 자체의 크기에 영향을 줄 수 있습니다. 자세한 내용은 § 5.4 기준선 콘텐츠 정렬을 참조하세요.

align-self / justify-self에 지정된 경우, 이 값들은 기준선 자기 정렬을 유발하여 박스 전체가 컨테이너 내에서 이동하게 하며, 컨테이너의 크기에 영향을 줄 수 있습니다. 자세한 내용은 § 6.4 기준선 자기 정렬을 참조하세요.

박스에 기준선 자기 정렬이 지정된 경우, 콘텐츠 분포가 먼저 수행되고, 그 결과 박스와 콘텐츠가 자기 정렬됩니다. 단, 박스가 동일 축에 기준선 콘텐츠 정렬을 가지고 있거나, 동일 축의 콘텐츠 분포 속성이 normal인 경우, 해당 축의 사용된 콘텐츠 분포 속성은 "first" 또는 "last" 기준선 자기 정렬 선호도에 따라 각각 start 또는 safe end가 됩니다.

예시 이미지를 추가하세요.

박스가 공유 정렬 컨텍스트에 속하지 않으면, 대체 정렬이 사용됩니다. 예를 들어 align-content: baseline이 블록 박스에 지정되면, start 정렬로 대체됩니다. 대체 정렬은 기준선 공유 그룹이 정렬 컨테이너 내에서 정렬될 때에도 사용됩니다.

참고: 두 키워드는 동일하며, baseline이 더 짧으므로, CSSOM은 first baseline을 baseline으로 직렬화합니다. CSSOM § 6.7.2 CSS 값 직렬화 참고.

참고: 관련성이 약간 있는 vertical-align 속성의 경우, CSS2.1의 설계 결정 불일치로 인해 baseline은 first baseline과 동일하지 않습니다. 인라인 레벨 박스의 기준선 정렬 선호도는 display에 따라 달라집니다. (예: inline-block은 기본적으로 마지막 기준선을 사용하고, inline-table은 기본적으로 첫 번째 기준선을 사용합니다.)

4.3. 분포 정렬: stretch, space-between, space-around, space-evenly 키워드

분포 정렬 값은 justify-content와 align-content에서 컨테이너의 추가 공간을 정렬 대상 사이에 분산시킬 때 사용됩니다.

공간을 이 방식으로 분산할 수 없는 경우, 해당 값은 대체 정렬처럼 동작합니다. 각 분포 값에는 기본 대체 정렬이 있습니다. (향후 모듈에서는 대체 정렬을 명시적으로 지정할 수 있게 할 수 있습니다.)

space-between

정렬 대상들을 정렬 컨테이너 내에서 균등하게 분포시킵니다. 첫 번째 정렬 대상은 정렬 컨테이너의 시작 가장자리에, 마지막 정렬 대상은 끝 가장자리에 배치되고, 나머지 정렬 대상은 인접한 정렬 대상 간의 간격이 동일하도록 분포됩니다.

이 값의 기본 대체 정렬은 safe flex-start입니다. (플렉스 레이아웃이 아닌 경우 flex-start는 start와 동일합니다.)

space-around

정렬 대상들을 정렬 컨테이너 내에서 균등하게 분포시키며, 양 끝에는 절반 크기의 공간이 추가됩니다. 정렬 대상은 인접한 정렬 대상 간의 간격이 동일하며, 첫 번째와 마지막 정렬 대상 전후 간격은 나머지 간격의 절반입니다.

이 값의 기본 대체 정렬은 safe center입니다.

space-evenly

정렬 대상들을 정렬 컨테이너 내에서 균등하게 분포시키며, 양 끝에는 완전한 크기의 공간이 추가됩니다. 정렬 대상은 인접한 정렬 대상 간, 첫 번째 정렬 대상 전, 마지막 정렬 대상 후의 간격이 모두 동일하게 분포됩니다.

이 값의 기본 대체 정렬은 safe center입니다.

stretch

정렬 대상의 전체 크기가 정렬 컨테이너보다 작으면, auto 크기의 정렬 대상의 크기가 동일하게(비례적 아님) 증가하며, max-height/max-width(또는 동등 기능)의 제약을 존중하면서 전체 크기가 정렬 컨테이너를 정확히 채우도록 합니다.

이 값의 기본 대체 정렬은 flex-start입니다. (플렉스 레이아웃이 아닌 경우 flex-start는 start와 동일합니다.)

참고: 이 `align-content/stretch` 정의는 content-distribution 속성에 적용됩니다; self-alignment 속성 justify-self/align-self에는 별도의 stretch 값이 있으며, 이 값은 정렬 대상을 정렬 컨테이너에 정확히 맞추도록 확장 또는 축소할 수 있습니다.

이 값들은 <content-distribution> 문법 용어로 표현됩니다:

<content-distribution> = space-between | space-around | space-evenly | stretch

4.4. 오버플로우 정렬: safe 및 unsafe 키워드와 스크롤 안전 한계

정렬 대상이 정렬 컨테이너보다 클 경우, 오버플로우가 발생합니다. 일부 정렬 모드는 이런 상황에서 적용될 경우, 데이터 손실을 야기할 수 있습니다: 예를 들어, 사이드바의 콘텐츠가 가운데 정렬된 경우, 오버플로우가 발생하면 일부 박스가 뷰포트의 시작 가장자리를 넘어가버릴 수 있습니다. 이 영역은 스크롤로 접근할 수 없습니다.

이런 상황을 제어하기 위해 오버플로우 정렬 모드를 명시적으로 지정할 수 있습니다. “unsafe” 정렬은 오버플로우 상황에서도 지정한 정렬 방식을 그대로 적용하며, 데이터 손실이 발생할 수 있습니다. “safe” 정렬은 오버플로우 상황에서 데이터 손실을 피하려고 정렬 방식을 변경합니다. 기본 동작은 정렬 대상을 스크롤 가능한 영역 내에 유지하는 것이지만, 작성 시점에는 이 안전 기능이 아직 구현되지 않았습니다.

<overflow-position> = unsafe | safe

safe

정렬 대상의 크기가 정렬 컨테이너를 넘으면, 정렬 대상은 정렬 모드가 start인 것처럼 정렬됩니다.

unsafe

정렬 대상과 정렬 컨테이너의 상대적인 크기와 관계없이, 지정된 정렬 값이 그대로 적용됩니다.

(값 미지정)

오버플로우 정렬이 명시적으로 지정되지 않은 경우, 기본 오버플로우 정렬은 “safe”와 “unsafe”의 혼합 동작입니다. 자세한 내용은 § 4.4.1 자동 오버플로우 정렬 안전성 참고.

4.4.1. 자동 오버플로우 정렬 안전성

속성에 오버플로우 정렬 모드가 지정되지 않은 경우, 기본 동작은 safe와 unsafe 사이에 있으며, 레이아웃 모드에 따라 달라집니다.

4.4.1.1. 스크롤 컨테이너의 콘텐츠 분포

콘텐츠 분포에서 스크롤 컨테이너에 대한 기본 오버플로우 정렬 동작은 unsafe입니다. normal이 아닌 content-distribution 속성 값은 오버플로우된 콘텐츠에 접근할 수 있도록 스크롤 가능한 오버플로우 영역을 변경합니다. 자세한 내용은 § 5.3 정렬 오버플로우 및 스크롤 컨테이너 참고.

4.4.1.2. 절대 위치 박스의 자기 정렬

절대 위치 정렬 대상의 해당 self-alignment 속성이 normal이 아닌 경우, 기본 오버플로우 정렬 동작은 다음과 같습니다:

(위 조건을 만족하지 않는 절대 위치 정렬 대상은 § 4.4.1.3 기타 정렬 참고.)

4.4.1.3. 기타 정렬

그 외 모든 요소의 경우:

1. 정렬 대상이 정렬 컨테이너를 오버플로우하면, 지정한 대로 정렬(unsafe)합니다.

2. 정렬 대상이 가장 가까운 조상 스크롤 컨테이너의 스크롤 가능한 오버플로우 영역을 오버플로우할 경우, (“스크롤 불가능” 영역으로 확장된다면) 남은 오버플로우를 반대 방향으로 이동시켜 제한합니다.

“스마트” 기본 동작을 구현하는 것이 웹 호환성에 문제가 있을 수 있으므로(가능성은 높지만 기대함), UA는 이에 대한 피드백을 WG에 전달해야 합니다. “스마트” 기본 동작을 구현하지 않은 UA는 safe로 align-content를 블록 컨테이너에서 동작시키고, 그 외에는 unsafe로 동작해야 합니다.

5. 콘텐츠 분포: 박스 내부 콘텐츠의 정렬

콘텐츠 분포는 박스의 콘텐츠가 콘텐츠 박스 내부에서 어떻게 정렬되는지 제어합니다. content-distribution 속성 align-content 및 justify-content(그리고 place-content 축약형)으로 지정합니다.

5.1. justify-content 및 align-content 속성

박스 콘텐츠 전체(정렬 대상)를 박스 자체(정렬 컨테이너) 내에서 정렬합니다: justify-content는 박스의 인라인/행/main 축, align-content는 블록/열/cross 축에 따라 정렬합니다. normal 외의 값은 위 § 4 정렬 키워드에서 정의됩니다.

모든 레이아웃 모드에서, 정렬 대상과 정렬 컨테이너 모두 *-content 속성이 설정된 박스의 쓰기 모드를 따릅니다.

5.1.1. 블록 컨테이너(테이블 셀 포함)

5.1.2. 다단 컨테이너

5.1.3. 플렉스 컨테이너

자세한 내용은 [CSS-FLEXBOX-1] 참고.

5.1.4. 그리드 컨테이너

자세한 내용은 [CSS-GRID-1] 참고.

5.2. 콘텐츠 분포 축약형: place-content 속성

이 축약형 속성은 align-content와 justify-content를 한 번에 설정합니다. 첫 번째 값은 align-content에 할당됨. 두 번째 값은 justify-content에 할당됨; 생략 시 첫 번째 값을 복사함, 단 그 값이 <baseline-position>이면 기본값은 start임.

5.3. 정렬 오버플로우 및 스크롤 컨테이너

content-distribution 속성이 오버플로우가 발생한 scroll container의 alignment subject에 설정되면, 음수 스크롤 가능 오버플로우 영역의 클리핑을 alignment subject가 자신의 start 정렬 위치로 스크롤될 수 있을 만큼만 줄입니다.

참고: 정렬 대상은 스크롤 오버플로우 영역과 반드시 동일하지는 않음: 정렬 대상을 넘는 콘텐츠(예: out-of-flow 박스)는 스크롤 오버플로우 영역을 키우지만 정렬 대상은 늘리지 않음. 그러므로 end 정렬된 스크롤 컨테이너는 처음에 완전히 바닥까지 스크롤되지 않을 수 있고, 위치가 지정된 콘텐츠는 더 깊은 음수 스크롤 오버플로우 영역에 있을 경우 클리핑될 수 있음.

참고: 스크롤바가 있으면 스크롤 컨테이너의 콘텐츠 박스의 크기가 달라질 수 있음—​즉, 정렬 컨테이너와/또는 정렬 대상의 크기도 변할 수 있음.

5.4. 기준선 콘텐츠 정렬

행과 유사한 레이아웃 컨텍스트(공유 정렬 컨텍스트)에 참여하는 박스의 콘텐츠는 서로 기준선 정렬될 수 있습니다. 기준선 콘텐츠 정렬은 박스의 패딩을 효과적으로 늘려 해당 콘텐츠의 정렬 기준선을 동일 기준선 공유 그룹 내 다른 박스의 기준선과 맞춥니다.

기준선 콘텐츠 정렬은 align-content 축이 박스의 block 축과 평행할 때만 적용됩니다 (즉, "column" 플렉스 컨테이너에는 적용되지 않음); 그렇지 않으면 대체 정렬이 사용됩니다.

기준선 콘텐츠 정렬에 참여하는 박스 집합은 레이아웃 모델에 따라 다릅니다:

테이블 셀:

(대체되지 않은) 테이블 셀은 인라인 축이 테이블과 평행하고, 계산된 align-content가 first baseline(last baseline)일 때, 행의 시작/끝에서 기준선 콘텐츠 정렬에 참여합니다.

참고: 동일 컬럼을 공유하는 셀의 기준선 콘텐츠 정렬은 지원되지 않습니다; 하지만 수요와 구현자 관심이 충분하다면 향후 버전에서 추가될 수 있습니다.

플렉스 아이템:

대체되지 않은 플렉스 아이템은 인라인 축이 main 축과 평행하고, 계산된 align-content가 first baseline/last baseline일 때, 플렉스 라인에서 기준선 콘텐츠 정렬에 참여합니다.

그리드 아이템:

대체되지 않은 그리드 아이템은 인라인 축과 평행한 행 또는 열의 시작/끝에서, 계산된 align-content가 first baseline/last baseline일 때 기준선 콘텐츠 정렬에 참여합니다.

추가적으로, 기준선 콘텐츠 정렬에 참여하려면 조정된 자기 정렬 선호도도 있어야 하며, 해당 박스가 기준선 공유 그룹의 다른 박스와 같은 방향의 가장자리가 맞춰지도록 보장해야 합니다. 즉, 박스의 start(end) 마진 가장자리가 박스의 가장자리와 실제로 맞춰지도록 해야 하며, 포함 블록 내에서 기준선 정렬 선호도가 "first"("last")일 때 적용됨. 그렇지 않으면 대체 정렬이 적용됩니다.

추가 자세한 내용은 § 9.3 박스의 기준선 정렬을 참고. 기준선 콘텐츠 정렬은 박스의 고유 크기를 늘릴 수 있습니다.

6. 자기 정렬: 박스를 부모 내에서 정렬

자기 정렬은 박스가 포함 블록 내에서 어떻게 정렬되는지 제어합니다. self-alignment 속성 align-self, justify-self(그리고 place-self 축약형)으로 지정합니다.

6.1. 인라인 축(또는 메인 축) 자기 정렬: justify-self 속성

박스(즉, 정렬 대상)를 포함 블록(즉, 정렬 컨테이너) 내 인라인/행/메인 축을 따라 정렬합니다: 박스의 바깥쪽 가장자리를 정렬 컨테이너 내에서 정렬 값에 따라 맞춥니다. 각 값의 의미는 다음과 같습니다:

auto

부모가 없거나 절대 위치 박스의 실제 위치를 결정할 때는 normal처럼 동작합니다. 그 외에는 부모 박스의 계산된 justify-items 값을 따릅니다 (legacy 키워드는 제외), (절대 위치 박스의 static 위치 결정 포함).

normal

레이아웃 모드의 “기본” 정렬을 나타냅니다. 동작은 아래에 설명한 레이아웃 모드에 따라 다릅니다.

stretch

박스의 계산된 width/height (해당 축 기준) 값이 auto이고, 해당 축의 마진이 모두 auto가 아니면, 박스의 외부 크기가 정렬 컨테이너를 최대한 채우도록 필요한 길이로 사용 크기를 설정합니다. 단, min-height/min-width/max-height/max-width의 제약을 존중합니다.

명시적으로 지정하지 않은 경우, 이 값은 일반적으로 flex-start로 대체되고, 동일 축에 first baseline 또는 last baseline 기준선 콘텐츠 정렬이 지정된 경우 각각 self-start 또는 self-end로 대체됩니다.

참고: stretch 키워드는 요소를 컨테이너에 맞추기 위해 축소시킬 수도 있습니다.

<baseline-position>

기준선 자기 정렬을 나타냄. 자세한 내용은 § 4.2 기준선 정렬: baseline 키워드와 first/last 수식어, § 6.4 기준선 자기 정렬, § 9 기준선 정렬 세부사항 참고.

<overflow-position>? <self-position>

위 § 4 정렬 키워드에서 정의됨.

stretch 외의 값은 width/height가 auto인 경우 fit-content로 처리됩니다.

참고: auto 마진은 마진 영역 크기를 효과적으로 조정하므로, justify-self보다 우선합니다.

6.1.1. 블록 레벨 박스

6.1.2. 절대 위치 박스

이 섹션은 justify-self가 절대 위치 박스의 마진 박스가 (절대 위치) 포함 블록 기준으로 어떻게 배치되는지에 미치는 영향을 설명합니다.

6.1.3. 테이블 셀

이 속성은 테이블 셀에 적용되지 않습니다. 테이블 레이아웃에 의해 위치와 크기가 완전히 제약되기 때문입니다.

6.1.4. 플렉스 아이템

이 속성은 플렉스 아이템에는 적용되지 않습니다. 메인 축에 여러 아이템이 있기 때문입니다. 늘어남은 flex, 메인 축 정렬은 justify-content 참고. [CSS-FLEXBOX-1]

6.1.5. 그리드 아이템

[CSS-GRID-1]에서 자세한 내용 참고.

6.2. 블록 축(또는 교차 축) 자기 정렬: align-self 속성

박스(즉, 정렬 대상)를 포함 블록(즉, 정렬 컨테이너) 내 블록/열/교차 축을 따라 정렬합니다: 박스의 바깥쪽 가장자리를 정렬 컨테이너 내에서 정렬 컨테이너 정렬 값에 따라 맞춥니다. 각 값의 의미는 다음과 같습니다:

auto

부모가 없거나 절대 위치 박스의 실제 위치를 결정할 때는 normal처럼 동작합니다. 그 외에는 부모 박스의 계산된 align-items 값을 따릅니다 (legacy 키워드는 제외), (절대 위치 박스의 static 위치 결정 포함).

normal

레이아웃 모드의 “기본” 정렬을 나타내며, 아래에 정의되어 있습니다.

stretch

justify-self의 § 6.1 인라인 축(또는 메인 축) 자기 정렬: justify-self 속성에서 정의된 대로 동작합니다.

<baseline-position>

기준선 자기 정렬을 나타냅니다, 자세한 내용은 § 4.2 기준선 정렬: baseline 키워드와 first/last 수식어, § 6.4 기준선 자기 정렬, § 9 기준선 정렬 세부사항 참고.

<overflow-position>? <self-position>

위 § 4 정렬 키워드에서 정의됨.

참고: auto 마진은 마진 영역 크기를 효과적으로 조정하므로, align-self보다 우선합니다.

6.2.1. 블록 레벨 박스

align-self 속성은 블록 레벨 박스(플로트 포함)에는 적용되지 않습니다. block 축에 여러 아이템이 있기 때문입니다.

6.2.2. 절대 위치 박스

이 섹션은 align-self가 절대 위치 박스의 마진 박스가 (절대 위치) 포함 블록 기준으로 어떻게 배치되는지에 미치는 영향을 설명합니다.

6.2.3. 테이블 셀

이 속성은 테이블 셀에 적용되지 않습니다. 테이블 레이아웃에 의해 위치와 크기가 완전히 제약되기 때문입니다.

6.2.4. 플렉스 아이템

자세한 내용은 [CSS-FLEXBOX-1] 참고.

6.2.5. 그리드 아이템

자세한 내용은 [CSS-GRID-1] 참고.

6.3. 자기 정렬 축약형: place-self 속성

이 축약형 속성은 align-self와 justify-self를 한 번에 모두 선언합니다. 첫 번째 값은 align-self에 할당됩니다. 두 번째 값은 justify-self에 할당되며; 생략 시 첫 번째 값을 복사합니다.

6.4. 기준선 자기 정렬

행과 유사한 레이아웃 컨텍스트(공유 정렬 컨텍스트)에 참여하는 박스는 서로 기준선 정렬될 수 있습니다. 기준선 자기 정렬은 박스의 마진을 효과적으로 늘려 해당 박스의 정렬 기준선을 동일 기준선 공유 그룹 내 다른 박스의 기준선과 맞춥니다.

기준선 자기 정렬에 참여하는 박스 집합은 레이아웃 모델에 따라 다릅니다:

플렉스 아이템:

플렉스 아이템은 계산된 align-self가 first baseline 또는 last baseline일 때, 해당 플렉스 라인 내에서 기준선 자기 정렬에 참여함. 자세한 내용은 [CSS-FLEXBOX-1] 참고.

그리드 아이템:

그리드 아이템은 align-self 또는 justify-self 속성(각각)이 first baseline 또는 last baseline으로 계산될 때, 해당 행 또는 열의 시작/끝에서 기준선 자기 정렬에 참여함.

정확한 세부사항은 § 9.3 박스의 기준선 정렬 참고. 기준선 자기 정렬은 박스의 고유 크기 기여도를 늘릴 수 있습니다.

6.5. static-position 인셋을 가진 절대 위치 박스의 크기 조정 영향

인라인 축 오프셋이 모두 auto인 절대 위치 박스의 경우, 사용 가능한 공간이 inline 크기를 계산할 때 정렬의 영향을 받습니다.

참고: [CSS2]에서는 사용 가능한 공간이 direction 속성에서 결정됩니다. (CSS2§10.3.7, CSS2§10.3.8 참고.) 기본적으로 이 규칙들은 auto 인셋 중 하나(기본적으로 시작 가장자리 인셋)를 static-position 사각형의 해당 가장자리로 설정하고, 다른 하나는 포함 블록의 해당 가장자리(즉, 인셋을 0으로 설정)로 맞춥니다. self-alignment 속성이 포함 블록의 direction 참조를 대체해서 배치할 뿐 아니라, 여기서 지정한 대로 크기 조정의 참조도 대체합니다.

따라서, CSS2§10.3.7 및 CSS2§10.3.8의 규칙을 해석할 때, direction 속성이 static-position 포함 블록에 참조될 때마다, 대신 align-self 또는 justify-self 속성(해당 축에 적용되는 것으로 정의된 것)을 참조하고, left-equivalent 정렬은 ltr 정의에 맞게, right-equivalent 정렬은 rtl 정의에 맞게 처리합니다. normal은 start로, 분포 정렬 값은 해당 대체 정렬로 처리합니다.

center 정렬의 경우, 박스의 사용 가능한 공간은 static-position 사각형의 중앙과 포함 블록에서 가장 가까운 가장자리 사이의 거리를 두 배로 한 값입니다.

참고: align-self, justify-self 속성은 크기 조정의 추가 측면도 변경할 수 있습니다: 예를 들어 justify-self: stretch는 fit-content 크기 조정을 사용 가능한 공간에 맞춘 stretch-fit 크기로 대체합니다(모든 사용 가능한 공간을 소모). 이는 여기서의 사용 가능한 공간 조정과는 별개의 효과입니다.

참고: 이것은 절대 위치 박스의 크기 조정을 위한 사용 가능한 공간 계산에만 영향을 줍니다; 정렬 자체는 이전 섹션에서 정의한 대로 동작합니다.

7. 기본 정렬

align-items와 justify-items 속성 (그리고 place-items 축약형) 은 요소의 자식 박스에 대한 기본 align-self 및 justify-self 동작을 설정합니다.

7.1. 인라인 축(또는 메인 축) 기본 정렬: justify-items 속성

이 속성은 포맷팅 컨텍스트에 참여하는 모든 자식 박스(익명 박스 포함)에 대해 기본 justify-self를 지정합니다. 각 값의 의미는 다음과 같습니다:

legacy

이 키워드는 값이 자손에게 효과적으로 상속되도록 합니다.

legacy 키워드가 단독으로 나타날 경우 (left, right, center 키워드가 동반되지 않은 경우): justify-items의 상속 값에 legacy 키워드가 포함되어 있으면, 이 값은 상속 값으로 계산됨; 그렇지 않으면 normal로 계산됨.

justify-self:auto가 justify-items 값을 참조할 때, alignment 키워드만 참조하고 legacy 키워드는 참조하지 않습니다. 이것은 HTML의 <center> 요소와 align 속성의 legacy 정렬 동작을 구현하기 위해 존재합니다.

다른 값은 특별한 처리가 없으며 단순히 justify-self에서 참조됩니다.

7.2. 블록 축(또는 교차 축) 기본 정렬: align-items 속성

이 속성은 포맷팅 컨텍스트에 참여하는 모든 자식 박스(익명 박스 포함)에 대해 기본 align-self를 지정합니다.

값은 특별한 처리가 없으며 단순히 align-self에서 참조됩니다.

7.3. 기본 정렬 축약형: place-items 속성

이 축약형 속성은 align-items와 justify-items를 한 번에 모두 선언합니다. 첫 번째 값은 align-items에 할당됩니다. 두 번째 값은 justify-items에 할당되며; 생략 시 첫 번째 값을 복사합니다.

8. 박스 사이의 간격

margin과 padding을 사용해 개별 박스 주변의 시각적 간격을 지정할 수 있지만, 특정 레이아웃 컨텍스트 내에서 인접 박스 사이의 간격을 전역적으로 지정하는 것이 더 편리할 때가 있습니다. 특히 형제 박스 사이의 간격과 첫/마지막 박스와 컨테이너 가장자리 사이의 간격이 다를 때 유용합니다.

gap 속성, 그리고 그 row-gap 및 column-gap 하위 속성은 다단, 플렉스, 그리드 레이아웃에서 이런 기능을 제공합니다.

8.1. 행 및 열 거터: row-gap, column-gap 속성

이 속성들은 컨테이너 내 아이템 사이의 고정 길이 거터를 지정하며, 아이템 사이에 공간을 추가합니다—​이는 space-between 키워드와 유사하지만, 남는 공간의 분수 대신 고정 크기를 사용합니다. column-gap 속성은 "열" 사이의 간격을 지정하며, 컨테이너의 인라인 축에서 박스 사이를 인라인 축 마진처럼 분리합니다; row-gap은 "행" 사이의 간격을 지정하며, 컨테이너의 block 축에서 박스 사이를 분리합니다.

각 값의 의미는 다음과 같습니다:

<length-percentage [0,∞]>

레이아웃 모드에 따라 "행" 또는 "열" 사이의 gap을 지정합니다; 자세한 내용은 아래 하위 섹션 참고.

음수 값은 무효입니다. 백분율의 경우, § 8.3 gap 속성의 백분율 참고.

normal

normal은 다단 컨테이너에서는 1em의 사용값, 그 외 모든 컨텍스트에서는 0px의 사용값을 의미합니다.

거터는 아이템 사이의 최소 간격을 제공합니다: 추가적인 간격은 justify-content나 align-content로 더해질 수 있습니다. 이 추가 공간은 거터 크기를 효과적으로 증가시킵니다.

이 속성들의 정확한 동작은 레이아웃 컨테이너별로 다릅니다:

다단 컨테이너

column-gap은 인접 거터를, 컬럼 박스 사이의 간격을 지정; [CSS-MULTICOL-1] 참고. row-gap은 거터를 column-box가 column-height로 생성한 행 사이에 지정; [CSS-MULTICOL-2] 참고.

플렉스 컨테이너

main 축(예: row column-gap이 플렉스 컨테이너에서 적용될 때) 에서는 아이템 사이의 최소 간격 지정 (인접 플렉스 아이템 사이에 추가 고정 크기 마진이 삽입된 것처럼 동작).

교차 축(예: row row-gap이 플렉스 컨테이너에서 적용될 때) 에서는 인접 플렉스 라인 사이의 최소 간격을 지정.

그리드 컨테이너

row-gap과 column-gap 속성은 그리드 컨테이너에 지정된 경우 거터를 그리드 행과 그리드 열 사이에 각각 정의합니다. 자세한 사항은 CSS Grid Layout 1 § 10.1 Gutters: the row-gap, column-gap, and gap properties 참고.

모든 경우에 거터는 단편화 분리점(fragmentation break)과 일치할 때 사라집니다. [CSS-BREAK-3]

참고: 테이블 박스는 gap 속성을 사용해 셀 사이를 분리하지 않습니다. 대신 border-spacing 속성을 사용하며, 이 속성은 약간 다른 기능을 가집니다: 상속되며, 테이블의 가장 바깥쪽 셀과 테두리 사이의 추가 간격도 지정합니다 (space-evenly와 유사, space-between과는 다름).

8.2. Gap 축약형: gap 속성

이 속성은 축약형으로, row-gap과 column-gap을 한 번에 설정합니다. <'column-gap'>이 생략되면, <'row-gap'>과 같은 값으로 설정됩니다.

참고: gap 속성은 박스 사이에 생성되는 “거터” 또는 “골목”의 눈에 보이는 구성 요소 중 하나일 뿐입니다. 마진, 패딩, 또는 분포 정렬의 사용은 gap에서 지정한 것 이상의 박스 사이 간격을 증가시킬 수 있습니다.

8.3. gap 속성의 백분율

일반적으로, gap 속성으로 도입된 gap은 gap의 크기를 가진 빈 아이템/트랙 등처럼 동작하도록 의도되었습니다; 즉, 저자는 gap의 효과를 단순히 추가 빈 아이템/트랙 등을 컨테이너에 삽입하여 재현할 수 있어야 합니다.

gap 속성의 백분율은 항상 해당 요소의 콘텐츠 박스의 해당 크기를 기준으로 계산됩니다. 이 크기가 명확할 때, 동작은 잘 정의되어 있고 레이아웃 모드 간에 일관됩니다. 하지만 레이아웃 모드마다 순환 백분율 크기를 아이템/트랙 등에서 다르게 처리하므로, gap도 마찬가지입니다:

그리드 레이아웃에서

최소 크기 속성 및 마진/패딩과 동일하게 [CSS-SIZING-3], 순환 백분율 크기는 고유 크기 기여도를 결정할 때는 0을 기준으로 계산하고, 박스의 콘텐츠를 레이아웃할 때는 박스의 콘텐츠 박스를 기준으로 계산합니다.

플렉스 레이아웃에서

순환 백분율 크기는 모든 경우에 0을 기준으로 계산됩니다.

8.4. 레거시 Gap 속성: grid-row-gap, grid-column-gap, grid-gap 속성

Grid Layout 모듈은 원래 자체 거터 속성 세트로 작성되었으며, 이후 모든 거터 속성이 기존 row-gap/column-gap 네이밍으로 통합되었습니다. 레거시 콘텐츠와의 호환성을 위해, 아래와 같이 grid 접두어가 붙은 이름도 지원해야 합니다:

• grid-row-gap은 레거시 이름 별칭으로 row-gap 속성에 대응

• grid-column-gap은 레거시 이름 별칭으로 column-gap 속성에 대응

• grid-gap은 레거시 이름 별칭으로 gap 속성에 대응

9. 기준선 정렬 세부사항

기준선 공유 그룹의 박스들은 정렬 기준선을 사용해 서로 정렬됩니다. 예를 들어, 수평 쓰기 모드에서는, 동일 행의 테이블 셀에 align-content: baseline을 지정하면 각 셀의 첫 번째 형식화 라인의 기준선들이 정렬됩니다. 이 섹션에서는 국제화된 현대 CSS에서 존재하는 다양한 기준선과 쓰기 모드를 고려해 기준선 정렬이 정확히 어떻게 수행되는지 정의합니다.

baseline set은 공통 기준선 테이블과 연관된 여러 기준선(알파벳, 중앙 등)의 집합입니다. 일반적으로 조판 전통은 이 중 하나만 사용하지만, 서로 다른 쓰기 시스템은 서로 다른 기준선을 사용하고, 쓰기 시스템을 혼합하면 하나의 라인 내에서 둘 이상의 기준선을 사용할 수도 있습니다. 자세한 기준선과 쓰기 모드 정보는 CSS Writing Modes 3 § 4.1 기준선 소개 참고.

9.1. 박스의 기준선 결정

박스마다, 특정 축에 대해, first baseline set(및 last baseline set) 을 가질 수 있고, 이는 박스 내의 첫/마지막 텍스트 행의 baseline set에 해당합니다. alignment baseline은 박스가 정렬 컨텍스트 내에서 정렬되는 데 사용하는 기준선으로, baseline set 중 하나이며 일반적으로 공유 정렬 컨텍스트와 연관된 주요 기준선입니다. (자세한 내용은 dominant-baseline과 alignment-baseline 속성을 [CSS-INLINE-3]에서 참고.)

박스의 첫/마지막 baseline set은 레이아웃 모델에 따라 다음과 같이 다르게 결정됩니다:

line box

line box의 첫/마지막 baseline set은 root inline box의 dominant-baseline과 폰트 설정에서 생성됩니다.

block containers

block container의 첫/마지막 baseline set은 block container 내 in-flow 첫/마지막 line box 또는 첫/마지막 in-flow block-level 자식 중 기준선 집합을 제공하는 자식 중 가장 먼저/마지막 것을 취함. 해당 line box나 자식이 없으면, block container는 baseline set을 가지지 않음.

단, 레거시 이유로 baseline-source가 auto(초기값) 인 경우, block-level 또는 inline-level block container가 scroll container인 경우 항상 last baseline set을 가지며, 해당 기준선은 모두 block-end 마진 가장자리에 대응합니다.

multi-column containers

다단 컨테이너의 첫 baseline set은 컬럼 또는 multi-column spanner 중 가장 높은(block-start 기준선) 기준선을 가지는 것의 baseline set으로, 다단 컨테이너의 alignment baseline에 대응함. 해당 line box나 자식이 없으면 다단 컨테이너는 첫 baseline set을 가지지 않음.

마지막 baseline set은 유사하게 last baseline set과 가장 낮은(block-end 기준선)을 사용함.

tables

table box의 첫/마지막 baseline set은 첫/마지막 행의 첫/마지막 baseline set임.

inline-block의 첫/마지막 기준선 set을 찾을 때, 테이블 박스가 제공하는 기준선은 건너뛰어야 함. (이 동작은 [CSS2]의 레거시 쿼크임.)

table rows

행 내 셀 중 first baseline 또는 last baseline 정렬에 참여하는 셀이 있으면 행의 첫/마지막 baseline set은 해당 셀들의 공유 alignment baseline과 행의 첫 사용 가능한 폰트에서 alignment가 수행된 후 generated됨. 아니면, 행의 첫/마지막 baseline set은 행 내 셀의 가장 낮은/높은 콘텐츠 가장자리에서 synthesized됨. [CSS2]

스팬하는 셀은 해당 스팬된 첫/마지막 행에만 first baseline/last baseline에 참여함.

플렉스 컨테이너

Flex Baselines는 [CSS-FLEXBOX-1] 참고.

그리드 컨테이너

Grid Baselines는 [CSS-GRID-1] 참고.

박스에서 단일 기준선으로 generate baselines하려면, 박스의 폰트 설정과 첫 사용 가능한 폰트의 기준선 테이블을 사용하고, 해당 기준선 set을 주어진 단일 기준선에 맞추면 됩니다.

기준선 정렬에 참여하는 박스에 baseline set이 없으면, alignment baseline은 synthesized 규칙에 따라 포맷팅 컨텍스트에 따라 합성됩니다. synthesize baselines하려면 사각형(또는 두 평행선)에서 알파벳 기준선은 line-under에서, 중앙 기준선은 두 가장자리 또는 라인의 위치를 평균해서 합성합니다. 추가 기준선 합성 규칙은 CSS Inline Layout 3 § A Alignment Metrics 합성 참고.

참고: 박스에서 기준선 합성에 사용하는 가장자리는 포맷팅 컨텍스트에 따라 다릅니다: 인라인 레벨 박스는 마진 가장자리에서 합성, 테이블 셀은 콘텐츠 가장자리에서 합성, 그리드·플렉스 아이템은 테두리 가장자리에서 합성합니다.

일반적으로, 정렬되는 박스, 도형 등은 쓰기 모드를 사용해 line-under 및 line-over 가장자리를 결정합니다. 단, 쓰기 모드의 block flow 방향이 정렬 컨텍스트의 축과 평행할 때는, 축 호환 쓰기 모드를 가정해야 합니다:

• 정렬 컨텍스트를 생성하는 박스의 정렬 컨텍스트가 block flow 방향이 축과 직교이면, 해당 박스의 쓰기 모드를 사용.

• 그 외의 경우:

  • 박스의 쓰기 모드가 수직이면, horizontal-tb를 가정.

  • 박스의 쓰기 모드가 수평이면, vertical-lr을 direction이 ltr일 때, vertical-rl을 direction이 rtl일 때 가정.

박스의 기준선을 찾기 위해, 해당 박스와 스크롤 메커니즘이 있는 모든 in-flow 자손(overflow 속성 참고)은 초기 스크롤 위치로 스크롤된 것으로 간주해야 합니다. 추가로, scroll container의 첫/마지막 기준선 위치가 경계(edge) 바깥이면, 그 기준선 위치는 경계(edge)까지 잘립니다.

9.2. 기준선 정렬 그룹화

baseline-sharing group은 기준선 정렬에 함께 참여하는 박스들로 구성됩니다. 이는 아래 두 조건을 모두 만족할 때만 가능합니다:

• 정렬하려는 축과 수직인 축에서 공유 정렬 컨텍스트를 공유해야 합니다. (예: align-self: baseline을 가진 그리드 아이템은 그리드의 block 축에서 기준선 정렬에 참여하며, 해당 행의 다른 아이템들과 함께 그룹에 속함)
• 호환되는 기준선 정렬 선호도를 가져야 함(즉, 맞추려는 기준선이 컨텍스트의 같은 방향에 있어야 함)

참고: 기준선 콘텐츠 정렬에 참여하는 박스와 기준선 자기 정렬에 참여하는 박스는 같은 baseline-sharing group에 속할 수 있으며, 서로 정렬 가능합니다. 두 방법의 차이는 정렬을 위해 추가 공간이 어디에 삽입되는지(박스 경계 내부/외부)에 있습니다.

박스들은 특정 축에서, 특정 박스에 의해 설정된 공유 정렬 컨텍스트를 공유할 때 다음과 같은 경우에 해당합니다:

• 같은 행의 테이블 셀(테이블의 행(인라인) 축, 행 박스가 컨텍스트를 설정)
• 같은 행의 그리드 아이템(그리드의 행(인라인) 축, 그리드 컨테이너가 컨텍스트를 설정)
• 같은 열의 그리드 아이템(그리드의 열(block) 축, 그리드 컨테이너가 컨텍스트를 설정)
• 같은 플렉스 라인의 플렉스 아이템(플렉스 컨테이너의 main 축, flex container가 컨텍스트를 설정)

참고: 개념적으로, line box 내 인라인 레벨 박스들도 자기 정렬 컨텍스트를 공유하며 기준선 그룹에 참여합니다; 다만 이들은 본 모듈의 속성이 아니라 vertical-align 속성에만 반응해 기준선 정렬됩니다. 자세한 내용은 [CSS-INLINE-3] 참고.

박스가 여러 공유 정렬 컨텍스트에 걸쳐 있으면, 해당 축에서 시작/끝 쪽 공유 정렬 컨텍스트 내에서 first/last 기준선 정렬에 참여합니다. 예를 들어, 3개 행을 스팬하는 테이블 셀은 첫 행의 셀들과 first-baseline 정렬에, 마지막 행의 셀들과 last-baseline 정렬에 각각 참여합니다.

두 박스가 baseline-sharing group에 있을 때의 기준선 정렬 선호도가 호환됨이란 다음과 같은 경우입니다:

• 동일한 block flow 방향과 동일한 기준선 정렬 선호도를 가진 경우

• 반대 block flow 방향과 반대 기준선 정렬 선호도를 가진 경우

9.3. 박스의 기준선 정렬 방법

단일 baseline-sharing group에 속하는 정렬 대상들과 그 기준선을 기준선 정렬하는 절차는 다음과 같습니다:

1. 그룹의 공유 정렬 컨텍스트와 첫 사용 가능한 폰트로부터 baseline 테이블을 생성하고, 그 중앙 기준선에 맞춰 미러 baseline 테이블도 오버레이함. 이 baseline "그리드"에 정렬 대상이 맞춰짐.

2. 각 정렬 대상의 지정된 정렬 기준선을 그룹의 baseline 테이블 또는 미러 테이블에 맞춤(해당 정렬 대상의 line orientation에 따라). 별도 지정이 없으면(alignment-baseline 등으로), 정렬 기준선은 dominant baseline임.

3. 정렬된 baseline-sharing group을 정렬 컨테이너 내에서 대체 정렬에 따라 위치시킴. 대체 정렬은 그룹 내 각 아이템의 대체 정렬을 물리적 방향으로 해석한 결과임.

4. first/last 기준선 콘텐츠 정렬의 경우, 정렬 컨테이너의 시작/끝 콘텐츠 edge와 정렬 대상의 edge 사이에 기준선 정렬을 유지하면서 baseline-sharing group의 모든 정렬 컨테이너의 시작/끝 마진 edge를 맞추기 위해 최소한의 추가 공간을 삽입함.

부록 A: static position 용어

특정 축에서 inset properties가 모두 auto인 절대 위치 박스에서, CSS2는 static position으로 크기와 위치를 결정합니다. CSS2.1§10.3.7 참고. box alignment 속성은 다른 레이아웃 모드에서처럼 이 계산을 수정합니다. 이러한 수정은 static-position rectangle을 참조하며, 각 edge는 박스가 포함 블록의 각 방향에서 가지는 static position을 나타냅니다.

static-position rectangle과 그에 대응하는 static position은 “가상 박스”의 레이아웃 모델에 따라 정의됩니다:

블록 레이아웃

static position은 block-level 박스에 대해 [CSS2] 10장에 정의됨. static-position rectangle은 박스의 static-position 포함 블록(CSS2§10.3.7 참고)의 인라인 축 양쪽에 걸친 두께 0의 사각형이며, block-start static position(CSS2§10.6.4 참고)에 위치함.

인라인 레이아웃

static position은 inline-level 박스에 대해 [CSS2] 10장에 정의됨. static-position rectangle은 “가상 박스”가 포함될 line box의 line-over/line-under 양쪽에 걸친 두께 0의 사각형이며 (CSS2§10.3.7 참고), inline-start static position에 위치함.

플렉스 레이아웃

static-position rectangle은 플렉스 컨테이너의 자식에 대해 플렉스 컨테이너의 콘텐츠 edge에 대응함. 자세한 내용은 CSS Flexbox 1 § 4.1 절대 위치 플렉스 자식 참고.

그리드 레이아웃

기본적으로 static-position rectangle은 그리드 컨테이너의 자식에 대해 그리드 컨테이너의 콘텐츠 edge에 대응함. 단, 해당 그리드 컨테이너가 박스의 실제 포함 블록도 생성할 경우, 그리드 영역(grid-placement 속성으로 지정)이 static-position rectangle을 설정함. 자세한 내용은 그리드 컨테이너 자식의 static position을 [CSS-GRID-1]에서 참고.

10. 변경 사항

2023년 2월 17일 워킹 드래프트 이후의 변경 사항:

• block container의 기본값을 safe 정렬로 변경. § 4.4.1.3 기타 정렬 참고. (이슈 8992)
• 절대 위치 박스는 inset-modified containing block 에 대해 unsafe overflow를 허용하면서 original containing block 내에서는 안전을 유지하는 "스마트" safe 정렬을 기본값으로 사용. § 4.4.1.2 절대 위치 박스의 자기 정렬 참고. (이슈 10316, 이슈 9960)
• 모든 space-* 키워드의 fallback을 safe overflow로 변경. (이슈 10154)
• 오버플로우된 content distribution과 scroll container의 상호작용을 레이아웃에 영향을 주지 않고 scrollable overflow area의 범위에만 영향을 준다고 명확히 정의. (이슈 4957)
• scroll container block container의 특별 마진 edge 기준선 규칙은 baseline-source가 초기값일 때만 적용하도록 변경. (이슈 8214)
• 직교 흐름 박스의 기준선 합성 시, 가정된 평행 쓰기 모드가 direction에 따라 달라지도록 변경. (이슈 7775)

  그 외에는, 박스의 writing-mode와 직교하는 horizontal-tb 또는 vertical-lr writing-mode를 가정.

  그 외에는:

  • 박스의 쓰기 모드가 수직이면, horizontal-tb를 가정.
  • 박스의 쓰기 모드가 수평이면, vertical-lr을 direction이 ltr일 때, vertical-rl을 direction이 rtl일 때 가정.

• 스팬하는 셀은 first/last 기준선 정렬에 참여할 때 스팬된 첫/마지막 행에만 참여하도록 명확히 정의. (이슈 7655)
• grid-gap 속성을 레거시 이름 별칭으로 gap 속성에 정의. (이슈 8014)
• normal 정렬의 정의를 절대 위치 박스의 경우 [css-position-3]로 이관. (이슈 11215, 이슈 11285)
• row-gap의 다단 컨테이너 적용 문장을 [CSS-MULTICOL-2]에서도 적용됨을 명시. (이슈 11539)
• 거터는 단편화 분리점에서 사라진다고 정의. (이슈 11520)

2021년 12월 24일 워킹 드래프트 이후의 변경 사항:

• 다단 컨테이너의 기준선을 정의. (이슈 7856, 이슈 7639)
• static-position 포함 블록의 쓰기 모드를 static-position 결정에 사용하도록 명시. (이슈 7599, 이슈 7612; 변경내역)
• 비-normal 정렬의 스크롤 오버플로우에 패딩 포함 특별 동작 정의 삭제, 이제 [CSS-OVERFLOW-3]에서 무조건 정의됨. (이슈 129)
• 기타 소규모 명확화:

  • baseline-sharing group의 fallback alignment를 개별 아이템들의 공유 fallback alignment로 정의.

  • <length-percentage> 값 정의에 CSS 괄호 범위 표기법 주석 추가.

2020년 4월 21일 워킹 드래프트 이후의 변경 사항:

• [ first | last ]와 baseline 구성요소의 순서 변경 허용. (이슈 5235)
• space-around, space-evenly의 fallback alignment에 safe 포함. (이슈 5088)
• normal 정렬과 percentage gap 관련 다양한 수정사항.
• 특별 레거시 처리(last baseline set)의 scroll container 관련 오류 수정. (이슈 3611)
• baseline set이 없는 박스는 필요시 alignment baseline을 합성한다는 점 명확화. (이슈 3611)
• 비-대체 박스만 content distribution에 영향을 받는다는 점 명확화. (이슈 4545)
• coordinated self-alignment preference가 baseline content-alignment 활성화 조건임을 auto 마진과 관련해 명확화. (이슈 5923)
• 기준선 자기 정렬과 콘텐츠 정렬의 상호작용 명확화. (이슈 6389)
• 기준선 공유 그룹의 fallback alignment 결정 방법 명확화. (이슈 7645)

2018년 12월 6일 워킹 드래프트 이후의 변경 사항:

• 절대 위치 요소의 center 자기 정렬 개선. 이슈 4659
• 혼합 쓰기 모드에서 기준선 정렬의 fallback 불일치 수정. 이슈 3454
• 소규모 편집 및 명확화.

2018년 8월 30일 워킹 드래프트 이후의 변경 사항은 소규모 명확화임.

2018년 4월 23일 워킹 드래프트 이후의 변경 사항:

• row-gap, column-gap 속성과 gap 축약형 추가, 이를 grid layout과 flex layout 모두에 적용, grid 전용 grid-row-gap/grid-column-gap/grid-gap 속성 대체.

2017년 5월 15일 워킹 드래프트 이후의 변경 사항:

• left 및 right 키워드가 align-self 및 align-content에서 제외됨. 추후 수요가 있으면 다시 도입 가능. (이슈 1403)
• end fallback alignment를 stretch와 last baseline content-alignment 조합에 할당.
• 테이블 컬럼 간 기준선 정렬 비활성화(구현 복잡성 때문).
• David Baron이 보고한 수많은 소규모 오류 및 명확화.

2017년 4월 7일 워킹 드래프트 이후의 변경 사항:

• 부분 구현 처리 명확화 섹션 추가. (이슈 1167)
• <baseline-position> 값을 justify-content에서 제외(실질적 효과 없음). (이슈 1184)
• fallback alignment 지정 기능을 Level 4로 이관. (이슈 1002)
• <overflow-position>의 <content-position> 기준 위치 수정. (이슈 1001)
• block 축에서 기준선 정렬 박스 처리 규칙 수정. (이슈 1038)
• justify-items: auto를 justify-items: legacy로 이름 변경. (이슈 1318)
• 스크롤 가능한 박스 기준선을 마진 edge 대신 border edge로 클램프함. (이슈 766)

11. 개인정보 고려사항

간단한 레이아웃 명세로, 새로운 개인정보 고려사항을 도입하지 않습니다.

12. 보안 고려사항

간단한 레이아웃 명세로, 새로운 보안 고려사항을 도입하지 않습니다.

감사의 글

특별한 감사는 David Baron, Javier Fernandez, Markus Mielke, Alex Mogilevsky, 그리고 CSSWG의 2008년 3월 F2F alignment 토론에 참여해주신 분들께 드립니다. 이들이 이 문서에 서술된 정렬 모델에 기여해주셨으며, Melanie Richards에게는 다양한 정렬 키워드의 일러스트를 그려주신 점에 감사드립니다.