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 키워드와 스크롤 안전 한계

일부 상황에서는, 지정된 정렬대로 맞추면 정렬 주체가 정렬 컨테이너를 넘치게 되어, 데이터 손실을 초래할 수 있습니다. 예를 들어, 사이드바의 내용이 무조건 가운데 정렬될 경우, 너무 큰 항목이 사이드바를 넘치면 뷰포트의 시작(왼쪽) 끝을 넘어 표시될 수 있고, 이쪽은 스크롤로 접근할 수 없습니다.

이 상황을 제어하기 위해, 오버플로우 정렬 모드를 명확히 설정할 수 있습니다. “비안전” 정렬은 오버플로우 상황에서도 지정된 정렬 모드를 그대로 적용하며, 데이터 손실이 발생할 수 있습니다. 반면 “안전” 정렬은 오버플로우 상황에서 데이터 손실을 피하기 위해 정렬 모드를 변경합니다. 기본 동작은 정렬 주체를 스크롤 영역 내에 포함시키는 것이지만, 작성 시점에는 이 안전 기능이 아직 구현되어 있지 않습니다.

<overflow-position> = unsafe | safe

safe

정렬 주체의 크기가 정렬 컨테이너를 넘치면, 정렬 주체를 정렬 모드가 flex-start인 것처럼 정렬합니다.

unsafe

정렬 주체와 정렬 컨테이너의 상대적인 크기에 관계없이, 지정된 정렬 값을 그대로 적용합니다.

(값 지정 없음)

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

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

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

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

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

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

절대 위치(absolute positioning)가 적용된 정렬 주체에서 관련 사용된 자기-정렬 속성(self-alignment property)이 normal이 아닐 때, 기본 오버플로우 정렬 동작은 다음과 같습니다:

(위 조건을 만족하지 못하는 절대 위치 정렬 주체의 경우, § 4.4.1.3 기타 모든 정렬을 참고하세요.)

참고: 이 규칙들은 박스의 위치를 제한하여 오버플로우를 최소화하며, 가능하면 지정된 정렬 값을 따르면서, 박스의 크기가 변해도 연속적인 동작을 보장합니다.

4.4.1.3. 기타 정렬

그 외 모든 요소의 경우:

그 밖의 모든 요소에 대해:

1. 정렬 주체가 정렬 컨테이너를 넘치면, 지정된 대로 정렬합니다 (unsafe).

2. 정렬 주체가 가장 가까운 상위 스크롤 컨테이너의 스크롤 가능한 오버플로우 영역을 넘치게 되는 경우 (즉, "스크롤 불가" 영역으로 확장되는 경우), 그 방향의 오버플로우는 남은 오버플로우를 반대편으로 치우치게 하여 제한합니다.

“스마트” 기본 동작을 구현하는 것이 웹 호환성이 떨어질 수 있습니다 (하지만 우리는 그렇지 않기를 희망하며 실제로 가능할 것으로 믿습니다). 그러므로 UA는 이 부분에 대한 모든 피드백을 WG에 전달해야 합니다. “스마트” 기본 동작을 구현하지 않은 UA는 align-content 속성이 블록 컨테이너일 때는 safe로, 그 외의 경우에는 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. 정렬 오버플로우 및 스크롤 컨테이너

콘텐츠 분배 속성이 오버플로우된 정렬 주체를 가진 스크롤 컨테이너에 설정되면, 도달 불가 스크롤 오버플로우 영역의 클리핑을 정렬 주체가 자신의 start 정렬 위치로 스크롤될 수 있을 만큼만 줄입니다.

참고: 정렬 주체는 스크롤 가능한 오버플로우 영역과 반드시 동일하지 않습니다: 정렬 주체를 넘쳐 흐르는 콘텐츠(예: 흐름 밖(out-of-flow) 박스)는 스크롤 가능한 오버플로우 영역은 키우지만, 정렬 주체는 키우지 않습니다. 따라서 end로 정렬된 스크롤 컨테이너라도 초기에 완전히 아래까지 스크롤되지 않을 수 있고, 배치된 콘텐츠가 더 안쪽 도달 불가 스크롤 오버플로우 영역에 위치한다면 레이아웃 흐름 내(in-flow) 콘텐츠로 정렬 주체가 만들어질 때라도 클리핑될 수 있습니다.

참고: 스크롤바의 존재는 스크롤 컨테이너의 콘텐츠 박스(content box)의 크기를, 따라서 정렬 컨테이너 및/또는 정렬 주체의 크기를 변경시킬 수 있습니다.

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 속성

박스(즉, 정렬 주체)를 자신의 컨테이닝 블록(즉, 정렬 컨테이너) 내에서 정렬 컨테이너의 인라인/row/main 축을 따라 맞춥니다: 박스의 바깥쪽 에지가 정렬 컨테이너 내에서 설명된 정렬 값에 따라 맞춰집니다. 값은 다음과 같은 의미를 갖습니다:

auto

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

normal

레이아웃 모드에 대한 “기본” 정렬을 나타냅니다. 아래 설명대로 동작 방식은 레이아웃 모드에 따라 달라집니다.

<self-position> | left | right

박스의 위치를 지정한 대로 이동시킵니다, § 4 정렬 키워드 참고.

<overflow-position>

박스가 오버플로우될 때 정렬 방식을 제어합니다, § 4.4 오버플로우 정렬: safe와 unsafe 키워드 및 스크롤 안전 한계 참고.

stretch

박스의 계산된 width/height (축에 따라 해당하는 값) 이 auto이고, 양쪽 마진(축에 따라 해당)이 auto가 아니라면, 박스의 사용된 크기를 정렬 컨테이너를 최대한 채우도록 필요한 길이로 설정하지만, min-height/min-width/max-height/max-width의 제한은 지킵니다.

별도 지정이 없는 한, 이 값은 일반적으로 flex-start로 대체되며, 박스가 first baseline 또는 last baseline baseline content-alignment이 동일 축에 지정된 경우에는 각각 self-start 또는 self-end로 대체됩니다.

참고: stretch 키워드는 요소를 컨테이너에 맞게 줄일 수도 있습니다.

<baseline-position>

베이스라인 자기-정렬을 의미하며, § 4.2 베이스라인 정렬: baseline 키워드와 first/last 모디파이어, § 6.4 베이스라인 자기-정렬, § 9 베이스라인 정렬 상세에 정의되어 있습니다.

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 속성

박스(즉, 정렬 주체)를 자신의 컨테이닝 블록(즉, 정렬 컨테이너) 내에서 정렬 컨테이너의 블록/열/교차(cross) 축을 따라 맞춥니다: 박스의 바깥쪽 에지가 정렬 컨테이너 내에서 설명된 정렬 값에 따라 맞춰집니다. 값은 다음과 같은 의미를 갖습니다:

auto

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

normal

레이아웃 모드에 대한 “기본” 정렬을 나타냅니다. 아래에서 정의되어 있습니다.

<self-position>

박스의 위치를 지정한 대로 이동시킵니다, § 4 정렬 키워드 참고.

<overflow-position>

박스가 오버플로우될 때 정렬 방식을 제어합니다, § 4.4 오버플로우 정렬: safe와 unsafe 키워드 및 스크롤 안전 한계 참고.

stretch

justify-self에 대해 § 6.1 인라인 축(또는 메인 축) 자기-정렬: justify-self 속성에서 정의된 것과 같습니다.

<baseline-position>

베이스라인 자기-정렬을 의미하며, § 4.2 베이스라인 정렬: baseline 키워드와 first/last 모디파이어, § 6.4 베이스라인 자기-정렬, § 9 베이스라인 정렬 상세에 정의되어 있습니다.

참고: 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 속성이 정적 위치 컨테이닝 블록에서 참조되는 모든 곳에서, 대신 align-self 또는 justify-self 속성 값(관련 축에 적용되는 속성)을 참조해야 하며, left와 동일한 정렬은 ltr로, right와 동일한 정렬은 rtl로 정의된 것처럼 처리해야 합니다. normal은 start로 취급하고, 분배 정렬(distributed alignment) 값은 해당 대체 정렬(fallback alignment)로 처리합니다.

center 정렬의 경우, 박스에 대한 사용 가능한 공간은 정적 위치 사각형의 중심점과 관련 축에서 가장 가까운 컨테이닝 블록의 엣지 사이 거리의 두 배입니다.

참고: 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 axis에 적용될 때, 예: row column-gap이 있는 flex 컨테이너)에서는, 아이템 사이의 구터(gutter)를 나타냅니다 (인접한 flex 아이템 사이에 고정 크기 마진이 하나 더 삽입된 것처럼 단일 행 내에서 동작합니다).

교차 축(cross axis에 적용될 때, 예: row row-gap이 있는 flex 컨테이너)에서는, 인접한 구터(gutter) 즉, flex 라인 사이의 구터를 나타냅니다.

grid 컨테이너

row-gap과 column-gap 속성은 grid 컨테이너에 지정될 때, 구터를 그리드 행 및 그리드 열 사이에 각각 정의합니다. 자세한 내용은 CSS Grid Layout 1 § 10.1 Gutters: the row-gap, column-gap, and gap properties 참고.

모든 경우에, 구터(gutter)는 단편화 분리(fragmentation break)와 일치하면 사라집니다. [CSS-BREAK-3]

참고: table 박스는 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은 레이아웃 모델에 따라 다음과 같이 다르게 결정됩니다:

라인 박스

라인 박스의 첫 번째/마지막 베이스라인 집합은 지배적인 베이스라인과 해당 루트 인라인 박스의 글꼴 설정에서 생성됩니다.

블록 컨테이너

블록 컨테이너의 첫 번째/마지막 베이스라인 집합은 블록 컨테이너 안의 첫 번째/마지막 in-flow 라인 박스 또는 블록 컨테이너 안의 베이스라인 집합을 제공하는 첫 번째/마지막 in-flow 블록 레벨 자식에서 가져오며, 둘 중 먼저/나중에 오는 것을 사용합니다. 해당 라인 박스나 자식이 없으면, 그 블록 컨테이너는 베이스라인 집합을 갖지 않습니다.

단, 레거시 사유로 baseline-source 속성이 auto일 때(초기값) 블록 레벨 또는 인라인 레벨 블록 컨테이너가 스크롤 컨테이너라면 항상 마지막 베이스라인 집합을 가지며, 이 베이스라인들은 모두 그 block-end 마진 에지와 일치합니다.

다단 컨테이너

다단(multi-column) 컨테이너의 첫 번째 베이스라인 집합은 column 또는 다단 스패너 중 다단 컨테이너의 정렬 베이스라인에 해당하는 block-start–방향 가장 높은 베이스라인을 갖는 첫 번째 베이스라인 집합에서 가져옵니다. 해당 라인 박스나 자식이 없으면, 다단 컨테이너는 첫 번째 베이스라인 집합이 없습니다.

마지막 베이스라인 집합도 유사하게 동작하지만, 마지막 베이스라인 집합과 block-end–방향 가장 낮은 베이스라인을 사용합니다.

테이블

테이블 박스의 첫 번째/마지막 베이스라인 집합은 자체 첫 번째/마지막 행의 첫 번째/마지막 베이스라인 집합입니다.

인라인 블록의 첫 번째/마지막 베이스라인 집합을 찾을 때 테이블 박스가 제공하는 베이스라인은 건너뛰어야 합니다. (이 특성은 [CSS2]의 레거시 행위입니다.)

테이블 행

해당 행의 셀 중 하나라도 first baseline/last baseline 정렬에 참여하며 인라인 축을 따라 정렬된다면, 행의 첫 번째/마지막 베이스라인 집합은 이들이 공유하는 정렬 베이스라인과 행의 최초 사용 가능 글꼴에서 정렬 후 생성됩니다. 그렇지 않으면 행의 첫 번째/마지막 베이스라인 집합은 그 행의 셀들 중 가장 낮은/높은 콘텐츠 에지로부터 합성됩니다. [CSS2]

스팬하는 셀은 first baseline/last baseline을 위해 자신이 span하는 첫 번째/마지막 행에만 참여합니다.

플렉스 컨테이너

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 속성 참고)은 초기 스크롤 위치에 도달한 것처럼 취급되어야 합니다. 또한, 스크롤 컨테이너의 첫 번째/마지막 베이스라인 위치가 그 컨테이너의 border edge 바깥에 있을 경우, 해당 베이스라인의 위치는 border edge에 맞게 고정(clamp)됩니다.

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)에 속하는 정렬 주체들과 그들의 베이스라인 집합에 대해, 정렬 주체들은 아래와 같이 베이스라인 맞춤(baseline-align) 처리됩니다:

1. 베이스라인 공유 그룹의 베이스라인 표(baseline table)는 그룹의 최초 사용 가능 글꼴과 정렬 문맥(alignment context)에서 생성하고, 중앙 베이스라인(central baseline)끼리 맞춰 이 베이스라인 표의 미러(mirror)도 오버레이합니다. 이들이 바로 정렬 주체들이 맞춰질 베이스라인 "그리드"입니다.

2. 각 정렬 주체를 지정된 정렬 베이스라인에 맞게 그룹의 베이스라인 표 또는 미러에 정렬합니다. (정렬 주체의 라인 방향(line orientation)에 따라 더 잘 맞는 쪽 사용) 별도 지정이 없는 한 (예: alignment-baseline 속성 등), 정렬 베이스라인은 문맥의 지배적 베이스라인(dominant baseline)입니다.

3. 정렬된 베이스라인 공유 그룹을 정렬 컨테이너 안에서 해당 대체 정렬(fallback alignment)에 따라 배치합니다. 베이스라인 공유 그룹의 대체 정렬(fallback alignment)은 해당 아이템들의 대체 정렬(fallback alignment)이 물리적 방향(physical directions)에 맞춰 해석된 것입니다.

4. 첫 번째/마지막 베이스라인 콘텐츠 정렬(baseline content-alignment)의 경우, 모든 정렬 컨테이너의 시작/끝 마진 에지가 정렬 컨테이너의 시작/끝 콘텐츠 에지에서 맞춰지도록, 추가적으로 필요한 최소 공간을 더해주어야 하며, 베이스라인 공유 그룹 내에서 베이스라인 정렬이 유지되도록 해야 합니다.

부록 A: static position 용어

특정 축의 두 inset 속성이 모두 auto로 된 절대 위치 박스의 경우, CSS2는 정적 위치를 사용해 박스의 크기와 위치를 결정합니다. CSS2.1§10.3.7 참고. 박스 정렬 속성은 다른 레이아웃 모드에서 크기 및 위치 계산을 변경하는 것처럼 이러한 계산에도 영향을 미칩니다. 이러한 변경은 정적 위치 사각형(static-position rectangle)을 참조합니다. 이 사각형의 각 면은 박스가 자신의 컨테이닝 블록의 각 면에서 갖는 정적 위치를 나타냅니다.

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. 변경 사항

2025년 3월 11일 워킹 드래프트(11 March 2025 Working Draft) 이후 변경 사항은 다음과 같습니다:

• § 4.4.1.2 절대 위치 박스의 자기-정렬(Self-Alignment for Absolutely Positioned Boxes)가 position-area가 사용 값 (normal)을 변경할 때 적용된다는 점을 명확히 기술했습니다.

• 절대 위치 박스가 포함 블록인 스크롤 컨테이너의 스크롤 가능한 오버플로우 영역으로 넘칠 때에도 정렬을 따라가도록 허용했습니다. (이슈 12106)

• normal에 대해 safe/unsafe를 명시할 수 있도록 허용했습니다. (이슈 12920)

• safe 정렬 시 컨테이너가 flex-start로 폴백하도록 규칙을 변경하여 스크롤 가능한 역방향 플렉스박스에서도 안전 정렬이 올바르게 동작합니다. (이슈 11937)

• 익명 블록 박스는 항상 justify-self: normal 처럼 동작한다고 명시했습니다. (이슈 11461)

• justify-self는 블록 레벨 박스의 자동 크기에도 flex 및 grid 아이템과 동일하게 영향을 준다고 명시했습니다. (이슈 12102)

이전 변경 사항도 참고하세요.

11. 개인정보 고려사항

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

12. 보안 고려사항

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

감사의 글

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