Containing Block이란?

CSS에서 요소의 크기와 위치를 결정할 때, 특정 기반이 되는 Containing Block(컨테이닝 블록)이라는 개념이 있습니다.

이는 CSS 레이아웃을 이해하는 데 필수적인 배경지식입니다.

Containing Block의 정의

containing block
A rectangle that forms the basis of sizing and positioning for the boxes associated with it.
(요소의 박스와 연관된 박스들의 크기 조정 및 위치 지정을 결정하는 기반이 되는 직사각형)
CSS Display Module Level 3, containing block

CSS에서 요소의 위치와 크기를 결정할 때 기반이 되는 부모 또는 조상 요소를 Containing Block이라고 합니다.

많은 경우 Containing Block이 부모 요소의 영역이라고 생각하기 쉽지만, 항상 그런 것은 아닙니다.
요소의 Containing Block이 중요한 이유와 Containing Block을 결정하는 요인이 무엇인지 알아보겠습니다.

Containing Block이 중요한 이유

요소의 Containing Block을 결정하는 요인을 알아보기 전에, 우선 그것이 왜 중요한지 아는 것이 좋습니다.

요소의 크기와 위치는 Containing Block의 영향을 받을 때가 많습니다.
특히, position 속성이 absolute 또는 fixed로 설정된 절대 위치 요소는 width, height, padding, margin 등의 크기를 결정하는 백분율(%) 값과 top, left 등의 위치에 대한 오프셋을 결정하는 백분율(%) 값이 Containing Block을 기준으로 계산됩니다.

Containing Block을 결정하는 요인

요소의 크기와 위치는 Containing Block이라고 하는 특정 사각형을 기반으로 계산됩니다.
Containing Block은 다음과 같이 정의됩니다.

루트 요소(<html>)의 Containing Block

  • 문서에서 최상위 요소인 <html>의 Containing Block을 Initial Containing Block이라고 합니다.
  • 연속적인 미디어(웹 브라우저 등)에서는 뷰포트(viewport) 크기와 동일합니다.
  • 페이지 미디어(인쇄물 등)에서는 페이지 영역(page area)이 Containing Block이 됩니다.
  • Initial Containing Block의 direction 속성은 루트 요소의 해당 속성 값을 따릅니다.

뷰포트(viewport)는 웹 브라우저 용어로, 현재 창(또는 전체 화면 모드로 문서를 보고 있는 경우 화면)에 표시되는 문서의 부분으로 웹 페이지가 보여지는 영역을 의미합니다.

뷰포트(viewport)

다른 요소의 Containing Block

루트 요소(<html>)를 제외한 다른 요소에서는 전적으로 요소의 position 속성의 값에 따라 Containing Block이 결정됩니다.

static, relative, sticky인 경우

Containing Block은 가장 가까운 조상 Containing Block(예: display가 inline-block, block, list-item 등의 요소), 또는 가장 가까우면서 서식 맥락을 형성하는 조상 요소(예: display가 table, flex, grid, 아니면 Containing Block 자체)의 Content box를 따라 형성됩니다.

사용자 에이전트(브라우저 등)가 문서를 배치하면 모든 요소에 대한 사각형 상자를 생성합니다. 각 상자는 네 가지 영역으로 나뉩니다.
• Content box(or area)
• Padding box(or area)
• Border box(or area)
• Margin area

box model
static

Containing Block이 요소 크기의 기준이 됩니다.

relative

Containing Block이 요소 크기의 기준이 됩니다.
위치 기준은 요소 자체가 배치된 다음의 요소 영역 자체입니다. 위치의 설정은 순전히 시각적 효과이며, 달리 지정되지 않는 한 조상의 스크롤 가능한 오버플로 영역을 늘리는 경우를 제외하고는 다른 비자손 상자의 크기나 위치에 영향을 미치지 않습니다.

sticky

Containing Block이 요소 크기의 기준이 됩니다.
요소의 containing block인 가장 가까운 조상 블록 레벨 요소 영역이
가장 가까운 조상 scroll container(스크롤 영역)의 scrollport(스크롤 가능한 오버플로 영역을 시각적으로 볼 수 있는 곳) 기준으로 top, bottom, left, right 속성 값으로 지정한 임계점(specified threshold) 위치에 도달하면 마치 fixed처럼 해당 위치에서 고정됩니다. 고정 상태는 컨테이닝 블록의 반대편 가장자리를 만나면 해제됩니다. 지정된 임계점 위치에 도달되기 이전은 relative로 배치됩니다.

absolute인 경우
  • Containing Block은 가장 가까운 position 속성의 값이 relative, absolute, fixed, sticky인 조상 요소의 Padding box입니다.
  • 만약 그런 조상 요소가 없다면 루트 요소(<html>)의 Initial Containing Block이 Containing Block이 됩니다.
fixed인 경우
  • 연속적인 미디어(웹 브라우저 등)에서는 뷰포트(viewport) 크기와 동일합니다.
  • 페이지 미디어(인쇄물 등)에서는 페이지 영역(page area)이 Containing Block이 됩니다.
absolute와 fixed인 경우

position 속성이 absolute 또는 fixed로 설정된 절대 위치 요소인 경우 Containing Block은 다음 중 하나를 갖는 가장 가까운 조상 요소의 Padding box가 될 수도 있습니다.

  • filter 또는 backdrop-filter 또는 transform 또는 perspective 속성이 none이 아닌 값으로 설정된 요소
  • will-change 속성의 값이 filter 또는 backdrop-filter 또는 transform 또는 perspective인 값으로 설정된 요소
  • contain 속성의 값이 layout 또는 paint 또는 strict 또는 content 값으로 설정된 요소
  • content-visibility 속성의 값이 auto 값으로 설정된 요소

주의하세요!
브라우저마다 perspective와 filter 속성이 Containing Block 형성에 기여하는 방식이 다를 수 있으므로, 특정 브라우저에서 예상과 다른 결과가 나타날 수 있습니다.

예제

다음의 예제를 통해서 Containing Block이 중요한 이유에 대해 살펴보겠습니다.

크기를 결정하는 백분율(%) 값

Containing Block은 요소의 크기(예: width, height, padding, margin 등)를 결정하는 백분율(%) 값의 기준으로 계산됩니다.

아래는 일반적인 부모 요소가 Containing Block인 경우와 요소의 position 속성이 absolute인 경우, 같은 구조에서 Containing Block이 달라질 때 요소에 설정한 width: 50%의 계산 결과가 어떻게 달라지는지를 비교해 봅니다.

HTML 
<section class="grandparent-1">
    <h4>일반적인 경우(.parent가 Containing Block)</h4>
    <div class="parent">
        parent는 width: 200px;
        <p class="child">나는 width: 50%</p>
    </div>
</section>
<section class="grandparent-2">
    <h4>position: absolute;인 경우(.grandparent-2가 Containing Block)</h4>
    <div class="parent">
        parent는 width: 200px;
        <p class="child">나는 width: 50%;</p>
    </div>
</section>
CSS 
section {
    background-color: beige;
    padding: 2em;
    margin: 1em;
}
.grandparent-1 {
    position: static;
}
.grandparent-2 {
    position: relative; /* .absolute 예제의 Containing Block을 위한 설정 */
}

/* 부모 요소 */
.parent {
    width: 200px;
    height: 150px;
    background-color: gold;
}

/* 자식 요소 */
.child {
    background-color: violet;
    border: 5px solid;
    width: 50%; /* Containing Block 기준으로 계산됨 */
}

/* position: absolute 설정 */
.grandparent-2 .child {
    position: absolute;
}
실제 적용된 모습
설명 및 비교 결과
설명 및 비교 결과
경우 Containing Block 최종 크기
일반적인 경우
(position: static)		 .parent .parent 너비인 200px의 50%인 100px
position: absolute .grandparent-2 .grandparent-2 너비의 50%
  • 일반적으로(position: static) 부모 요소가 Containing Block이지만, position: absolute를 사용하면 Containing Block은 가장 가까운 position 속성의 값이 relative, absolute, fixed, sticky인 조상 요소의 Padding box입니다.
  • 일반적인 경우 .child의 width: 50%는 부모 요소 .parent(200px)의 50%이므로 100px이 됩니다.
  • position: absolute의 경우 .child는 position: absolute로 인해 Containing Block이 된 .grandparent-2 너비의 50%가 됩니다.

명세서

Containing Block의 명세서 사양
명세서 사양
Containing Block CSS Positioned Layout Module Level 3
#def-cb

참고문헌