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장에 설명된 블록 레이아웃 모델에 몇 가지 새로운 정렬 기능을 추가하고, 제약 조건이 충돌하는 블록 수준 상자의 여백을 해결하는 방식을 재정의하며, 이러한 새로운 정렬 속성과 [CSS2]의 17장에 정의된 vertical-align을 사용하는 표 셀 콘텐츠의 정렬 간 상호작용을 정의합니다.

이러한 속성과 그리드 레이아웃 [CSS-GRID-1] 및 플렉서블 박스 레이아웃 [CSS-FLEXBOX-1] 간의 상호작용은 각각의 모듈에서 정의합니다. 여기서 정의하는 속성은 [CSS-FLEXBOX-1]의 속성 정의보다 우선합니다. (해당 모듈에서는 허용되는 값의 범위가 더 작고 이전에 정의된 부분집합을 사용합니다.)

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

1.2. 값 정의

이 명세는 [CSS2]의 CSS 속성 정의 규칙을 따르며, 값 정의 구문은 [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인 것처럼 정렬됩니다. 다만 절대 위치가 지정된 상자에 대해서는 § 4.4.1.2 절대 위치가 지정된 상자의 자체 정렬을 참조하세요.

unsafe

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

기본값 (값이 지정되지 않음)

오버플로 정렬이 명시적으로 지정되지 않은 경우, 기본 오버플로 정렬은 “safe”와 “unsafe”가 혼합된 방식입니다. 자세한 내용은 § 4.4.1 자동 오버플로 정렬 안전성을 참조하세요.

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

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

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

스크롤 가능한 축에서 스크롤 컨테이너의 콘텐츠 분배에 대한 기본 오버플로 정렬 동작은 unsafe입니다. 콘텐츠 분배 속성의 normal이 아닌 값은 대신 스크롤 가능한 오버플로 영역을 변경하여 넘치는 콘텐츠에 접근할 수 있도록 합니다. § 5.3 정렬 오버플로와 스크롤 컨테이너를 참조하세요.

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

관련 사용 값인 자체 정렬 속성이 normal이 아닌 절대 위치가 지정된 정렬 대상의 경우, 기본 및 safe 오버플로 정렬 동작은 다음과 같습니다.

(위의 조건을 충족하지 않는 절대 위치가 지정된 정렬 대상에 대해서는 § 4.4.1.3 그 밖의 모든 정렬을 참조하세요.)

참고: 이러한 규칙은 상자의 위치를 제한하여 오버플로를 최소화하는 동시에 가능한 한 지정된 정렬을 따르고, 상자의 크기가 변경될 때도 연속적인 동작을 보장합니다.

“페이지와 함께 스크롤됨”을 더 정확하게 정의하여, 스크롤 가능한 오버플로 영역에 포함되거나 해당 영역에 고정된 모든 앵커를 포괄해야 합니다.

4.4.1.3. 기타 정렬

그 밖의 모든 요소에 대해서는 다음과 같습니다.

1. 정렬 대상이 해당 정렬 컨테이너를 벗어나는 경우, 지정된 대로 정렬합니다(unsafe).

2. 정렬 대상이 가장 가까운 조상 스크롤 컨테이너의 스크롤 가능한 오버플로 영역을 벗어나게 되는 경우, (즉, “스크롤할 수 없는” 영역으로 확장되는 경우), 남아 있는 오버플로를 반대쪽으로 치우치게 하여 해당 방향의 오버플로를 제한합니다.

“스마트” 기본 동작을 구현하는 것이 웹 호환성을 보장하지 못할 수도 있습니다. (그렇지 않기를 바라며, 호환될 가능성이 높다고 생각합니다.) 따라서 사용자 에이전트는 이 문제에 관한 모든 피드백을 작업 그룹에 전달해야 합니다. “스마트” 기본 동작을 구현하지 않은 사용자 에이전트는 블록 컨테이너의 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 정렬 위치로 이동할 수 있도록 하는 데 필요한 만큼만 줄입니다.

참고: 정렬 대상은 반드시 스크롤 가능한 오버플로 영역과 동일하지는 않습니다. 정렬 대상을 벗어나는 콘텐츠(예: 흐름 밖 상자)는 스크롤 가능한 오버플로 영역을 확장하지만 정렬 대상은 확장하지 않습니다. 따라서 end에 정렬된 스크롤 컨테이너는 처음부터 맨 아래까지 스크롤되어 있지 않을 수 있으며, 위치가 지정된 콘텐츠가 정렬 대상을 형성하는 흐름 내 콘텐츠보다 도달할 수 없는 스크롤 가능한 오버플로 영역 안쪽으로 더 깊이 확장되는 경우 여전히 잘릴 수 있습니다.

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

5.4. 기준선 콘텐츠 정렬

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

참고: 해당 기준선 콘텐츠 정렬을 완전히 지원하지 않는 구현은 서식 지정 컨텍스트에서 baseline 값을 유효한 값으로 파싱해서는 안 됩니다. WPT의 테스트 범위가 부족하다는 이유로 잘못된 구현을 배포하는 것은 정당화될 수 없습니다. <—​현재 브라우저는 이를 파싱하지만 유용한 동작은 수행하지 않습니다. :( https://github.com/w3c/csswg-drafts/issues/13421 -->

기준선 콘텐츠 정렬은 align-content 축이 상자의 블록 축과 평행한 경우에만 적용될 수 있습니다(즉, “column” 플렉스 컨테이너에는 적용되지 않습니다). 그렇지 않으면 대체 정렬이 사용됩니다.

기준선 콘텐츠 정렬에 참여하는 상자의 집합은 레이아웃 모델에 따라 달라집니다.

표 셀:

(비대체) 표 셀은 자신의 인라인 축이 표 자체의 인라인 축과 평행하고 계산된 align-content가 first baseline(last baseline)인 경우, 가장 시작 쪽/끝 쪽 행에서 첫 번째/마지막 기준선 콘텐츠 정렬에 참여합니다.

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

플렉스 항목:

비대체 플렉스 항목은 계산된 align-content가 first baseline/last baseline이고, 자신의 인라인 축이 주축과 평행한 경우, 자신의 플렉스 줄에서 첫 번째/마지막 기준선 콘텐츠 정렬에 참여합니다.

그리드 항목:

비대체 그리드 항목은 계산된 align-content가 first baseline/last baseline인 경우, 자신의 가장 시작 쪽/끝 쪽 행 또는 열 (자신의 인라인 축과 평행한 쪽)에서 첫 번째/마지막 기준선 콘텐츠 정렬에 참여합니다.

또한 기준선 콘텐츠 정렬에 참여하려면 조정된 자체 정렬 선호도도 있어야 합니다. 이는 상자가 자신의 기준선 공유 그룹에 속한 다른 상자들과 관련 가장자리를 나란히 정렬하도록 보장하기 위한 것입니다. 즉, 상자의 시작(끝) 여백 가장자리는 기준선 정렬 선호도가 “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인 절대 위치가 지정된 상자의 경우, 인라인 크기를 계산하는 데 사용되는 사용 가능한 공간도 정렬의 영향을 받습니다.

참고: [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. 박스 사이의 간격

이 절은 CSS 간격 1 § 2 상자 사이의 간격으로 이동되었습니다.

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

줄 상자

줄 상자의 첫 번째/마지막 기준선 집합은 해당 루트 인라인 상자의 주요 기준선과 글꼴 설정으로부터 생성됩니다.

블록 컨테이너

블록 컨테이너의 첫 번째/마지막 기준선 집합은 블록 컨테이너 내의 첫 번째/마지막 흐름 내 줄 상자 또는 첫 번째/마지막 기준선 집합을 제공하는 첫 번째/마지막 흐름 내 블록 수준 자식 중 먼저/나중에 나타나는 것에서 가져옵니다. 이러한 줄 상자나 자식이 없으면 블록 컨테이너에는 기준선 집합이 없습니다.

다만 이전 버전과의 호환성을 위해 baseline-source가 auto(초기 값)인 경우, 블록 축 스크롤 컨테이너인 블록 수준 또는 인라인 수준 블록 컨테이너에는 항상 마지막 기준선 집합이 있으며, 그 안의 모든 기준선은 해당 컨테이너의 블록 끝 여백 가장자리에 대응합니다.

다중 열 컨테이너

다중 열 컨테이너의 첫 번째 기준선 집합은 해당 다중 열 컨테이너의 정렬 기준선에 대응하는 기준선 중 가장 높은(블록 시작에 가장 가까운) 기준선을 가진 열 또는 다중 열 스패너의 첫 번째 기준선 집합입니다. 이러한 줄 상자나 자식이 없으면 다중 열 컨테이너에는 첫 번째 기준선 집합이 없습니다.

마지막 기준선 집합도 이와 유사하지만, 마지막 기준선 집합과 가장 낮은(블록 끝에 가장 가까운) 기준선을 사용합니다.

표

표 상자의 첫 번째/마지막 기준선 집합은 (표 행 그룹 상자를 재정렬한 후) 첫 번째/마지막 행의 첫 번째/마지막 기준선 집합입니다.

인라인 블록의 첫 번째/마지막 기준선 집합을 찾을 때는 표 상자가 제공하는 모든 기준선을 건너뛰어야 합니다. (이러한 특이한 동작은 [CSS2]에서 이어진 기존 동작입니다.)

표 행

표 행 상자의 첫 번째 기준선 집합은 다음 중 처음으로 적용 가능한 항목에서 가져옵니다.

1. 행의 셀 중 하나라도 표의 인라인 축을 따라 첫 번째 기준선 정렬에 참여하는 경우, 정렬을 수행한 후 해당 셀들이 공유하는 정렬 기준선과 행의 첫 번째 사용 가능한 글꼴로부터 기준선 집합을 생성합니다.

2. 그렇지 않고 행의 셀 중 하나라도 표의 인라인 축을 따라 마지막 기준선 정렬에 참여하는 경우, 해당 정렬 기준선으로부터 생성합니다.

3. 그렇지 않고 행이 비어 있지 않으면, 행에 있는 모든 셀의 가장 낮은 가장자리와 가장 높은 콘텐츠 가장자리로부터 기준선을 합성합니다. CSS 2 § 17.5.3 표 높이 알고리즘을 참조하세요.

4. 그렇지 않으면 표 행 상자 자체의 블록 시작 콘텐츠 가장자리를 정렬 기준선으로 사용합니다.

이를 위해 여러 행에 걸쳐 있는 표 셀은 그 범위가 이 행에서 시작하지 않으면 무시됩니다. 다만 2단계에서는 그 범위가 이 행에서 끝나지 않으면 무시됩니다.

마지막 기준선도 이와 유사합니다. (“first”/“last”와 “start”/“end”를 서로 바꿉니다.)

여러 행에 걸쳐 있는 셀은 first baseline/last baseline을 위해 자신이 걸쳐 있는 첫 번째/마지막 행에서만 참여합니다.

플렉스 컨테이너

[CSS-FLEXBOX-1]의 플렉스 기준선을 참조하세요.

그리드 컨테이너

[CSS-GRID-1]의 그리드 기준선을 참조하세요.

하나의 기준선으로부터 상자의 기준선을 생성하려면, 해당 상자의 글꼴 설정과 첫 번째 사용 가능한 글꼴에서 기준선 표를 사용하고, 해당 기준선 집합을 주어진 단일 기준선에 정렬합니다.

기준선 정렬에 참여하는 상자에 기준선 집합이 없으면, 해당 상자가 참여하는 서식 지정 컨텍스트의 규칙에 따라 정렬 기준선이 합성됩니다. 사각형(또는 평행한 두 직선)으로부터 기준선을 합성하려면, 줄 아래 선으로부터 알파벳 기준선을 합성하고, 두 가장자리 또는 선의 위치를 평균하여 중앙 기준선을 합성합니다. 추가 기준선을 합성하는 규칙은 CSS 인라인 레이아웃 3 § A 정렬 측정값 합성을 참조하세요.

참고: 상자로부터 기준선을 합성할 때 사용하는 가장자리는 해당 상자의 서식 지정 컨텍스트에 따라 달라집니다. 인라인 수준 상자는 여백 가장자리에서 합성하고 [CSS-INLINE-3], 표 셀은 콘텐츠 가장자리에서 합성하며 [CSS2], 그리드 및 플렉스 항목은 테두리 가장자리에서 합성합니다 [CSS-GRID-1] [CSS-FLEXBOX-1].

일반적으로 정렬되는 상자, 도형 또는 다른 객체의 쓰기 모드를 사용하여 합성에 사용할 줄 아래 및 줄 위 가장자리를 결정합니다. 그러나 해당 쓰기 모드의 블록 흐름 방향이 정렬 컨텍스트의 축과 평행한 경우, 축과 호환되는 쓰기 모드를 가정해야 합니다.

• 정렬 컨텍스트를 설정하는 상자의 블록 흐름 방향이 정렬 컨텍스트의 축과 직교하면, 해당 상자의 쓰기 모드를 사용합니다.

• 그렇지 않으면 다음과 같습니다.

  • 상자 자체의 쓰기 모드가 세로 방향이면, horizontal-tb를 가정합니다.

  • 상자 자체의 쓰기 모드가 가로 방향이면, direction이 ltr일 때는 vertical-lr을 가정하고, direction이 rtl일 때는 vertical-rl을 가정합니다.

상자의 기준선을 찾을 때는 해당 상자와 그 모든 흐름 내 자손 중 블록 축 스크롤 컨테이너인 것들을 초기 스크롤 위치로 스크롤된 것으로 간주해야 합니다. 또한 스크롤 컨테이너의 첫 번째/마지막 기준선 위치가 테두리 가장자리 밖에 있으면, 해당 기준선의 위치를 테두리 가장자리로 제한합니다.

9.2. 기준선 정렬 그룹화

기준선 공유 그룹은 기준선 정렬에 함께 참여하는 상자들로 구성됩니다. 이는 해당 상자들이 다음 두 조건을 모두 충족하는 경우에만 가능합니다.

• 기준선 정렬이 이루어지는 축에 수직인 축을 따라 정렬 컨텍스트를 공유해야 합니다. (예를 들어 align-self: baseline이 지정된 그리드 항목은 그리드의 블록 축을 따라 기준선 정렬을 수행하므로, 같은 행에 있는 다른 항목들과 함께 참여합니다.)
• 호환되는 기준선 정렬 선호도를 가져야 합니다(즉, 정렬하려는 기준선들이 정렬 컨텍스트의 같은 쪽에 있어야 합니다).

참고: 기준선 콘텐츠 정렬에 참여하는 상자와 기준선 자체 정렬에 참여하는 상자는 동일한 기준선 공유 그룹에 속할 수 있으며, 따라서 서로 정렬될 수 있습니다. 두 방식의 차이는 정렬을 수행하기 위해 추가 공간을 삽입하는 위치 (상자 자체의 테두리 안쪽 또는 바깥쪽)에 있습니다.

상자들이 특정 상자에 의해 설정된 특정 축을 따른 정렬 컨텍스트를 공유하는 경우는 다음과 같습니다.

• 같은 행에 있는 표 셀로서, 행 상자가 설정한 표의 행(인라인) 축을 따르는 경우
• 같은 행에 있는 그리드 항목으로서, 그리드 컨테이너가 설정한 그리드의 행(인라인) 축을 따르는 경우
• 같은 열에 있는 그리드 항목으로서, 그리드 컨테이너가 설정한 그리드의 열(블록) 축을 따르는 경우
• 같은 플렉스 줄에 있는 플렉스 항목으로서, 플렉스 컨테이너가 설정한 플렉스 컨테이너의 주축을 따르는 경우

참고: 개념적으로 줄 상자 안의 인라인 수준 상자들도 자체 정렬 컨텍스트를 공유하고 기준선 공유 그룹에 참여합니다. 그러나 이 상자들은 vertical-align 속성에 의해서만 기준선 정렬을 수행하며, 이 모듈에 정의된 속성에 의해서는 수행하지 않습니다. [CSS-INLINE-3]을 참조하세요.

상자가 여러 공유 정렬 컨텍스트에 걸쳐 있는 경우, 해당 축을 따라 가장 시작 쪽/끝 쪽의 공유 정렬 컨텍스트 내에서 첫 번째/마지막 기준선 정렬에 참여합니다. 예를 들어 세 행에 걸쳐 있는 표 셀은 자신이 걸쳐 있는 첫 번째 행의 표 셀들과 함께 첫 번째 기준선 정렬에 참여하거나, 또는 마지막 행의 표 셀들과 함께 마지막 기준선 정렬에 참여합니다.

기준선 공유 그룹에 속한 두 상자의 기준선 정렬 선호도는 다음 조건 중 하나를 충족하면 호환됩니다.

• 동일한 블록 흐름 방향과 동일한 기준선 정렬 선호도를 갖는 경우

• 서로 반대인 블록 흐름 방향과 서로 반대인 기준선 정렬 선호도를 갖는 경우

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

하나의 기준선 공유 그룹에 모두 속하는 정렬 대상의 집합과 해당 기준선이 주어지면, 정렬 대상은 다음과 같이 기준선 정렬됩니다.

1. 그룹의 정렬 컨텍스트에서 첫 번째 사용 가능한 글꼴을 사용하여 기준선 공유 그룹의 기준선 표를 생성하고, 중앙 기준선을 정렬하여 이 기준선 표의 거울상도 겹쳐 놓습니다. 이들은 정렬 대상이 정렬될 기준선 “격자”입니다.

2. 각 정렬 대상의 지정된 정렬 기준선을 사용하여 그룹의 기준선 표 또는 그 거울상 중 정렬 대상의 줄 방향과 일치하는 쪽에 정렬합니다. 달리 지정되지 않는 한(예: alignment-baseline 속성을 통해), 정렬 기준선은 정렬 컨텍스트의 주요 기준선입니다.

3. 정렬된 기준선 공유 그룹을 정렬 컨테이너 내에서 해당 그룹의 대체 정렬에 따라 배치합니다. 기준선 공유 그룹의 대체 정렬은 해당 항목들의 대체 정렬을 물리적 방향으로 해석한 것입니다.

4. 첫 번째/마지막 기준선 콘텐츠 정렬의 경우, 정렬 컨테이너의 시작/끝 콘텐츠 가장자리와 정렬 대상의 가장자리 사이에 필요한 최소한의 추가 공간을 삽입하여, 정렬 컨텍스트에 있는 모든 정렬 컨테이너의 시작/끝 여백 가장자리를 기준선 공유 그룹 내의 기준선 정렬을 유지하면서 서로 정렬합니다.

부록 A: static position 용어

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

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

블록 레이아웃

블록 수준 상자의 정적 위치는 [CSS2] 10장에서 정의합니다. 정적 위치 사각형은 두께가 0인 사각형으로, 상자의 정적 위치 컨테이닝 블록의 인라인 축 양쪽 가장자리 사이에 걸쳐 있으며 (CSS2 § 10.3.7 참조), 해당 상자의 블록 시작 정적 위치에 배치됩니다 (CSS2 § 10.6.4 참조).

인라인 레이아웃

인라인 수준 상자의 정적 위치는 [CSS2] 10장에서 정의합니다. 정적 위치 사각형은 두께가 0인 사각형으로, 해당 상자의 “가상 상자”를 포함했을 줄 상자의 줄 위/줄 아래 양쪽 가장자리 사이에 걸쳐 있으며 (CSS2 § 10.3.7 참조), 해당 상자의 인라인 시작 정적 위치에 배치됩니다.

플렉스 레이아웃

플렉스 컨테이너의 자식에 대한 정적 위치 사각형은 플렉스 컨테이너의 콘텐츠 가장자리에 대응합니다. CSS 플렉스박스 1 § 4.1 절대 위치가 지정된 플렉스 자식을 참조하세요.

그리드 레이아웃

기본적으로 그리드 컨테이너의 자식에 대한 정적 위치 사각형은 그리드 컨테이너의 콘텐츠 가장자리에 대응합니다. 그러나 해당 그리드 컨테이너가 상자의 실제 컨테이닝 블록도 설정하는 경우, 대신 그리드 배치 속성으로 지정된 그리드 영역이 해당 상자의 정적 위치 사각형을 설정합니다. [CSS-GRID-1]의 그리드 컨테이너 자식의 정적 위치를 참조하세요.

10. 변경 사항

2026년 1월 30일 자 작업 초안 이후의 변경 사항은 다음과 같습니다.

• gap 속성을 [css-gaps-1]로 이동했습니다. (이슈 13312)

• safe를 사용하여 절대 위치가 지정된 상자를 해당 원래 컨테이닝 블록으로 제한하도록 했습니다. (이슈 14008)

• 표와 그리드 컨테이너의 기준선을 찾는 알고리즘을 개선했습니다. (이슈 7655, 이슈 7641)

• 컨테이너가 이제 한 축에서만 스크롤 가능할 수 있으므로, 각 축을 독립적으로 처리하도록 스크롤 컨테이너의 특별한 처리 방식을 명확히 했습니다. (이슈 12289)

• 근본적으로 지원되지 않는 값은 유효한 값으로 파싱해서는 안 된다는 주의 사항을 추가했습니다. (13421)

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

11. 개인정보 고려사항

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

12. 보안 고려사항

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

감사의 글

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