Display/Visual formatting model

김동현·2026년 3월 21일

mdn 학습 번역 - CSS

목록 보기

88/190

안녕하세요! 프론트엔드 개발 강사입니다. 이번에 가져오신 내용은 CSS가 HTML 코드를 읽어서 어떻게 우리 눈에 보이는 아름다운 화면으로 만들어내는지, 그 근본적인 작동 원리를 설명하는 시각적 서식 모델(Visual formatting model)에 대한 문서군요!

초보 시절에는 "margin이랑 padding 넣으면 박스가 움직이는구나" 정도로만 이해하지만, 이 '시각적 서식 모델'을 이해하고 나면 브라우저가 화면을 그리는 원리를 꿰뚫어 보게 되어서 복잡한 레이아웃 버그도 쉽게 잡을 수 있게 된답니다. 영문 문서라 다소 추상적으로 느껴지셨을 텐데, 제가 실무에서 와닿는 표현과 꿀팁들로 싹 번역해 드릴게요. 같이 살펴볼까요? 😊

시각적 서식 모델 (Visual formatting model)

CSS에서 시각적 서식 모델(visual formatting model)이란, 사용자 에이전트(브라우저)가 HTML 문서 트리(DOM 트리)를 읽어 들인 후 이를 시각적 매체(화면 등)에 어떻게 처리하고 표시할지를 설명하는 아주 중요한 개념입니다. 이 매체에는 컴퓨터 모니터나 스마트폰 화면 같은 연속 매체(continuous media)뿐만 아니라, 책이나 브라우저의 인쇄 기능을 통해 출력되는 문서 같은 페이지 기반 매체(paged media)도 모두 포함됩니다. 이 문서에서 다루는 대부분의 정보는 연속 매체와 페이지 기반 매체 양쪽 모두에 똑같이 적용됩니다.

시각적 서식 모델에서, 문서 트리에 있는 각 HTML 요소(element)들은 박스 모델(box model) 규칙에 따라 하나 혹은 그 이상의 박스(boxes)들을 생성해 냅니다. 이 박스들이 화면에 어떻게 배치될지는 다음 요소들에 의해 결정됩니다:

박스의 크기(dimensions)와 타입(type: 블록인지, 인라인인지 등).
위치 지정 체계 (일반 흐름, 플롯(float), 또는 절대 위치 지정).
문서 트리 내에서 요소들 간의 관계 (누가 부모이고 자식인지 등).
외부적인 정보 (예: 뷰포트의 크기, 이미지가 원래 가지고 있는 고유 크기 등).

시각적 서식 모델에 대한 정보의 대부분은 과거 CSS2에서 처음 정의되었습니다. 하지만 이후에 Grid나 Flexbox 같은 다양한 CSS 레이아웃 모듈들이 등장하면서 이 정보들이 확장되고 발전해 왔죠. 여러분이 여러 CSS 사양서들을 읽다 보면 CSS2에 정의된 이 모델에 대한 참조를 자주 보게 될 텐데요, 그렇기 때문에 CSS2에서 이 모델을 어떻게 설명하고 어떤 용어를 사용했는지 이해해 두는 것은 다른 레이아웃 사양을 읽고 이해하는 데 큰 도움이 됩니다.

이 문서에서는 시각적 서식 모델을 정의하고, 이와 관련된 몇 가지 용어와 개념들을 소개하며, 더 자세한 내용을 볼 수 있는 구체적인 페이지들로 안내해 드리겠습니다.

이 문서의 내용

뷰포트의 역할 (The role of the viewport)
박스 생성 (Box generation)
위치 지정 체계와 흐름 안/흐름 밖 요소 (Positioning schemes and in-flow and out-of-flow elements)
서식 컨텍스트와 display 속성 (Formatting contexts and the display property)
같이 보기 (See also)

뷰포트의 역할 (The role of the viewport)

일반적인 화면(연속 매체)에서, 뷰포트(viewport)는 브라우저 창에서 우리가 실제로 웹페이지를 보는 영역을 뜻합니다. 브라우저는 뷰포트의 크기가 변할 때(예를 들어, 사용자가 브라우저 창 크기를 조절하거나 스마트폰을 가로/세로로 돌릴 때) 페이지의 레이아웃을 다시 계산해서 바꿀 수 있습니다.

만약 문서의 전체 크기가 뷰포트보다 커서 화면에 다 들어오지 않는다면, 브라우저는 화면에 보이지 않는 부분을 사용자가 볼 수 있도록 스크롤 기능을 제공해야 합니다. 가장 흔히 볼 수 있는 것이 바로 블록 방향(block dimension) 스크롤입니다. 위에서 아래로 글을 읽는 언어(한국어, 영어 등) 환경에서는 세로(수직) 스크롤이 되겠죠. 하지만 여러분의 디자인에 따라 인라인 방향(inline dimension), 즉 가로 방향으로 스크롤이 필요한 경우도 생길 수 있습니다.

박스 생성 (Box generation)

박스 생성(Box generation)은 CSS 시각적 서식 모델의 일부로, HTML 문서의 요소들을 가져다가 화면에 그리기 위한 '상자(boxes)'들을 만들어내는 과정을 말합니다. 이렇게 생성된 박스들은 제각기 다른 타입(type)을 가지며, 이 타입에 따라 시각적인 서식(배치 모양)이 달라집니다. 어떤 타입의 박스가 생성될지는 CSS의 display 속성값에 전적으로 달려있습니다.

초기에 CSS2에서 정의되었던 display 속성은 이후 CSS 디스플레이(CSS display), CSS 플렉스박스(CSS flexible box layout), CSS 그리드(CSS grid layout), 그리고 CSS 루비(CSS ruby layout) 모듈을 거치며 크게 확장되었습니다. 게다가 CSS2 시절 이후로 이 display와 관련된 몇몇 용어들도 많이 개선되고 명확해졌죠.

👨‍🏫 강사의 실무 팁! "CSS는 결국 박스 쌓기 게임입니다"
화면에 둥근 버튼이 있든, 복잡한 표가 있든, CSS 엔진의 눈에는 모든 것이 그냥 '네모난 상자(Box)'일 뿐입니다. display: block을 주면 상자가 혼자 한 줄을 다 차지하고, display: flex를 주면 부모 상자 안에서 자식 상자들이 쫀득하게 늘어났다 줄어들며 배열되는 거죠. 이 '박스 트리(Box tree)' 개념을 이해하는 게 레이아웃 마스터의 첫걸음입니다!

CSS는 여러분이 작성한 HTML 소스 문서를 가져와서 화면(캔버스) 위에 그려냅니다. 이 렌더링 과정을 수행하기 위해, 브라우저는 내부적으로 박스 트리(box tree)라는 중간 구조체를 생성합니다. 이 트리는 렌더링 될 문서의 전체적인 서식 구조를 나타냅니다. 박스 트리의 각 박스(상자)는 캔버스 공간(또는 시간) 상에서 그에 대응하는 HTML 요소(또는 가상 요소)를 나타내며, 박스 트리 내의 텍스트 런(text run, 연속된 문자열) 역시 대응하는 텍스트 노드의 콘텐츠를 나타냅니다.

즉, 브라우저는 HTML의 각 요소에 대해 그 요소의 display 속성값에 따라 0개(아무것도 안 만듦) 또는 1개 이상의 박스를 생성하게 됩니다.

📝 참고:
개발자들은 보통 박스들을 그 박스의 디스플레이 타입으로 부르곤 합니다. 예를 들어, display: block이 설정된 요소가 만든 박스는 그냥 "블록 박스(block box)"나 "블록(block)"이라고 부르죠. 하지만 엄밀히 말해서 블록 박스(block boxes), 블록 레벨 박스(block-level boxes), 블록 컨테이너(block containers)는 모두 미묘하게 다른 뜻을 가지고 있습니다. 자세한 내용은 아래의 블록 박스(block boxes) 섹션에서 확인해 보세요.

주요 박스 (The principal box)

어떤 요소가 여러 개의 박스를 만들어낼 때, 그중 하나는 반드시 주요 박스(principal box)가 됩니다. 이 주요 박스는 박스 트리 안에서 자신의 자손 박스들이나 생성된 콘텐츠(::before 등)를 담는 역할을 하며, position 등 어떤 위치 지정 체계에 참여할 때도 바로 이 주요 박스가 기준이 됩니다.

대부분의 요소는 주요 박스 하나만 달랑 만들지만, 어떤 요소들은 주요 박스에 더해 추가적인 박스를 만들어내기도 합니다. 대표적으로 display: list-item(<li> 태그의 기본값)이 있죠. 이 속성은 요소 본체를 위한 주요 블록 박스(principal block box) 하나와, 리스트의 불릿(bullet, 점이나 숫자)을 그리기 위한 자식 마커 박스(child marker box)를 추가로 생성합니다.
반대로, display: none이나 display: contents 같은 값을 주면 요소 본인이나 그 자손들이 아예 그 어떤 박스도 생성하지 않게(화면에서 완전히 사라지게) 만들 수도 있습니다.

익명 박스 (Anonymous boxes)

익명 박스(Anonymous box)는 박스를 만들어야 하는데, 짝을 이룰 HTML 태그가 없을 때 브라우저가 몰래 만들어내는 가상의 박스입니다.
예를 들어 볼까요? 부모 요소에 display: flex를 주고, 그 안에 아무런 태그(이나  등)로 감싸지 않은 그냥 쌩(raw) 텍스트를 적어 넣었다고 가정해 봅시다. 플렉스박스는 자식들을 '플렉스 아이템 박스'로 다루어야 하는데, 이 텍스트는 박스가 아니잖아요? 그래서 브라우저는 박스 트리가 망가지는 것을 막기 위해, 이 텍스트 주변을 감싸는 보이지 않는 '익명 박스'를 강제로 생성해 버립니다. 그러면 이 익명 박스가 하나의 어엿한 플렉스 아이템처럼 행동하게 되죠. 하지만 이 익명 박스는 실제 HTML 요소(태그)가 없기 때문에 CSS 선택자로 잡아서 색깔을 바꾸는 등의 스타일링을 직접 할 수는 없습니다.

(MDN Playground에서 실행해보기 (Play))

<div class="flex">
  I am wrapped in an anonymous box
  <p>I am in the paragraph</p>
  I am wrapped in an anonymous box.
</div>

body {
  font: 1.2em sans-serif;
  margin: 20px;
}

.flex {
  display: flex;
}

.flex > * {
  background-color: rebeccapurple;
  color: white;
}

위의 예제를 보면 .flex > * 선택자를 통해 자식들에게 보라색 배경을 주었지만,  태그에만 보라색이 칠해지고 위아래 쌩 텍스트에는 색이 칠해지지 않았습니다. 쌩 텍스트들은 브라우저가 임의로 만든 '익명 박스'에 들어있어 선택자에 잡히지 않기 때문입니다!

이런 일은 블록 요소들 사이에 그냥 텍스트가 끼어 있을 때도 일어납니다. 다음 예제에는 <div> 안에 문장이 하나 있고, 문장 한가운데에 텍스트 일부를 감싸고 있는  블록 요소가 떡하니 버티고 있습니다.

(MDN Playground에서 실행해보기 (Play))

<div class="example">
  I am wrapped in an anonymous box
  <p>I am in the paragraph</p>
  I am wrapped in an anonymous box.
</div>

body {
  font: 1.2em sans-serif;
  margin: 20px;
}

.example > * {
  background-color: rebeccapurple;
  color: white;
}

박스 트리를 구성할 때, 이 텍스트 묶음은 세 개의 박스로 쪼개지게 됩니다.  태그가 나오기 전의 텍스트는 익명 블록 박스로 감싸지고, 그다음에  태그가 만들어내는 진짜 박스가 오고, 마지막으로  태그 뒤의 텍스트가 또 다른 익명 블록 박스로 감싸지게 됩니다.

이 익명 박스들에 대해 한 가지 알아두어야 할 점은, 이들도 직계 부모로부터 글꼴이나 색상 같은 속성을 상속(inherit)받기는 하지만, CSS 선택자로 이 익명 박스만을 콕 집어서 스타일을 바꿀 수는 없다는 것입니다. 위 예제에서도 직계 자식 선택자(> *)를 사용했지만, 익명 박스는 엄밀히 말해 HTML "요소(elements)"가 아니기 때문에 선택자에 잡히지 않아 배경색이 변하지 않았죠.

인라인 익명 박스(Inline anonymous boxes)는 문장(텍스트) 중간에 뜬금없이 인라인 요소가 끼어들어 문장을 쪼갤 때 생성됩니다. 예를 들어, 일반 텍스트 문장 중간에  태그로 감싸진 부분이 있다고 치죠. 그러면 이 문장은 박스 트리에서 3개의 인라인 박스로 쪼개집니다.  태그 시작 전의 텍스트를 담은 익명 인라인 박스,  태그 본인의 박스, 그리고 그 뒤에 남은 텍스트를 담은 익명 인라인 박스로 말이죠. 아까 설명한 익명 블록 박스와 마찬가지로, 이 익명 인라인 박스들도 처럼 독자적으로 스타일을 줄 수는 없고 그저 부모의 스타일을 묵묵히 상속받을 뿐입니다.

💡 강사의 실무 팁! "텍스트는 항상 태그로 감싸는 습관을 들이세요"
이런 '익명 박스'들은 개발자가 통제하기가 너무 힘듭니다. 그래서 실무에서는 <div> 바로 안에 맨글씨를 쓰기보다는, 항상 나  같은 적절한 HTML 태그로 글자들을 한 번 더 감싸서 확실한 이름을 가진 '진짜 박스'로 만들어 주는 것이 좋은 개발 습관입니다!

이 외의 다른 서식 컨텍스트들도 익명 박스를 만들어냅니다. 그리드 레이아웃(Grid layout)은 방금 전 플렉스박스 예제와 완전히 똑같이 작동해서, 쌩 텍스트를 익명 박스로 감싸 그리드 아이템으로 만듭니다. 다단 레이아웃(Multiple-column)은 다단 콘텐츠 주변에 익명 단(column) 박스를 만드는데 이 역시 선택하거나 스타일링할 수 없습니다. 테이블 레이아웃(Table layout)도 완벽한 표 구조를 유지하기 위해, 예를 들어 display: table-row 박스가 빠져있다면 브라우저가 몰래 익명 테이블 행 박스를 추가해 줍니다.

라인 박스 (Line boxes)

라인 박스(Line boxes)는 텍스트의 각 줄(line)을 하나하나 감싸고 있는 가상의 긴 가로 상자입니다.
어떤 요소를 float(띄우기) 시킨 다음, 그 뒤에 배경색이 있는 일반 블록 요소를 배치해 보면 이 '라인 박스'와 부모 컨테이닝 블록의 차이점을 아주 명확하게 눈으로 볼 수 있습니다.

아래 예제를 보세요. 왼쪽으로 float 된 <div> 요소 바로 뒤에 따라오는  태그 안의 텍스트들(라인 박스들)은, float 된 박스에 부딪히지 않기 위해 길이를 줄여서(shortened) 그 옆으로 비켜서 흐르고 있습니다. 하지만 배경색을 보면 알 수 있듯이,  박스 자체는 float 된 아이를 무시하고 원래 자기 자리(화면 맨 왼쪽부터 끝까지)를 떡하니 차지하고 있습니다. float 된 요소가 흐름에서 빠져나왔기(taken out of flow) 때문에,  박스는 그 녀석이 거기 있는지조차 모르는 거죠. 오직  안의 텍스트(라인 박스)들만 눈치를 보며 길이를 줄일 뿐입니다.

(MDN Playground에서 실행해보기 (Play))

<div class="float"></div>
<p class="following">
  This text is following the float, the line boxes are shortened to make room
  for the float but the box of the element still takes position in normal flow.
</p>

body {
  font: 1.2em sans-serif;
  margin: 20px;
}

.float {
  float: left;
  width: 150px;
  height: 150px;
  background-color: rebeccapurple;
  margin: 20px;
}

.following {
  background-color: #cccccc;
}

위치 지정 체계와 흐름 안/흐름 밖 요소 (Positioning schemes and in-flow and out-of-flow elements)

CSS에서 하나의 박스는 다음 세 가지 위치 지정 체계(positioning schemes) 중 하나에 따라 화면에 배치됩니다. 바로 일반 흐름(normal flow), 플롯(floats), 그리고 절대 위치 지정(absolute positioning)입니다.

일반 흐름 (Normal flow)

CSS에서 일반 흐름(normal flow)이란, 블록 박스들이 위아래로 쌓이는 블록 수준 서식(block-level formatting), 인라인 박스들이 옆으로 나란히 놓이는 인라인 수준 서식(inline-level formatting)을 포함합니다. 또한, 블록이나 인라인 요소에 position: relative(상대 위치)나 position: sticky(달라붙는 위치)를 적용한 경우도 일반 흐름의 일부로 간주합니다.

CSS의 흐름 레이아웃(flow layout)에 대해 더 자세히 알아보세요.

플롯 (Floats)

플롯(float) 모델에서는, 박스가 먼저 일반 흐름에 따라 원래 있어야 할 높이에 배치된 다음, 일반 흐름에서 빠져나와(taken out of the flow) 대개 왼쪽이나 오른쪽 끝으로 쫙 밀려서 배치됩니다. 그러면 뒤에 오는 콘텐츠(주로 텍스트)들이 이 float 된 요소의 옆면을 따라 굽이치며 흘러가게(flow) 됩니다.

플롯(floats)에 대해 더 자세히 알아보세요.

절대 위치 지정 (Absolute positioning)

절대 위치 지정 모델(absolute positioning, 여기에는 fixed 고정 위치 지정도 포함됩니다)에서는, 박스가 일반 흐름에서 완벽하게, 흔적도 없이 제거됩니다. 그리고 오직 자신을 감싸고 있는 기준 박스(containing block, fixed의 경우엔 뷰포트 화면 그 자체)나, CSS 앵커 포지셔닝(CSS anchor positioning)에서의 앵커 요소들을 기준으로 하여 명시적으로 위치가 부여(top, left 등)됩니다.

어떤 요소가 플롯(floated)되었거나, 절대 위치 지정(absolutely positioned)되었거나, 문서의 루트 요소(<html>)일 경우, 이 요소를 가리켜 흐름에서 벗어났다(out of flow)고 말합니다. 반대로 이 세 가지 경우가 아닌 모든 요소들은 흐름 안에 있다(in-flow)고 부릅니다.

CSS 위치 지정 레이아웃(CSS positioned layout)에 대해 읽어보세요.

서식 컨텍스트와 display 속성 (Formatting contexts and the display property)

우리는 박스가 외부 디스플레이 타입(outer display type)을 가진다고 설명할 수 있는데, 이는 주로 block 이거나 inline입니다. 이 외부 디스플레이 타입은 해당 박스가 페이지에서 이웃한 다른 형제 요소들과 섞여 있을 때 바깥쪽에서 어떻게 행동할 것인지(혼자 한 줄을 다 쓸지, 옆으로 붙을지)를 결정합니다.

동시에 박스는 내부 디스플레이 타입(inner display type)도 가지고 있습니다. 이는 자기 품 안에 있는 자식 요소들을 어떻게 배치할지 그 규칙을 지시합니다. 일반적인 블록이나 인라인 레이아웃, 즉 일반 흐름 상황에서는 이 내부 디스플레이 타입의 기본값이 flow입니다. 즉, 자식 요소들도 특별한 일 없이 그냥 평범하게 block이나 inline 방식으로 쌓이게 된다는 뜻이죠.

하지만, 만약 여러분이 요소에 display: grid나 display: flex를 주면 내부 디스플레이 타입이 grid나 flex로 바뀌게 됩니다. 이렇게 되면 그 직계 자식들은 더 이상 평범한 블록/인라인이 아니라 그리드 아이템이나 플렉스 아이템으로 변신해서 배치됩니다.
이런 상황을 두고, 우리는 해당 요소가 그리드(Grid) 또는 플렉스(Flex) 서식 컨텍스트(formatting context)를 생성했다고 표현합니다. 이 새로운 컨텍스트는 여러모로 블록 서식 컨텍스트(BFC)와 비슷하게 행동하지만, 결정적으로 내부에 있는 자식들이 일반 흐름이 아니라 플렉스나 그리드의 특별한 마법 규칙에 따라 움직인다는 점이 다릅니다.

블록 레벨 박스와 인라인 레벨 박스 간의 상호작용은 display 속성 레퍼런스에 자세히 설명되어 있습니다.
또한 display의 구체적인 값들에 대한 레퍼런스 문서들을 보면 이 각각의 서식 컨텍스트들이 박스 레이아웃 관점에서 어떻게 작동하는지 이해할 수 있습니다.

CSS 그리드 레이아웃 (CSS grid layout) 모듈
CSS 플렉스박스 레이아웃 (CSS flexible box layout) 모듈
CSS 다단 레이아웃 (CSS multi-column layout) 모듈
CSS 테이블 (CSS table) 모듈
CSS 리스트와 카운터 (CSS lists and counters) 모듈

독립적인 서식 컨텍스트 (Independent formatting contexts)

요소들은 자신이 속한 부모(containing block)의 서식 컨텍스트 규칙에 순응하며 살아가거나, 아니면 아예 자신만의 독립적인 서식 컨텍스트(independent formatting context)를 새롭게 구축하여 왕국을 세우거나 둘 중 하나입니다. 예를 들어, 어떤 요소에 display: grid를 주어 그리드 컨테이너로 만들면, 그 요소는 자식들을 위해 새롭고 독립적인 그리드 서식 컨텍스트를 개국하는 셈이죠.

이러한 독립적인 서식 컨텍스트의 가장 큰 특징은, 내부에서 발생한 float(플롯) 요소들이 컨텍스트 바깥으로 탈출하지 못하도록 꽉 가둬버린다는 것(contain floats), 그리고 이 컨텍스트의 경계선을 넘어선 안팎의 요소들 간에는 마진 병합(margin collapse)이 절대로 일어나지 않는다는 것입니다.
따라서 박스 안에 있는 float 요소나 마진이 밖으로 새어 나가서 레이아웃을 망치는 것을 방지하고 싶다면, 새로운 블록 서식 컨텍스트(BFC)를 만들어주면 됩니다. 이를 위한 가장 깔끔한 모던 CSS 기법은, 방어막을 치고 싶은 박스에 display: flow-root를 추가하여 새로운 블록 서식 컨텍스트를 생성하는 것입니다.

다음 예제는 display: flow-root가 어떤 마법을 부리는지 보여줍니다. 검은색 배경을 가진 부모 박스(.container)가 내부에 있는 float 된 아이템과 텍스트를 완벽하게 감싸 안고 있죠? 여기서 만약 CSS에서 display: flow-root를 지워버리면, 부모 박스는 내부의 float 요소를 인식하지 못해 높이가 쪼그라들고, float 된 아이템이 박스 아래로 흉하게 삐져나오게(poke out) 될 것입니다.

(MDN Playground에서 실행해보기 (Play))

<div class="container">
  <div class="item">Floated</div>
  <p>Text following the float.</p>
</div>

body {
  font: 1.2em sans-serif;
  margin: 20px;
}
.container {
  background-color: #333333;
  color: white;
  display: flow-root; /* 이 한 줄이 부모가 float 자식을 온전히 감싸게 만듭니다! */
}

.item {
  margin: 10px;
  float: left;
  background-color: white;
  border: 1px solid #999999;
  color: #333333;
  width: 100px;
  height: 100px;
  padding: 10px;
}

블록 박스 구분하기 (Block boxes)

CSS 사양서를 깊게 읽다 보면, 블록 박스(block boxes), 블록 레벨 박스(block-level boxes), 블록 컨테이너(block containers)라는 용어들이 곳곳에서 혼용되어 쓰이는 것을 볼 수 있습니다. 비슷해 보이지만 이들은 미묘하게 다른 뜻을 가지고 있으므로, "블록 박스"라는 용어는 오해가 없을 때만 제한적으로 사용하는 것이 좋습니다.

블록 컨테이너 (Block containers)

블록 컨테이너(Block container)란, 오직 인라인 서식 컨텍스트에 참여하는 인라인 레벨 박스들만 자식으로 품고 있거나, 아니면 오직 블록 서식 컨텍스트에 참여하는 블록 레벨 박스들만 자식으로 품고 있는 상자를 말합니다. (인라인과 블록을 섞어서 품지 못합니다.) 위에서 익명 박스(anonymous boxes)를 설명할 때, 블록이나 인라인 컨텍스트 한 가지 규칙만 적용되도록 브라우저가 강제로 익명 박스를 끼워 넣는 걸 보셨죠? 그 이유가 바로 이 때문입니다. 어떤 요소가 오직 블록 레벨 또는 인라인 레벨 박스만을 내용물로 포함할 때, 우리는 그 요소를 블록 컨테이너라고 부릅니다.

인라인 레벨 및 블록 레벨 박스 (Inline-level and block-level boxes)

이것들은 바로 위에서 말한 블록 컨테이너 '안에' 들어있는 자식 박스들로, 각각 인라인 레이아웃 규칙에 따라 옆으로 붙거나, 블록 레이아웃 규칙에 따라 위아래로 쌓이는 박스들을 지칭합니다.

블록 박스 (Block boxes)

진정한 의미의 블록 박스(Block box)란, 밖에서 볼 땐 위아래로 쌓이는 '블록 레벨 박스'이면서, 동시에 자기 내부의 자식들을 다루는 방식도 '블록 컨테이너'인 녀석을 말합니다. CSS display 문서에 설명되어 있듯, 밖에서 볼 땐 블록 레벨 박스(display: flex 등)인데, 안에서 자식들을 다루는 방식은 블록 컨테이너가 아닌 경우(플렉스 컨테이너 등)도 존재하기 때문입니다.

같이 보기 (See also)

MDN 개선에 참여하기 (Help improve MDN)

이 페이지가 도움이 되셨나요? [네 (Yes)] / [아니요 (No)]

기여하는 방법 알아보기 (Learn how to contribute)

이 페이지는 2025년 11월 7일에 MDN 기여자들 (MDN contributors)에 의해 마지막으로 수정되었습니다.

김동현

프론트에_가까운_풀스택_개발자

이전 포스트

Display/Using multi-keyword syntax

다음 포스트

Display/Visual formatting model

mdn 학습 번역 - CSS

시각적 서식 모델 (Visual formatting model)

이 문서의 내용

뷰포트의 역할 (The role of the viewport)

박스 생성 (Box generation)

주요 박스 (The principal box)

익명 박스 (Anonymous boxes)

라인 박스 (Line boxes)

위치 지정 체계와 흐름 안/흐름 밖 요소 (Positioning schemes and in-flow and out-of-flow elements)

일반 흐름 (Normal flow)

플롯 (Floats)

절대 위치 지정 (Absolute positioning)

서식 컨텍스트와 display 속성 (Formatting contexts and the display property)

독립적인 서식 컨텍스트 (Independent formatting contexts)

블록 박스 구분하기 (Block boxes)

블록 컨테이너 (Block containers)

인라인 레벨 및 블록 레벨 박스 (Inline-level and block-level boxes)

블록 박스 (Block boxes)

같이 보기 (See also)

MDN 개선에 참여하기 (Help improve MDN)

Display/Using multi-keyword syntax

Environment variables/Using environment variables

0개의 댓글