From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:42:17 -0500
Subject: initial commit

---
 files/ko/glossary/cross_axis/index.html | 72 +++++++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 files/ko/glossary/cross_axis/index.html

(limited to 'files/ko/glossary/cross_axis')

diff --git a/files/ko/glossary/cross_axis/index.html b/files/ko/glossary/cross_axis/index.html
new file mode 100644
index 0000000000..0824f20777
--- /dev/null
+++ b/files/ko/glossary/cross_axis/index.html
@@ -0,0 +1,72 @@
+---
+title: 교차축
+slug: Glossary/Cross_Axis
+tags:
+  - CSS
+  - Glossary
+  - flexbox
+translation_of: Glossary/Cross_Axis
+---
+<p>{{glossary("flexbox", "플렉스박스")}}에서, <strong>교차축</strong>이란 {{glossary("main axis", "주축")}}에 수직하는 축으로, {{cssxref("flex-direction")}}이 <code>row</code> 또는 <code>row-reverse</code> 인 경우 교차축은 열 방향을 따라갑니다.</p>
+
+<p><img alt="The cross axis runs down the column" src="https://mdn.mozillademos.org/files/15710/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p>
+
+<p>주축이 <code>column</code> 또는 <code>column-reverse</code>인 경우 교차축은 행 방향을 따라갑니다.</p>
+
+<p><img alt="The cross axis runs along the row." src="https://mdn.mozillademos.org/files/15711/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p>
+
+<p>아이템을 교차축에 대해 정렬할 땐 플렉스 컨테이너의 <code>align-items</code> 속성 또는 각각 아이템의<code>align-self</code> 속성을 사용합니다. 플렉스 컨테이너가 콘텐츠 여러 줄을 가졌고, 교차축에 남는 공간이 있다면 <code>align-content</code> 속성을 통해 열 간격을 조절할 수 있습니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="속성_참고서">속성 참고서</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex")}}</li>
+</ul>
+</div>
+
+<h3 id="더_읽어보기">더 읽어보기</h3>
+
+<ul>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ko/docs/Glossary">MDN Web Docs 용어 사전</a>
+
+  <ol>
+   <li>{{Glossary("Cross Axis", "교차축")}}</li>
+   <li>{{Glossary("Flex")}}</li>
+   <li>{{Glossary("Flex Container")}}</li>
+   <li>{{Glossary("Flex Item")}}</li>
+   <li>{{Glossary("Grid")}}</li>
+  </ol>
+ </li>
+ <li>관련 CSS 속성
+  <ol>
+   <li>{{cssxref("align-content")}}</li>
+   <li>{{cssxref("align-items")}}</li>
+   <li>{{cssxref("align-self")}}</li>
+   <li>{{cssxref("flex")}}</li>
+   <li>{{cssxref("flex-basis")}}</li>
+   <li>{{cssxref("flex-direction")}}</li>
+   <li>{{cssxref("flex-flow")}}</li>
+   <li>{{cssxref("flex-grow")}}</li>
+   <li>{{cssxref("flex-shrink")}}</li>
+   <li>{{cssxref("flex-wrap")}}</li>
+   <li>{{cssxref("justify-content")}}</li>
+   <li>{{cssxref("order")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
-- 
cgit v1.2.3-54-g00ecf