diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-13 17:16:08 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-13 17:16:08 -0500 |
| commit | a5fcfafb665e96cae5d04dfba927db8dcdfd7f14 (patch) | |
| tree | 8eda610157e718083f580c6b31b0e101c3cf0bbc /files/ko | |
| parent | ba5d6f9610d6bb352eecfa3ded1bb99bc9892916 (diff) | |
| download | translated-content-a5fcfafb665e96cae5d04dfba927db8dcdfd7f14.tar.gz translated-content-a5fcfafb665e96cae5d04dfba927db8dcdfd7f14.tar.bz2 translated-content-a5fcfafb665e96cae5d04dfba927db8dcdfd7f14.zip | |
2020-12-13
Diffstat (limited to 'files/ko')
| -rw-r--r-- | files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html | 4 |
1 files changed, 1 insertions, 3 deletions
diff --git a/files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html index 677cf2fdaf..ee66eb7b65 100644 --- a/files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html +++ b/files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -5,14 +5,12 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Contain --- <p>{{CSSRef}}</p> -<p class="summary">flexbox가 웹 개발자들의 관심 받게된 이유 중 하나는 웹 최초로 최초로 적절한 정렬 기능을 제공했기 때문입니다. flexbox의 수직 정렬 기능을 이용하여 우리는 드디어 쉽게 박스(역주: 여기서 박스는 <strong>flex 컨테이너</strong>를 의미합니다) 내부를 중앙 정렬 할 수 있게 되었습니다. 이 가이드에서 우리는 flexbox의 정렬 및 끝 마추기 기능에 대해 자세히 살펴볼 것입니다.</p> +<p class="summary">flexbox가 웹 개발자들의 관심 받게된 이유 중 하나는 웹 최초로 최초로 적절한 정렬 기능을 제공했기 때문입니다. flexbox의 수직 정렬 기능을 이용하여 우리는 드디어 쉽게 박스(역주: 여기서 박스는 <strong>flex 컨테이너</strong>를 의미합니다) 내부를 중앙 정렬 할 수 있게 되었습니다. 이 가이드에서 우리는 flexbox의 정렬 및 끝 맞추기 기능에 대해 자세히 살펴볼 것입니다.</p> <p>박스 내부를 중앙 정렬 하기 위해 박스에 <code>align-items</code> 속성을 지정하면 교차 축에 대해 flex 항목을 정렬할 수 있습니다. 아래 경우, 교차 축은 수직 축입니다. <code>justify-content</code> 속성을 지정하면 flex 항목을 주축에 대해 정렬 할 수 있습니다. 아래 경우, 주축은 수평 방향입니다.</p> <p><img alt="A containing element with another box centered inside it." src="https://mdn.mozillademos.org/files/15627/align1.png" style="display: block; height: 357px; margin: 0px auto; width: 616px;"></p> - - <p>아래 예제의 코드를 살펴보세요. flex 컨테이너(역주: .box로 지정된 div 태그)나 flex 항목(역주: .box div로 지정된 div 태그)의 크기를 조절해도 flex 컨테이너 내부는 중앙 정렬됨을 보실 수 있습니다.</p> <p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p> |