initial commit

3 files changed, 807 insertions, 0 deletions

diff --git a/files/ko/web/guide/css/block_formatting_context/index.html b/files/ko/web/guide/css/block_formatting_context/index.html
new file mode 100644
index 0000000000..3a46d31f0a
--- /dev/null
+++ b/files/ko/web/guide/css/block_formatting_context/index.html
@@ -0,0 +1,198 @@
+---
+title: 블록 서식 맥락
+slug: Web/Guide/CSS/Block_formatting_context
+tags:
+  - CSS
+  - Guide
+  - NeedsBeginnerUpdate
+  - NeedsExample
+  - Web
+translation_of: Web/Guide/CSS/Block_formatting_context
+---
+<div>{{ CSSRef }}</div>
+
+<p><strong>블록 서식 맥락</strong>(block format context)은 웹 페이지를 렌더링하는 시각적 CSS의 일부로서, 블록 박스의 레이아웃이 발생하는 지점과 플로팅 요소의 상호작용 범위를 결정하는 범위입니다.</p>
+
+<p>블록 서식 맥락은 다음과 같은 경우에 생성됩니다.</p>
+
+<ul>
+ <li>문서의 루트 요소({{htmlelement("html")}}).</li>
+ <li>플로팅 요소({{cssxref("float")}}이 <code>none</code>이 아님).</li>
+ <li>절대 위치를 지정한 요소({{cssxref("position")}}이 <code>absolute</code> 또는 <code>fixed</code>).</li>
+ <li>인라인 블록({{cssxref("display")}}가 <code>inline-block</code>).</li>
+ <li>표 칸({{cssxref("display")}}가 <code>table-cell</code>, HTML 표 칸의 기본값).</li>
+ <li>표 주석({{cssxref("display")}}가 <code>table-caption</code>, HTML 표 주석의 기본값).</li>
+ <li>{{cssxref("display")}}가 <code>table</code>, <code>table-row</code>, <code>table-row-group</code>, <code>table-header-group</code>, <code>table-footer-group</code> (HTML 표에서, 각각 표 전체, 행, 본문, 헤더, 푸터의 기본값) 또는 <code>inline-table</code>인 요소가 암시적으로 생성한 무명 칸.</li>
+ <li>{{cssxref("overflow")}}가 <code>visible</code>이 아닌 블록 요소.</li>
+ <li>{{cssxref("display")}}가 <code>flow-root</code>.</li>
+ <li>{{cssxref("contain")}}이 <code>layout</code>, <code>content</code>, <code>paint</code>.</li>
+ <li>스스로 플렉스, 그리드, 테이블 컨테이너가 아닌 경우의 플렉스 항목({{cssxref("display")}}가 <code>flex</code> 또는 <code>inline-flex</code>인 요소의 바로 아래 자식)</li>
+ <li>스스로 플렉스, 그리드, 테이블 컨테이너가 아닌 경우의 그리드 항목({{cssxref("display")}}가 <code>grid</code> 또는 <code>inline-grid</code>인 요소의 바로 아래 자식)</li>
+ <li>다열 컨테이너({{cssxref("column-count")}} 또는 ({{cssxref("column-width")}}가 <code>auto</code>가 아닌 경우. <code>column-count: 1</code> 포함).</li>
+ <li>{{cssxref("column-span")}}이 <code>all</code>인 경우. 해당하는 요소가 다열 컨테이너 안에 위치하지 않아도 항상 새로운 블록 서식 맥락을 생성해야 합니다. (<a href="https://github.com/w3c/csswg-drafts/commit/a8634b96900279916bd6c505fda88dda71d8ec51">명세 변경</a>, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=709362">Chrome 버그</a>)</li>
+</ul>
+
+<p>블록 서식 맥락은 레이아웃에 영향을 주지만, 보통 맥락을 생성하는 요소는 아래와 같은 작용을 하기 때문에 위치 설정과 플로팅 해제를 위해 더 많이 사용합니다.</p>
+
+<ul>
+ <li>내부 플로팅 가두기</li>
+ <li>외부 플로팅 제외하기</li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">여백 상쇄</a> 제거</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="내부_플로팅_가두기">내부 플로팅 가두기</h3>
+
+<div id="example1">
+<p>Make float content and alongside content the same height.</p>
+
+<p>Let's have a look at a couple of these in order to see the effect creating a new <abbr title="Block Formatting Context">BFC</abbr>.</p>
+
+<p>In the following example, we have a floated element inside a <code>&lt;div&gt;</code> with a <code>border</code> applied. The content of that <code>&lt;div&gt;</code> has floated alongside the floated element. As the content of the float is taller than the content alongside it, the border of the <code>&lt;div&gt;</code> now runs through the float. As explained in the <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">guide to in-flow and out of flow elements</a>, the float has been taken out of flow so the <code>background</code> and <code>border</code> of the <code>&lt;div&gt;</code> only contain the content and not the float.</p>
+
+<p><strong>using <code>overflow: auto</code></strong></p>
+
+<p>Setting <code>overflow: auto</code> or set other values than the initial value of <code>overflow: visible</code> created a new <abbr title="Block Formatting Context">BFC</abbr> containing the float. Our <code>&lt;div&gt;</code> now becomes a mini-layout inside our layout. Any child element will be contained inside it.</p>
+
+<p>The problem with using <code>overflow</code> to create a new <abbr title="Block Formatting Context">BFC</abbr> is that the <code>overflow</code> property is meant for telling the browser how you want to deal with overflowing content. There are some occasions in which you will find you get unwanted scrollbars or clipped shadows when you use this property purely to create a <abbr title="Block Formatting Context">BFC</abbr>. In addition, it is potentially not readable for a future developer, as it might not be obvious why you used <code>overflow</code> for this purpose. If you use <code>overflow</code>, it is a good idea to comment the code to explain.</p>
+
+<p><strong>using <code>display: flow-root</code></strong></p>
+
+<p>A newer value of <code>display</code> lets us create a new <abbr title="Block Formatting Context">BFC</abbr> without any other potentially problematic side-effects. Using <code>display: flow-root</code> on the containing block creates a new <abbr title="Block Formatting Context">BFC</abbr> .</p>
+
+<p>With <code>display: flow-root;</code> on the <code>&lt;div&gt;</code>, everything inside that container participates in the block formatting context of that container, and floats will not poke out of the bottom of the element.</p>
+
+<p>The value name of <code>flow-root</code> makes sense when you understand you are creating something that acts like the <code>root</code> element (<code>&lt;html&gt;</code> element in browser) in terms of how it creates a new context for the flow layout inside it.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;section&gt;
+    &lt;div class="box"&gt;
+        &lt;div class="float"&gt;I am a floated box!&lt;/div&gt;
+        &lt;p&gt;I am content inside the container.&lt;/p&gt;
+    &lt;/div&gt;
+&lt;/section&gt;
+&lt;section&gt;
+    &lt;div class="box" style="overflow:auto"&gt;
+        &lt;div class="float"&gt;I am a floated box!&lt;/div&gt;
+        &lt;p&gt;I am content inside the &lt;code&gt;overflow:auto&lt;/code&gt; container.&lt;/p&gt;
+    &lt;/div&gt;
+&lt;/section&gt;
+&lt;section&gt;
+    &lt;div class="box" style="display:flow-root"&gt;
+        &lt;div class="float"&gt;I am a floated box!&lt;/div&gt;
+        &lt;p&gt;I am content inside the &lt;code&gt;display:flow-root&lt;/code&gt; container.&lt;/p&gt;
+    &lt;/div&gt;
+&lt;/section&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">section {
+    height:150px;
+}
+.box {
+    background-color: rgb(224, 206, 247);
+    border: 5px solid rebeccapurple;
+}
+.box[style] {
+    background-color: aliceblue;
+    border: 5px solid steelblue;
+}
+.float {
+    float: left;
+    width: 200px;
+    height: 100px;
+    background-color: rgba(255, 255, 255, .5);
+    border:1px solid black;
+    padding: 10px;
+}</pre>
+
+<p>{{EmbedLiveSample("example1", 200, 450)}}</p>
+
+<h3 id="Exclude_external_floats">Exclude external floats</h3>
+
+<div id="example2">
+<p>In the following example, we are using <code>display:flow-root</code> and floats to implement double columns layout, beacuse an element in the normal flow that establishes a new <abbr title="Block Formatting Context">BFC</abbr> must not overlap the margin box of any floats in the same block formatting context as the element itself.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;section&gt;
+  &lt;div class="float"&gt;Try to resize this outer float&lt;/div&gt;
+  &lt;div class="box"&gt;&lt;p&gt;Normal&lt;/p&gt;&lt;/div&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;div class="float"&gt;Try to resize this outer float&lt;/div&gt;
+  &lt;div class="box" style="display:flow-root"&gt;&lt;p&gt;&lt;code&gt;display:flow-root&lt;/code&gt;&lt;p&gt;&lt;/div&gt;
+&lt;/section&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">section {
+    height:150px;
+}
+.box {
+    background-color: rgb(224, 206, 247);
+    border: 5px solid rebeccapurple;
+}
+.box[style] {
+    background-color: aliceblue;
+    border: 5px solid steelblue;
+}
+.float {
+    float: left;
+    overflow: hidden; /* required by resize:both */
+    resize: both;
+    margin-right:25px;
+    width: 200px;
+    height: 100px;
+    background-color: rgba(255, 255, 255, .75);
+    border: 1px solid black;
+    padding: 10px;
+}
+</pre>
+
+<p>{{EmbedLiveSample("example2", 200, 300)}}</p>
+
+<p>Rather than inline-blocks with width:&lt;percentage&gt;, in this case we don't have to specify the width of the right div.</p>
+
+<p>Note that flexbox is a more efficient way to implement muti columns layout in morden CSS.</p>
+</div>
+
+<h3 id="여백_상쇄">여백 상쇄</h3>
+
+<p>Creating a new BFC to avoid the <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">margin collapsing</a> between two neighbor div:</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="blue"&gt;&lt;/div&gt;
+&lt;div class="red-outer"&gt;
+  &lt;div class="red-inner"&gt;red inner&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css notranslate">.blue, .red-inner {
+  height: 50px;
+  margin: 10px 0;
+}
+
+.blue {
+  background: blue;
+}
+
+.red-outer {
+  overflow: hidden;
+  background: red;
+}
+</pre>
+
+<p>{{EmbedLiveSample("여백_상쇄", 120, 120)}}</p>
+</div>
+
+<h2 id="See_Also" name="See_Also">같이 보기</h2>
+
+<ul>
+ <li>{{ cssxref("float") }}, {{ cssxref("clear") }}</li>
+</ul>
diff --git a/files/ko/web/guide/css/media_queries/index.html b/files/ko/web/guide/css/media_queries/index.html
new file mode 100644
index 0000000000..559b5805c6
--- /dev/null
+++ b/files/ko/web/guide/css/media_queries/index.html
@@ -0,0 +1,386 @@
+---
+title: 미디어 쿼리 사용하기
+slug: Web/Guide/CSS/Media_queries
+tags:
+  - Advanced
+  - CSS
+  - Guide
+  - Media
+  - Media Queries
+  - Responsive Design
+  - Web
+translation_of: Web/CSS/Media_Queries/Using_media_queries
+---
+<div>{{cssref}}</div>
+
+<p><strong>미디어 쿼리</strong>는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, {{glossary("viewport", "뷰포트")}} 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.</p>
+
+<p>미디어 쿼리는 다음과 같은 상황에 사용할 수 있습니다.</p>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS">CSS</a> {{cssxref("@media")}}와 {{cssxref("@import")}} <a href="/ko/docs/Web/CSS/At-rule">@규칙</a>을 사용해 특정 조건에 따라 스타일을 적용할 때.</li>
+ <li>{{htmlelement("style")}}, {{htmlelement("link")}}, {{htmlelement("source")}}, 기타 다른 <a href="/ko/docs/Web/HTML">HTML</a> 요소에 <code>media</code> 특성을 사용해 특정 매체만 가리키게 할 때.</li>
+ <li>{{domxref("Window.matchMedia()")}}와 {{domxref("MediaQueryList.addListener()")}} <a href="/ko/docs/Web/JavaScript">JavaScript</a> 메서드를 사용해 <a href="/ko/docs/Web/CSS/Media_Queries/Testing_media_queries">미디어 상태를 판별하고 관측</a>할 때.</li>
+</ul>
+
+<div class="note">
+<p><strong>참고:</strong> 이 페이지의 CSS는 시연용으로 <code>@media</code>를 사용했지만, 기본적인 구문은 모든 미디어 쿼리가 동일합니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<p>미디어 쿼리는 선택 사항인 미디어 유형과, 자유로운 수의 미디어 특성 표현식으로 이루어집니다. 논리 연산자를 사용해 다수의 쿼리를 다양한 방법으로 결합할 수도 있습니다. 미디어 쿼리는 대소문자를 구분하지 않습니다.</p>
+
+<p>미디어 쿼리는 (유형을 지정했다면) 문서를 보여주는 미디어의 유형이 일치하고 모든 미디어 특성 표현식의 계산값이 참일 때 참으로 계산됩니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> {{HTMLElement("link")}}의 미디어 쿼리가 <a href="http://scottjehl.github.com/CSS-Download-Tests/">거짓을 반환하더라도 스타일시트는 다운로드</a>됩니다. 그렇지만 그 안의 내용은 쿼리가 참이 되어야 적용됩니다.</p>
+</div>
+
+<h3 id="미디어_유형">미디어 유형</h3>
+
+<p>미디어 유형은 장치의 일반적인 범주를 나타냅니다. 미디어 유형은 <code>not</code>이나 <code>only</code> 논리연산자를 사용할 때를 제외하면 선택사항이며 지정하지 않으면 <code>all</code>을 사용합니다.</p>
+
+<dl>
+ <dt><code><strong>all</strong></code></dt>
+ <dd>모든 장치에 적합합니다.</dd>
+ <dt><code>print</code></dt>
+ <dd>인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서입니다.<br>
+ (<a href="/ko/docs/Web/CSS/Paged_Media">인쇄 미디어</a> 문서를 방문해 <code>print</code> 형식에서 발생 가능한 서식 문제의 정보를 확인해주세요.)</dd>
+ <dt><code>screen</code></dt>
+ <dd>주로 화면이 대상입니다.</dd>
+ <dt><code>speech</code></dt>
+ <dd>음성 합성장치 대상입니다.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>사용하지 않는 미디어 유형:</strong> CSS2.1과 <a href="https://drafts.csswg.org/mediaqueries-3/#background">Media Queries 3</a> 모듈은 여러가지 추가 유형(<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, <code>aural</code>)을 정의했으나 <a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a>에서 제거됐으므로 사용해선 안됩니다. <code>aural</code>은 유사한 유형인 <code>speech</code>로 대체됐습니다.</p>
+</div>
+
+<h3 id="미디어_특성">미디어 특성</h3>
+
+<p>미디어 특성은 {{glossary("user agent", "사용자 에이전트")}}, 출력 장치, 환경 등의 특징을 나타냅니다. 미디어 특성 표현식은 선택 사항이며 특성의 존재 여부와 값을 판별합니다. 각각의 미디어 특성 표현식은 괄호로 감싸야 합니다.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>이름</th>
+   <th>요약</th>
+   <th>참고</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("@media/any-hover", "any-hover")}}</td>
+   <td>사용 가능한 입력 방식 중 하나로 사용자가 요소 위에 호버할 수 있는가?</td>
+   <td>Media Queries Level 4에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/any-pointer", "any-pointer")}}</td>
+   <td>사용 가능한 입력 방식 중 하나가 포인팅 장치인가? 그렇다면 얼마나 정확한가?</td>
+   <td>Media Queries Level 4에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/aspect-ratio", "aspect-ratio")}}</td>
+   <td>뷰포트의 가로세로비</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/color", "color")}}</td>
+   <td>출력 장치의 색상 채널별 비트 수, 흑백일 땐 0</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/color-gamut", "color-gamut")}}</td>
+   <td>사용자 에이전트와 출력 장치가 지원하는 색상의 대략적인 범위</td>
+   <td>Media Queries Level 4에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/color-index", "color-index")}}</td>
+   <td>출력 장치의 색상 검색 테이블(LUT) 항목 수, 존재하지 않을 땐 0</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{obsolete_inline}}</td>
+   <td>출력 장치의 가로세로비</td>
+   <td>Media Queries Level 4에서 제거</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/device-height", "device-height")}} {{obsolete_inline}}</td>
+   <td>출력 장치 렌더링 표면의 높이</td>
+   <td>Media Queries Level 4에서 제거</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/device-width", "device-width")}} {{obsolete_inline}}</td>
+   <td>출력 장치 렌더링 표면의 너비</td>
+   <td>Media Queries Level 4에서 제거</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/display-mode", "display-mode")}}</td>
+   <td>웹 앱 매니페스트의 <code><a href="/ko/docs/Web/Manifest#display">display</a></code> 항목이 정의한 애플리케이션의 표시 모드</td>
+   <td><a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">Web App Manifest 명세</a>에서 정의</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/forced-colors", "forced-colors")}}</td>
+   <td>사용자 에이전트가 색상 팔레트를 제한하는지 여부</td>
+   <td>Media Queries Level 5에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/grid", "grid")}}</td>
+   <td>장치가 그리드와 비트맵 스크린 중 어느 것을 사용하나?</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/height", "height")}}</td>
+   <td>뷰포트의 높이</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/hover", "hover")}}</td>
+   <td>주 입력 방식으로 사용자가 요소 위에 호버할 수 있는가?</td>
+   <td>Media Queries Level 4에서 제거</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/inverted-colors", "inverted-colors")}}</td>
+   <td>사용자 에이전트나 운영 체제가 색상을 반전 중인가?</td>
+   <td>Media Queries Level 5에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/light-level", "light-level")}}</td>
+   <td>주변 환경의 광도</td>
+   <td>Media Queries Level 5에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/monochrome", "monochrome")}}</td>
+   <td>출력 장치의, 모노크롬 프레임 버퍼의 픽셀 당 비트 수. 단색을 사용하지 않으면 0</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/orientation", "orientation")}}</td>
+   <td>뷰포트의 방향</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/overflow-block", "overflow-block")}}</td>
+   <td>콘텐츠가 블록 축 방향으로 뷰포트를 오버플로 할 경우 출력 장치가 어떻게 처리하는가?</td>
+   <td>Media Queries Level 4에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/overflow-inline", "overflow-inline")}}</td>
+   <td>콘텐츠가 인라인 축 방향으로 뷰포트를 오버플로 할 경우 스크롤 가능한가?</td>
+   <td>Media Queries Level 4에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/pointer", "pointer")}}</td>
+   <td>주 입력 방식이 포인팅 장치인가? 그렇다면 얼마나 정확한가?</td>
+   <td>Media Queries Level 4에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}</td>
+   <td>라이트/다크 색채 조합 중 사용자가 선호하는 것</td>
+   <td>Media Queries Level 5에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/prefers-contrast", "prefers-contrast")}}</td>
+   <td>사용자가 시스템에 두 인접 색상 간의 고대비를 요청했는지 탐지</td>
+   <td>Media Queries Level 5에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}</td>
+   <td>사용자가 줄어든 움직임을 선호함</td>
+   <td>Media Queries Level 5에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}</td>
+   <td>사용자가 줄어든 투명도를 선호함.</td>
+   <td>Media Queries Level 5에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/resolution", "resolution")}}</td>
+   <td>출력 장치의 픽셀 밀도</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/scan", "scan")}}</td>
+   <td>출력 장치의 스캔 절차</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/scripting", "scripting")}}</td>
+   <td>JavaScript 등 스크립트 사용 가능 여부 탐지</td>
+   <td>Media Queries Level 5에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/update-frequency", "update")}}</td>
+   <td>출력 장치가 콘텐츠의 외형을 수정할 수 있는 주기</td>
+   <td>Media Queries Level 4에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/width", "width")}}</td>
+   <td>스크롤바를 포함한 뷰포트 너비</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="논리_연산자">논리 연산자</h3>
+
+<p><code>not</code>, <code>and<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">, </span></font></code><code>only</code>와 같은 논리 연산자를 사용해 복잡한 쿼리를 조합할 수 있습니다. 여러 미디어 쿼리를 쉼표로 구분해서 하나의 규칙으로 만들 수도 있습니다.</p>
+
+<h4 id="and"><code>and</code></h4>
+
+<p><code>and</code> 연산자는 다수의 미디어 특성을 조합하여 하나의 미디어 쿼리를 만들 때 사용합니다. 쿼리가 참이려면 모든 구성 특성이 참을 반환해야 합니다. 미디어 특성과 미디어 유형을 같이 사용할 때도 쓰입니다.</p>
+
+<h4 id="not"><code>not</code></h4>
+
+<p><code>not</code> 연산자는 미디어 쿼리를 부정하여, 쿼리가 거짓일 때만 참을 반환합니다. 쉼표로 구분한 쿼리 목록 중 하나에서 사용한 경우 전체 쿼리가 아닌 해당하는 하나의 쿼리에만 적용됩니다. <code>not</code> 연산자를 사용할 경우 <u>반드시</u> 미디어 유형도 지정해야 합니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> Level 3 모듈에서는 <code>not</code> 키워드를 사용해 단일 미디어 기능을 부정할 수 없으며 전체 쿼리만 부정 가능합니다.</p>
+</div>
+
+<h4 id="only"><code>only</code></h4>
+
+<p><code>only</code> 연산자는 전체 쿼리가 일치할 때만 스타일을 적용할 때 사용하며 오래 된 브라우저가 스타일을 잘못 적용하지 못하도록 방지할 때 유용합니다. <code>only</code>를 사용하지 않은 <code>screen and (max-width: 500px)</code> 쿼리를 가정했을 때, 구형 브라우저는 쿼리를 단순히 <code>screen</code>으로만 읽고 뒷부분은 무시한 채 스타일을 적용해버립니다. <code>only</code> 연산자를 사용할 경우 <u>반드시</u> 미디어 유형도 지정해야 합니다.</p>
+
+<h4 id="쉼표"><code>,</code> (쉼표)</h4>
+
+<p>쉼표는 다수의 미디어 쿼리를 하나의 규칙으로 조합할 때 사용합니다. 쉼표 목록 내의 쿼리 각각은 나머지와 별개로 취급하므로, 단 하나의 쿼리만 참을 반환해도 규칙 전체가 참이 됩니다. 즉 쉼표는 논리 <code>or</code> 연산자처럼 동작합니다.</p>
+
+<h2 id="미디어_유형_특정하기">미디어 유형 특정하기</h2>
+
+<p>미디어 유형은 주어진 장치의 일반적인 분류를 설명합니다. 비록 웹사이트는 보통 스크린을 염두에 놓고 디자인하지만, 프린터나 오디오 기반 스크린 리더처럼 특정 장치를 대상으로 하는 스타일을 만들고 싶을 때가 있을지도 모릅니다. 예를 들어 다음의 CSS는 프린터를 특정합니다.</p>
+
+<pre class="brush: css notranslate">@media print { ... }</pre>
+
+<p>다수의 장치를 특정할 수도 있습니다. 예컨대 아래 <code>@media</code> 규칙은 두 개의 미디어 쿼리를 사용해 스크린과 인쇄 장치 모두 특정합니다.</p>
+
+<pre class="brush: css notranslate">@media screen, print { ... }</pre>
+
+<p><a href="#미디어_유형">미디어 유형</a> 구획으로 올라가서 가능한 미디어 유형의 목록을 확인해보세요. 미디어 유형은 굉장히 넓은 범위에서 장치를 설명하기 때문에 적은 수만 존재합니다. 더 세부적인 특성을 특정하려면 미디어 기능을 사용하세요.</p>
+
+<h2 id="미디어_기능_특정하기">미디어 기능 특정하기</h2>
+
+<p>미디어 기능은 주어진 {{glossary("user agent", "사용자 에이전트")}}, 출력 장치, 주변 환경의 특징을 설명합니다. 예를 들어 어떤 스타일을 와이드스크린 모니터에만, 마우스를 사용하는 컴퓨터에만, 저광도 환경에서 사용 중인 장치에서만 적용할 수 있습니다. 다음의 예제는 사용자의 주 입력 방식(마우스 등)이 요소 위에 호버할 수 있으면 스타일을 적용합니다.</p>
+
+<pre class="brush: css notranslate">@media (hover: hover) { ... }</pre>
+
+<p>많은 미디어 기능은 <u>범위 기능</u>으로, "min-" 또는 "max-"를 앞에 붙여 각각 "최소 조건"과 "최대 조건" 제약을 나타낼 수 있습니다. 다음의 CSS는 브라우저의 {{glossary("viewport", "뷰포트")}} 너비가 12450px 이하인 경우에만 스타일을 적용합니다.</p>
+
+<pre class="brush: css notranslate">@media (max-width: 12450px) { ... }</pre>
+
+<p>미디어 기능 쿼리를 값 없이 생성할 경우 주어진 기능의 값이 <code>0</code>이 아닐 때 (Level 4부터는 <code>0</code>과 <code>none</code>이 아닐 때) 중첩 스타일을 적용합니다. 그러므로 다음 CSS는 흑백이 아닌 모든 장치에 해당합니다.</p>
+
+<pre class="brush: css notranslate">@media (color) { ... }</pre>
+
+<p>어떤 기능이 현재 브라우저가 가동 중인 장치에 적용되지 않으면, 해당 미디어 기능을 포함한 표현식은 항상 거짓입니다. 예를 들어, 음성 출력 전용 장치에 화면 가로세로비는 존재하지 않으므로 다음 쿼리에 중첩된 스타일은 절대 적용되지 않습니다.</p>
+
+<pre class="brush: css notranslate">@media speech and (aspect-ratio: 11/5) { ... }</pre>
+
+<p><a href="#미디어_특성">미디어 특성</a> 각각의 참고서 문서를 방문해 더 많은 예제를 확인하세요.</p>
+
+<h2 id="복잡한_미디어_쿼리_생성">복잡한 미디어 쿼리 생성</h2>
+
+<p>때로는 사용자가 다수의 조건으로 구성된 쿼리를 생성하기 원할 수도 있습니다. 이때 논리연산자인 : <code>not</code>, <code>and</code>, 그리고 <code>only</code>를 사용하면 됩니다.  더 나아가 , 사용자는 복수의 미디어쿼리를 쉼표로 연결하여 리스트를 작성할수도 있습니다. 이렇게 함으로써 사용자는 다양한 상황에서 같은 스타일을 적용할 수 있습니다.</p>
+
+<p>앞서 예와 같이,  <code>and</code> 연산자를 사용하여 미디어유형과 미디어기능을 그룹지을 수 있습니다. 또한 <code>and</code> 를 사용하여 복수의 미디어 기능을 하나의 미디어 쿼리로 결합해낼수도 있습니다. 하지만 <code>not</code> 연산자는 미디어쿼리 자체를 부정시키는데, 근본적으로 원래의 의미를 반전시킵니다. <code>only</code> 연산자는 구형 브라우저가 스타일을 적용시키지 못하게 합니다.</p>
+
+<div class="note">
+<p><strong>Note:</strong> 대부분의 경우,  <code>all</code> 미디어유형은 다른 유형이 특정되지 않았을 때 디폴트로 적용됩니다. 하지만, 사용자가 <code>not</code> 이나 <code>only</code> 연산자를 사용하면, 사용자는 반드시 미디어유형을 특정해야 합니다.</p>
+</div>
+
+<h3 id="다수의_유형과_기능_조합하기">다수의 유형과 기능 조합하기</h3>
+
+<p>The <code>and</code> 연산자는 미디어기능과 미디어유형 혹은 다른 미디어 기능들과 연결해줍니다. 이 예에서는 두개의 미디어기능을 기기의 랜스케입(가로방향화면)방향으로 제한시키고 최소폭을 30 ems로 지정합니다:</p>
+
+<pre class="brush: css notranslate">@media (min-width: 30em) and (orientation: landscape) { ... }</pre>
+
+<p>화면에 달린 기기에만 스타일을 적용하는 것으로 한정시키기 위해, 사용자는 <code>screen</code> 미디어유형에 미디어기능을 연결합니다:</p>
+
+<pre class="brush: css notranslate">@media screen and (min-width: 30em) and (orientation: landscape) { ... }</pre>
+
+<h3 id="다수의_쿼리_판별">다수의 쿼리 판별</h3>
+
+<p>쉼표로 연결된 리스트를 작성하여 사용자의 기기가 다양한 미디어타입, 기능, 상태 어떤 것과 맞는 것이 있을 때 스타일을 적용하게 할 수 있습니다. 예를 들면, 다음의 룰은 사용자의 기기가 최소한 높이가 680px 이거나 화면이 세로로 긴 모드일 때 스타일이 적용됩니다:</p>
+
+<pre class="brush: css notranslate">@media (min-height: 680px), screen and (orientation: portrait) { ... }</pre>
+
+<p>위에 예에서 보면, 만일 사용자가 페이지높이가 800px인 프린터를 사용한다면, 첫번째 쿼리가 적용되기에 참 (true)값을 반환할 것입니다. 마찬가지로, 만일 사용자가 화면 높이가 480px인 스마트폰을 사용한다면 두번째 쿼리가 적용될 것이고, 미디어 문은 참값을 반환하게 됩니다.</p>
+
+<h3 id="쿼리의_뜻_반전하기">쿼리의 뜻 반전하기</h3>
+
+<p><code>not</code> 키워드는 미디어쿼리 전체의 의미를 반전시킵니다.  이 키워드는 적용된 미디어쿼리를 반전시킵니다. (즉, 쉼표로 연결된 미디어쿼리 리스트의 하나하나의 미디어쿼리에 적용되는 것이 아닙니다) <code>not</code> 키워드는 개별적인 기능의 쿼리를 부정하는데 사용할 수 없고, 오직 미디어쿼리 전체를 부정하는 데에만 사용됩니다.  <code>not</code> 연산자 키워드는 다음의 쿼리에서 보여지듯이 가장 나중에 적용됩니다:</p>
+
+<pre class="brush: css notranslate">@media not all and (monochrome) { ... }
+</pre>
+
+<p>... 그러므로 위의 쿼리는 다음과 같이 평가됩니다:</p>
+
+<pre class="brush: css notranslate">@media not (all and (monochrome)) { ... }
+</pre>
+
+<p>... 다음과 같이 되는 것이 아닙니다:</p>
+
+<pre class="brush: css example-bad notranslate">@media (not all) and (monochrome) { ... }</pre>
+
+<p>다른 예를 보자면, 다음의 미디어 쿼리는:</p>
+
+<pre class="brush: css notranslate">@media not screen and (color), print and (color) { ... }
+</pre>
+
+<p>... 이렇게 평가됩니다:</p>
+
+<pre class="brush: css notranslate">@media (not (screen and (color))), print and (color) { ... }</pre>
+
+<h3 id="구형_브라우저와의_호환성_향상하기">구형 브라우저와의 호환성 향상하기</h3>
+
+<p><code>only</code> 키워드는 미디어기능을 가진 미디어쿼리를 지원하지 않는 구형 브라우저가 주어진 스타일을 적용하지 못하게 합니다. <em>신형브라우저에는 아무런 영향을 주지 않습니다.</em></p>
+
+<pre class="brush: css notranslate">@media only screen and (color) { ... }
+</pre>
+
+<h2 id="Level_4의_구문_향상">Level 4의 구문 향상</h2>
+
+<p>미디어쿼리 Level 4 사양은 향상된 구문을 포함하는데 그를 통해 미디어쿼리가 '범위' 유형을 가진 기능을 사용할 수 있습니다. 예를 들면, 폭, 높이 처럼 말보다는 숫자에 관련된 것들입니다. Level 4 는 그러한 쿼리들을 작성하는데에 필요한 범위 구문을 제공합니다. 예를 들면, adds a <em>range context</em> for writing such queries. 폭을 표현하기 위해 <code>max-</code> 함수를 써서 사용자는 다음과 같이 쓸 수 있습니다:</p>
+
+<div class="note">
+<p><strong>Note:</strong> 미디어쿼리 Level 4 사양에는 상당수의 최신 브라우저를 지원하지만,  몇몇 미디어기능들은 잘 지원되지 않습니다. 자세한 사항은 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/@media#Browser_compatibility"><code>@media</code> browser compatibility table</a> 를 참조해 주십시요. </p>
+</div>
+
+<pre class="brush: css notranslate">@media (max-width: 30em) { ... }</pre>
+
+<p>미디어 쿼리 Level 4 에서는 다음과 같이 쓸 수 있습니다:</p>
+
+<pre class="brush: css notranslate">@media (width &lt;= 30em) { ... }</pre>
+
+<p><code>min-</code> 과 <code>max-</code> 를 사용하여 사용자가 두 값 사이에서 폭 값을 시험해 보고 싶은 상황이라면:</p>
+
+<pre class="brush: css notranslate">@media (min-width: 30em) and (max-width: 50em) { ... }</pre>
+
+<p>Level 4 구문에서는 이렇게 표현할 수 있습니다:</p>
+
+<pre class="brush: css notranslate">@media (30em &lt;= width &lt;= 50em ) { ... }
+</pre>
+
+<p> Level 4 미디어쿼리는 또한 완전한 불리언 대수법을 사용하는 미디어쿼리들과 <strong>and</strong>, <strong>not</strong>, <strong>or</strong>.연산자를 결합할 수 있습니다. </p>
+
+<h3 id="not으로_기능_부정"><code>not</code>으로 기능 부정</h3>
+
+<p>미디어기능에 <code>not()</code> 을 사용하면 쿼리에 있는 기능을 부정합니다. 예를 들어, hover를 할 수 없는 장치를 사용할 때 <code>not(hover)</code> 를 사용할 수 있습니다.</p>
+
+<pre class="brush: css notranslate">@media (not(hover)) { ... }</pre>
+
+<h3 id="or로_다수의_기능_판별"><code>or</code>로 다수의 기능 판별</h3>
+
+<p><code>or</code> 를 사용하면 다수의 기능 가운데 맞는 것이 하나라도 있는지를 테스트하여, 그중에 맞는 것이 하나라도 있으면 <code>true</code> 값을 반환하게 할 수 있습니다. 예를 들어, 다음에 보이는 쿼리에서는 흑백화면인지 혹은 hover가 가능한 지를 시험하고 있습니다.</p>
+
+<pre class="brush: css notranslate">@media (not (color)) or (hover) { ... }
+</pre>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/Media_Queries/Testing_media_queries">프로그래밍으로 미디어 쿼리 판별하기</a></li>
+ <li><a href="/ko/docs/Web/CSS/Mozilla_Extensions#Media_features">Mozilla 미디어 기능 확장</a></li>
+ <li><a href="/ko/docs/Web/CSS/Webkit_Extensions#Media_features">WebKit 미디어 기능 확장</a></li>
+</ul>
diff --git a/files/ko/web/guide/css/visual_formatting_model/index.html b/files/ko/web/guide/css/visual_formatting_model/index.html
new file mode 100644
index 0000000000..4b32d08a30
--- /dev/null
+++ b/files/ko/web/guide/css/visual_formatting_model/index.html
@@ -0,0 +1,223 @@
+---
+title: 시각적 서식 모델
+slug: Web/Guide/CSS/Visual_formatting_model
+tags:
+  - 씨에스에스
+  - 씨에스에스 상자 모델
+  - 참조
+translation_of: Web/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>