---
title: 시각적 서식 모델
slug: Web/CSS/Visual_formatting_model
tags:
  - 씨에스에스
  - 씨에스에스 상자 모델
  - 참조
translation_of: Web/CSS/Visual_formatting_model
original_slug: Web/Guide/CSS/Visual_formatting_model
---
<div>{{CSSRef}}</div>

<p class="summary"><span class="seoSummary">씨에스에스 <ruby><em>시각적 서식 모델</em><rp> (</rp><rt>visual formatting model</rt><rp>) </rp></ruby>은 문서를 처리하여 그것을 시각적 매체에 표시하는 알고리즘입니다. 이 모델은 씨에스에스의 기본 개념입니다. </span></p>

<p>시각적 서식 모델은 문서의 각 요소를 변환하여, <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">씨에스에스 상자 모델</a>에 부합하는 0, 1 또는 여러 상자를 생성합니다. 각 상자의 조판은 다음과 같이 정의됩니다:</p>

<ul>
 <li>상자의 면적: 정확히 정의하거나 제약을 받거나, 아에 정의하지 않습니다.</li>
 <li>상자의 유형: 인라인, 인라인수준, 원자 인라인수준, 블록.</li>
 <li><a href="/ko/docs/CSS/Box_positioning_scheme" title="CSS/Box positioning scheme">위치잡기 기법</a>: 일반 대열 소속, 부동체, 또는 절대 위치잡기.</li>
 <li>트리 구조에 속한 다른 요소 무리: 그것의 자녀와 이웃.</li>
 <li>{{glossary("viewport")}} 크기와 위치.</li>
 <li>컨테이너에 속한 이미지의 고유한 면적.</li>
 <li>다른 외부 정보</li>
</ul>

<p>동 모델은 컨테이너 블록의 모서리 기준과 비례하여 상자를 렌더링합니다. 보통, 하나의 상자는 자기 자손들을 위한 컨테이너 블록을 수립합니다. 그러나 상자는 자신의 상위 컨테이너 블록에 구속되지 않습니다. 상자 조판이 상위 컨테이너 블록을 벗어나면 <ruby><em>대열이탈</em><rp> (</rp><rt>overflow</rt><rp>) </rp></ruby>했다고 말합니다..</p>

<h2 id="상자_생성">상자 생성</h2>

<p>상자 생성은 해당 문서의 요소로부터 상자를 생성하는 씨에스에스 시각적 서식 모델의 일부입니다. 생성된 상자는 다양한 유형으로, 이 유형은 시각적 서식이 이뤄지는 방식에 영향을 미칩니다. 생성되는 상자 유형은 {{ cssxref("display") }} 씨에스에스 속성의 값 여하에 따라 달라집니다.</p>

<h3 id="블록수준_요소와_블록_상자">블록수준 요소와 블록 상자</h3>

<p>어떤 요소를 <em>블록수준</em>이라고 말하려면 계산된 {{ cssxref("display") }} 씨에스에스 속성값이 <code>block</code>, <code>list-item</code>, 또는 <code>table</code>일 때입니다. 블록수준 요소는 사실상 하나의 블록으로 취급되어 시각적으로 서식되며, 수직적으로 겹겹이 포개집니다.</p>

<p>각각의 블록수준 상자는 <a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">블록 서식 상황</a>에 참여합니다. 각 블록수준 요소는 적어도 하나의 블록수준 상자를 생성하며 이를 일컬어 <ruby><em>수석 블록수준 상자</em><rp> (</rp><rt>principal block-level box</rt><rp>) </rp></ruby>라고 합니다. 일부 요소 무리는 목록항목 요소와 같이 목록 항목을 안내하는 글머리표와 서로 다른 타이포그래픽 요소를 처리하기 위한 상자를 추가적으로 생성하듯 더 많은 상자 무리를 생성할 수 있습니다. 대다수는 수석 블록 수준 상자만을 생성합니다.</p>

<p>수석 블록수준 상자는 자손이 생성한 상자 및 콘텐츠를 포함합니다. 상자는 <a href="/en-US/docs/CSS/Positioning_scheme" title="CSS/Positioning scheme">위치잡기 기법</a>에도 관여하고 있습니다.</p>

<p><img alt="venn_blocks.png" class="internal lwrap" src="/@api/deki/files/5995/=venn_blocks.png" style="float: left;">블록 수준 상자는 역시 블록 콘테이너 상자도 될 수 있습니다. <em>블록 컨테이너 상자</em>는 다른 블록수준 상자만을 포함하고 <a href="/ko/docs/Web/CSS/Inline_formatting_context" title="CSS/Inline formatting context">인라인 서식 상황</a>을 생성하므로 인라인 상자 무리만을 포함합니다.</p>

<p>중요한 점은 블록수준 상자와 블록 컨테이너 상자의 개념은 별개라는 점에 유의해야 한다는 것입니다. 첫째, 상자가 자기 부모와 형제자매과 함께하는 행동 방식을 설명합니다. 둘째, 상자가 자기 자손과는 어떻게 상호작용하는지 설명합니다. 테이블과 같은 블록 수준의 상자 무리는 블록 컨테이너 상자가 아닙니다. 마찬가지로 <ruby><em>비객원</em><rp> (</rp><rt>non-replaced</rt><rp>) </rp></ruby> 인라인 블록과 비객원 테이블 셀과 같은 일부 블록 컨테이너 상자는 블록 수준 상자가 아닙니다.</p>

<p>또한, 블록 컨테이너 상자이며 동시에 블록수준 상자를 일컬어 우리는 <ruby><em>블록 상자</em><rp> (</rp><rt>block boxes</rt><rp>) </rp></ruby>라고 부릅니다.</p>

<h4 id="무명_블록_상자">무명 블록 상자</h4>

<p>경우에 따라서는 시각적 서식 알고리즘은 보충 상자를 추가할 알고리즘도 필요합니다</p>

<p>씨에스에스 선택기는 해당 상자에 이름을 부여하거나 스타일링을 할 수 없기 때문에 이를 일컬어<em>무명 상자</em>라고 합니다.</p>

<p>선택기는 무명 상자와 협력하지 않기 때문에 스타일시트를 통해 스타일링이 적용될 수 없습니다. 즉, 상속할 수 있는 모든 씨에스에스 속성은 <code>inherit</code> 값을 갖고 상속할 수 없는 씨에스에스 속성은 <code>initial</code> 값을 가집니다.</p>

<p>상자를 포함하는 블록은 인라인수준 상자 또는 블록수준 상자만을 포함합니다. 그러나 문서는 두 가지 모두를 혼합해 포함합니다. 그 경우 무명 블록 상자는 인접 인라인수준 상자 주변에 생성됩니다.</p>

<h3 id="예제">예제</h3>

<p>아래와 같은 ({{ HTMLElement("div") }}와 {{ HTMLElement("p") }}에 기본값 스타일링이 적용된 에이치티엠엘 코드가 <code>display: block</code> 속성을 갖고 있다면:</p>

<pre class="syntaxbox"><code>&lt;div&gt;약간의 인라인 텍스트 &lt;p&gt;뒤를 잇는 단락 하나&lt;/p&gt; 그 뒤를 잇는 인라인 텍스트.&lt;/div&gt;</code></pre>

<p>두 개의 무명 블록 상자가 만들어집니다: 하나는 단락 이전 텍스트(<code>약간의 인라인 텍스트</code>) 나머지 하나는 단락 이후 텍스트(<code>그 뒤를 잇는 인라인 텍스트</code>). 이는 다음과 같은 블록 구조를 구축합니다:</p>

<p style="text-align: center;"><img alt="anonymous_block-level_boxes.png" class="default internal" src="/@api/deki/files/5996/=anonymous_block-level_boxes.png"></p>

<p>결과는:</p>

<pre>약간의 인라인 텍스트
뒤를 잇는 단락 하나
그 뒤를 잇는 인라인 텍스트.
</pre>

<p>{{ HTMLElement("p") }} 요소인 상자와 달리 웹 개발자는 두 개의 무명 상자 스타일을 제어할 수 없습니다. 상속 가능한 속성은 (마치 텍스트의 색상을 정의하기 위한 {{ cssxref("color") }}와 같이) {{ HTMLElement("div") }}의 속성 값에서 값을 취하고, 나머지는 초기(<code>initial</code>)값으로 설정합니다. 예를 들어, 무명 상자는 {{ cssxref("background-color") }}를 갖지 않을 것이라, 항상 해당 속성의 초기(<code>initial</code>)값을 가지며 투명합니다. 따라서 <code>&lt;div&gt;</code>의 배경이 보여집니다. 특정 배경색은 <code>&lt;p&gt;</code> 상자에 적용할 수 있습니다. 마찬가지로 두 무명 상자는 항상 같은 색을 텍스트에 사용합니다.</p>

<p>무명 블록 상자를 만드는 또 다른 사례는 하나 또는 여러 개의 블록 상자를 포함하는 인라인 상자입니다. 이 경우 블록 상자가 들어있는 상자는 두 개의 인라인 상자로 쪼개집니다. 하나는 블록 상자 이전에, 다른 하나는 뒤에 옵니다. 블록 상자 이전의 모든 인라인 상자는 <em>무명 블록 상자</em>로 포섭되며, 블록 상자 뒤에 있는 인라인 상자도 마찬가지입니다. 따라서 블록 상자는 인라인 요소를 포함하는 두 개의 무명 블록 상자의 형제가 됩니다.</p>

<p>중간에 인라인 콘텐츠가 없이 여러 블록 상자가 있는 경우 무명 블록 상자가 해당 상자 집합 이전과 이후에 생성됩니다.</p>

<h3 id="예제_2">예제</h3>

<p>아래 에이치티엠엘 코드를 보면 {{ HTMLElement("p") }}는 <code>display: inline</code> 속성을 갖고 있고 {{ HTMLElement("span") }}는 <code>display:block</code> 속성을 갖고 있습니다:</p>

<pre class="syntaxbox"><code>&lt;p&gt;일부 &lt;em&gt;인라인&lt;/em&gt; 텍스트 &lt;span&gt;그 뒤를 잇는 단락&lt;/span&gt; 그 뒤를 잇는 추가 인라인 텍스트.&lt;/p&gt;</code></pre>

<p>두 개의 무명 블록 상자가 생성되었습니다. 스팬 요소 이전의 텍스트(<code>일부 <em>인라인</em> 텍스트</code>) 하나와 그 뒤의 텍스트(<code>그 뒤를 잇는 추가 인라인 텍스트</code>) 하나가 있는데 이로써 다음과 같은 블록 구조가 주어졌습니다:</p>

<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/13625/anonymous_block_box_break.png" style="height: 137px; width: 597px;"></p>

<p>이 것의 결과는:</p>

<pre>약간의 인라인 텍스트
뒤를 잇는 단락 하나
그 뒤를 잇는 인라인 텍스트.
</pre>

<h3 id="인라인수준_요소와_인라인_상자">인라인수준 요소와 인라인 상자</h3>

<p>어떤 요소가 <em>인라인수준</em>이라고 말하려면 자신의 계산된 {{ cssxref("display") }} 씨에스에스 속성 값이 <code>inline</code>, <code>inline-block</code> 또는 <code>inline-table</code>일 때입니다. 시각적으로는 이것은 콘텐츠로 이뤄진 블록 무리를 구성하지 않고 다른 인라인수준 콘텐츠와 함께 라인의 형태로 배포됩니다. 일반적으로 강조 또는 이미지와 같이 서로 다른 서식을 가진 단락의 콘텐츠는 인라인수준 요소로 만들어집니다.</p>

<p><img alt="venn_inlines.png" class="internal lwrap" src="/@api/deki/files/6008/=venn_inlines.png" style="float: left;"></p>

<div class="warning">
<p>이 도식은 구식 용어를 사용합니다: 아래 참조 사항을 보세요. 그것 이외에도 오른쪽의 노란색 타원은 정의에 따르면 왼쪽의 타원형과 동일하거나 그보다 크기 때문에(수학적 상위집합일 수 있어) 그림이 틀렀습니다, 왜냐하면 해당 씨에스에스 스펙을 보면 "인라인수준 요소는 인라인 서식 상황에 참여하는 상자인 인라인수준 상자를 생성한다"라고 쓰여있기 때문입니다. 씨에스에스 2.2, 9.2.2장 참조</p>
</div>

<p>인라인 수준 요소는 <a href="/ko/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">인라인 서식 상황</a>에 참여하는 상자로 정의되는 <em>인라인수준 상자</em>를 생성합니다. <em>인라인 상자</em>는 상자와 인라인 수준 상자 모두가 해당합니다. 다만 이들 상자의 콘텐츠는 인라인 서식 상황에 참여해야 합니다. 예를 들어, <code>display: inline</code> 속성을 가진 모든 비객원 상자의 경우가 인라인입니다. 인라인 서식 상황에 참여하지 않는 인라인수준 상자를 <ruby><em>원자 인라인수준 상자</em><rp> (</rp><rt>atomic inline-level boxes</rt><rp>) </rp></ruby>라고 합니다. 객원 인라인수준 요소 또는 계산된 {{ cssxref("display") }} 값이 <code>inline-block</code>인 요소에 의해 생성된 해당 상자 무리는 인라인 상자에서 가능했던 것처럼 여러 상자로 쪼개지지 않습니다.</p>

<div class="note"><strong>참고:</strong> 처음에는 원자 인라인수준 상자를 원자 인라인 상자라고 불렀습니다. 그 명명은 불행한 일입니다. 인라인 상자가 <strong>아니기</strong> 때문입니다. 이건 씨에스에스 규격 상에 오타로 시정된 겁니다. 그렇긴 하지만, 문장 속에서 원자 인라인 상자를 마주칠 때마다 무리없이 원자 인라인 수준 상자로 읽을 수 있습니다. 그냥 이름 변경에 불과하기 때문입니다.</div>

<div class="note">원자 일라인 상자는 인라인 서식 상황 속에서 여러 라인에 걸쳐 분할될 수 없습니다.
<div style="-moz-column-width: 30em;">
<pre>&lt;style&gt;
  span {
    display:inline; /* default value*/
  }
&lt;/style&gt;
&lt;div style="width:20em;"&gt;
   스팬 요소에 포함된 택스트는 &lt;span&gt; 몇 개의 라인으로 분할 될 수
   있습니다. 왜냐면 &lt;/span&gt; 그것이 인라인 상자이기 때문입니다.
&lt;/div&gt;
</pre>

<p>이 것의 결과는:</p>

<div style="width: 20em;">The text in the span <span>can be split into several lines as it</span> is an inline box.</div>

<pre>&lt;style&gt;
  span {
    display:inline-block;
  }
&lt;/style&gt;
&lt;div style="width:20em;"&gt;
   스팬 요소에 포함된 텍스트는 &lt;span&gt;몇 라인으로 분할 될 수
   없 습니다. 왜냐면 &lt;/span&gt; 그것이 인라인 블록이기 때문입니다.
&lt;/div&gt;
</pre>

<p>이 것의 결과는:</p>

<div style="width: 20em;">스팬 요소에 포함된 텍스트는 <span style="display: inline-block;">분할될 수 없습니다. 왜냐면</span> 인라인 블록 상자이기 때문입니다.</div>
</div>
</div>

<h4 id="무명_인라인_상자">무명 인라인 상자</h4>

<p>블록상자처럼 씨에스에스 엔진에 의해 자동적으로 인라인상자가 생성되는 경우가 몇 개 있습니다. 이들 인라인 상자는 무명으로, 선택기가 이름을 특정할 수 없습니다. 무명 인라인 상자의 속성은, 상속 가능한 것은 상속된 값을, 그 이외는 <code>initial</code> 값을 가집니다.</p>

<p>무명의 인라인 상자가 만들어지는 흔한 경우는 인라인 서식 상황을 만드는 블록상자의 직계 자식 요소로 파악되는 텍스트가 있는 경우입니다. 이 경우, 동 텍스트는 최대한 큰 무명 인라인 상자에 넣을 수 있습니다. 또한, 씨에스에스의 {{ cssxref("white-space") }} 속성으로 지정된 동작에 의해 제거되는 공백의 콘텐츠는 결국 공백이 될 것이기 때문에 무명 인라인 상자를 생성하지 않습니다.</p>

<div class="note">예제 TBD</div>

<h3 id="다른_유형의_상자">다른 유형의 상자</h3>

<h4 id="라인_상자">라인 상자</h4>

<p><em>라인 상자</em>는 텍스트 라인을 표현하기 위해 <a href="/en-US/docs/CSS/Inline_formatting_context" title="block formatting context">인라인 서식 상황</a>에 의해 생성되는 상자입니다. 블록 상자 내부의 라인 상자는 상자의 한쪽 테두리로부터 반대측의 테두리까지 넓어집니다. <a href="/en-US/docs/CSS/float" title="float">부동체</a>가 있을 경우 라인 상자 구역은 왼쪽 부동체의 맨우측 테두리에서 시작해 우측 부동체의 맨좌측 테두리에서 끝납니다.</p>

<p>이들 상자는 기술적인 것으로, 보통 웹 저술가가 이것에 대해 고민할 필요는 없습니다.</p>

<h4 id="내부진행_상자">내부진행 상자</h4>

<p><code>display: run-in</code>을 사용하도록 정의되는 <ruby><em>내부진행 상자</em><rp> (</rp><rt>Run-in boxes</rt><rp>) </rp></ruby>는 후속 상자의 유형 여하에 따라 블록 상자이거나 인라인 상자입니다. 그들은 가능할 경우 자신의 첫 단락 내부에 진행하는 글 제목을 생성하는 데 사용될 수 있습니다.</p>

<div class="note"><strong>참고:</strong> 내부진행 상자는 씨에스에스 2.1 규격에서 제외되었다. 상호운용 실현 가능성을 불충분하게 명시했기 때문입니다. 그들이 <ruby><em>씨에스에스 3</em><rp> (</rp><rt>CSS 3</rt><rp>) </rp></ruby>에선 다시 등장할 수도 있지만, 현재로선 <em>실험 상태</em>로 간주합니다. 그들을 완성품에선 사용하지 말아야 합니다.</div>

<h4 id="모델유인_상자">모델유인 상자</h4>

<p>인라인 및 블록 서식 상황 외에도 씨에스에스는 요소에 적용할 수 있는 몇 가지 추가 <em>콘텐츠 모델</em>을 지정할 수 있습니다. 특정 레이아웃을 설명하는 데 사용되는 이러한 추가 모델은 추가 상자 유형을 정의할 수 있습니다.</p>

<ul>
 <li><a href="/en-US/docs/CSS/table-layout" title="table-layout">테이블 콘텐츠 모델</a>은 <em>테이블 래퍼 상자</em>와 <em>테이블 상자</em>를 생성할 수 있을뿐만 아니라 <em>캡션 상자</em>같은 특정 상자도 생성할 수 있습니다.</li>
 <li>The <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="Using CSS multi-column layouts">다단 콘텐츠 모델</a> 은 컨테이너 상자와 컨텐츠 사이에 <ruby><em>열 상자</em><rp> (</rp><rt>column boxes</rt><rp>) </rp></ruby>를 생성할 수 있습니다.</li>
 <li>실험적인 격자 또는 가변상자 콘텐츠 모델, 또는 추가적인 유형의 상자를 생성할 수 있습니다.</li>
</ul>

<h4 id="위치잡기_기법">위치잡기 기법</h4>

<p>상자를 생성하고 나면 씨에스에스 엔진은 그것들을 조판에 위치시켜야 합니다. 그렇게 하려면 다음과 같은 알고리즘 중의 하나를 사용합니다.</p>

<ul>
 <li><ruby><em>일반 대열</em><rp> (</rp><rt>normal flow</rt><rp>) </rp></ruby> - 하나씩 차례대로 상자를 위치시킵니다.</li>
 <li><ruby><em>부동체</em><rp> (</rp><rt>floats</rt><rp>) </rp></ruby> 알고리즘 - 일반 대열에서 상자를 빼내어 상위 컨테이너 상자 옆에 놓습니다.</li>
 <li><em>절대 위치잡기</em> 기법 - 자신의 상위 컨테이너 요소가 수립한 절대 좌표 시스템 내부에 상자를 위치시킵니다. 절대적으로 위치잡기한 요소는 다른 요소를 덮을 수 있습니다.</li>
</ul>

<h3 id="일반_대열">일반 대열</h3>

<p><em>일반 대열</em> 속 상자 무리는 하나씩 차례대로 배치됩니다. 블록 서식 상황 속에서 그들은 수직으로 배치됩니다. 반면에 인라인 서식 상황 속에서 그들은 수평으로 배치됩니다. 일반 대열은 CSS {{ cssxref("position") }}이 <code>static</code> 또는 <code>relative</code> 값으로 설정될 경우와 {{ cssxref("float") }}가 <code>none</code>으로 설정되면 발동됩니다.</p>

<h3 id="예제_3">예제</h3>

<div class="note">일반 대열 속에서는 블록 서식 상황에 포함된 상자는 수직으로 하나씩 차례대로 배치됩니다.<br>
<br>
일반 대열 속에서는 인라인 서식 상황에 포함된 상자는 수평으로 하나씩 차례대로 배치됩니다.</div>

<div class="note">
<p>일반 대열에는 두 가지 하위 사례가 있습니다. 정적 위치잡기와 상대 위치잡기:</p>

<ul>
 <li><em>정적 위치잡기</em>에서는 {{ cssxref("position") }} 속성이 <code>static</code> 값일 경우에 발동됩니다. 상자 무리는 일반 대열 조판에 정의된 정확한 위치에 그려집니다.</li>
 <li><em>상대 위치잡기</em>에서는 {{ cssxref("position") }} 속성이 <code>relative</code> 값일 경우 발동합니다. 상자는 씨에스에스 속성 무리인 {{ cssxref("top") }}, {{ cssxref("bottom") }}과 {{ cssxref("left") }}, {{ cssxref("right") }}에 의해 정의된 간격띄우기 값을 기준으로 그려집니다.</li>
</ul>
</div>

<h3 id="부동체">부동체</h3>

<p><ruby><em>부동 위치잡기 기법</em><rp> (</rp><rt>float positioning scheme</rt><rp>) </rp></ruby>에서는 특정 상자(부동 상자 또는 단순 부동체라고 일컬음)를 현재 라인의 시작 또는 끝에 위치시킵니다. 이는 텍스트(그리고 더 일반적으로 일반 대열 내의 모든 것)은 부동 상자의 가장자리를 따라 대열을 맞추는 속성으로 귀결됩니다. 다만 씨에스에스 {{ cssxref("clear") }} 속성에 의해 다른 예기가 나올 경우는 예외입니다.</p>

<p>상자에 대해 부동 위치잡기 기법을 선택하려면 해당 상대에 대해 씨에스에스 {{ cssxref("float") }} 속성을 <code>none</code> 이외의 값으로 설정하거나 {{ cssxref("position") }} 속성에 <code>static</code>이나 <code>relative</code>가 아닌 값으로 설정할 때 이뤄진다. 만일 {{ cssxref("float") }}가 <code>left</code>로 설정되면 부동체는 라인 상자의 시작 부분에 위치합니다. 만일 <code>right</code>으로 설정되면 동 부동체는 라인 상자의 끝에 위치합니다. 어떤 경우든 라인 상자는 부동체에 들어맞게 축소됩니다.</p>

<h3 id="절대_위치잡기">절대 위치잡기</h3>

<p><ruby><em>절대 위치잡기 기법</em><rp> (</rp><rt>absolute positioning scheme</rt><rp>) </rp></ruby>에 포함된 상자는 대열에서 제거되어 대열과는 어떤 상호작용도 하지 않습니다. 그들은 {{ cssxref("top") }}과 {{ cssxref("bottom") }}, {{ cssxref("left") }}와 {{ cssxref("right") }}를 사용해서 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block" title="CSS/Containing block">상위 컨테이너 블록</a> 기준으로 비례해서 위치잡기합니다.</p>

<p>하나의 요소를 절대 위치잡기하려면 {{ cssxref("position") }}이 <code>absolute</code> 또는 <code>fixed</code>로 설정하면 됩니다.</p>

<p><em>고정 위치잡기한 요소</em>의 경우 상위 컨테이너 블록이 뷰포트입니다. 동 요소의 위치는 뷰포트 내부에서 절대적 위치가 됩니다. 스크롤링은 동 요소의 위치를 변경시키지 않습니다.</p>

<h2 id="참조_항목">참조 항목</h2>

<ul>
 <li>{{css_key_concepts}}</li>
</ul>