1 files changed, 72 insertions, 0 deletions
diff --git a/files/ko/web/css/css_flow_layout/대열과_탈대열/index.html b/files/ko/web/css/css_flow_layout/대열과_탈대열/index.html
new file mode 100644
index 0000000000..2b05d99f39
--- /dev/null
+++ b/files/ko/web/css/css_flow_layout/대열과_탈대열/index.html
@@ -0,0 +1,72 @@
+---
+title: 대열과 탈대열
+slug: Web/CSS/CSS_Flow_Layout/대열과_탈대열
+tags:
+  - 대열
+  - 대열 조판
+  - 씨에스에스
+  - 씨에스에스 대열 조판
+  - 안내서
+  - 조판
+  - 중급
+translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><a href="/ko/docs/Web/CSS/CSS_Flow_Layout/%EC%9D%BC%EB%B0%98_%ED%9D%90%EB%A6%84_%EC%86%8D_%EB%B8%94%EB%A1%9D_%EB%B0%8F_%EC%9D%B8%EB%9D%BC%EC%9D%B8_%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83">이전 안내서</a>에서 제가 일반 대열 속 블록 및 인라인 조판에 대해 설명하였습니다. 대열에 속한 모든 요소는 이 메서드를 사용하여 배치됩니다.</p>
+
+<p>다음 예제에서는 머리글, 단락, 목록 및 <code>strong</code> 요소가 포함된 마지막 단락이 있습니다. 머리글과 단락은 블록 레벨이며, <code>strong</code> 요소는 인라인입니다. 목록은 가변상자를 사용하여 항목을 행 내부로 정렬하지만 블록 및 인라인 조판에도 참여하고 있습니다. 컨테이너는 외곽에 <code>display</code> 유형이 <code>block</code> 대열에 참여하고 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/in-flow.html", '100%', 800)}}</p>
+
+<p>요소 무리 전체는 대열에 속해 있다고 말할 수 있습니다. 에이치티엠엘 소스에 나타나는 순서대로 요소 무리들이 웹페이지에 등장합니다.</p>
+
+<h2 id="항목을_대열_밖으로_빼내기">항목을 대열 밖으로 빼내기</h2>
+
+<p>대열에 속한 모든 요소는 다음과 구분된다:</p>
+
+<ul>
+ <li>부동 항목</li>
+ <li><code>position: absolute</code> 속성이 부여된 항목 (아울러 <code>position: fixed</code> 속성이 딸린 항목도 마찬가지로 동작합니다.)</li>
+ <li>뿌리 요소(<code>html</code>)</li>
+</ul>
+
+<p>대열에서 벗어난 항목은 새로운 블록 서식 상황(BFC)를 생성하므로, 그 안에 있는 모든 것은 페이지의 나머지 부분과는 구분되는 소형 조판으로 볼 수 있다. 따라서 뿌리 요소는 우리 문서의 모든 내용에 해당하는 컨테이너이기 때문에 대열을 벗어나 있으며 당 문서에 대한 블록 서식 상황을 수립합니다.</p>
+
+<h3 id="부동_항목">부동 항목</h3>
+
+<p>이 예제에서 나는 <code>div</code>를 가지고 있고, 그 다음 두 단락을 갖고 있다. 문단에 배경색을 추가한 다음 <code>div</code> 요소를 왼쪽으로 부동시켰다. 이제 <code>div</code>는 대열에서 벗어났다.</p>
+
+<p>부동체는 우선 일반 대열에 속했던 애초의 위치를 기준으로 배치되었고, 그 뒤 대열에서 벗어나 최대한 왼쪽으로 이동합니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/float.html", '100%', 800)}}</p>
+
+<p>여러분은 부동체 밑에 펼쳐지고 있는 다음 단락의 배경색을 볼 수 있습니다. 동 단락의 라인 상자 무리만 부동체 주변 콘텐츠를 둘러싸는 효과를 위해 축소되었습니다. 우리 단락 형태의 상자는 여전히 일반 대열이라는 규칙에 따라 표시되고 있습니다. 바로 그런 까닭에 부동 항목 주위에 공간을 만들려면 동 항목에 여백을 추가해서 그 여백으로부터 라인 상자 무리를 밀려나도록 해야하는 겁니다. 대열에 속한 다음 순번 콘텐츠에는 그 어떤 것을 적용한다고 해도 그런 효과를 달성할 수 없습니다.</p>
+
+<h3 id="절대_위치잡기">절대 위치잡기</h3>
+
+<p>어떤 항목에 <code>position: absolute</code>나 <code>position: fixed</code>를 부여하면 동 항목이 대열에서 제거되며, 그것이 점유하고 있던 모든 공간이 제거됩니다. 다음 예제에서 나는 세 개의 단락 요소를 가지고 있으며, 두 번째 요소는 <code>position</code>와 <code>absolute</code>임에 더해 간격띄우기 값이 <code>top: 30px</code>에 <code>right: 30px</code> 해당됩니다. 그 (두 번째) 요소는 문서 대열에서 제거되었습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/abspos.html", '100%', 700)}}</p>
+
+<p><code>position: fixed</code>를 사용해 대열에서 항목을 제거하지만, 간격띄우기는 컨테이너 블록이 아닌 브라우저 뷰포트가 기준입니다.</p>
+
+<p>위치잡기를 통해 대열에서 항목을 빼내면 콘텐츠의 중복 가능성을 관리해야 합니다. 대열에서 벗어나면 페이지의 다른 요소는 더 이상 요소가 존재한다는 것을 알지 못하므로 이에 반응하지 않습니다.</p>
+
+<h3 id="상대_위치잡기와_대열">상대 위치잡기와 대열</h3>
+
+<p>어떤 항목에 <code>position: relative</code> 위치잡기를 부여하면 그것은 대열에 잔류하지만, 당신은 간격띄우기 값을 사용하여 동 항목을 주변으로 밀어낼 수 있습니다. 그러나 아래 예제에서 볼 수 있듯이 그것이 일반 대열 위치에 그대로 남아 있게 됩니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/relative.html", '100%', 800)}}</p>
+
+<p>일반 대열에 속해 있었던 어떤 항목을 제거하거나 이동할 때, 해당 항목 주변의 콘텐츠를 겹치지 않도록 관리해야 할 필요성이 있다는 것을 예상할 수밖에 없을 겁니다. 말하자면 부동체를 정리하거나 <code>position: absolute</code>가 적용된 요소가 여타 콘텐츠에 올라타지 않도록 담보해야 합니다. 이러한 이유로 요소 무리를 대열 속에서 제거하는 메서드는 그들 메서드가 가져올 영향을 파악한 상태에서 사용되어야 합니다.</p>
+
+<h2 id="요약정리">요약정리</h2>
+
+<p>이번 안내서에서는 매우 구체적인 유형의 위치잡기를 달성하기 위해 요소를 일반 대열에서 빼내는 여러 방법을 다루었습니다. 다음 안내서에서는 <a href="/ko/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">서식 상황 해설</a> 가운데에서 <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">블록 서식 상황</a>을 생성하는 등의 관련 이슈를 살펴볼 겁니다.</p>
+
+<h2 id="참조_항목">참조 항목</h2>
+
+<ul>
+ <li>서식 학습하기: <em><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9C%84%EC%B9%98%EC%9E%A1%EA%B8%B0">위치잡기</a></em></li>
+</ul>