CSS Containing Block
airbnb clone 수업 중에 발견한 문제를 해결하기 위해 첫번째로 공부하는 주제는 컨테이닝 블록이다.
컨테이닝 박스란?
월드와이드웹 표준을 만드는 단체 w3c에서 작성된 css 공식 문서에서 컨테이닝 블록을 어떻게 설명하는지 확인해보았다.
In CSS 2, many box positions and sizes are calculated with respect to the edges of a rectangular box called a containing block. In general, generated boxes act as containing blocks for descendant boxes; we say that a box “establishes” the containing block for its descendants. The phrase “a box’s containing block” means “the containing block in which the box lives,” not the one it generates. - 9.1.2 Containing blocks. CSS 2.1 spec
공식 문서에서는 컨테이닝 블록이라는 개념을 왜 사용하는지와 컨테이닝 블록이 어떻게 설정되는지를 간략하게 설명한다.(자세한 설명은 스펙의 다른 챕터에서 설명을 하고 있다. 후술할 예정) 설명에 따르면 요소들(box들)의 position(CSS에서의 position은 단순히 위치가 아니기 때문에)과 크기(높이와 너비)를 계산하기 위한 기준점을 정하기 위해 필요한 개념이다. 쉽게 말하면 각각의 html요소(box)가 있는(lives) 곳이 컨테이닝 블록이다.
컨테이닝 블록 설정의 자세한 내용을 알려주는 있는 다른 챕터를 확인해 보았다. 해당 내용은 길기 때문에 인용하지는 않지만 여기에서 확인할 수 있다.
컨테이닝 박스 자세히 살펴보기
우선 컨테이닝 박스에 대해서 오해하기 쉬운 부분을 이야기 하고 컨테이닝 박스가 position값에 따라서 어떻게 정의되는지 살펴보려고 한다.
html을 작성할 때, 요소 안에 요소가 있는 경우 요소를 품은 요소를 부모(상위) 요소라고 하고, 요소 안에 있는 요소를 자식(하위) 요소라고 한다. html 문서들은 이렇게 요소들 간의 계층들을 형성하면서 작성된다. 우리는 브라우저가 이 html 문서를 렌더링하고 그려낸 화면을 보면서 컨테이닝 블록은 부모요소일 것이라고 추측하게 된다. 스펙의 설명에 따르면 대부분의 경우 이 추측은 맞다. 하지만 항상 그런 것은 아니다. 스펙은 부모요소가 컨테이닝 블록이 아닌 경우에 대한 내용, 컨테이닝 블록에 대한 자세한 정의를 설명한다.
- root element(부모 요소가 없는 유일한 요소)가 있는 직사각형의 영역은 최초 컨테이닝 블록(initial containing block)이다.
