initial commit

1 files changed, 46 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..32928121ff
--- /dev/null
+++ b/files/ko/web/css/css_flow_layout/index.html
@@ -0,0 +1,46 @@
+---
+title: CSS Flow Layout
+slug: Web/CSS/CSS_Flow_Layout
+tags:
+  - CSS 흐름 레이아웃
+  - 흐름
+translation_of: Web/CSS/CSS_Flow_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><em>일반적인 흐름 Normal Flow</em>, 또는 흐름 레이아웃 Flow Layout 은 그 레이아웃 변화가 있기 전까지 페이지 안의 블록 요소와 인라인 요소가 보여지는 방식 입니다. 흐름이란 본질적으로 레이아웃 아래 서로 같이 동작하고 서로에게 서로가 알려지는 것들의 집합 입니다. 만약에 어느 하나가 <em>흐름에서 벗어나면</em> 그것은 독립적으로 동작하게 됩니다.</p>
+
+<p><em>일반적인 흐름</em>에서, <strong>인라인</strong> 요소들은 한줄러 늘어서 보여지게 되는데, 이는 문서의 <a href="/en-US/docs/Web/CSS/CSS_Writing_Modes">Writing Mode</a> 에 따라 문장 안의 단어들이 보여지는 방향을 따르게 됩니다. <strong>블록</strong> 요소들은 문서의 Writing Mode 에서의 단락이 하나씩 나눠져 보여지듯이 나타납니다. 그래서 영어에서는, 인라인 요소들은 왼쪽에서 시작하여 하나씩 보여지고, 블록 요소들은 맨 위에서부터 페이지를 따라 아래로 보여집니다.</p>
+
+<h2 id="기본적인_예">기본적인 예</h2>
+
+<p>아래의 예는 블록과 인라인 레벨 박스들을 설명합니다. 초록 테두리를 갖은 두개의 paragraph 요소들은 블록 레벨에 있어서 하나씩 위에서 아래로 나타납니다.</p>
+
+<p>첫번째 문장은 파란 바탕을 갖은 span 요소를 포함하고 있습니다. 이 요소는 인라인 레벨에 있으며 따라서 문장 내에 이어져 나타납니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}</p>
+
+<h2 id="Guides">Guides</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout in Normal Flow</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">In Flow and Out of Flow</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Flow Layout and Writing Modes</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">Flow Layout and Overflow</a></li>
+</ul>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="Glossary_Entries">Glossary Entries</h3>
+
+<ul>
+ <li>{{Glossary("Block/CSS", "Block (CSS)")}}</li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+</ol>
+</section>