diff options
Diffstat (limited to 'files/ko/web/css/css_flow_layout/index.html')
| -rw-r--r-- | files/ko/web/css/css_flow_layout/index.html | 46 |
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> |