files/ko/web/css/layout_mode/index.html


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

---
title: 레이아웃 모드
slug: Web/CSS/Layout_mode
tags:
  - CSS
  - Guide
  - Layout
  - Reference
translation_of: Web/CSS/Layout_mode
---
<div>{{cssref}}</div>

<p><a href="/ko/docs/Web/CSS">CSS</a> <strong>레이아웃 모드</strong>, 줄여서 <strong>레이아웃</strong>은 형제(sibling) 및 조상(ancestor) 박스와 상호 작용하는 방식을 기반으로 박스의 위치와 크기를 결정하는 알고리즘입니다. 그 중 몇 가지입니다:</p>

<ul>
 <li>블록 레이아웃(<em>block layout</em>), 문서 배치를 위해 설계됨. 블록 레이아웃은 요소(element)를 <a href="/ko/docs/Web/CSS/float"><em>float</em></a> 하거나 여러 단(<a href="/ko/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts"><em>multiple columns</em></a>)에 걸쳐 배치하는 기술 같은 문서 중심 기능을 포함합니다.</li>
 <li>인라인 레이아웃(<em>inline layout</em>), 텍스트 배치를 위해 설계됨.</li>
 <li>테이블 레이아웃(<em>table layout</em>), 표 배치를 위해 설계됨.</li>
 <li>위치지정 레이아웃(<em>positioned layout</em>), 다른 요소와 상호 작용이 많이 없는 요소의 위치지정을 위해 설계됨.</li>
 <li>신축 박스 레이아웃(<a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes"><em>flexible box layout</em></a>), 부드럽게 크기조정이 될 수 있는 복잡한 페이지 배치를 위해 설계됨. {{experimental_inline}}</li>
 <li>그리드 레이아웃(<em>grid layout</em>), 고정된 격자(grid)에 상대적인 요소 배치를 위해 설계됨. {{experimental_inline}}</li>
</ul>

<div class="note">
<p><strong>참고:</strong> CSS 속성(<a href="/ko/docs/Web/CSS/CSS_Reference">CSS properties</a>) 모두가 모든 <em>레이아웃 모드</em>에 적용되지는 않습니다. 속성 대부분은 한 두 모드에 적용되고 속성이 다른 레이아웃 모드에 참여하는 요소에 설정되면 효과가 없습니다.</p>
</div>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li>{{CSS_key_concepts}}</li>
</ul>