blob: 32928121ffeb39cd378fe883313732a74a486560 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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>
|
