diff options
Diffstat (limited to 'files/ko/web/css/flex-direction/index.html')
| -rw-r--r-- | files/ko/web/css/flex-direction/index.html | 155 |
1 files changed, 155 insertions, 0 deletions
diff --git a/files/ko/web/css/flex-direction/index.html b/files/ko/web/css/flex-direction/index.html new file mode 100644 index 0000000000..9d3ae04a49 --- /dev/null +++ b/files/ko/web/css/flex-direction/index.html @@ -0,0 +1,155 @@ +--- +title: flex-direction +slug: Web/CSS/flex-direction +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - Reference +translation_of: Web/CSS/flex-direction +--- +<div>{{CSSRef}}</div> + +<p><strong><code>flex-direction</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/flex-direction.html")}}</div> + + + +<p><code>row</code>와 <code>row-reverse</code>의 경우 플렉스 컨테이너의 방향성에 영향을 받음을 참고하세요. 컨테이너의 <code>dir</code> 값이 <code>ltr</code>이라면 <code>row</code>는 왼쪽부터 시작하는 가로축을, <code>row-reverse</code>는 오른쪽부터 시작하는 가로축을 나타냅니다. 그러나 <code>dir</code> 값이 <code>rtl</code>이라면 <code>row</code>가 오른쪽부터 시작하는 가로축을, <code>row-reverse</code>가 왼쪽부터 시작하는 가로축을 나타냅니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers">/* 한 줄의 글을 작성하는 방향대로 */ +flex-direction: row; + +/* <row>처럼, 대신 역방향 */ +flex-direction: row-reverse; + +/* 글 여러 줄이 쌓이는 방향대로 */ +flex-direction: column; + +/* <column>처럼, 대신 역방향 */ +flex-direction: column-reverse; + +/* 전역 값 */ +flex-direction: inherit; +flex-direction: initial; +flex-direction: unset; +</pre> + +<h3 id="값">값</h3> + +<dl> + <dt><code>row</code></dt> + <dd>플렉스 컨테이너의 주축이 글의 작성 방향과 동일합니다. 주축의 시작점과 끝점이 콘텐츠 방향과 동일합니다.</dd> + <dt><code>row-reverse</code></dt> + <dd><code>row</code>와 동일하게 동작하지만 시작점과 끝점이 반대에 위치합니다.</dd> + <dt><code>column</code></dt> + <dd>플렉스 컨테이너의 주축이 블록 축과 동일합니다. 주축의 시작점과 끝점이, 글 작성 모드의 이전 지점 및 이후 지점과 동일합니다.</dd> + <dt><code>column-reverse</code></dt> + <dd><code>column</code>과 동일하게 동작하지만 시작점과 끝점이 반대에 위치합니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><h4>This is a Column-Reverse</h4> +<div id="content"> + <div class="box" style="background-color:red;">A</div> + <div class="box" style="background-color:lightblue;">B</div> + <div class="box" style="background-color:yellow;">C</div> +</div> +<h4>This is a Row-Reverse</h4> +<div id="content1"> + <div class="box1" style="background-color:red;">A</div> + <div class="box1" style="background-color:lightblue;">B</div> + <div class="box1" style="background-color:yellow;">C</div> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#content { + width: 200px; + height: 200px; + border: 1px solid #c3c3c3; + display: -webkit-flex; + -webkit-flex-direction: column-reverse; + display: flex; + flex-direction: column-reverse; +} + +.box { + width: 50px; + height: 50px; +} + +#content1 { + width: 200px; + height: 200px; + border: 1px solid #c3c3c3; + display: -webkit-flex; + -webkit-flex-direction: row-reverse; + display: flex; + flex-direction: row-reverse; +} + +.box1 { + width: 50px; + height: 50px; +}</pre> + +<h3 id="결과">결과</h3> + +<p>{{ EmbedLiveSample('예제', '', '300') }}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p><code>flex-direction</code> 속성에 <code>row-reverse</code> 또는 <code>column-reverse</code> 값을 사용하면 DOM 구조와 그 시각적 표현에 차이가 생깁니다. 이는 낮은 시력으로 스크린 리더 등 접근성 기술을 사용해 이동하는 사용자의 경험에 부정적인 영향을 줄 수 있습니다. 시각적(CSS) 순서가 중요하다고 해도, 스크린 리더 사용자는 그 순서가 어떻게 되는지 알 수 없습니다.</p> + +<ul> + <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/" rel="noopener">Flexbox & the keyboard navigation disconnect — Tink</a></li> + <li><a href="http://adrianroselli.com/2015/09/source-order-matters.html" rel="noopener">Source Order Matters | Adrian Roselli</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html" rel="noopener">Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.flex-direction")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>CSS 플렉스박스 가이드: <em><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS 플렉스박스 가이드: <em><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></em></li> +</ul> |