initial commit

1 files changed, 32 insertions, 0 deletions

diff --git a/files/ko/web/css/layout_mode/index.html b/files/ko/web/css/layout_mode/index.html
new file mode 100644
index 0000000000..607a699b21
--- /dev/null
+++ b/files/ko/web/css/layout_mode/index.html
@@ -0,0 +1,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>