diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
| commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
| tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/ko/learn/css/css_layout | |
| parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
| download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip | |
initial commit
Diffstat (limited to 'files/ko/learn/css/css_layout')
| -rw-r--r-- | files/ko/learn/css/css_layout/flexbox/index.html | 340 | ||||
| -rw-r--r-- | files/ko/learn/css/css_layout/floats/index.html | 517 | ||||
| -rw-r--r-- | files/ko/learn/css/css_layout/grids/index.html | 711 | ||||
| -rw-r--r-- | files/ko/learn/css/css_layout/index.html | 76 | ||||
| -rw-r--r-- | files/ko/learn/css/css_layout/introduction/index.html | 720 | ||||
| -rw-r--r-- | files/ko/learn/css/css_layout/legacy_layout_methods/index.html | 588 | ||||
| -rw-r--r-- | files/ko/learn/css/css_layout/multiple-column_layout/index.html | 415 | ||||
| -rw-r--r-- | files/ko/learn/css/css_layout/미디어_쿼리_초보자_안내서/index.html | 424 | ||||
| -rw-r--r-- | files/ko/learn/css/css_layout/반응형_디자인/index.html | 333 | ||||
| -rw-r--r-- | files/ko/learn/css/css_layout/위치잡기/index.html | 585 | ||||
| -rw-r--r-- | files/ko/learn/css/css_layout/이전_브라우저_지원/index.html | 248 | ||||
| -rw-r--r-- | files/ko/learn/css/css_layout/일반_흐름/index.html | 102 |
12 files changed, 5059 insertions, 0 deletions
diff --git a/files/ko/learn/css/css_layout/flexbox/index.html b/files/ko/learn/css/css_layout/flexbox/index.html new file mode 100644 index 0000000000..72f5d57cf8 --- /dev/null +++ b/files/ko/learn/css/css_layout/flexbox/index.html @@ -0,0 +1,340 @@ +--- +title: Flexbox +slug: Learn/CSS/CSS_layout/Flexbox +tags: + - 문서 + - 안내서 + - 용어집 + - 초보자 + - 코딩스크립팅 + - 학습 +translation_of: Learn/CSS/CSS_layout/Flexbox +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드입니다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다. 이 문서는 근간이 되는 내용 전체를 설명합니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선결 사항:</th> + <td>HTML의 기초 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 입문서</a>)와 CSS 작동 방식에 대한 개념(<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS 입문서</a>를 공부하세요.)</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>웹 레이아웃을 생성하기 위해 flexbox 레이아웃 시스템을 사용하는 방법을 학습하기.</td> + </tr> + </tbody> +</table> + +<h2 id="왜_flexbox인가">왜 flexbox인가?</h2> + +<p>오랫동안 CSS 레이아웃을 작성할 수 있는 신뢰할 수 있는 크로스 브라우저 호환 도구는 <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">부동체</a> 및 <a href="/en-US/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a> 도구였습니다. 이것들은 무난하고 작동하지만, 어떤 면에서는 되려 제한적이고 좌절감을 맞보게 합니다.</p> + +<p>다음과 같은 간단한 레이아웃 요구 사항은 그러한 도구를 사용하여 달성하기가 어렵거나 불가능합니다. 또한, 편리하지도 유연한 방식도 못됩니다.</p> + +<ul> + <li>부모 요소 내부에 포함된 블록 콘텐츠를 세로로 중심부에 맞추기.</li> + <li>사용 가능한 너비와 높이에 관계없이 하나의 컨테이너에 포함된 모든 자녀 요소가 주어진 너비와 높이를 똑같은 크기로 점유하기.</li> + <li>다단 레이아웃에 포함된 모든 단이 서로 다른 크기의 콘텐츠를 포함하고 있더라도 동일한 높이로 채택하기.</li> +</ul> + +<p>다음 섹션에서 확인하겠지만, flexbox는 많은 레이아웃 작업을 훨씬 쉽게 만들어 줍니다. 본격적으로 파헤쳐봅시다!</p> + +<h2 id="간단한_예제_소개">간단한 예제 소개</h2> + +<p>이 문서에서 우리는 여러분이 flexbox의 작동 방식을 이해하는데 도움이 되는 일련의 연습을 수행하도록 하겠습니다. 시작하려면, 첫 번째 착수 파일인 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a>을 우리의 깃허브 저장소에서 사본을 내려받기하여 최신 브라우저(Firefox 또는 Chrome 등)에서 동 파일을 열어 코드 편집기에서 코드를 살펴봐야 합니다. 당신은 그걸 시연한 실제 장면을 <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">여기서도</a> 볼 수 있습니다.</p> + +<p>(편집기로 본) 소스안에 최상위 수준에 {{htmlelement("header")}} 요소와 세 개의 {{htmlelement("article")}}를 포함한 {{htmlelement("section")}} 요소가 있음을 알 수 있습니다. 우리는 이것들을 사용해 상당히 표준적인 삼단 레이아웃을 생성할 겁니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> + +<h2 id="flexbox로_레이아웃할_요소_지정">flexbox로 레이아웃할 요소 지정</h2> + +<p>먼저 어떤 요소들을 flexbox로 레이아웃할 요소를 선택해야 합니다. 이를 위해 영향을 주고 싶은 요소의 부모 요소에 특별한 {{cssxref("display")}} 속성값을 지정합니다. 이 경우 우리는 {{htmlelement("article")}} 요소를 레이아웃하길 원하므로 (flex container가 될) {{htmlelement("section")}}에 해당 속성값을 지정합니다:</p> + +<pre class="brush: css">section { + display: flex; +}</pre> + +<p>그 결과는 다음과 같아야 합니다:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13408/flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p> + +<p>자. 이 단일 선언이 우리에게 필요한 모든 것을 제공합니다. 놀랍죠, 그쵸? 우리는 단의 크기가 동일한 다단 레이아웃를 갖게 되었고, 단의 높이가 모두 같습니다. 이렇게 된 까닭은 (flex container의 자식인) flex item에 주어진 기본값이 이와 같은 일반적인 문제를 해결하도록 설정되었기 때문입니다. 관련 내용은 나중에 추가합니다.</p> + +<div class="note"> +<p><strong>참고</strong>: 인라인 항목을 flexbox로 취급해 레이아웃하길 희망한다면 {{cssxref("display")}} 속성값을 <code>inline-flex</code>로 지정할 수도 있습니다.</p> +</div> + +<h2 id="flex_모델의_측방">flex 모델의 측방</h2> + +<p>요소들을 flexbox로 레이아웃될 때 그 상자들은 두 개의 축을 따라 배치됩니다.</p> + +<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" style="display: block; margin: 0px auto;"></p> + +<ul> + <li><ruby><strong>기본 축</strong><rp> (</rp><rt>main axis</rt><rp>) </rp></ruby>은 flex item이 배치되고 있는 방향으로 진행하는 축입니다(예: 페이지를 가로지르는 행 또는 페이지 밑으로 쌓이는 열). 이 기본 축의 시작과 끝을 일컬어 <strong>main start</strong>과 <strong>main end</strong>라고 합니다.</li> + <li><ruby><strong>교차축</strong><rp> (</rp><rt>cross axis</rt><rp>) </rp></ruby>은 flex item이 내부에 배치되는 방향에 직각을 이루는 축입니다. 이 축의 시작과 끝을 일컬어 <strong>cross start</strong>과 <strong>cross end</strong>라고 합니다.</li> + <li><code>display: flex</code>이 설정된 부모 요소(우리 예제에서 {{htmlelement("section")}}이 해당)를 일컬어 <ruby><strong>flex container</strong><rp> (</rp><rt>flex container</rt><rp>) </rp></ruby>라고 합니다.</li> + <li>flex container 내부에 flexbox로 레이아웃되는 항목을 일컬어 <ruby><strong>flex item</strong><rp> (</rp><rt>flex items</rt><rp>) </rp></ruby>이라고 합니다(우리 예제에서 {{htmlelement("article")}} 요소가 해당됩니다).</li> +</ul> + +<p>후속 절을 진행할 때 이러한 용어를 명심하길 바랍니다. 사용 중인 어떤 용어에 대해 혼란스러워지면 언제든지 다시 참조할 수 있습니다.</p> + +<h2 id="행_또는_열">행 또는 열?</h2> + +<p>flexbox는 기본 축이 진행되는 방향(자식 flexbox들이 컨테이너 내부에 배치되는 방향)을 지정하는 {{cssxref("flex-direction")}} 속성을 제공합니다. 기본값으로 이것은 <code>row</code>로 설정되어 브라우저의 기본 언어가 작동하는 방향(영어 브라우저의 경우 왼쪽에서 오른쪽)을 따라 일렬로 배치됩니다.</p> + +<p>다음 선언문을 {{htmlelement("section")}} 규칙에 추가하세요:</p> + +<pre class="brush: css">flex-direction: column;</pre> + +<p>이로써 항목 무리를 열 레이아웃으로 되돌려 놓는걸 확인하게 된다. 해당 항목들은 어떤 내용의 CSS를 추가하기 이전 상황과 유사하다. 진도를 더 나가기 전에 동 선언문을 예제에서 삭제하십시오.</p> + +<div class="note"> +<p><strong>참고</strong>: 당신은 <code>row-reverse</code>와 <code>column-reverse</code> 속성값을 사용하여 역방향으로 배치할 수 있습니다. 이들 값으로도 실험해보십시요!</p> +</div> + +<h2 id="접기">접기</h2> + +<p>당신의 레이아웃에 너비 또는 높이가 고정 크기를 갖고 있어 생기는 한 가지 문제는 결국 flexbox 자식 요소가 컨테이너에서 대열이탈하면서 레이아웃이 깨진다는 것입니다. 우리가 제시하는 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a> 예제를 확인하고 난 뒤 <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">라이브 보기</a>를 시도하세요(이 예제를 따라해보고 싶다면 이제 이 파일의 사본을 내려받으세요):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13410/flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p> + +<p>여기서 우리는 자식들이 정말로 소속 컨테이너에서 이탈하는 모습을 확인할 수 있습니다. 이것을 해소할 수 있는 한 가지 방법은 다음 선언을 {{htmlelement("section")}} 규칙 부분에 추가하면 됩니다:</p> + +<pre class="brush: css">flex-wrap: wrap;</pre> + +<p>또한, 디음 선언문을 {{htmlelement("article")}} 규칙 부분에 추가해보세요:</p> + +<pre class="brush: css">flex: 200px;</pre> + +<p>지금 시도해보십시오. 동 규칙이 포함된 상태에선 레이아웃 모양이 개선되는 걸 보게 됩겁니다:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;">우리는 이제 여러 행을 갖게 되었다. 많은 flexbox 자녀들이 합당하다 싶게 각 행마다 (분배되어) 알맞게 맞춰졌습니다. 대열이탈된 것들은 다음 행으로 넘어갑니다. 아티클 요소에 <code>flex: 200px</code> 선언이 지정되었다는 의미는 각 요소에 적어도 200px 너비가 지정되었다는 의미이다. 우리는 나중에 이 속성에 대해 더 자세히 논의할 겁니다. 마지막 행에 있는 마지막 몇몇 자식들의 각 너비가 더 연장되면서 전체 행이 마찬가지로 채워진 것을 볼 수 있습니다.</p> + +<p>하지만 할 수 있는 게 더 있습니다. 우선, {{cssxref("flex-direction")}} 속성값을 <code>row-reverse</code>로 변경해 보십시오. 이제 여러 행 레이아웃을 보유한 것은 마찬가지지만, 브라우저 창의 반대쪽 구석에서 시작하여 역방향 대열이 된 것이 확인될 겁니다.</p> + +<h2 id="flex-flow_약칭">flex-flow 약칭</h2> + +<p>이 시점에서 {{cssxref("flex-direction")}}와 {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}를 대신하는 약칭이 존재한다는 점을 언급할 가치가 있다. 예를 들어, 여러분은 다음을</p> + +<pre class="brush: css">flex-direction: row; +flex-wrap: wrap;</pre> + +<p>다음으로 대체할 수 있다.</p> + +<pre class="brush: css">flex-flow: row wrap;</pre> + +<h2 id="flex_item의_flex_크기_조정">flex item의 flex 크기 조정</h2> + +<p>이제 첫 번째 예제로 복귀해서, 우리가 어떻게 flex item의 비율을 조절할 수 있는지 살펴봅시다. <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a>사본을 브라우저 탭으로 열거나 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> 사본을 새로운 출발점으로 삼으세요.(<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">라이브 참조</a>).</p> + +<p>첫째, 당신의 CSS 파일 하단에 다음 규칙을 추가하십시오:</p> + +<pre class="brush: css">article { + flex: 1; +}</pre> + +<p>이것은 각 flex item이 기본 축을 따라 남은 공간을 어느 정도나 점유할지를 결정하는 단위가 없는 비율 값입니다. 이 경우, 우리는 각각의 {{htmlelement("article")}} 요소에 1의 값을 부여하고 있는데, 이는 패딩과 여백이 지정된 이후 남은 여분의 공간을 모두 동등한 크기로 점유하게 된다는 의미입니다. 그것은 비율이며, 각 flex item에 400000의 값을 부여하면 정확히 동일한 효과가 있음을 의미합니다.</p> + +<p>이제 이전 규칙 아래에 다음 규칙을 추가합시다.</p> + +<pre class="brush: css">article:nth-of-type(3) { + flex: 2; +}</pre> + +<p>이제 새로 고침할 때, 세 번째 {{htmlelement("article")}}이 다른 두 개보다 사용 가능한 너비의 두 배나 많이 점유한다는 것을 알 수 있습니다. 말하자면 현재 총 4개의 비례 단위가 있는 겁니다. 처음 두 개의 flex item은 각각 하나로 구분되어 사용 가능한 공간의 1/4을 차지합니다. 세 번째 것은 두 개의 단위(2배율)를 차지하기 때문에 사용 가능한 공간의 2/4를 점유합니다(또는 1/2).</p> + +<p>또한 flex 값 내에서 최소 크기 값을 지정할 수 있습니다. 다음과 같이 문서 부분의 기존 규칙을 업데이트해 보십시오.</p> + +<pre class="brush: css">article { + flex: 1 200px; +} + +article:nth-of-type(3) { + flex: 2 200px; +}</pre> + +<p>이것은 기본적으로 "각 flex item은 먼저 사용 가능한 공간에서 200px를 부여받습니다. 그 후, 나머지 사용 가능한 공간은 비례 단위에 따라 분배됩니다." 새로 고침을 해보면 공간 배분 방식이 달라진 것이 확인될 겁니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> + +<p>flexbox의 실제 값은 flex성/반응성에 포함되어 있다고 볼 수 있습니다. 다시말해 브라우저 창의 크기를 재조정하거나 다른 {{htmlelement("article")}} 요소를 추가하더라도 레이아웃이 계속 정상적으로 작동합니다.</p> + +<h2 id="flex_약칭_對_정식_명칭">flex: 약칭 對 정식 명칭</h2> + +<p>{{cssxref("flex")}} 최대 세 가지 서로 다른 값을 지정할 수 있는 약칭 속성입니다.</p> + +<ul> + <li>단위없는 비례 값은 우리가 위에서 논의한 바 있습니다. 단위없는 비례 값은 {{cssxref("flex-grow")}}라는 정식 명칭 속성을 사용하여 개별적으로 지정할 수 있습니다.</li> + <li>두 번째 단위없는 비례 값인 {{cssxref("flex-shrink")}}는 flex item이 컨테이너에서 넘칠때(대열이탈) 존재를 드러냅니다. 이 값은 컨테이너 대열이탈을 방지하기 위해 넘치는 양을 각 flex item의 크기에서 어느 정도나 뺏어올지를 지정합니다. 이 값은 꽤 고수준의 flexbox 기능이며, 우리는 이 문서에서는 추가 내용을 다루지 않겠습니다.</li> + <li>위에서 논의했던 최소 크기 값입니다. 최소 크기 값은 {{cssxref("flex-basis")}}라는 정식 명칭 값을 사용하여 개별적으로 지정될 수 있습니다.</li> +</ul> + +<p>우리는 꼭 사용해야 할 경우가 아니라면(예를 들어, 이전 설정을 재정의하는 등) flex 속성에 정식 명칭을 사용하지 말라고 권고합니다. 정식 명칭의 사용은 추가 코드 작성이 많아 질뿐만 아니라 다소 혼란스러울 수도 있습니다.</p> + +<h2 id="수평_및_수직_정렬">수평 및 수직 정렬</h2> + +<p>또한 flexbox 기능을 사용하여 기본 축 또는 교차축을 따라 flex item을 정렬할수 있습니다. 이 기능은 새로운 예제인 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a>을 통해 살펴보자(<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">라이브로도 보세요</a>). flexbox가 우리는 깔끔한 flex형 단추/툴바로 바뀌게될 겁니다. 지금 당장은 몇몇 단추들이 왼쪽 상단 모서리에 몰린 상태의 수평 메뉴 표시줄이 보입니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13414/flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p> + +<p>우선 이 예제의 사본을 취득합니다.</p> + +<p>이제 예제의 CSS의 맨 아래에 다음 내용을 추가하세요:</p> + +<pre class="brush: css">div { + display: flex; + align-items: center; + justify-content: space-around; +}</pre> + +<p>페이지를 새로 고치면 단추가 수평 및 수직으로 중심이 잘 맞춰져 있음을 알 수 있습니다. 우리는 두 가지 새로운 속성을 통해 이 작업을 수행했습니다.</p> + +<p>{{cssxref("align-items")}} 속성은 flex item이 교차축 어디에 놓일 지를 제어합니다.</p> + +<ul> + <li>이 속성값은 기본값으로 <code>stretch</code>입니다. 이 값은 교차축 방향으로 부모 요소를 채우기 위해 모든 flex item을 연장합니다. 부모가 교차 축 방향으로 고정폭이 주어지지 않았다면 모든 flex item이 최장 항목만큼 길어집니다. 이런 방식으로 우리의 첫 번째 예제가 기본값으로 같은 높이의 열을 얻게 된 것입니다.</li> + <li>우리가 위의 코드에서 사용한 <code>center</code> 값은 항목 무리가 자기들 고유의 면적를 유지하는 동시에 교차축을 따라 중심에 놓이게 만듭니다. 그런 까닭에 현재 예제 속 단추가 수직으로 중심에 놓여있습니다.</li> + <li>또한 교차축의 시작과 끝에 맞춰 모든 항목을 정렬하게 해주는 <code>flex-start</code>와 <code>flex-end</code>와 같은 값도 가질 수 있습니다. 자세한 내용은 {{cssxref("align-items")}}을 참조하십시오.</li> +</ul> + +<p>{{cssxref("align-self")}} 속성을 단추에 적용함으로써 flex item에 속한 개별 항목에 대한 {{cssxref("align-items")}}동작을 재지정할 수 있습니다. 예를 들어 다음을 CSS에 추가해보세요:</p> + +<pre class="brush: css">button:first-child { + align-self: flex-end; +}</pre> + +<p>이것이 어떤 효과를 미치는지 한번 보고, 다 보았다면 다시 제거하세요.</p> + +<p>{{cssxref("justify-content")}}는 flex item 무리가 기본 축 상 어디에 놓이는지를 제어합니다.</p> + +<ul> + <li>기본값은 <code>flex-start</code>이며, 이는 모든 항목이 기본 축의 시작 부분에 놓이도록 만듭니다.</li> + <li>당신은 <code>flex-end</code>를 사용하여 항목 무리를 기본 축의 가장자리에 놓이도록 만들 수도 있습니다.</li> + <li><code>center</code>는 <code>justify-content</code>를 대체할 수 있는 값으로 flex item 무리를 기본 축의 중심에 놓이도록 만들겁니다.</li> + <li>우리가 위에서 사용했던 값인 <code>space-around</code>는 유용합니다. 모든 항목을 기본 축을 따라 고르게 분배하고 양쪽 끝에 약간의 공간도 남겨 놓습니다.</li> + <li>그 외에도 <code>space-between</code>이라는 값도 있습니다. 이는 <code>space-around</code>와 매우 흡사하다. 다만 이것은 양쪽 끝에 공간을 남기지 않습니다.</li> +</ul> + +<p>우리는 진도를 더 나가기 전에 여러분이 이들 값을 가지고 어떻게 작동하는지 시험해보라고 권장하고 싶습니다.</p> + +<h2 id="flex_item_순서_정하기">flex item 순서 정하기</h2> + +<p>flexbox에는 소스 순서에 영향을 미치지 않고 flex item의 레이아웃 순서를 변경하는 기능도 있습니다. 이는 전통적인 레이아웃 메서드로는 불가능했던 내용입니다.</p> + +<p>이를 위한 코드는 간단합니다: 당신의 단추표시줄 예제 코도에 다음과 같은 CSS를 추가해 보십시요:</p> + +<pre class="brush: css">button:first-child { + order: 1; +}</pre> + +<p>페이지를 새로 고치면 이제 "스마일" 단추가 기본 축의 끝으로 이동한 것이 확인될 겁니다. 어떻게 이런 식으로 작동하는지 좀 더 상세히 얘기해 보겠습니다:</p> + +<ul> + <li>기본값으로 모든 flex item들은 {{cssxref("order")}} 값이 0입니다.</li> + <li>순위값이 높은 flex item들은 디스플레이 순서상 순위값이 낮은 항목들보다 나중에 나타납니다.</li> + <li>순위값이 동일한 항목들은 소스 순서대로 나타납니다. 따라서 4개 항목의 순서값이 각기 2, 1, 1, 0로 설정된 경우 표시 순서는 제4, 제2, 제3, 제1 순이 됩니다.</li> + <li>제 3항목은 동일한 순서값을 가지고 있지만, 소스 순서 상 제 2항목 뒤에 있기 때문에 제 2 항목 뒤에 나타납니다.</li> +</ul> + +<p>당신은 0 지정 항목보다 일찍 항목을 표시하도록 음수 순서 값을 설정할 수 있습니다. 예를 들어, 다음 규칙을 사용하여 "Blush" 단추를 기본 축의 시작 부분에 표시할 수 있습니다:</p> + +<pre class="brush: css">button:last-child { + order: -1; +}</pre> + +<h2 id="중첩된_flexbox_box">중첩된 flexbox box</h2> + +<p>flexbox를 사용하여 꽤 복잡한 레이아웃을 만들 수 있습니다. flex item을 flex container로 설정해도 전혀 문제없습니다. 그렇게 되면 그 컨테이너의 자녀가 flexbox처럼 배치됩니다. <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a>를 찾아보세요. (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">라이브로도 보세요</a>).</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13418/flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>이를 위한 HTML은 상당히 간단합니다. 세 개의 {{htmlelement("article")}}를 포함하는 {{htmlelement("section")}} 요소가 있습니다. 세 번째 {{htmlelement("article")}}은 세 개의 {{htmlelement("div")}}를 포함하고 있습니다. :</p> + +<pre>section - article + article + article - div - button + div button + div button + button + button</pre> + +<p>앞의 레이아웃에 사용했던 코드를 살펴봅시다.</p> + +<p>먼저 {{htmlelement("section")}}의 자식들을 flexbox로 취급해 배치하였습니다.</p> + +<pre class="brush: css">section { + display: flex; +}</pre> + +<p>다음으로 {{htmlelement("article")}} 무리 자체에 대해 약간의 flex 값을 설정하였습니다. 여기서 두 번째 규칙에 주목하십시오. 우리는 세 번째 {{htmlelement("article")}}이 자기 자식들을 flex item처럼 배치하도록 설정하고 있습니다. 그러나 이번에는 열처럼 배치하고 있습니다.</p> + +<pre class="brush: css">article { + flex: 1 200px; +} + +article:nth-of-type(3) { + flex: 3 200px; + display: flex; + flex-flow: column; +} +</pre> + +<p>다음으로 첫 번째 {{htmlelement("div")}}를 선택합니다. 우리는 먼저 선택된 요소에 100px의 최소 높이를 효과적으로 주기 위해 <code>flex:1 100px;</code>을 사용합니다. 그리고 나서 우리는 그것의 자식들을 ({{htmlelement("button")}} 요소 무리를) flex item처럼 배치하도록 설정했습니다. 여기서 우리는 그것들을 줄 바꿈 행에 배치하고, 우리가 앞서 본 개별 단추 예제에서 했던 것처럼 사용 가능한 공간의 중심에 정렬합니다.</p> + +<pre class="brush: css">article:nth-of-type(3) div:first-child { + flex:1 100px; + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: space-around; +}</pre> + +<p>마지막으로, 우리는 단추에 약간의 크기를 설정하되, 다소 흥미롭게도 1 auto라는 flex 값을 부여합니다. 이것은 매우 흥미로운 효과를 지니게 되는데, 브라우저 창의 폭을 조정해 보면 확인됩니다. 단추는 최대한의 공간을 점유할 뿐만아니라 동일 선상에 가능한 한 많은 요소를 놓으려고 합니다. 그러나 해당 요소들이 더 이상 동일 선상에 안착할 수 없을 경우 새로운 라인으로 밀려납니다.</p> + +<pre class="brush: css">button { + flex: 1 auto; + margin: 5px; + font-size: 18px; + line-height: 1.5; +}</pre> + +<h2 id="크로스_브라우저_호환성">크로스 브라우저 호환성</h2> + +<p>flexbox 지원은 파이어폭스, 크롬, 오페라, 마이크로소프트 에지 및 인터넷 익스플로러 11, 안드로이드 및 iOS 최신 버전 등 대부분의 신형 브라우저에서 사용할 수 있습니다. 그러나 flexbox를 지원하지 않는 (또는 지원하지만, 실제로 구식 버전의 flexbox를 지원하는) 구형 브라우저 사용자가 여전히 존재한다는 것을 알아야 합니다.</p> + +<p>여러분이 단지 기술을 익히고 실험할 뿐이라면 호환성 문제는 그다지 중요하지 않습니다; 그러나 만약 여러분이 실제 웹사이트에서 flexbox의 사용을 고려하고 있다면, 여러분은 (구형 브라우저에서) 테스트를 수행해야 하고, 최대한 다양한 브라우저 사용자들이 수용할만한 사이트 방문 경험을 보장할 필요가 있습니다.</p> + +<p>flexbox는 몇몇 CSS 기능보다 다소 까다롭습니다. 예를 들어 브라우저에 CSS 그림자 기능이 빠진 경우 해당 사이트을 여전히 사용할 수 있습니다. 그러나 flexbox 기능을 지원하지 않을 경우 레이아웃이 완전히 깨져서 사용할 수 없게 됩니다.</p> + +<p><a href="/ko/docs/Learn/Tools_and_testing/Cross_browser_testing">크로스 브라우저 테스트</a> 단원에서 크로스 브라우저 지원 문제를 극복하기 위한 전략에 대해 논의합니다.</p> + +<h2 id="요약정리">요약정리</h2> + +<p>이로써 flexbox의 기본 안내서를 마감합니다. 재미있는 경험이었기 바라며, 당신이 학습 진도를 더해 갈수록 flexbox를 자유자제로 다룰 수 있게 될 겁니다. 다음으로 CSS 레이아웃의 또 다른 중요한 측면인 CSS grid를 살펴볼 것입니다.</p> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div> + +<div> +<h2 id="이번_단위에는">이번 단위에는</h2> + +<ul> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 소개</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">grid</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 레이아웃</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/반응형_디자인">반응형 디자인</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/레거시_조판_메서드">레거시 레이아웃 메서드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">레이아웃 이해도 필수 평가</a></li> +</ul> +</div> diff --git a/files/ko/learn/css/css_layout/floats/index.html b/files/ko/learn/css/css_layout/floats/index.html new file mode 100644 index 0000000000..0ee594b2eb --- /dev/null +++ b/files/ko/learn/css/css_layout/floats/index.html @@ -0,0 +1,517 @@ +--- +title: Floats +slug: Learn/CSS/CSS_layout/Floats +tags: + - 다단 + - 안내서 + - 정리 + - 초보자 + - 코딩스크립팅 +translation_of: Learn/CSS/CSS_layout/Floats +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">원래 텍스트 블록 내에서 float 이미지를 위한 {{cssxref("float")}} 속성은 웹 페이지에서 다단 레이아웃을 생성할 용도로 가장 널리 사용되는 도구 중 하나로 자리매김했었습니다. flexbox와 grid의 출현과 함께 float 속성은 이 문서에서 설명하겠지만, 원래의 목적대로 돌아갔습니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선결 사항:</th> + <td>HTML의 기초 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 입문서</a>)와 CSS 작동 방식에 대한 개념(<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS 입문서</a>를 공부하세요.)</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>웹페이지상에 float 기능을 생성하는 방법과 clear 속성과 floats clearing 을 배웁니다.</td> + </tr> + </tbody> +</table> + +<h2 id="floats의_배경">floats의 배경</h2> + +<p>float 속성은 웹 개발자가 텍스트 열 내부에 float하는 이미지를 포함하고, 아울러 해당 이미지의 좌측 우측 주변으로 텍스트를 둘러싸는 간단한 레이아웃을 구현할 수 있도록 도입되었습니다. 이런 것은 신문 레이아웃에서 볼 수 있는 종류입니다.</p> + +<p>그러나 웹 개발자들은 이미지뿐만 아니라 무엇이든 float할 수 있음을 빠르게 깨달았고, 그래서 floats 사용이 확대되었습니다. 앞서 살펴본 <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements#Active_learning_A_fancy_paragraph">고급 단락 예제</a>는 재미있는 드롭캡 효과를 생성하는 데 floats를 어떻게 사용할 수 있는지를 보여줍니다.</p> + +<p>floats는 일반적으로 상대 요소와 나란히 놓이도록 float(浮動)하는 다단 정보를 갖춘 웹 사이트의 전체 레이아웃을 만들는데 널리 사용되어 왔다(기본 행동은 다단 무리가 소스에서 보이는 순서와 같은 순서대로 상대 요소 아래에 자리잡기하는 것이다). 더 새롭고 더 나은 레이아웃 기술이 나와있으므로 이러한 방식으로 floats를 사용하는 것은 <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">낡은 기술</a>로 간주되어야 합니다.</p> + +<p>이 문서에서는 floats의 적절한 용도에 집중할 것입니다.</p> + +<h2 id="간단한_float_예제">간단한 float 예제</h2> + +<p>floats를 어떻게 사용하는지 알아보자. 우리는 요소 주위에 텍스트 블록을 float하는 것이 포함된 아주 간단한 예제로 시작할 것입니다. 아래 내용을 따라하려면 당신의 컴퓨터에 <code>index.html</code> 파일을 새로 작성하여, 거기에 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">간단한 HTML 템플릿</a>으로 채우고, 파일 내부의 적절한 위치에 아래 코드를 삽입하면 됩니다. 해당 섹션의 맨 아래에는 최종 코드가 어떻게 생겼는지에 대한 실제 예제가 있습니다.</p> + +<p>첫째, 간단한 HTML로 시작하겠습니다. HTML body 부분에 다음 내용을 추가하고, body 안에 있었던 모든 내용을 제거합니다.</p> + +<pre class="brush: html"><h1>간단한 float 예제</h1> + +<div class="box">float</div> + +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p> + +<p>Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></pre> + +<p>이제 다음 CSS를 HTML에 적용하십시요.({{htmlelement("style")}} 요소를 사용할지 개별 <code>.css</code> 파일에 대한 {{htmlelement("link")}}를 사용할지는 당신의 선택 여하에 달려있습니다.):</p> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.box { + width: 150px; + height: 100px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +}</pre> + +<p>지금 저장하고 새로 고침하면, 여러분이 기대한 것과 비슷한 것을 보게 될 것입니다. 다시말해 일반 대열에 속한 상자는 텍스트 위에 위치를 잡고 있습니다. 텍스트가 상자 주변에 float하려면 아래에서 보듯 <code>.box</code> 규칙에 두 가지 속성을 추가하십시요.</p> + +<pre class="brush: css">.box { + float: left; + margin-right: 15px; + width: 150px; + height: 100px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +}</pre> + +<p>이제 저장하고 새로 고침하면 다음과 같은 것을 볼 수 있습니다.</p> + +<div id="부동_1"> +<div class="hidden"> +<h6 id="float_예제_1">float 예제 1</h6> + +<pre class="brush: html"><h1>간단한 float 예제</h1> + +<div class="box">float</div> + +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> + +<p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</pre> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.box { + float: left; + margin-right: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('float_1', '100%', 500) }}</p> + +<p>이제 floats가 어떻게 작동하는지 생각해 봅시다. floats로 설정된 대상 요소(이 경우 {{htmlelement("div")}} 요소)는 문서의 일반 레이아웃 대열에서 들어내어 부모 콘테이너(이 경우는 {{htmlelement("body")}})의 왼편에 고정되어 있습니다. 일반 레이아웃 대열에서 float 요소 아래에 오는 모든 콘텐츠는 이제 그 주변을 감싸게 되며, 애초 해당 float 요소가 있던 상층부를 포함해 오른쪽으로 공간을 차지합니다. 거기서 멈추게 됩니다.</p> + +<p>콘텐츠를 오른쪽으로 float하는 것은 정확히 같은 효과를 가져 오지만, float 요소는 역으로 오른쪽에 고정되고 컨텐츠는 float 요소의 왼쪽 주변을 둘러싸게 됩니다. 직전 CSS 규칙 집합에서 float 값을 <code>right</code>로 변경하고 {{cssxref("margin-right")}}를 {{cssxref("margin-left")}}로 대체해 그 결과가 무엇인지 확인하십시오.</p> + +<p>텍스트를 밀어내도록 float에 여백을 추가할 수 있지만, float 로부터 텍스트를 이동시키기 위해 텍스트에 여백을 추가할 수는 없습니다. 왜 그런가하면 float 요소가 일반 대열에서 이탈된 상태이고, 후속 항목에 속한 상자 무리가 실제로 동 float 의 뒤에 나열되기 때문입니다. 당신의 예제에 일부 내용을 변경해보면 그점을 증명할 수 있습니다.</p> + +<p>float 상자의 바로 뒤에 있는 텍스트 형태의 첫 번째 단락에 <code>special</code> 클래스를 추가하십시요. 그 다음에 당신의 CSS에 다음 규칙을 추가합니다. 이들 규칙에 따라 당신의 후속 단락에는 배경색이 주어집니다.</p> + +<pre class="brush: css">.special { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +} +</pre> + +<p>해당 효과를 쉽게 확인해보려면 float에 대한 <code>margin-right</code>를 <code>margin</code>으로 대체하여 float의 주변 전체에 공간을 확보하십시오. 아래 예제에서와 같이 단락의 배경이 float 상자 바로 아래에서 펼쳐지는 것을 확인할 수 있습니다.</p> + +<div id="부동_2"> +<div class="hidden"> +<h6 id="float_예제_2">float 예제 2</h6> + +<pre class="brush: html"><h1>간단한 float 예제</h1> + +<div class="box">float</div> + +<p class="special">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> + +<p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + +.special { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('float_2', '100%', 500) }}</p> + +<p>우리의 후속 요소에 속한 라인 상자가 짧아져서 텍스트가 floats 주위로 펼쳐지고 있지만, floats가 일반 대열에서 제거되었기 때문에 단락 주변 상자는 여전히 전체 너비로 유지하고 있습니다.</p> + +<h2 id="floats_정리하기">floats 정리하기</h2> + +<p>우리는 float가 일반 대열에서 제거되고 다른 요소가 그 옆에 표시되는 것을 보았습니다. 따라서 후속 요소가 치고 올라오는 것을 막으려면 그것을 정리해야 합니다. 그것은 {{cssxref("clear")}} 속성으로 달성됩니다.</p> + +<p>이전 예제에서 당신이 사용한 HTML에서 float 항목 아래에 위치한 두 번째 단락에 <code>cleared</code> 클래스를 추가하십시요. 그 뒤 당신의 CSS에 다음 내용을 추가하세요.</p> + +<pre class="brush: css">.cleared { + clear: left; +} +</pre> + +<div id="부동_3"> +<div class="hidden"> +<h6 id="float_예제_3">float 예제 3</h6> + +<pre class="brush: html"><h1>간단한 float 예제</h1> + +<div class="box">float</div> + +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> + +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </pre> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + +.cleared { + clear: left; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('float_3', '100%', 600) }}</p> + +<p>다음 단락은 float 요소를 clear 하며, 더 이상 그 옆에 부상하지 않음을 알아야 합니다. <code>clear</code> 속성은 다음과 같은 값을 받아들입니다:</p> + +<ul> + <li><code>left</code>: 왼쪽에 부상한 항목들 clear</li> + <li><code>right</code>: 오른쪽에 부상한 항목들 clear</li> + <li><code>both</code>: 왼쪽 오른쪽 관계 없이 부상한 항목들 clear</li> +</ul> + +<h2 id="floats_주변을_둘러싼_상자_정리하기">floats 주변을 둘러싼 상자 정리하기</h2> + +<p>이제 당신은 float 요소를 후속하는 무언가를 정리하는 방법을 알고 있지만, 장신 floats와 단신 단락이 있고 두 요소 주변을 둘러싼 하나의 상자가 있을 경우에는 어떤 일이 일어나는지 살펴보십시요. 첫 단락과 우리의 float 상자가 <code>wrapper</code> 클래스에 해당하는 {{htmlelement("div")}} 요소로 둘러싸지도록 문서를 변경하십시오.</p> + +<pre class="brush: html"><div class="wrapper"> + <div class="box">float</div> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p> +</div> +</pre> + +<p>당신의 CSS에 <code>.wrapper</code> 클래스에 대해 다음 규칙을 추가한 뒤 페이지를 새로 고침하십시오.</p> + +<pre class="brush: css">.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +}</pre> + +<p>원형 <code>.cleared</code> 클래스에 추가된 것입니다.</p> + +<pre class="brush: css" id="ct-0">.cleared { + clear: left; +}</pre> + +<p>여러분이 보게 될 것은 문단에 배경 이미지를 놓는 예제에서와 비슷하게 배경색이 floats 뒤에서 펼쳐지고 있습니다.</p> + +<div id="부동_4"> +<div class="hidden"> +<h6 id="float_예제_4">float 예제 4</h6> + +<pre class="brush: html"><h1>간단한 float 예제</h1> +<div class="wrapper"> + <div class="box">float</div> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> + +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + +.cleared { + clear: left; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('float_4', '100%', 600) }}</p> + +<p>반복되는 얘기지만, 이렇게 된 까닭은 floats가 정상 대열에서 제거되었기 때문입니다. 후속 요소를 정리해도 이럴 때는 상자 정리 문제에 도움이 되지 않습니다. 즉 상자의 밑단이 float 항목을 애워싸고, 짧은 컨텐츠라도 동 컨텐츠를 애워싸길 원할 경우에는 도움이 되질 않습니다. 이를 처리하려면 생각할 수 있는 세 가지 방법이 있는데, 그 중 두 가지 방법은 모든 브라우저에서 작동하지만, 약간 땜질식이며, 세 번째 새로운 방법은 이런 상황을 제대로 처리합니다.</p> + +<h3 id="The_clearfix_hack">The clearfix hack</h3> + +<p>이 상황을 처리하는 전통적인 방법은 "clearfix hack"이라고 알려진 내용을 사용하는 것입니다. 여기에는 floats와 그걸 둘러싼 콘텐츠가 들어 있는 상자 뒤에 일부 생성된 콘텐츠를 삽입하고, 그것에 (좌측 우측 관계없는) <code>clear: both;</code>를 설정하는 것을 말합니다.</p> + +<p>우리의 예제에 다음과 같은 CSS를 추가하세요.</p> + +<pre class="brush: css">.wrapper::after { + content: ""; + clear: both; + display: block; +}</pre> + +<p>이제 페이지를 새로고침하면 상자가 지워집니다. 이것은 본질적으로 항목 아래에 <code><div></code>와 같은 HTML 요소를 추가하고, 거기에 <code>clear: both</code>를 설정한 것과 같습니다.</p> + +<div id="부동_5"> +<div class="hidden"> +<h6 id="float_예제_5">float 예제 5</h6> + +<pre class="brush: html"><h1>간단한 float 예제</h1> +<div class="wrapper"> + <div class="box">float</div> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + +.wrapper::after { + content: ""; + clear: both; + display: block; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('float_5', '100%', 600) }}</p> + +<h3 id="overflow_사용">overflow 사용</h3> + +<p>다른 대안으로는 <code>.wrapper</code> 클래스에 {{cssxref("overflow")}} 속성을 <code>visible</code> 이 외의 값으로 설정하는 방법이 있습니다.</p> + +<p>이전 섹션에서 추가한 clearfix CSS 부분을 제거하고 그 대신 <code>.wrapper</code> 클래스에 대한 CSS 규칙에 <code>overflow: auto</code>를 추가합니다. 반복되는 얘기지만, 상자가 정리되었을 겁니다.</p> + +<pre class="brush: css">.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; + overflow: auto; +}</pre> + +<div id="부동_6"> +<div class="hidden"> +<h6 id="float_예제_6">float 예제 6</h6> + +<pre class="brush: html"><h1>간단한 float 예제</h1> +<div class="wrapper"> + <div class="box">float</div> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; + overflow: auto; +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('float_6', '100%', 600) }}</p> + +<p>이 예는 <strong>block formatting context</strong>라고(블록 서식 상황) 알려진 것을 생성하여 처리합니다. 이것은 당신의 페이제 내부 미니 레이아웃과도 같습니다. 그 안에 모든 것이 포함되어 있으므로 우리의 float 요소는 블록 서식 상황 내부에 포함되어 있으며 배경은 두 개 항목 뒤에 펼쳐집니다. 그러나 어떤 경우에는 overflow 사용에 따른 의도하지 않은 결과 때문에 원치 않는 스크롤 막대나 잘린 그림자가 발견될 수 있습니다.</p> + +<h3 id="display_flow-root">display: flow-root</h3> + +<p>이 문제를 해결하는 현대적인 방식은 <code>display</code> 속성에서 <code>flow-root</code>값을 사용하는 방법입니다. 이것은 임시방편을 사용하지 않고 블록 서식 상황을 생성하기 위해만 존재합니다. 이를 사용할 때 의도하지 않은 결과는 없습니다. 당신의 <code>.wrapper</code> 규칙에서 <code>overflow: auto</code>를 제거하고 <code>display: flow-root</code>를 추가합니다. 당신이 이 기능을 지원하는 브라우저가 있다는 가정 하에 상자가 정리될 것입니다.</p> + +<pre class="brush: css">.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; + display: flow-root; +}</pre> + +<div id="부동_7"> +<div class="hidden"> +<h6 id="float_예제_7">float 예제 7</h6> + +<pre class="brush: html"><h1>간단한 float 예제</h1> +<div class="wrapper"> + <div class="box">float</div> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; + display: flow-root; +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('float_7', '100%', 600) }}</p> + +<h2 id="요약정리">요약정리</h2> + +<p>당신은 현대적인 웹 개발에서 floats에 대해 알아야 할 것은 이제 모두 알게 되었습니다. 과거에 어떤 식으로 사용되었는지에 관한 정보에 대해선 <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">레거시 레이아웃 메서드</a>에 관한 문서를 보십시요. 오래된 프로젝드에 몸 담을 일이 생긴다면 유용할 수도 있습니다.</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="이번_단위에는">이번 단위에는</h2> + +<ul> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 소개</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">grid</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">floats</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 레이아웃</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/반응형_디자인">반응형 디자인</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/레거시_조판_메서드">레거시 레이아웃 메서드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">레이아웃 이해도 필수 평가</a></li> +</ul> diff --git a/files/ko/learn/css/css_layout/grids/index.html b/files/ko/learn/css/css_layout/grids/index.html new file mode 100644 index 0000000000..6e4b7403f5 --- /dev/null +++ b/files/ko/learn/css/css_layout/grids/index.html @@ -0,0 +1,711 @@ +--- +title: 그리드 +slug: Learn/CSS/CSS_layout/Grids +tags: + - 그리드 + - 그리드 레이아웃 + - 씨에스에스 + - 아티클 + - 안내서 + - 자습서 + - 초보자 + - 코딩스크립팅 + - 학습 +translation_of: Learn/CSS/CSS_layout/Grids +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">CSS 그리드 레이아웃은 웹페이지를 위한 이차원 레이아웃 시스템입니다. 이 기능을 통해 콘텐츠를 행과 열에 배치할 수 있으며 복잡한 레이아웃을 직접 직관적으로 구축할 수 있는 많은 기능이 있습니다. 이 글은 페이지 레이아웃을 시작하기 위해 필요한 모든 것을 알려드립니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선결 사항:</th> + <td>HTML 기본 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 입문</a> 학습), CSS의 작동 방식 <a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS 입문 </a> 및 (<a href="/ko/docs/Learn/CSS/Styling_boxes">박스 양식 지정</a> 학습)</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>그리드 레이아웃 시스템의 근간 개념과 그리드 레이아웃 구현 방법 이해하기</td> + </tr> + </tbody> +</table> + +<h2 id="그리드_레이아웃이란_무엇인가">그리드 레이아웃이란 무엇인가?</h2> + +<p>그리드는 수평선과 수직선으로 이루어진 집합체로, 디자인 요소를 정렬할 수 있는 대상 패턴을 생성한다. 이 디자인은 페이지에서 페이지로 이동할 때 요소가 널뛰거나 너비가 바뀌지 않는 디자인 생성에 도움을 주어 웹 사이트의 일관성을 높여준다.</p> + +<p>하나의 그리드은 대게 <strong>columns</strong>, <strong>rows</strong>로 구성되며, 각 행과 열 사이에 공백이 있는데, 대게는 이를 일컬어 <strong>gutters</strong>라고 부른다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13899/grid.png" style="display: block; height: 553px; margin: 0px auto; width: 1196px;"></p> + +<h2 id="CSS에서_그리드_생성하기">CSS에서 그리드 생성하기</h2> + +<p>당신의 디자인에 필요한 그리드를 결정했다면 해당 CSS 그리드 레이아웃을 생성하고 그 위에 항목을 올려놓기 위해 CSS 그리드 레이아웃을 사용할 수 있습니다. 우리는 먼저 그리드 레이아웃의 기본 기능을 살펴보고 난 뒤 당신의 프로젝트에 맞는 간단한 그리드 시스템을 생성하는 방법을 살펴보겠습니다.</p> + +<h3 id="그리드의_정의">그리드의 정의</h3> + +<p>본격적인 출발에 앞서 텍스트 편집기 및 브라우저 상에서 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html">시작 파일</a>을 다운로드하고 엽니다(<a href="https://mdn.github.io/learning-area/css/css-layout/grids/0-starting-point.html">여기에서 라이브로 볼 수도 있습니다</a>). 예를 들어, 당신은 일부 자식 항목이 있는 컨테이너 예제를 보게됩니다. 기본값으로 이들은 일반 대열로 표시되므로 상자들은 다른 대상 요소 바로 밑에 표시됩니다. 우리는 이 단원의 첫 번째 부분은 이 (시작) 파일을 가지고 작업할 것이며, 거기에 변경을 더해 그리드가 어떻게 동작하는지 확인하게 됩니다.</p> + +<p>{{cssxref("display")}} 속성에 <code>grid</code> 값을 사용해 그리드를 규정한다. 이로써 Flexbox와 마찬가지로 그리드 레이아웃으로 전환하며, 컨테이너의 직계 자식 전체가 그리드 아이템이 됩니다. 내려받은 시작 파일 내부 CSS 부분에 다음을 추가하세요:</p> + +<pre class="brush: css">.container { + display: grid; +}</pre> + +<p>가변상자와 달리 항목 무리는 즉각적으로 모양이 달리지지 않는다. <code>display: grid</code> 선언으로 열 그리드 하나가 당신에게 주어지며, 따라서 당신의 항목들은 일반 대열 속 행동 방식처럼 다른 대상 요소 바로 밑에 계속 표시된다.</p> + +<p>그리드 같은 모양세를 확인하려면 그리드에 몇 개의 열을 추가할 필요가 있다. 여기에 200픽셀 칼럼 3개를 추가해봅시다. 길이 단위나 백분율을 사용하여 그러한 열 트랙을 만들 수 있습니다.</p> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: 200px 200px 200px; +}</pre> + +<p>CSS 규칙에 제2 선언을 추가한 다음 페이지를 다시 로드하면 생성된 그리드의 각 셀 안으로 그리드 항목 무리가 하나씩 재배열되는 것이 확인될 것이다.</p> + +<div id="격자_1"> +<div class="hidden"> +<h6 id="간단한_그리드_예제">간단한 그리드 예제</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} </pre> + +<pre class="brush: html"><div class="container"> + <div>하나</div> + <div>둘</div> + <div>셋</div> + <div>넷</div> + <div>다덧</div> + <div>여섯</div> + <div>일곱</div> +</div> </pre> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: 200px 200px 200px; +} </pre> +</div> +</div> + +<p>{{ EmbedLiveSample('그리드_1', '100%', 400) }}</p> + +<h3 id="fr_단위를_포함한_가변_그리드">fr 단위를 포함한 가변 그리드</h3> + +<p>길이와 백분율을 사용하여 그리드를 생성하는 것 외에도 <strong><code>fr</code></strong> 단위를 사용하여 그리드 행과 열을 가변적으로 조정할 수 있다. 동 단위는 그리드 컨테이너 내부에 사용 가능한 공간에서 한 개의 분할 부분과 같다.</p> + +<p>트랙 목록을 다음과 같이 정의로 변경하여, 세 개의 <code>1fr</code> 트랙을 생성한다.</p> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +}</pre> + +<p>이제 가변 트랙을 보유했다는 것이 확인될 것이다. <code>fr</code> 단위는 공간을 균등하게 분배하므로 예를 들어 다음과 같이 규정을 변경할 경우 트랙에 서로 다른 값을 부여할 수 있다:</p> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; +}</pre> + +<p>첫 번째 트랙은 이제 사용 가능한 공간의 2fr을 얻고 다른 두 트랙은 1fr을 얻음으로써 첫 번째 트랙을 더 크게 만듭니다. <code>fr</code> 단위와 고정 길이 트랙을 혼합할 수 있습니다. 이러한 경우 고정 트랙들에 필요한 공간이 제외한 이후에 해당 공간이 다른 트랙에 분배됩니다.</p> + +<div id="격자_2"> +<div class="hidden"> +<h6 id="fr_단위를_포함하는_그리드_예제">fr 단위를 포함하는 그리드 예제</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + </pre> + +<pre class="brush: html"><div class="container"> + <div>하나</div> + <div>둘</div> + <div>셋</div> + <div>넷</div> + <div>다덧</div> + <div>여섯</div> + <div>Seven</div> +</div> </pre> +</div> +</div> + +<p>{{ EmbedLiveSample('그리드_2', '100%', 400) }}</p> + +<div class="note"> +<p><strong>참고</strong>: <code>fr</code> 단위는 <em>전체</em> 공간이 아닌 <em>이용 가능한</em> 공간을 분배한다. 따라서 당신의 트랙 중 하나가 자기 내부에 뭔가 큰 공간을 차지한다면 공유할 수 있는 여유 공간이 줄어들 것이다.</p> +</div> + +<h3 id="트랙사이_간격">트랙사이 간격</h3> + +<p>우리가 트랙사이 간격을 생성하려면 열 사이 간격에 대해선 {{cssxref("grid-column-gap")}} 속성을 사용하고, 행 사이 간격에 대해선 {{cssxref("grid-row-gap")}}를 사용하고, 단번에 둘 다 설정하려면 {{cssxref("grid-gap")}}를 사용한다.</p> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + grid-gap: 20px; +} +</pre> + +<p>이러한 간격은 길이 단위 또는 백분율이 될 수 있지만, <code>fr</code> 단위는 될 수 없습니다.</p> + +<div id="격자_3"> +<div class="hidden"> +<h6 id="fr_단위를_사용하는_간단한_그리드_예제">fr 단위를 사용하는 간단한 그리드 예제</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + grid-gap: 20px; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + </pre> + +<pre class="brush: html"><div class="container"> + <div>하나</div> + <div>둘</div> + <div>셋</div> + <div>넷</div> + <div>다덧</div> + <div>여섯</div> + <div>일곱</div> +</div> +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('그리드_3', '100%', 400) }}</p> + +<div class="note"> +<p><strong>참고</strong>: <code>*gap</code> 속성은 예전에는 <code>grid-</code> 접두사를 사용하곤 했지만, 해당 CSS 규격은 변경되었다. 당시는 그들 속성을 여러 레이아웃 메서드 상에서 사용할 수 있게 하자는 취지였다. 현재 마이크로소프트 에지와 파이어폭스는 해당(grid-) 접두사가 없는 버전을 지원하며 접두사 버전은 별칭으로 유지되므로 한동안 사용하는 데 지장이 없을 것이다. 당신이 안전한 쪽을 택하려면 완전 무결한 코드를 담보하기 위해 두 가지 속성을 이중으로 추가할 수 있다.</p> +</div> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + grid-gap: 20px; + gap: 20px; +}</pre> + +<h3 id="트랙_목록의_반복">트랙 목록의 반복</h3> + +<p>반복 표기법을 사용하여 당신의 트랙 목록의 전체 또는 한 섹션을 반복할 수 있다. 트랙 목록을 다음 항목으로 변경하라.</p> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 20px; +}</pre> + +<p>이제 당신은 이전과 마찬가지로 3개의 1fr 트랙을 얻을 수 있다. 반복 함수에 전달되는 첫 번째 값은 당신이 원하는 트랙 목록의 반복 횟수가 되며, 두 번째 값은 하나의 트랙 목록이며, 이는 당신이 반복되길 원하는 일개 트랙 또는 여러 트랙이 될 수도 있다.</p> + +<h3 id="암시적_그리드와_명시적_그리드">암시적 그리드와 명시적 그리드</h3> + +<p>지금까지는 열 트랙만 지정했지만, 콘텐츠를 저장하기 위해 행도 만들어지고 있다. 이것은 명시적 그리드 대항 암시적 그리드의 한 예다. 명시적 그리드는 당신이 <code>grid-template-columns</code> 또는 <code>grid-template-rows</code>를 사용하여 생성하는 것을 말한다. 암시적 그리드가 생성되는 시점은 콘텐츠가 해당 그리드 외부에 배치될 때이다. 예를 들어 콘텐츠가 행렬 내부에 진입할 시점이 된다. 명시적 및 암시적 그리드는 가변상자의 주축 및 교차축과 유사하다.</p> + +<p>기본값으로 암시적 그리드 상에 생성된 트랙은 <code>auto</code> 크기로 되며, 이는 일반적으로 콘텐츠를 알맞게 들여놓기에 충분히 크다는 것을 의미한다. 당신이 암시적 그리드 트랙에 크기를 지정하려면 {{cssxref("grid-auto-rows")}}와 {{cssxref("grid-auto-columns")}} 속성을 사용할 수 있다. 당신의 작업 CSS에 <code>100px</code>값을 <code>grid-auto-rows</code>에 추가하게 되면 생성된 행이 이제 100 픽셀 높이가 되는 걸 보게 된다.</p> + +<div id="격자_4"> +<div class="hidden"> +<h6 id="fr_단위를_사용하는_간단한_그리드_예제_2">fr 단위를 사용하는 간단한 그리드 예제</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} </pre> + +<pre class="brush: html"><div class="container"> + <div>하나</div> + <div>둘</div> + <div>셋</div> + <div>넷</div> + <div>다덧</div> + <div>여섯</div> + <div>일곱</div> +</div> + </pre> +</div> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; + grid-gap: 20px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('그리드_4', '100%', 400) }}</p> + +<h3 id="minmax_함수">minmax() 함수</h3> + +<p>100픽셀 높이의 트랙은 100픽셀 이상의 트랙에 콘텐츠를 추가할 경우 별로 유용하지 않을 것이다. 그 경우 오버플로를 야기하니 말이다. <em>적어도</em> 100픽셀 높이의 트랙이 있고, 거기에 더 많은 콘텐츠가 들어가더라도 여전히 확장될 수 있다면 더 나을 수 있다. 웹에 관한 상당히 기본적인 사실은 어떤 것의 높이가 앞으로 얼마나 커질지 결코 모른다는 점이다. 추가 내용 또는 더 큰 글꼴 크기는 모든 면에서 픽셀 크기의 완전성을 추구하는 디자인의 경우 문제를 일으킬 수 있다.</p> + +<p><code>minmax</code>는 트랙의 최소 및 최대 크기를 설정할 수 있게 해준다. 예를 들어 <code>minmax(100px, auto)</code>. 최소 크기는 100 픽셀이지만 최대 크기는 <code>auto</code>로써 콘텐츠에 들어맞게 확장된다. 최소최대값을 사용하려면 <code>grid-auto-rows</code>를 변경해보라.</p> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); + grid-gap: 20px; +}</pre> + +<p>추가 콘텐츠를 추가하면 트랙이 확장되어 콘텐츠가 들어맞게 트랙이 확대되는 걸 보게될 겁니다. 정확히 행을 따라 확장이 일어난다는 점에 유의하십시오.</p> + +<h3 id="들어맞을_때까지_열_생성">들어맞을 때까지 열 생성</h3> + +<p>우리는 트랙 목록, 반복 표기법, <code>minmax()</code>등에 대해 우리가 배운 몇 가지를 결합하여 유용한 패턴을 만들 수 있다. 때로는 그리드 컨테이너에 들여놓기할 때 최대한 많은 열을 생성하라고 그리드에 요청할 수 있으면 도움이 된다. 우리는 그렇게 하려면 <code>repeat()</code> 표기법을 사용하여 <code>grid-template-columns</code>의 값을 설정하면 되지만, 숫자로 전달할 게 아니라 키워드 <code>auto-fill</code>을 사용했다. 동 함수의 두 번째 매개 변수의 경우 최소값은 우리가 갖고 싶은 최소 트랙 크기와 같고 최대값은 1fr이다.</p> + +<p>이를 당신의 파일에서 당장 시험해려면 아래 CSS를 사용하십시요:</p> + +<div id="격자_5"> +<div class="hidden"> +<h6 id="들어맞을_때까지_열_생성_2">들어맞을 때까지 열 생성</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + </pre> + +<pre class="brush: html"><div class="container"> + <div>하나</div> + <div>둘</div> + <div>셋</div> + <div>넷</div> + <div>다덧</div> + <div>여섯</div> + <div>일곱</div> +</div> </pre> +</div> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-auto-rows: minmax(100px, auto); + grid-gap: 20px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('그리드_5', '100%', 400) }}</p> + +<p>이것이 작동하는 까닭은 그리드가 그리드 컨테이너에 들어갈 수 있는 200픽셀의 열을 최대한 많이 만들고, 그 뒤 전체 열 사이 남은 공간이 얼마가 돼건 공유하기 때문이다. 최대치 1fr이며, 이미 알고 있듯이 트랙 사이 공간을 고르게 분배한다.</p> + +<h2 id="라인_기반_배치">라인 기반 배치</h2> + +<p>이제 우리는 그리드를 만드는 것에서 그리드에 사물을 배치하는 것으로 넘어간다. 우리의 그리드에는 항상 라인이 있으며, 이 라인은 1에서 시작하며, 문서의 쓰기 모드와 관련이 있다. 따라서 영어에서는 열 라인 1은 그리드의 왼쪽에 위치하고 행 라인 1은 맨 위에 있습니다. 아랍어 열 라인 1은 아랍어가 오른쪽에서 왼쪽으로 쓰여지기 때문에 오른쪽에 놓이게 됩니다.</p> + +<p>시작 라인과 끝 라인을 지정하여 이러한 라인에 따라 사물을 배치할 수 있다. 다음의 속성을 사용하여 그렇게 할 수 있다:</p> + +<ul> + <li>{{cssxref("grid-column-start")}}</li> + <li>{{cssxref("grid-column-end")}}</li> + <li>{{cssxref("grid-row-start")}}</li> + <li>{{cssxref("grid-row-end")}}</li> +</ul> + +<p>이들 속성은 모두 라인 번호를 값으로 가질 수 있습니다. 약칭 속성을 사용할 수도 있습니다.</p> + +<ul> + <li>{{cssxref("grid-column")}}</li> + <li>{{cssxref("grid-row")}}</li> +</ul> + +<p>이를 통해 시작 라인과 끝 라인을 한 번에 지정할 수 있으며, 전진 슬래시인 <code>/</code> 문자로 구분한다.</p> + +<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/8-placement-starting-point.html">착수 파일로 이 파일을 다운로드하세요</a> 또는 <a href="https://mdn.github.io/learning-area/css/css-layout/grids/8-placement-starting-point.html">여기 라이브로도 보세요</a>. 이미 정의된 그리드와 윤곽이 잡힌 간단한 글이 있습니다. 자동 배치에 의해 항목들이 우리가 생성한 그리드 무리의 각 셀에 하나씩 배치하는 것을 볼 수 있습니다.</p> + +<p>대신 그리드 라인을 사용하여 우리 사이트의 모든 요소를 그리드에 배치합니다. 다음 CSS 규칙을 당해 CSS의 맨 아래에 추가세요:</p> + +<pre class="brush: css">header { + grid-column: 1 / 3; + grid-row: 1; +} + +article { + grid-column: 2; + grid-row: 2; +} + +aside { + grid-column: 1; + grid-row: 2; +} + +footer { + grid-column: 1 / 3; + grid-row: 3; +}</pre> + +<div id="격자_6"> +<div class="hidden"> +<h6 id="라인_기반_배치_2">라인 기반 배치</h6> + +<pre class="brush: css"> body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; + } + + .container { + display: grid; + grid-template-columns: 1fr 3fr; + grid-gap: 20px; + } +header { + grid-column: 1 / 3; + grid-row: 1; +} + +article { + grid-column: 2; + grid-row: 2; +} + +aside { + grid-column: 1; + grid-row: 2; +} + +footer { + grid-column: 1 / 3; + grid-row: 3; +} + +header, +footer { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + +aside { + border-right: 1px solid #999; +} +</pre> + +<pre class="brush: html"><div class="container"> + <header>이것은 나의 사랑스런 블로그입니다</header> + <article> + <h1>내 글</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside> + <h2>Other things</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contact me@mysite.com</footer> +</div> </pre> +</div> +</div> + +<p>{{ EmbedLiveSample('그리드_6', '100%', 400) }}</p> + +<div class="note"> +<p><strong>참고</strong>: 마지막 열 또는 행 라인을 상대로 <code>-1</code> 값을 사용할 수 있으며, 음수값을 사용하여 끝에서 안쪽으로 카운트할 수도 있습니다. 그러나 이 값은 명시적 그리드에만 통합니다. <code>-1</code> 값은 암시적 그리드의 마지막 라인에 적용하지 못합니다.</p> +</div> + +<h2 id="grid-template-areas로_위치잡기">grid-template-areas로 위치잡기</h2> + +<p>그리드에 항목을 배치하는 다른 방식은 {{cssxref("grid-template-areas")}} 속성을 사용하여 당신의 디자인에 딸린 다양한 요소에 이름을 지정하는 것입니다.</p> + +<p>마지막 예제에서 라인 기반 위치잡기를 제거하고(또는 예제 파일을 다시 다운로드하여 새롭게 시작하거나), 다음 CSS를 추가한다.</p> + +<pre class="brush: css">.container { + display: grid; + grid-template-areas: + "header header" + "sidebar content" + "footer footer"; + grid-template-columns: 1fr 3fr; + grid-gap: 20px; +} + +header { + grid-area: header; +} + +article { + grid-area: content; +} + +aside { + grid-area: sidebar; +} + +footer { + grid-area: footer; +}</pre> + +<p>페이지를 새로고침하면, 우리가 어떤 라인 번호를 사용할 필요없이 방금 전과 같이 항목이 배치되었음을 알 수 있습니다!</p> + +<div id="격자_7"> +<div class="hidden"> +<h6 id="라인_기반_배치_3">라인 기반 배치</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +header, +footer { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + +aside { + border-right: 1px solid #999; +} + +.container { + display: grid; + grid-template-areas: + "header header" + "sidebar content" + "footer footer"; + grid-template-columns: 1fr 3fr; + grid-gap: 20px; +} + +header { + grid-area: header; +} + +article { + grid-area: content; +} + +aside { + grid-area: sidebar; +} + +footer { + grid-area: footer; +} + </pre> + +<pre class="brush: html"><div class="container"> + <header>이것은 나의 사랑스런 블로그입니다</header> + <article> + <h1>내 글</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside><h2>Other things</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contact me@mysite.com</footer> +</div> </pre> +</div> +</div> + +<p>{{ EmbedLiveSample('그리드_7', '100%', 400) }}</p> + +<p><code>grid-template-areas</code>에 대한 규칙은 다음과 같다.</p> + +<ul> + <li>그리드로 이뤄진 전체 셀을 채우도록 해야 합니다.</li> + <li>두 개의 셀을 합치려면 해당 이름을 반복하십시오.</li> + <li>셀을 비우려면 <code>.</code>(마침표)를 사용하세요.</li> + <li>영역은 반드시 직사각형이어야 한다. 예를 들어 L자 모양의 면적을 취할 수는 없다.</li> + <li>영역은 다른 위치에서 반복될 수 없습니다.</li> +</ul> + +<p>우리의 레이아웃을 마음대로 부릴 수 있습니다. 예를 들어, 콘텐츠와 사이드바 아래에만 위치하는 바닥글을 맡바닥까지 확대 점유하도록 변경할 수 있다. 이것은 CSS에서 정확히 무슨 일이 일어나고 있는지 있는 그대로 명백하게 레이아웃을 설명하는 매우 멋진 방법입니다.</p> + +<h2 id="CSS_그리드_그리드_프레임워크">CSS 그리드, 그리드 프레임워크</h2> + +<p>그리드 "프레임워크"는 대략 12 또는 16개의 열 그리드를 기반으로 하는 경향이 있으며, CSS 그리드도 포함하므로, 그러한 프레임워크를 발휘하기 위해 제 3의 타사 도구가 필요하지 않다. 이미 CSS 규격에 포함되어 있기 때문이다.</p> + +<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html">착수 파일을 다운로드하세요.</a>. 여기에는 12개의 열 그리드로 정의된 컨테이너와 이전 두 예제에서 사용된 것과 동일한 마크업이 포함되어 있습니다. 이제 라인 기반 배치를 사용하여 우리의 콘텐츠를 12열 그리드 상에 배치할 수 있습니다.</p> + +<pre class="brush: css">header { + grid-column: 1 / 13; + grid-row: 1; +} + +article { + grid-column: 4 / 13; + grid-row: 2; +} + +aside { + grid-column: 1 / 4; + grid-row: 2; +} + +footer { + grid-column: 1 / 13; + grid-row: 3; +}</pre> + +<div id="격자_8"> +<div class="hidden"> +<h6 id="CSS_그리드_그리드_시스템">CSS_그리드_그리드_시스템</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container { + display: grid; + grid-template-columns: repeat(12, minmax(0,1fr)); + grid-gap: 20px; +} + +header { + grid-column: 1 / 13; + grid-row: 1; +} + +article { + grid-column: 4 / 13; + grid-row: 2; +} + +aside { + grid-column: 1 / 4; + grid-row: 2; +} + +footer { + grid-column: 1 / 13; + grid-row: 3; +} + +header, +footer { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + +aside { + border-right: 1px solid #999; +} + </pre> + +<pre class="brush: html"><div class="container"> + <header>이것은 나의 사랑스런 블로그입니다</header> + <article> + <h1>내 글</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside><h2>Other things</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contact me@mysite.com</footer> +</div> + </pre> +</div> +</div> + +<p>{{ EmbedLiveSample('그리드_8', '100%', 400) }}</p> + +<p><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">파이어폭스 그리드 검사기</a>를 사용하여 당신의 디자인 상의 그리드 라인을 겹쳐놓으면 12개로 구성된 열 그리드가 작동하는 방법을 볼 수 있습니다.</p> + +<p><img alt="A 12 column grid overlaid on our design." src="https://mdn.mozillademos.org/files/16045/learn-grids-inspector.png" style="height: 1026px; width: 2028px;"></p> + +<h2 id="요약정리">요약정리</h2> + +<p>이 개요에서 우리는 CSS 그리드 레이아웃의 주요 특징을 둘러 보았습니다. 당신의 디자인 상에 사용할 수 있도록 합시다. CSS 규격에 대해 더 자세히 살펴보려면 그리드 레이아웃에 대한 안내서를 참조하십시오. 아래를 보면 찾아 볼 수 있습니다.</p> + +<h2 id="참조_항목">참조 항목</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS_그리드_안내서</a></li> + <li><a href="/ko/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS 그리드 검사기: 그리드 레이아웃을 검사</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="이번_단위에는">이번 단위에는</h2> + +<ul> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 소개</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">그리드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9C%84%EC%B9%98%EC%9E%A1%EA%B8%B0">위치잡기</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 레이아웃</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EB%B0%98%EC%9D%91%ED%98%95_%EB%94%94%EC%9E%90%EC%9D%B8">반응형 디자인</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EB%AF%B8%EB%94%94%EC%96%B4_%EC%BF%BC%EB%A6%AC_%EC%B4%88%EB%B3%B4%EC%9E%90_%EC%95%88%EB%82%B4%EC%84%9C">미디어 쿼리 초보자 안내서</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">레거시 레이아웃 메서드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">레이아웃 이해도 필수 평가</a></li> +</ul> diff --git a/files/ko/learn/css/css_layout/index.html b/files/ko/learn/css/css_layout/index.html new file mode 100644 index 0000000000..b184282450 --- /dev/null +++ b/files/ko/learn/css/css_layout/index.html @@ -0,0 +1,76 @@ +--- +title: CSS 레이아웃 +slug: Learn/CSS/CSS_layout +tags: + - 가변상자 + - 격자 + - 다단 + - 단위 + - 부동 + - 부동체 + - 씨에스에스 + - 안내서 + - 위치잡기 + - 조판 + - 초보자 + - 테이블 + - 학습 +translation_of: Learn/CSS/CSS_layout +--- +<div>{{LearnSidebar}}</div> + +<p>이 시점에서 우리는 이미 CSS 기본 사항, 텍스트 스타일링 방법, 콘텐츠가 안에 있는 상자를 스타일링하고 조작하는 방법을 살펴 보았습니다. 이제 뷰포트와 관련하여 상자를 올바른 장소에 배치하는 방법을 살펴볼 때입니다. 우리는 필요한 전제조건을 다루었기 때문에 이제 CSS 레이아웃에 깊이 뛰어들어 다른 디스플레이 설정, 플렉스박스, CSS 그리드, 포지셔닝과 같은 현대적인 레이아웃 도구, 그리고 당신이 여전히 알고 싶어할 만한 레거시 기술들을 살펴볼 수 있다.</p> + +<h2 id="선결사항">선결사항</h2> + +<p>이번 단위를 시작하기 전에 여러분은 이미 아래 내용을 익혔어야 합니다:</p> + +<ol> + <li><a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 단위에서 논의했듯이 HTML에 대해 기본적인 친숙도가 있어야 합니다.</li> + <li><a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS 소개</a> 단위에서 논의한 만큼 CSS 기본 사항에 대해 부담이 없어야 합니다.</li> + <li><a href="/en-US/docs/Learn/CSS/Styling_boxes">상자 스타일링</a> 방법에 대한 이해가 있어야 합니다.</li> +</ol> + +<div class="note"> +<p><strong>참고</strong>: 여러분은 본인만의 파일을 생성할 능력이 없는 컴퓨터/태블릿/다른 장치에서 작업하고 있는 경우, <a href="http://jsbin.com/">JSBin</a>나 <a href="https://thimble.mozilla.org/">Thimble</a>과 같은 온라인 코딩 프로그램 상에서 코드 예제를 시험해볼 수 있다.</p> +</div> + +<h2 id="안내서">안내서</h2> + +<p>이 글은 CSS에서 이용할 수 있는 기본 레이아웃 도구 및 기술에 대한 지침을 제공합니다. 단원 말미에 웹페이지 하나를 예시하는 방식으로 레이아웃 매서드에 대한 이해도를 자가 점검하는데 도움이 되는 학습 평가가 있습니다.</p> + +<dl> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 입문서</a></dt> + <dd>이 문서에서는 이전 모듈에서 이미 다뤘던 CSS 레이아웃 기능, 예를 들어 서로 다른 {{cssxref("display")}} 속성값의 차이 등을 복습하고, 이번 모듈에서 다룰 예정인 몇몇 CSS 개념을 소개합니다.</dd> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></dt> + <dd>웹페이지의 엘리먼트 무리는 여러분이 무언가 변화를 주기전까지는 <em>normal flow</em>(일반 대열)에 따라 또래 엘리먼트들을 배치합니다. 이 글은 일반 대열을 설명하는데, 그 걸 토대로 일반 대열 자체를 변경하는 방법을 배우겠습니다.</dd> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt> + <dd><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/%EA%B0%80%EB%B3%80%EC%83%81%EC%9E%90%EC%9D%98_%EB%8C%80%ED%91%9C%EC%A0%81%EC%9D%B8_%EC%82%AC%EC%9A%A9%EB%A1%80">Flexbox</a>는 행과 열의 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드이다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다. 이 글은 근간이 되는 내용 전체를 설명한다.</dd> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">그리드(Grids)</a></dt> + <dd>CSS 그리드 레이아웃(Grid Layout)은 웹페이지를 위한 이차원 레이아웃 시스템입니다. 이 기능을 통해 콘텐츠를 행과 열에 배치할 수 있으며 복잡한 레이아웃을 직접 직관적으로 구축할 수 있는 많은 기능이 있습니다. 이 글은 페이지 레이아웃을 시작하기 위해 필요한 모든 것을 알려드립니다.</dd> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></dt> + <dd>원래 텍스트 블록 내에서 부동 이미지를 위한 {{cssxref("float")}} 속성은 웹 페이지에서 다단 레이아웃을 생성할 용도로 가장 널리 사용되는 도구 중 하나로 자리매김했었습니다. Flexbox와 그리드의 출현과 함께 부동 속성은 이 글에서 설명하겠지만, 원래의 목적대로 돌아갔습니다.</dd> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></dt> + <dd>당신이 일반 문서 레이아웃 대열에서 엘리먼트를 끄집어 내어, 그것이 다르게 행동하게 만들수 있게 해주는 것이 위치잡기다. 예를 들어 상대 엘리먼트 위에 놓거나 브라우저 뷰 포트 내부의 동일한 위치를 항상 유지하게 해준다. 이 글은 서로 다른 {{cssxref("position")}} 값을 설명하고, 그 걸 사용하는 방법에 대해서도 설명한다.</dd> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 레이아웃</a></dt> + <dd>CSS 다단 레이아웃 규격은 신문에서 볼 수 있듯이 콘텐츠를 단으로 배치하는 방법을 제공합니다. 이 글은 그 기능을 어떻게 사용하는지 설명합니다.</dd> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/%EB%B0%98%EC%9D%91%ED%98%95_%EB%94%94%EC%9E%90%EC%9D%B8">반응형 디자인</a></dt> + <dd>웹 기반 장치에 다양한 화면 크기가 등장함에 따라 반응형 웹 디자인(RWD) 개념이 등장했습니다. 말하자면 서로 다른 화면 너비와 해상도 등에 맞게 웹 페이지가 레이아웃과 모양을 변경할 수 있는 일련의 실례를 집대성한 것입니다. 이 아이디어가 우리가 멀티 디바이스 웹에 대한 설계 방식을 바꾸게 만든 장본인입니다. 이 글에서 우리는 그 내용을 숙달하기 위해 당신이 알아야하는 주요 기술을 이해하도록 도울 것입니다.</dd> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></dt> + <dd><strong>CSS Media Query</strong>는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 반응형 웹 디자인의 핵심 부분이다. 뷰포트의 크기에 따라 서로 다른 레이아웃을 생성할 수 있기 때문이다. 그러나 예를들면 사용자는 마우스가 아닌 터치스크린을 사용하는지와 같이 실행 중인 사이트 환경에 대한 여러 내용들을 탐지하는 데도 사용할 수 있습니다. 이번 단원에서는 먼저 미디어 쿼리에 사용된 구문에 대해 배우고, 이어 해당 구문을 가공의 예제에서 사용하여 간단한 디자인이 어떻게 반응할 수 있는지 살펴보겠습니다.</dd> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">레거시 레이아웃 메서드</a></dt> + <dd>그리드 시스템은 CSS 레이아웃에서 사용되는 매우 일반적인 기능이며, CSS 그리드 레이아웃(Grid Layout) 이전에는 부동체 또는 기타 레이아웃 기능을 이용하여 그리드 레이아웃(Grid Layout)이 구현되는 경향이 있었습니다. 자신의 레이아웃을 정해진 수의 열(예를 들어 4, 6 또는 12열)이라 상상한 뒤 여러분의 콘텐츠를 그 가상의 열 안에 콘텐츠 열을 끼워맞춥니다. 이 글에서 우리는 이 오래된 메서드가 어떻게 작동하는지 탐구할 것입니다. 이는 여러분이 오래된 프로젝트에 몸을 담게 될 경우에 그들 메서드의 사용 방법에 대한 이해를 돕기 위함입니다.</dd> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></dt> + <dd> + <p>이 단위에서는 Flexbox 및 그리드를 여러분의 웹디자인을 위한 주 레이아웃 방법으로 사용할 것을 권장합니다. 그러나 이전 브라우저 또는 당신이 사용하는 메서드를 지원하지 않는 브라우저를 사용하는 사이트 방문자가 있습니다. 이런 일은 웹상에서 항상 있는 일입니다. 즉 새로운 기능이 개발됨에 따라 서로 다른 브라우저가 서로 다른 것들의 우선 순위를 정합니다. 이 글은 구식 기술의 사용자들을 차단하지 않고 현대적인 웹 기술을 사용하는 방법에 대해 설명합니다.</p> + </dd> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">학습 평가: 레이아웃 이해의 핵심 사항</a></dt> + <dd>웹페이지를 하나 예시하는 방식으로 서로 다른 레이아웃 메서드 지식을 테스트하는 학습 평가</dd> +</dl> + +<h2 id="참조_항목">참조 항목</h2> + +<dl> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">위치잡기 실례</a></dt> + <dd>이 글은 위치잡기로 당신이 할 수 있는 일의 종류를 설명하기 위해 실제 사례를 구축하는 방법을 제시합니다.</dd> +</dl> diff --git a/files/ko/learn/css/css_layout/introduction/index.html b/files/ko/learn/css/css_layout/introduction/index.html new file mode 100644 index 0000000000..aaf42a6979 --- /dev/null +++ b/files/ko/learn/css/css_layout/introduction/index.html @@ -0,0 +1,720 @@ +--- +title: CSS 레이아웃 입문서 +slug: Learn/CSS/CSS_layout/Introduction +tags: + - 가변상자 + - 격자 + - 글 + - 대열 + - 부동체 + - 씨에스에스 + - 위치잡기 + - 입문서 + - 조판 + - 초보용 + - 테이블 + - 학습 +translation_of: Learn/CSS/CSS_layout/Introduction +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">이 문서에서는 이전 모듈에서 이미 다뤘던 CSS 레이아웃 기능, 예를 들어 서로 다른 {{cssxref("display")}} 속성값의 차이 등을 복습하고, 이번 모듈에서 다룰 예정인 몇몇 CSS 개념을 소개합니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선결 사항:</th> + <td>HTML의 기초 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML에 대한 소개</a>)와 CSS 작동 방식에 대한 개념(<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS 소개</a>를 공부하세요.)</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>CSS 페이지 레이아웃 기술에 대한 개요를 제공합니다. 개별 기술은 후속 자습서에서 보다 자세하게 학습할 수 있습니다.</td> + </tr> + </tbody> +</table> + +<p>CSS 페이지 레이아웃 기술은 웹페이지에 포함될 요소들을 취합할 수 있게 해주며, 그들 요소가 일반 레이아웃 대열 상에 기본값 위치 기준과 부모 컨테이너, 또는 메인 뷰포인트 및 메인창과 비례해 어느 위치에 놓일 것인지를 제어한다. 우리가 이번 모듈에서 자세하게 다룰 페이지 레이아웃 기술은 다음과 같다.</p> + +<ul> + <li>보통 흐름(normal flow)</li> + <li>{{cssxref("display")}} 속성</li> + <li>flexbox</li> + <li>그리드</li> + <li>Floats</li> + <li>포지셔닝</li> + <li>테이블 레이아웃</li> + <li>다단 레이아웃</li> +</ul> + +<p>각각의 기술은 저마다 용도가 있고, 장단점이 있으며, 어떤 기술도 독립적인 용도를 갖추도록 설계되지는 않았다. 각 메서드가 어떤 용도로 마련된 것인지 이해하게 되면 해당 작업에 가장 적합한 도구가 어떤 것인지 파악하는 데 유리한 입지를 점하게 된다.</p> + +<h2 id="보통_흐름normal_flow">보통 흐름(normal flow)</h2> + +<p>보통 흐름(normal flow)은 당신이 페이지 레이아웃을 전혀 제어하지 않을 경우 브라우저가 기본값으로 HTML 페이지를 배치하는 방법을 말합니다. 간단한 HTML 예를 살펴봅시다:</p> + +<pre class="brush: html"><p>나는 고양이를 사랑한다.</p> + +<ul> + <li>고양이 먹이를 사세요</li> + <li>운동</li> + <li>기운내 친구야</li> +</ul> + +<p>여기가 끝!</p></pre> + +<p>기본적으로 브라우저는 이 코드를 다음과 같이 표시한다.</p> + +<p>{{ EmbedLiveSample('일반_대열', '100%', 200) }}</p> + +<p>소스 코드에 나타나는 순서 그대로 HTML 요소가 표시되는 방법에 주의하자. 요소가 상대 요소의 상위(上位)에 차곡 차곡 올려진다. 즉 첫 번째 단락이 나오고 순서가 없는 목록이 이어지고 두 번째 단락으로 이어진다.</p> + +<p>요소 집합이 상대 요소 바로 아래 나타나는 것을 <em>inline</em> 요소와 대비해 <em>block</em> 요소라고 기술한다.</p> + +<div class="note"> +<p><strong>참고</strong>: 블록 요소 상황에 해당하는 방향으로 배치되는 것을 일컽어 블록 방향이라고 기술한다. 영어와 같은 언어 상에서 블록 방향은 수직 대열을 갖게되며, 이는 가로쓰기 모드이다. 일본어와 같은 세로 쓰기 모드에 해당하는 언어 상에서 블록 방향은 수평 대열이 됩니다. (블록 관계와) 대척 관계인 인라인 방향은 (문장과 같은) 인라인 콘텐츠가 흘러가는 방향을 말한다.</p> +</div> + +<p>CSS를 사용하여 레이아웃을 만들 경우 당신은 요소 집합을 보통 흐름(normal flow)에서 벗어나도록 하는 것이다. 그러나 당신의 웹페이지의 다수 요소 집합의 경우는 보통 흐름(normal flow)이므로 정확히 당신이 필요로하는 레이아웃이 그대로 만들어질 것이다. 그런 까닭에 잘 구조화된 HTML 문서에서 시작하는 것이 아주 중요하다. 그런 뒤에 당신은 사물들이 기본값으로 배치된 방식과 대립해 싸우는게 아니라 협력해서 작업할 수 있게 된다.</p> + +<p>CSS에서 요소가 배치되는 방식을 변경시키는 메서드는 다음과 같다.</p> + +<ul> + <li><strong>{{cssxref("display")}} 속성</strong> — <code>block</code>, <code>inline</code> 또는 <code>inline-block</code>과 같은 기준 속성값은 보통 흐름(normal flow)속에서 요소가 동작하는 방식을 변경할 수 있다. (더 자세한 정보는 <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">CSS 상자 유형</a>을 참조하세요). 그 뒤에 우리에게 <code>display</code> 속성값 지정을 통해 활성화될 수 있는 완전체 레이아웃 메서드가 주어진다. 예로 <a href="/ko/docs/Learn/CSS/CSS_layout/Grids">CSS 그리드</a>와 <a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>.</li> + <li><strong>Floats</strong> — {{cssxref("float")}} 속성의 값을 예로 <code>left</code>로 적용하면 흔히 메거진 레이아웃에 속한 이미지가 텍스트를 자신의 주변에 떠있게 하는 방식과 같이 블록 수준 요소가 어떤 요소의 한 쪽 측면으로 밀려나도록 할 수 있다.</li> + <li><strong>{{cssxref("position")}} 속성은</strong> — 다른 상자 내부에 들어가 상자의 정확한 위치를 제어할 수 있게 해준다. <code>정적</code> 포지셔닝는 기본값으로 보통 흐름(normal flow) 소속이지만, 다른 속성값을 사용해 요소들이 다르게 배치되도록 만들 수 있다. 예를 들어 브라우저 뷰포트의 왼쪽 최상단에 맞춰 (또는 비례해서) 위치를 고정시킬 수 있다.</li> + <li><strong>테이블 레이아웃</strong> — 이것은 HTML 테이블 구성원에 스타일을 지정하기 위해 마련된 기능이기는 하나 <code>display: table</code>와 관련 속성을 사용하여 비테이블 요소에서도 사용될 수 있다.</li> + <li><strong>다단 레이아웃</strong> — <a href="/en-US/docs/Web/CSS/CSS_Columns">다단 레이아웃</a> 속성은 당신이 신문 지상에서 볼 수 있듯이 블록 콘텐츠를 단 형태로 배치되도록 만들 수 있다.</li> +</ul> + +<h2 id="디스플레이_속성">디스플레이 속성</h2> + +<p>CSS 상에서 페이지 레이아웃을 완성하는 주요 메서드는 <code>display</code> 속성에 포함된 모든 속성값 지정을 통해 이뤄진다. 디스플레이 속성은 요소가 표시되는 기본값 변경을 허용한다. 보통 흐름(normal flow)상의 모든 요소는 한 가지 <code>display</code> 속성값을 갖고 있으며, 해당 요소의 기본 동작 방식을 지정하는 데 사용된다. 예를 들어 영어로 된 단락은 다른 대상 요소 바로 밑에 표시되는 것은 그들 요소의 스타일이 <code>display: block</code>으로 지정되었기 때문이다. 단락 내부 어떤 텍스트 주변에 링크를 만들면 그 링크는 나머지 텍스트와 함께 인라인을 유지하며 새 줄로 넘어가는 행갈이를 하지 않는다. 그런 까닭에 {{htmlelement("a")}} 요소는 기본값으로 <code>display: inline</code>가 된다.</p> + +<p>당신은 이러한 기본값 디스플레이 동작을 변경할 수 있다. 예를 들어 {{htmlelement("li")}} 요소는 기본값으로 <code>display: block</code>가 지정되는 것으로 우리 영어 문서 상에서 다른 대상 요소 바로 밑에 표시된다는 의미다. 디스플레이 속성값을 <code>inline</code>으로 변경하면 문장 속 단어의 동작과 마찬가지로 상대 바로 옆에 표시된다. 당신이 어느 요소라도 <code>display</code> 속성값을 변경할 수 있다는 것은 그 요소들이 어떤 모습을 띄게되든 관계없이 해당 HTML 요소의 의미론적 의의를 선택할 수 있다는 뜻이다. 요소가 보여지는 방식은 변경할 수 있는 부분이다.</p> + +<p>한 항목을 <code>block</code>에서 <code>inline</code>으로 바꾸거나, 그 반대로 바꿔 기본값진열 방식을 변경할 수 있을뿐만 아니라 하나의 <code>display</code> 속성값으로 시작해서 확대된 형태의 레이아웃 메서드로 일부 있다. 그러나 그것을 사용할 경우 대게는 추가적인 속성 호출이 요구된다. 레이아웃의 목적이 무엇인지 논할 때 가장 중요한 두 가지 속성값은 <code>display: flex</code>와 <code>display: grid</code>이다.</p> + +<h2 id="flexbox">flexbox</h2> + +<p>flexbox는 <a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout">가변 상자 레이아웃</a> 모듈의 약칭으로 행이 됐건 열이 됐건 일차원 상에 사물을 배치할 경우 편리를 돕기 위해 마련되었다. flexbox를 사용하려면 당신이 진열하길 원하는 모든 요소의 부모 요소에 <code>display: flex</code>를 적용하고 나면 모든 직계 자식이 플렉스 항목이 된다. 우리는 간단한 예를 들어 이 점을 확인할 수 있다.</p> + +<p>아래 HTML 마크업을 보면<code>wrapper</code> 클래스에 해당하는 컨테이너 요소를 제공하고, 그 내부에 세 개의 {{htmlelement("div")}} 요소가 있다. 기본값으로 이들 요소들은 영어 문서 상에서 블록 요소로 상대 요소 밑에 표시된다.</p> + +<p>그러나 부모 요소에 <code>display: flex</code>를 부여하면 세개 항목이 자체적으로 단으로 배열된다. 그렇게 된 까닭은 그들 요소들이 <em>가변 항목</em>이 되었을 뿐만 아니라 flexbox가 그들 요소에 부여한 일부 초기값을 사용했기 때문이다. 그들은 행으로 표시되었는데, 그 까닭은 {{cssxref("flex-direction")}}의 초기값이 <code>row</code>이기 때문이다. 그들은 모두 항목 무리에서 키가 가장 큰 높이로 연장된 모양새가 되는데, 그 까닭은 {{cssxref("align-items")}} 속성의 초기값이 <code>stretch</code>이기 때문이다. 즉, 항목 무리가 가변 컨테이너의 높이에 맞춰 연장된다는 것으로 이번 경우에 키가 가장 큰 항목이 기준으로 정해진다. 항목 무리 전체가 가변 컨테이너의 초입에 맞춰 정렬하면서 행의 말미에 여분의 공간이 남겨진다.</p> + +<div id="가변_1"> +<div class="hidden"> +<h6 id="flexbox_예제_1">flexbox 예제 1</h6> + +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + </pre> +</div> + +<pre class="brush: css">.wrapper { + display: flex; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">하나</div> + <div class="box2">둘</div> + <div class="box3">셋</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('가변_1', '300', '200') }}</p> + +<p>가변 콘테이너에 적용될 수 있는 상기한 속성이외에도 가변 항목에 적용될 수 있는 속성이 있다. 다른 것들 중에서 그들 속성들은 항목이 변형되는 방식을 변경할 수 있는데, 항목을 여유 공간에 맞춰 연장하거나 수축될 수 있다.</p> + +<p>이에 대한 간단한 예로 자식 항목 전체에 대한 {{cssxref("flex")}} 속성에 대해 속성값 <code>1</code>을 부가할 수 있다. 그로 인해 컨테이너 말미에 공간을 남기지 않고 항목 무리 전체가 확대되거나 채워지도록 만든다. 항목 무리보다 많은 공간이 있을 경우는 늘어날 것이고 적은 공간이 있으면 축소될 것이다. 게다가 HTML 마크업에 다른 요소를 추가하면 그 대상 요소를 위한 공간 생성을 위해 항목 무리 전체가 축소될 것이다. 그들은 그 요소가 뭐가됐건 동일한 공간 점유를 위해 크기가 조종된다.</p> + +<div id="가변_2"> +<div class="hidden"> +<h6 id="flexbox_예제_2">flexbox 예제 2</h6> + +<pre class="brush: css"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css">.wrapper { + display: flex; +} + +.wrapper > div { + flex: 1; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">하나</div> + <div class="box2">둘</div> + <div class="box3">셋</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('가변_2', '300', '200') }}</p> + +<div class="note"> +<p><strong>참고</strong>: 이 안내서는 flexbox 상에서 있을 수 있는 내용에 대한 짧은 입문서였다. 더 자세한 내용은 <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a> 편을 참조하세요.</p> +</div> + +<h2 id="그리드_레이아웃">그리드 레이아웃</h2> + +<p>가변 상자는 일차원 레이아웃을 위해 마련되었지만, 그리드 레이아웃은 이차원 레이아웃을 위해 마련되었다. 즉 행과 열에 포함된 사물들을 배열한다.</p> + +<p>반복되는 얘기지만, 디스플레이 속성에 <code>display: grid</code>라는 특정 값을 지정하면 그리드 레이아웃으로 전환할 수 있다. 아래 예를 보면 가변 요소 사례에 비슷한 마크업을 사용했다. 하나의 컨테이너와 몇몇 자식 요소가 딸려있다. 우리는 <code>display: grid</code> 사용뿐만 아니라 {{cssxref("grid-template-rows")}}와 {{cssxref("grid-template-columns")}}라는 개별 속성을 활용하여 부모 요소를 상대로 일부 행과 열 궤도를 정의한다. 여기 각기 <code>1fr</code>값이 지정된 3열과 <code>100px</code>이 지정된 2행을 정의했다. 자식 요소 상에 굳이 어떤 규칙도 적용할 필요없이, 그 요소들이 우리가 생성한 그리드 안에 자동적으로 자리잡게 된다.</p> + +<div id="격자_1"> +<div class="hidden"> +<h6 id="그리드_예제_1">그리드 예제 1</h6> + +<pre class="brush: css"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 100px; + grid-gap: 10px; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">하나</div> + <div class="box2">둘</div> + <div class="box3">셋</div> + <div class="box4">넷</div> + <div class="box5">다섯</div> + <div class="box6">여섯</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('격자_1', '300', '330') }}</p> + +<p>그리드가 주어지고 나면 앞서 확인했듯 당신의 항목 무리를 그리드 상에 자동 배치하는 동작 방식이 아니라 명시적으로 위치를 지정할 수 있다. 아래 두 번째 예제에서 동일한 그리드를 정의했지만, 이번에는 세개의 자식 항목이 주어졌다. 우리는 {{cssxref("grid-column")}}와 {{cssxref("grid-row")}}를 사용해서 각 항목의 행과 열의 시작과 끝을 지정했다. 이로써 항목 무리가 차지하는 공간이 여러 궤도에 걸쳐 확대되었다.</p> + +<div id="격자_2"> +<div class="hidden"> +<h6 id="그리드_예제_2">그리드 예제 2</h6> + +<pre class="brush: css"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 100px; + grid-gap: 10px; +} + +.box1 { + grid-column: 2 / 4; + grid-row: 1; +} + +.box2 { + grid-column: 1; + grid-row: 1 / 3; +} + +.box3 { + grid-row: 2; + grid-column: 3; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">하나</div> + <div class="box2">둘</div> + <div class="box3">셋</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('격자_2', '300', '330') }}</p> + +<div class="note"> +<p><strong>참고</strong>: 이 두 예제는 그리드 레이아웃의 일부분일 뿐이며, 자세한 내용은 <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">그리드 레이아웃</a></p> +</div> + +<p>이 가이드의 나머지 부분은 페이지의 주요 레이아웃 구조로 보기엔 덜 중요하지만 특정 작업을 수행하는 데 여전히 도움이 될 수 있는 다른 레이아웃 방법을 다룬다. 각 레이아웃 작업의 특성을 이해함으로써 당신이 디자인 하는 특정 구성 요소를 들여다 볼 때 거기에 가장 적합한 레이아웃 유형이 종종 명확해 진다는 것을 조만간 알게 될 것이다.</p> + +<h2 id="Floats">Floats</h2> + +<p>요소를 부동시키면 보통 흐름(normal flow)속에 속한 해당 요소와 해당 요소를 뒤따르는 블록 수준 요소의 동작이 변경된다. 요소는 왼쪽 또는 오른쪽으로 이동하고 보통 흐름(normal flow)에서 벗어나게되며 주변 콘텐츠는 부유된 항목 주위로 떠다닙니다.</p> + +<p>이 {{cssxref("float")}} 속성은 네 가지 값을 가질 수 있다:</p> + +<ul> + <li><code>left</code> — 요소를 왼쪽에 띄웁니다.</li> + <li><code>right</code> — 요소를 오른쪽에 띄웁니다.</li> + <li><code>none</code> — 부동 여부를 전혀 지정하지 않는다. 이것이 기본값이다.</li> + <li><code>inherit</code> — 부동 속성의 값이 요소의 부모 요소에서 상속된다고 지정한다.</li> +</ul> + +<p>아래 예제에서 우리는 <code><div></code> 왼쪽을 띄우고 오른쪽에 {{cssxref("margin")}}을 주어 텍스트를 <code><div></code> 요소 자리에서 밀어낸다. 이것은 우리에게 텍스트가 그 상자를 감싸는 효과를 부여하며, 이는 현대 웹 디자인에서 사용되는 Floats에 대해 알아야할 내용의 대부분이다.</p> + +<div id="부동_1"> +<div class="hidden"> +<h6 id="Floats_예제">Floats 예제</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +p { + line-height: 2; + word-spacing: 0.1rem; +} + +.box { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + border-radius: 5px; +} +</pre> +</div> + +<pre class="brush: html"><h1>간단한 부동 예제</h1> + +<div class="box">부동</div> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +</pre> + +<pre class="brush: css"> +.box { + float: left; + width: 150px; + height: 150px; + margin-right: 30px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('부동_1', '100%', 600) }}</p> + +<div class="note"> +<p><strong>참고</strong>: Floats에 대한 설명은 <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">부동 및 해제</a> 속성 편에서 충분히 다룹니다. flexbox 및 그리드 레이아웃과 같은 기술이 나오기 이전에 Floats는 열 레이아웃을 만드는 메서드로 사용되었다. 웹에서 이러한 메서드와 대면하는 경우도 여전히 있다. <a href="/ko/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">레거시 레이아웃 메서드</a>에 관한 단원에서 그 내용을 다루게 된다.</p> +</div> + +<h2 id="포지셔닝_기술">포지셔닝 기술</h2> + +<p>포지셔닝를 통해 보통 흐름(normal flow)속에 있는 요소를 예상되는 기존의 배치 위치에서 벗어나 다른 위치로 이동시킬 수 있다. 포지셔닝는 메인 페이지 레이아웃을 생성하는 메서드가 아니라 페이지의 특정 항목의 위치를 관리하고 미세 조정하는 것에 관한 것이다.</p> + +<p>그러나 {{cssxref("position")}} 속성에 의존하는 특정 레이아웃 패턴을 상대할 경우 유용한 기술도 있다. 포지셔닝를 이해하는 것은 또한 보통 흐름(normal flow)을 이해하고, 항목을 보통 흐름(normal flow)에서 벗어나게 한다는 것이 무엇인지를 이해하는 데 도움이 된다.</p> + +<p>당신이 알아야 할 다섯 가지 포지셔닝 유형이 있다.</p> + +<ul> + <li><strong>정적 포지셔닝</strong>는 모든 요소에 기본값으로 부여된 속성이다. 즉, "문서 레이아웃 대열에 속하는 요소를 기존의 일반 위치에 들여놓는 것으로 여기서 특별할 것은 없다."라는 것을 의미한다.</li> + <li><strong>상대 포지셔닝</strong>페이지상의 요소 위치를 수정하여 그것을 보통 흐름(normal flow)상의 기존 위치와 비례해 이동토록 하는 것으로 페이지의 다른 요소와 겹치는 것도 해당한다.</li> + <li><strong>절대 포지셔닝</strong>는 요소를 페이지의 일반 레이아웃 대열에서 완전히 벗어난 곳으로 이동시켜 자체적인 개별 레이어 상에 놓는 것과 같다. 그곳으로부터 페이지의 <code><html></code> 요소(또는 가장 근접 위치에 있는 조상 요소)의 가장자리 기준에서 비례하는 위치에 고정할 수 있다. 이것은 다른 콘텐츠 패널이 서로 다른 요소 위에 놓여야 하는 동시에 표시 및 감추기를 맘대로 하는 탭 상자의 경우나 기본적으로 화면에서 벗어나지만 컨트롤 단추를 사용하여 화면상에 슬라이더 전환이 되도록 만들어진 정보 패널과 같은 복잡한 레이아웃 효과를 만드는 데 유용하다.</li> + <li><strong>고정 포지셔닝</strong>는 다른 요소가 아닌 브라우저 뷰포트 기준과 비례해 요소를 고정하는 것을 제외하고는 절대 포지셔닝와 매우 유사합니다. 이것은 나머지 콘텐츠 부분이 스크롤해야 보이는 화면 상에서 항상 동일한 위치에 머물러야 하는 영구적인 탐색 메뉴와 같은 효과를 만드는 데 유용합니다.</li> + <li><strong>스티키 포지셔닝</strong>는 하나의 요소를 <code>position: static</code>와 같이 작동하다가 뷰포트 기준에서 사전에 정의된 간격띄우기 지점에 도달한 순간 이후부터는 <code>position: fixed</code>와 같이 같이 작동하는 새로운 포지셔닝 메서드이다.</li> +</ul> + +<h3 id="간단한_포지셔닝_예제">간단한 포지셔닝 예제</h3> + +<p>이러한 페이지 레이아웃 기술에 친숙해지도록 몇 가지 간단한 예를 보여드리겠습니다. 예제는 다음과 같이 모두 동일한 HTML 특성을 갖고 있다:</p> + +<pre class="brush: html"><h1>포지셔닝</h1> + +<p>나는 기본 블록 수준 요소입니다.</p> +<p class="positioned">나는 기본 블록 수준 요소입니다.</p> +<p>나는 기본 블록 수준 요소입니다.</p></pre> + +<p>이 HTML은 다음과 같은 CSS를 기본값으로 사용하여 스타일링됩니다.</p> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 10px; + border-radius: 5px; +} +</pre> + +<p>렌더링된 출력은 다음과 같다:</p> + +<p>{{ EmbedLiveSample('간단한_포지셔닝_예제', '100%', 300) }}</p> + +<h3 id="상대_포지셔닝">상대 포지셔닝</h3> + +<p>상대 포지셔닝 통해 기본 대열 속에서 예상되는 기본값으로 주어지는 위치로부터 항목을 간격띄우기할 수 있다. 이것은 아이콘을 약간 아래로 이동하여 텍스트 레이블에 맞춰 정렬하는 것과 같은 작업을 수행할 수 있다는 의미다. 이를 위해 다음 규칙을 추가하여 상대적인 위치를 추가할 수 있습니다:</p> + +<pre class="brush: css">.positioned { + position: relative; + top: 30px; + left: 30px; +}</pre> + +<p>여기서 우리는 중간 단락에 {{cssxref("position")}} 값을<code>relative</code>로 부여하고(이것은 자체적으로 아무것도하지 않는다) 아울러 {{cssxref("top")}}와 {{cssxref("left")}} 속성도 추가한다. 이것은 영향을 받는 요소를 아래로 그리고 오른쪽으로 이동시키는 역할을 한다. 이것은 당신이 기대했던 것과 반대되는 것처럼 보일 수 있지만, 그것을 왼쪽과 상단면에서 밀리는 요소로 생각할 필요가 있다.</p> + +<p>이 코드를 추가하면 다음과 같은 결과가 나타난다.</p> + +<div id="상대적_1"> +<div class="hidden"> +<h6 id="상대적_포지셔닝_예제">상대적 포지셔닝 예제</h6> + +<pre class="brush: html"><h1>상대적 포지셔닝</h1> + +<p>나는 기본 블록 수준 요소입니다.</p> +<p class="positioned">이것은 내가 상대적으로 포지셔닝한 요소입니다.</p> +<p>나는 기본 블록 수준 요소입니다.</p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 10px; + border-radius: 5px; +} +</pre> +</div> + +<pre class="brush: css">.positioned { + position: relative; + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('상대적_1', '100%', 300) }}</p> + +<h3 id="절대_포지셔닝">절대 포지셔닝</h3> + +<p>절대 포지셔닝는 보통 흐름(normal flow)에서 요소를 완전히 제거하고 컨테이너 블록의 가장자리로부터 간격띄우기값(오프셋)을 사용하여 배치하는 데 사용된다.</p> + +<p>위치 이동이 없던 원래의 예제로 회귀해서 절대 포지셔닝를 구현하기 위해 다음과 같은 CSS 규칙을 추가할 수 있다:</p> + +<pre class="brush: css">.positioned { + position: absolute; + top: 30px; + left: 30px; +}</pre> + +<p>여기서 우리는 중간 단락에 <code>absolute</code> {{cssxref("position")}} 값과 이전과 동일한 {{cssxref("top")}}과 {{cssxref("left")}}속성을 부여한다. 그러나 이 코드를 추가하면 다음과 같은 결과가 나온다.</p> + +<div id="절대_1"> +<div class="hidden"> +<h6 id="절대_포지셔닝_예제">절대 포지셔닝 예제</h6> + +<pre class="brush: html"><h1>절대 포지셔닝</h1> + +<p>나는 기본 블록 수준 요소입니다.</p> +<p class="positioned">이것은 내가 절대적으로 포지셔닝한 요소입니다.</p> +<p>나는 기본 블록 수준 요소입니다.</p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 10px; + border-radius: 5px; +} +</pre> +</div> + +<pre class="brush: css">.positioned { + position: absolute; + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('절대_1', '100%', 300) }}</p> + +<p>이건 아주 달라! 위치 지정 요소는 이제 페이지 레이아웃의 나머지 부분과 완전히 분리되어 그 것 위에 놓여있다. 나머지 두 단락은 이제 원래 위치에 있던 자기 형제가 존재하지 않은 듯이 나란히 놓여 있다. {{cssxref("top")}}과 {{cssxref("left")}} 속성은 상대적 위치 지정 요소에 대해 미치는 것과는 다른 영향을 절대적 위치 지정 요소에 대해 미친다. 이 경우 간격띄우기값(오프셋)은 페이지의 좌측 최상단을 기준으로 계산되었다. 여기서 컨테이너가 되는 부모 요소를 변경할 수 있으며 <a href="/en-US/docs/Learn/CSS/CSS_layout/위치잡기">포지셔닝</a>에 관한 단원에서 해당 내용을 살펴보겠다.</p> + +<h3 id="고정_포지셔닝">고정 포지셔닝</h3> + +<p>고정 포지셔닝는 절대 포지셔닝와 같은 방식으로 문서 대열에서 요소를 제거한다. 그러나 컨테이너 위치로부터 간격띄우기를 적용하는 게 아니라 뷰포트를 기준으로 적용된다. 해당 항목이 뷰포트 기준에 비례하여 고정되기 때문에 해당 항목 아래로 페이지가 스크롤할 때 고정된 메뉴 항목과 같은 효과를 생성할 수 있다.</p> + +<p>이번 예제의 경우 페이지를 스크롤할 수 있도록 텍스트 형태의 세 단락으로 구성된 HTML에 상자 하나를 <code>position: fixed</code>로 지정했다.</p> + +<pre class="brush: html"><h1>고정 포지셔닝</h1> + +<div class="positioned">고정</div> + +<p>단락 1.</p> +<p>단락 2.</p> +<p>단락 3.</p> +</pre> + +<div id="고정_1"> +<div class="hidden"> +<h6 id="고정_포지셔닝_예제">고정 포지셔닝 예제</h6> + +<pre class="brush: html"><h1>고정 포지셔닝</h1> + +<div class="positioned">고정</div> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +</pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css">.positioned { + position: fixed; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('고정_1', '100%', 200) }}</p> + +<h3 id="흡착_포지셔닝">흡착 포지셔닝</h3> + +<p>흡착 포지셔닝는 우리의 선택을 기다리며 대기중인 마지막 포지셔닝 메서드다. 이것은 기본값인 정적 포지셔닝와 고정 포지셔닝의 혼합형이다. 항목이 <code>position: sticky</code>로 지정된 경우 해당 항목은 뷰포트 기준에서 우리가 정의한 간격띄우기 지점에 도달하기 전까지 보통 흐름(normal flow) 상에서 스크롤된다. 그 지점에 마치 <code>position: fixed</code>가 적용된 것처럼 "철썩" 붙게 된다.</p> + +<div id="흡착_1"> +<div class="hidden"> +<h6 id="흡착_포지셔닝_예제">흡착 포지셔닝 예제</h6> + +<pre class="brush: html"><h1>흡착 포지셔닝</h1> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<div class="positioned">흡착</div> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css">.positioned { + position: sticky; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('흡착_1', '100%', 200) }}</p> + +<div class="note"> +<p><strong>참고</strong>: 포지셔닝에 대해 더 알아보고 싶다면 <a href="/kr/docs/Learn/CSS/CSS_layout/위치잡기">포지셔닝</a> 단원을 보라.</p> +</div> + +<h2 id="테이블_레이아웃">테이블 레이아웃</h2> + +<p>HTML 테이블은 표로 나타낸 데이터를 표시하기에는 무난했다. 그러나 (수년 전, 심지어 기초적인 CSS가 여러 브라우저에서 안정적으로 지원되기 이전에도) 웹 개발자들은 머리글, 바닥글, 서로 다른 단 등을 여러가지 테이블 행과 열에 집어넣어 웹페이지 전체 레이아웃을 짜는데 테이블을 사용하기도 했다. 이것은 당시에는 먹혔지만, 많은 문제가 상존했다. 테이블 레이아웃은 유연하지 않고, 마크업이 과도하고, 디버그하기 어렵고, 의미론적으로 맞지 않았다(예: 스크린 리더 사용자는 테이블 레이아웃을 탐색하는 데 문제가 있다).</p> + +<p>테이블 마크업을 사용할 때 테이블이 웹 페이지에 보여지는 방식의 재원(財源)은 테이블 레이아웃을 정의하는 CSS 속성 집합이다. 이러한 속성은 테이블이 아닌 요소를 배치하는 데 사용할 수 있으며, 이 용법은 때때로 "CSS 테이블 용법"으로 기술된다.</p> + +<p>아래 예는 이러한 용법을 보여준다. 레이아웃에 CSS 테이블을 사용하는 것은 이 시점에서 낡은 메서드로 간주되어야 한다. flexbox 또는 그리드 레이아웃이 지원되지 않던 매우 오래된 브라우저를 사용하는 사람의 경우에 해당된다.</p> + +<p>예제를 살펴보자. 우선, HTML 양식을 생성하는 몇 가지 간단한 마크업 사례다. 개별 입력 요소에는 레이블이 달려있으며, 단락 안에는 캡션도 포함시켰다. 각 한 쌍을 이루는 레이블과 입력 요소는 레이아웃 목적에 따라 {{htmlelement("div")}} 요소에 둘러싸여 있다.</p> + +<pre class="brush: html"><form> + <p>우선, 이름과 나이를 말씀해주세요</p> + <div> + <label for="이름">이름:</label> + <input type="text" id="이름"> + </div> + <div> + <label for="성">성:</label> + <input type="text" id="성"> + </div> + <div> + <label for="나이">나이:</label> + <input type="text" id="나이"> + </div> +</form></pre> + +<p>이제 우리 예제에 해당되는 CSS 차례다. CSS의 대부분은 {{cssxref("display")}} 속성을 사용한 것을 제외하면 대체로 평범한 내용이다. {{htmlelement("form")}}와 복수의 {{htmlelement("div")}}, {{htmlelement("label")}}, {{htmlelement("input")}}는 각기 테이블과 복수의 테이블 행, 테이블 셀을 표시하라는 주문을 받는다. 기본적으로 그들은 HTML 테이블 마크업과 같이 동작하며 기본값으로 레이블과 입력 양식 요소를 멋지게 정렬시킨다. 이제 우리가 해야할 일은 모든 요소가 좀더 멋지게 보이도록 크기와 여백을 조금 추가하는 것이다. 그러면 일이 마무리된다.</p> + +<p>눈치 챘겠지만, 캡션 단락은 <code>display: table-caption;</code>가 부여되어 테이블 {{htmlelement("caption")}}과 같이 동작하게 만들었고, 또한 <code>display: table-caption;</code>를 부여하며 해당 마크업이 소스 코드에서 <code><input></code> 요소보다 선행함에도 해당 캡션이 스타일 목적에 따라 테이블 하단에 놓이도록 했다. 이렇듯 약간의 유연성이 허용된다.</p> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +form { + display: table; + margin: 0 auto; +} + +form div { + display: table-row; +} + +form label, form input { + display: table-cell; + margin-bottom: 10px; +} + +form label { + width: 200px; + padding-right: 5%; + text-align: right; +} + +form input { + width: 300px; +} + +form p { + display: table-caption; + caption-side: bottom; + width: 300px; + color: #999; + font-style: italic; +}</pre> + +<p>이것은 우리에게 다음과 같은 결과를 제공합니다.</p> + +<p>{{ EmbedLiveSample('테이블_레이아웃', '100%', '170') }}</p> + +<p>이 예제 역시 여기 <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">CSS 테이블 예제</a>에서 라이브로 볼 수 있고, 이곳 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">소스 코드</a>에서도 역시 볼 수 있다.</p> + +<h2 id="다단_레이아웃">다단 레이아웃</h2> + +<p>다단 레이아웃 모듈은 텍스트가 신문지상에 나열되는 방식과 비슷하게 내용을 단 형태로 레이아웃할 수 있는 방법을 제공한다. 단을 따라 위아래 읽기는 사용자가 위아래로 스크롤하도록 강제하길 원하지 않는다면 웹 상황에서 덜 유용하다. 다만 콘텐츠를 단에 배치하는 것은 유용한 기술일 수 있다.</p> + +<p>한 블록을 다단 컨테이너 속으로 들여넣으려면 {{cssxref("column-count")}} 속성을 사용하여 브라우저에게 우리가 몇 단으로 나누길 원하는지 밝히거나 {{cssxref("column-width")}} 속성을 사용하여 브라우저에게 몇 단이 됐건 최소 해당 너비만한 단으로 컨테이너를 채우라고 말하면 된다.</p> + +<p>아래 예제에서 내부에 일명 <code>container</code> 클래스 해당하는 <code><div></code> 요소를 포함하는 HTML 블록을 가지고 시작한다.</p> + +<pre class="brush: html"><div class="container"> + <h1>다단 레이아웃</h1> + + <p>단락 1.</p> + <p>단락 2.</p> + +</div> +</pre> + +<p>우리는 해당 컨테이너에 200픽셀의 단 너비를 사용해서 브라우저가 컨테이너에 맞아 떨어지도록 최대 200픽셀의 단을 만들며, 그 뒤에 생성된 단 사이 나머지 공간을 나눠쓰게 된다.</p> + +<div id="다단_1"> +<div class="hidden"> +<h6 id="다단_예제">다단 예제</h6> + +<pre class="brush: html"> <div class="container"> + <h1>다단 레이아웃</h1> + + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + + </div> + </pre> + +<pre class="brush: css">body { max-width: 800px; margin: 0 auto; } </pre> +</div> + +<pre class="brush: css"> .container { + column-width: 200px; + }</pre> +</div> + +<p>{{ EmbedLiveSample('다단_1', '100%', 200) }}</p> + +<h2 id="요약정리">요약정리</h2> + +<p>이번 글에서는 알아야 할 모든 레이아웃 기술에 대한 요약을 간단하게 제공했습니다. 개별 기술에 대한 자세한 내용을 계속 읽어보세요!</p> + +<p>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="이번_단위에는">이번 단위에는</h2> + +<ul> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 소개</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">보통 흐름(normal flow)</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">그리드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">포지셔닝</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 레이아웃</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Responsive_Design">반응형 디자인</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EB%AF%B8%EB%94%94%EC%96%B4_%EC%BF%BC%EB%A6%AC_%EC%B4%88%EB%B3%B4%EC%9E%90_%EC%95%88%EB%82%B4%EC%84%9C">미디어 쿼리 초보자 안내서</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">레거시 레이아웃 메서드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">이전 브라우저 지원</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">레이아웃 이해도 필수 평가</a></li> +</ul> diff --git a/files/ko/learn/css/css_layout/legacy_layout_methods/index.html b/files/ko/learn/css/css_layout/legacy_layout_methods/index.html new file mode 100644 index 0000000000..aca6565fd7 --- /dev/null +++ b/files/ko/learn/css/css_layout/legacy_layout_methods/index.html @@ -0,0 +1,588 @@ +--- +title: 레거시 조판 메서드 +slug: Learn/CSS/CSS_layout/Legacy_Layout_Methods +tags: + - 격자 시스템 + - 레거시 + - 부동체 + - 씨에스에스 + - 안내서 + - 조판 + - 초보자 + - 학습 +translation_of: Learn/CSS/CSS_layout/Legacy_Layout_Methods +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p> + +<p class="summary">격자 시스템은 씨에스에스 조판에서 사용되는 매우 일반적인 기능이며, 씨에스에스 격자 조판 이전에는 부동체 또는 기타 조판 기능을 이용하여 격자 조판이 구현되는 경향이 있었습니다. 당신의 조판을 정해진 수의 열(예를 들어 4, 6 또는 12열)이라 상상한 뒤 당신의 콘텐츠 열을 그 가상의 열 안에 끼워맞춥니다. 이 문서에서 우리는 이 오래된 메서드가 어떻게 작동하는지 탐구할 것입니다. 이는 여러분이 오래된 프로젝트에 몸을 담게 될 경우에 그들 메서드의 사용 방법에 대한 이해를 돕기 위함입니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선결 사항:</th> + <td>HTML 기본 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">에이치티엠엘 입문</a> 학습), 씨에스에스의 작동 방식 <a href="/ko/docs/Learn/CSS/Introduction_to_CSS">씨에스에스 입문 </a> 및 (<a href="/ko/docs/Learn/CSS/Styling_boxes">박스 양식 지정</a> 학습)</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>씨에스에스 격자 조판 이전에 사용된 격자 조판 시스템의 기본 개념을 브라우저에서 사용할 수 있습니다.</td> + </tr> + </tbody> +</table> + +<h2 id="씨에스에스_격자_조판_이전의_조판_및_격자_시스템">씨에스에스 격자 조판 이전의 조판 및 격자 시스템</h2> + +<p>씨에스에스가 아주 최근까지 내장된 격자 시스템을 갖고 있지 않았고, 그 대신 격자와 같은 디자인 생성을 위해 최적화에 못 미치는 다양한 방법을 사용했다니 디자인 배경의 경력자 관점에서 보면 놀랍게 보일 듯합니다. 우리는 이제 이것을 "래거시"라고 부릅니다.</p> + +<p>새로운 프로젝트의 경우 모든 조판의 기초를 형성하기 위해 대체로 씨에스에스 격자 조판이 하나 이상의 다른 현대 조판 메서드와 연동되어 사용됩니다. 그러나 여러분은 이러한 레거시 메서드를 사용하는 "격자 시스템"을 수시로 접하게 될겁니다. 그들 레거시 메서드의 작동 방식, 그리고 씨에스에스 격자 조판과 다른 이유에 대해 이해할 가치가 있습니다.</p> + +<p>이번 단원은 부동체와 가변상자 작동 방식을 기반으로 한 격자 시스템과 격자 프레임워크가 어떻게 작동하는지 설명합니다. 당신이 격자 조판을 공부한 상태라면 이 모든 것이 얼마나 복잡해 보이는지 놀랄 겁니다! 이러한 지식은 새로운 메서드를 지원하지 않는 브라우저를 위한 대체 코드를 작성해야 할 경우에 도움이 될 뿐만 아니라 이러한 유형의 시스템을 사용하는 기존 프로젝트에서 작업할 수 있게 해줄 것입니다.</p> + +<p>우리가 이들 격자 시스템을 탐구할 때, 그것들 중 어느 것도 씨에스에스 격자 조판(CSS Grid Layout)이 격자를 만드는 방식으로 격자를 만들지는 않는다는 사실을 염두에 두어야 합니다. 그들은 항목의 크기를 부여하고, 항목 무리 주변을 밀어내어 격자 <em>모양</em>처럼 정렬해 보여주는 식으로 작동합니다.</p> + +<h2 id="2열_조판">2열 조판</h2> + +<p>가능한 가장 간단한 예시인 두 개의 열 조판으로 시작하겠습니다. 아래 내용을 따라하려면 당신의 컴퓨터에 <code>index.html</code> 파일을 새로 작성하여, 거기에 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">간단한 HTML 템플릿</a>으로 채우고, 파일 내부의 적절한 위치에 아래 코드를 삽입하면 됩니다. 해당 섹션의 맨 아래에는 최종 코드가 어떻게 생겼는지에 대한 실제 예제가 있습니다.</p> + +<p>우선, 우리는 칼럼에 넣을 몇 가지 콘텐츠가 필요합니다. 현재 에이치티엠엘의 바디 내부에 있는 것을 아래 내용으로 대체하십시요:</p> + +<pre class="brush: html"><h1>2열 조판 예제</h1> +<div> + <h2>첫 번째 열</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +</div> + +<div> + <h2>두 번째 열</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</div></pre> + +<p>각 열에는 자체 콘텐츠를 포함하게 되고, 모든 콘텐츠를 한꺼번에 조작할 수 있게 해주는 외부 요소가 필요합니다. 이번 예제에서 우리는 {{htmlelement("div")}}를 선택했지만, 당신은 {{htmlelement("article")}}와 복수의 {{htmlelement("section")}}, {{htmlelement("aside")}}, 그 밖에 무엇이 됐건 한층 의미적으로 적절한 것을 선택할 수 있습니다.</p> + +<p>이제 씨에스에스 내용입니다. 우선 다음을 HTML에 적용해 몇 가지 기본적인 설정을 제공합니다.</p> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +}</pre> + +<p>에이치티엠엘 바디 요소는 900px의 너비가 될 때까지 뷰포트 너비의 90%를 차지할 것이며, 이 경우 그 너비에 고정될 것이며, 뷰포트 안에 중심부에 자신을 위치시킬 겁니다. 기본값으로 바디 요소의 자녀들({{htmlelement("h1")}}와 두 개의 {{htmlelement("div")}}는 바디 너비 100%까지 확장될 것입니다. 두 개의 {{htmlelement("div")}}가 나란히 부동하길 원한다면, 자녀 요소의 너비를 부모 요소의 너비의 총합계가 100% 또는 그 이하로 설정해 상대 요소와 나란히 들어맞을 수 있도록 해야 합니다. 다음을 당신의 씨에스에스의 맨 아래에 추가하세요:</p> + +<pre class="brush: css">div:nth-of-type(1) { + width: 48%; +} + +div:nth-of-type(2) { + width: 48%; +}</pre> + +<p>여기서 우리는 두 요소의 너비를 부모 요소의 48%로 설정했습니다. 너비의 총합은 96%로써 결국 4% 남는 공간이 두 열 사이의 배수구 역할을 하게 됩니다. 이제 우리는 열을 부동(浮動)시킬 필요가 있습니다. 다음과 같이:</p> + +<pre class="brush: css">div:nth-of-type(1) { + width: 48%; + float: left; +} + +div:nth-of-type(2) { + width: 48%; + float: right; +}</pre> + +<p>이 모든 것을 종합하면 다음과 같은 결과가 나와야 합니다.</p> + +<div id="부동_2열"> +<div class="hidden"> +<h6 id="단순한_2열_조판">단순한 2열 조판</h6> + +<pre class="brush: html"><h1>2 column layout example</h1> + +<div> + <h2>첫 번째 열</h2> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +</div> + +<div> + <h2>두 번째 열</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</div> +</pre> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +div:nth-of-type(1) { + width: 48%; + float: left; +} + +div:nth-of-type(2) { + width: 48%; + float: right; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('부동_2열', '100%', 520) }}</p> + +<p>여기서 여러분은 우리가 모든 너비에 대해 백분율을 사용하고 있음을 알아차릴 것입니다. 이것은 <strong>liquid layout</strong>을 생성하기 때문에 꽤 좋은 전략입니다. 이것은 서로 다른 화면 크기에 적응하고 더 작은 화면 크기에서 열 너비에 대해 동일한 비율을 유지하게 됩니다. 브라우저 창의 너비를 조정해 보십시오. 이같은 특징은 반응형 웹 디자인을 위한 귀중한 도구입니다.</p> + +<div class="note"> +<p><strong>참고</strong>: 당신은 이 예제가 작종하는 장면을 여기서 <a href="http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html">0_two-column-layout.html</a> 볼 수 있습니다. (또한, 여기 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html">소스 코드</a>)도 있다.</p> +</div> + +<h2 id="간단한_레거시_격자_프레임워크_생성하기">간단한 레거시 격자 프레임워크 생성하기</h2> + +<p>레거시 프레임 워크의 대부분은 격자처럼 보이는 것을 만들기 위해한 열을 다른 열 옆에 부동시키기 위해 {{cssxref("float")}} 속성의 동작을 이용합니다. 부동을 포함한 격자 생성 과정을 통해 이 방법이 어떻게 작동하는지 여러분에게 보여주고, 여러분이 <a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동 및 해제</a> 단원에서 배운 것을 바탕으로 능력을 배가하기 위해 더 발전된 개념을 도입합니다.</p> + +<p>격자 프레임워크를 생성할 수 있는 가장 편리하게 유형은 고정 너비입니다. 즉, 우리는 우리가 목표로 하는 디자인의 총 너비, 우리가 원하는 열의 수, 배수로의 너비 및 열의 너비를 계산할 필요가 있습니다. 대신 브라우저 너비에 따라 커지고 축소되는 열이 있는 격자상에 디자인을 배치하기로 한다면 열 무리에 대한 백분율 너비와 열 사이 배수로 너비를 계산해야 할 겁니다.</p> + +<p>다음 절에서는 두 가지를 어떻게 생성할지 살펴볼 것입니다. 우리는 12개의 열 격자를 생성할 것입니다. 12열이 6, 4, 3, 2로 잘 나눌 수 있다는 점을 감안할 때, 매우 일반적인 선택입니다.</p> + +<h3 id="간단한_고정_너비_격자">간단한 고정 너비 격자</h3> + +<p>먼저 고정 너비 열을 사용하는 격자 시스템을 생성해 봅시다.</p> + +<p>먼저, 우리 예제인 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html">simple-grid.html</a> 사본 파일을 만듭니다. 여기에는 바디 부분에 다음과 같은 마크업을 포함하고 있습니다.</p> + +<pre class="brush: html"><div class="wrapper"> + <div class="row"> + <div class="col">1</div> + <div class="col">2</div> + <div class="col">3</div> + <div class="col">4</div> + <div class="col">5</div> + <div class="col">6</div> + <div class="col">7</div> + <div class="col">8</div> + <div class="col">9</div> + <div class="col">10</div> + <div class="col">11</div> + <div class="col">12</div> + </div> + <div class="row"> + <div class="col span1">13</div> + <div class="col span6">14</div> + <div class="col span3">15</div> + <div class="col span2">16</div> + </div> +</div></pre> + +<p>우리의 목표는 이것을 12열 격자상에 2행 격자를 시연하는 것입니다. 상단 행은 개별 열의 크기를 나타내고 두 번째 행은 격자 크기가 서로 다른 영역입니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13901/simple-grid-finished.png" style="display: block; height: 50px; margin: 0px auto; width: 952px;"></p> + +<p>{{htmlelement("style")}} 요소에는 외곽(래퍼) 컨테이너에 980픽셀의 너비를 부여하는 아래와 같은 코드를 추가하고 오른쪽에 패딩으로는 20픽셀 우측을 추가합니다. 이로써 열 및 배수로의 총 너비를 위해 960픽셀이 주어집니다. 이 경우, 사이트의 모든 요소에 {{cssxref("box-sizing")}}을 <code>border-box</code>로 설정했기 때문에 패딩은 총 콘텐츠 너비에서 제외할 수 있습니다(자세한 설명은 <a href="/en-US/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">상자 모델의 전면 변경</a>을 참조하세요).</p> + +<pre class="brush: css">* { + box-sizing: border-box; +} + +body { + width: 980px; + margin: 0 auto; +} + +.wrapper { + padding-right: 20px; +}</pre> + +<p>이제 격자의 각 행을 둘러싸는 행 컨테이너를 사용하여 한 행을 다른 행으로부터 정리하여 구분합니다. 다음과 같은 규칙을 이전 규칙 아래에 추가하십시요:</p> + +<pre class="brush: css">.row { + clear: both; +}</pre> + +<p>이렇게 정리를 적용한다는 것은 요소 무리가 딸린 각각의 행을 요소 무리로 가득 채울 필요가 없다는 것을 의미합니다. 행은 계속 분리된 채로 있으며, 서로 간섭하지 않습니다.</p> + +<p>열 사이의 배수로는 20픽셀 너비입니다. 컨테이너의 우측 편에 패딩 20픽셀을 부여해 균형을 잡기 위해 첫 번째 열을 포함하여 각 열의 왼편에 여백의 형태로 배수로를 생성했습니다. 그래서 우리는 총 12개의 배수로 가지고 있습니다. 따라서 12 x 20 = 240입니다.</p> + +<p>우리는 총 너비 960 픽셀에서 배수로 부분을 빼야 함으로 우리의 열 무리를 위해 720픽셀이 주어집니다. 당장에 그것을 12로 나눈다면, 각 열은 60 픽셀이어야 한다는 것을 알 수 있습니다.</p> + +<p>다음 단계는 클래스 <code>.col</code>에 대한 규칙을 생성하는 일입니다. 동 클래스에 속한 요소를 왼쪽으로 부동시키고, 배수구를 형성하기 위해 20픽셀의 {{cssxref("margin-left")}}와 60픽셀의 {{cssxref("width")}} 값을 동 요소에 부여합니다. 다음 규칙을 당신의 씨에스에스의 맨 아래에 추가하십시요:</p> + +<pre class="brush: css">.col { + float: left; + margin-left: 20px; + width: 60px; + background: rgb(255, 150, 150); +}</pre> + +<p>이제 단일 열 무리 형태의 상단 행은 격자처럼 깔끔하게 배치됩니다.</p> + +<div class="note"> +<p><strong>주석</strong>: 각 열에 밝은 빨간색 색상을 부여하여 각 공간이 얼마나 많은지 정확하게 볼 수 있습니다.</p> +</div> + +<p>두 개 이상의 열을 하나로 합치길 원하는 조판 컨테이너에 대해선 해당 컨테이너에 {{cssxref("width")}} 값을 필요한(합치기 할) 열 갯수에 맞춰(아울러 열 사이 배수구 숫자까지 포함해) 조정하기 위해 특별한 클래스를 부여할 필요가 있습니다. 우리는 컨테이너 무리가 2열에서 12열까지 (원하는 열 갯수만큼) 하나로 합치기할 수 있도록 추가 클래스를 만들 필요가 있습니다. 각 열의 너비는 (하나로 합쳐질) 해당 열 갯수의 열 너비와 배수구 너비를 합산한 결과입니다. 여기서 배수구 숫자는 항상 열 갯수에서 하나가 빠집니다.</p> + +<p>당신의 씨에스에스 맨 아래에 다음을 추가하십시요.</p> + +<pre class="brush: css">/* Two column widths (120px) plus one gutter width (20px) */ +.col.span2 { width: 140px; } +/* Three column widths (180px) plus two gutter widths (40px) */ +.col.span3 { width: 220px; } +/* And so on... */ +.col.span4 { width: 300px; } +.col.span5 { width: 380px; } +.col.span6 { width: 460px; } +.col.span7 { width: 540px; } +.col.span8 { width: 620px; } +.col.span9 { width: 700px; } +.col.span10 { width: 780px; } +.col.span11 { width: 860px; } +.col.span12 { width: 940px; }</pre> + +<p>이러한 클래스를 생성해 놓았다면 격자에 서로 다른 너비의 열 무리를 배치할 수 있습니다. 페이지를 저장하고 브라우저에 불러들여 효과를 확인하십시오.</p> + +<div class="note"> +<p><strong>참조</strong>: 위의 예제를 제대로 적용하기가 어렵다면 깃허브에 있는 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">완성된 버전</a>과 비교해보라. (<a href="http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html">라이브로도 보세요</a>).</p> +</div> + +<p>당신의 요소 무리에 적용한 클래스를 수정하거나 일부 컨테이너를 추가 및 제거해보며 당신이 어떻게 조판에 변경을 가할 수 있는지 확인하십시오 예를 들어 두 번째 행을 이렇게 만들 수 있습니다:</p> + +<pre class="brush: css"><div class="row"> + <div class="col span8">13</div> + <div class="col span4">14</div> +</div></pre> + +<p>이제 격자 시스템이 작동합니다. 여러분은 단순히 행 무리를 정의하고 각 행에 열 갯수를 정의한 다음 각 컨테이너에 필요한 내용을 채울 수 있습니다. 대단하죠!</p> + +<h3 id="유동_격자_생성하기">유동 격자 생성하기</h3> + +<p>우리 격자는 잘 작동하지만, 고정 너비를 가지고 있습니다. 우리는 브라우저 {{Glossary("viewport")}}에서 사용 가능한 공간과 함께 확대되고 축소될 가변 (유동) 격자를 정말로 원합니다. 이를 위해 기준 픽셀 너비를 백분율로 바꿀 수 있습니다.</p> + +<p>고정 너비를 유연한 백분율 기반으로 변환하는 방정식은 다음과 같습니다.</p> + +<pre>target / context = result</pre> + +<p>열 너비의 경우 목표 너비는 60픽셀이고 콘텐츠는 래퍼 클래스의 총합 960픽셀입니다. 우리는 백분율을 계산하기 위해 다음을 사용할 수 있습니다.</p> + +<pre>60 / 960 = 0.0625</pre> + +<p>그리고 나서 우리는 소수점을 2자리 옮기면 백분율 6.25%가 주어집니다. 그래서 우리의 씨에스에스에서 60픽셀의 열 너비를 6.25%로 대체할 수 있습니다.</p> + +<p>우리는 여러분의 배수로 너비에도 똑같이 적용해야 합니다.</p> + +<pre>20 / 960 = 0.02083333333</pre> + +<p>따라서 우리는 <code>.col</code> 규칙에 있는 20픽셀의 {{cssxref("margin-left")}}과 <code>.wrapper</code> 규칙에 있는 20픽셀의 {{cssxref("padding-right")}}를 2.08333333%로 대체해야 합니다.</p> + +<h4 id="여러분의_격자_업데이트_하기">여러분의 격자 업데이트 하기</h4> + +<p>이번 절을 시작하려면 이전 예제 페이지의 새 사본을 만들거나 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">simple-grid-finished.html</a>를 착수파일로 사용하십시요.</p> + +<p>다음과 같이 (<code>.wrapper</code> 선택기에 해당하는) 두 번째 씨에스에스 규칙을 업데이트 하십시요:</p> + +<pre class="brush: css">body { + width: 90%; + max-width: 980px; + margin: 0 auto; +} + +.wrapper { + padding-right: 2.08333333%; +}</pre> + +<p>우리는 백분율 너비를 부여했을뿐만 아니라 조판이 과도하게 확대되는 것을 막기 위해 {{cssxref("max-width")}} 속성을 추가했습니다.</p> + +<p>다음은 아래와 같이 (<code>.col</code> 선택기에 해당하는) 네 번째 씨에스에스 규칙을 업데이트 하십시요:</p> + +<pre class="brush: css">.col { + float: left; + margin-left: 2.08333333%; + width: 6.25%; + background: rgb(255, 150, 150); +}</pre> + +<p>이제 약간 노동력이 투여되어야 할 부분이 있습니다. 픽셀 너비보다는 백분율을 사용하기 위해 모든 <code>.col.span</code> 규칙을 업데이트해야 합니다. 계산기를 사용하려면 시간이 좀 걸립니다. 여러분들의 노력을 아끼기 위해, 아래와 같이 여러분을 대신에 우리가 마무리지었습니다.</p> + +<p>다음을 통해 씨에스에스 규칙의 하위 블록을 업데이트합니다.</p> + +<pre class="brush: css">/* Two column widths (12.5%) plus one gutter width (2.08333333%) */ +.col.span2 { width: 14.58333333%; } +/* Three column widths (18.75%) plus two gutter widths (4.1666666) */ +.col.span3 { width: 22.91666666%; } +/* And so on... */ +.col.span4 { width: 31.24999999%; } +.col.span5 { width: 39.58333332%; } +.col.span6 { width: 47.91666665%; } +.col.span7 { width: 56.24999998%; } +.col.span8 { width: 64.58333331%; } +.col.span9 { width: 72.91666664%; } +.col.span10 { width: 81.24999997%; } +.col.span11 { width: 89.5833333%; } +.col.span12 { width: 97.91666663%; }</pre> + +<p>이제 코드를 저장하고 브라우저에 내용을 불러들이면 뷰포트 너비를 변경해보십시오. 열 너비가 멋지게 조정되는 것을 볼 수 있어야 합니다.</p> + +<div class="note"> +<p><strong>참조</strong>: 위의 예제를 제대로 적용하기가 어렵다면 깃허브에 있는 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">완성된 버전</a>과 비교해보라. (<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html">라이브로도 보세요</a>).</p> +</div> + +<h3 id="calc_함수를_사용한_편리한_계산법">calc() 함수를 사용한 편리한 계산법</h3> + +<p>씨에스에스 내부에서 직접 calc() 함수를 사용하여 수학 계산을 할 수 있습니다. 이것은 여러분의 씨에스에스 값에 단순한 수학 방정식을 삽입하고 값이 무엇인지 계산할 수 있게 해줍니다. 복잡한 수학이 있을 때 특히 유용하며, 예를 들어 "나는 이 요소의 높이가 항상 부모의 높이의 100% 마이너스 50px가 되기를 원한다"와 같은 서로 다른 단위를 사용하는 셈법까지 계산할 수 있습니다. <a href="/ko/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">MediaRecorder API 자습서에 있는 예제를 보십시요</a>.</p> + +<p>어쨌든, 다시 여러분의 격자로 복귀합시다! 여러분의 격자에서 한 열 이상을 하나로 합치기하고자 하는 어떤 열은 총 너비가 6.25%이고, 거기에 하나로 합치기할 열 갯수를 곱하고, 거기에 2.08333333%를 배수로 갯수로 곱하기합니다(실제 배수로의 갯수는 항상 열 갯수에서 하나 빼기가 됩니다.) 여러분은 <code>calc()</code> 함수을 통해서 여러분이 이러한 셈법을 너비 값 내부에서 바로 계산을 할 수 있으므로, 4열 합치기할 항목에 대해서는 다음과 같이 할 수 있습니다.</p> + +<pre class="brush: css">.col.span4 { + width: calc((6.25%*4) + (2.08333333%*3)); +}</pre> + +<p>여러분의 씨에스에스 규칙의 하단 블록을 다음 값으로 대체한 다음 브라우저에서 다시 불러들여 동일한 결과를 얻을 수 있는지 확인하십시오:</p> + +<pre class="brush: css">.col.span2 { width: calc((6.25%*2) + 2.08333333%); } +.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); } +.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); } +.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); } +.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); } +.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); } +.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); } +.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); } +.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); } +.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); } +.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }</pre> + +<div class="note"> +<p><strong>참고</strong>: 여러분은 최종 버전을 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">fluid-grid-calc.html</a>에서 확인할 수 있습니다. (<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">라이브로도 보세요</a>).</p> +</div> + +<div class="note"> +<p><strong>참고</strong>: 여러분의 실습 과정에서 이 같은 내용이 제대로 작동되지 않았다면 여러분의 브라우저가 <code>calc()</code> 함수를 지원하지 않기 때문일 수 있습니다. 다만 이 함수는 멀게는 인터넷 익스플로러 9까지 브라우저 구분없이 지원됩니다.</p> +</div> + +<h3 id="말_되는_VS_“말_안되는”_격자_시스템">말 되는 VS “말 안되는” 격자 시스템</h3> + +<p>조판을 정의하기 위해 여러분의 마크업에 클래스를 추가하면 콘텐츠와 마크업이 시각적 프리젠테이션과 결부됩니다. 당신은 때때로 콘텐츠를 설명하는 클래스에 말되는 이름을 사용하기보다는 콘텐츠가 어떻게 보일지 설명하는 "말 안되는" 이름을 사용하는 씨에스에스 클래스 용례를 접하게 됩니다. 여기서 <code>span2</code>, <code>span3</code>, 기타 등등과 같은 클래스의 경우가 그렇습니다.</p> + +<p>이런 식의 접근 방법만 있는게 아닙니다. 대신 여러분이 격자를 결정한 다음 말 되게 명명된 기존 클래스 규칙에 크기 정보를 추가할 수 있습니다. 예를 들어, 여러분이 8열을 하나로 합치기 원하는 {{htmlelement("div")}} 요소에 <code>content</code>라는 클래스를 부여할 경우 <code>span8</code> 클래스가 출처인 너비 계산값을 복사해 쓸 수 있는데, 그와 같은 규칙은 이렇게 제공됩니다:</p> + +<pre class="brush: css">.content { + width: calc((6.25%*8) + (2.08333333%*7)); +}</pre> + +<div class="note"> +<p><strong>참고</strong>: 당신이 <a href="http://sass-lang.com/">Sass</a>와 같은 전처리기를 사용하려면, 당신을 위해 해당 값을 삽입해주는 간단한 <code>maxin</code>를 생성할 수 있다.</p> +</div> + +<h3 id="격자_내부에_컨테이너_오프셋_가동">격자 내부에 컨테이너 오프셋 가동</h3> + +<p>우리가 생성한 격자는 컨테이너 무리 전체를 격자의 왼쪽편과 일치시켜 출발하길 원하는 경우에 잘 작동합니다. 첫 번째 컨테이너 또는 컨테이너 사이에 빈 열 공간을 남기고 싶다면 여러분의 사이트에 왼쪽 여백을 추가하여 격자를 시각적으로 밀어 넣을 수 있는 오프셋 클래스를 생성해야 합니다. 또 다시 수학을!</p> + +<p>이렇게 해봅시다.</p> + +<p>이전 코드에서 출발하거나, <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">fluid-grid.html</a>을 착수 파일로 사용합니다.</p> + +<p>컨테이너 요소를 한 열 너비만큼 밀어낼 클래스를 여러분의 씨에스에스 안에 생성합니다. 다음을 당신의 씨에스에스의 맨 아래에 추가하세요:</p> + +<pre class="brush: css">.offset-by-one { + margin-left: calc(6.25% + (2.08333333%*2)); +}</pre> + +<p>Or if you prefer to calculate the percentages yourself, use this one:</p> + +<pre class="brush: css">.offset-by-one { + margin-left: 10.41666666%; +}</pre> + +<p>이제 여러분이 왼편에 하나의 열 너비의 빈 공간을 남기길 원하는 컨테이너는 어느 것이든 이 클래스를 추가할 수 있습니다. 예를 들면 여러분의 에이치티엠엘에 이런 내용이 있다면:</p> + +<pre class="brush: html"><div class="col span6">14</div></pre> + +<p>그걸 다음으로 대체하세요.</p> + +<pre class="brush: html"><div class="col span5 offset-by-one">14</div></pre> + +<div class="note"> +<p><strong>참고</strong>: 간격띄우기를 위한 공간을 만들기 위해, 합쳐질 열의 갯수를 줄여야 한다는 걸 놓치지 마세요!</p> +</div> + +<p>달라진 모습을 보려면 브라우저에 불러들이거나 새로고침을 하세요. 아니면 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html">fluid-grid-offset.html</a> 예제가 <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html">실제 실행</a>되는 장면을 보세요. 완성된 예는 다음과 같이 보여야 합니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13903/offset-grid-finished.png" style="display: block; height: 47px; margin: 0px auto; width: 944px;"></p> + +<div class="note"> +<p><strong>참고</strong>: 추가 연습의 하나로 여러분은 <code>offset-by-two</code>(2칸 간격띄우기) 클래스를 구현할 수 있습니가?</p> +</div> + +<h3 id="부동_격자_제한">부동 격자 제한</h3> + +<p>이런 시스템을 사용할 때는 총 너비가 정확하게 합산되는지, 행이 수용할 수 있는 것보다 더 많은 열을 하나로 합치려는 요소 무리를 행에 포함하지 않도록 주의해야 합니다. 부동체가 작동하는 방식 때문에 격자 열의 갯수가 해당 격자에 비해 너무 과대해지면 끝 부분에 있는 요소 무리가 다음 행으로 떨어지면서 격자가 깨집니다.</p> + +<p>또한 요소 무리의 콘텐츠가 그들 요소들이 점유하는 행보다 넓어지면, 대열이탈되어 엉망으로 보일 것이라는 점을 염두에 두십시오.</p> + +<p>이 시스템의 가장 큰 한계는 본질적으로 1차원이라는 점에 있습니다. 우리가 지금 여러 열에 걸쳐 요소를 하나로 합치도록 처리하자는 것이지 행 처리가 아닙니다. 이러한 오래된 조판 메서드는 요소의 높이를 명시적으로 설정하지 않고서는 요소의 높이를 제어하기가 매우 어렵습니다. 이는 매우 유연하지 않은 접근 방식이기도 합니다. 이는 여러분의 콘텐츠가 특정 높이라고 예상될 경우에만 먹힙니다.</p> + +<h2 id="가변상자_격자">가변상자 격자?</h2> + +<p><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a>에 대한 이전 기사를 읽으면 가변상자가 격자 시스템을 생성하는 데 이상적인 해결책이라고 생각할 수 있습니다. 이용할 수 있는 가변상자 기반 격자 시스템이 많이 있으며, 가변상자는 상기한 내용에서 격자를 만들 때 이미 발견한 많은 문제를 해결할 수 있습니다.</p> + +<p>그러나 가변상자는 격자 시스템처럼 디자인되지 않았으며 그런 식의 시스템으로 사용할 때 일련의 새로운 도전 과제를 던져줍니다. 간단한 예로 위에서 사용한 것과 동일한 예제 마크업을 채택해 아래의 씨에스에스를 사용하여 <code>wrapper</code>와 <code>row</code> 및 <code>col</code> 클래스를 사용하여 스타일링할 수 있습니다.</p> + +<pre class="brush: css">body { + width: 90%; + max-width: 980px; + margin: 0 auto; +} + +.wrapper { + padding-right: 2.08333333%; +} + + +.row { + display: flex; +} + +.col { + margin-left: 2.08333333%; + margin-bottom: 1em; + width: 6.25%; + flex: 1 1 auto; + background: rgb(255,150,150); +}</pre> + +<p>이 대체 요소를 여러분의 예제에서 만들거나, 우리의 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html">flexbox-grid.html</a> 예제 코드를 볼 수 있습니다(<a href="http://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html">실제 실행</a> 장면도 참조하세요).</p> + +<p>여기에서 우리는 각 행을 가변 컨테이너로 탈바꿈하고 있습니다. 가변상자 기반 격자가 있다고 하더라도 요소를 다합쳐 100% 미만를 차지하는 요소 무리를 확보하려면 여러분은 여전히 행이 필요합니다. 우리는 해당 콘테이너를 <code>display: flex</code>로 설정했습니다.</p> + +<p>우리는 <code>.col</code> 클래스상에 {{cssxref("flex")}} 속성의 첫 번째 값인 ({{cssxref("flex-grow")}})를 1로 설정하여 항목 무리가 확장할 수 있게 하고, 두 번째 속성값인 ({{cssxref("flex-shrink")}})를 1로 설정하여 항목 무리가 축소할 수 있게 하며 세 번째 값인 ({{cssxref("flex-basis")}})를 <code>auto</code>로 설정했습니다. 우리의 요소는 {{cssxref("width")}}(너비)가 설정되어 있고, <code>auto</code> 값을 통해 해당 너비값을 <code>flex-basis</code> 값으로 사용하게 됩니다.</p> + +<p>맨 위 라인에는 격자 위에 12개의 깔끔한 상자가 있고, 뷰포트 너비를 변경할 때 상자는 똑같이 확장하고 수축합니다. 그러나 다음 행에서는 4개의 항목만 있으며, 이들은 60px 기준에서 확장하고 축소됩니다. 그 중 단 4개만 상위 행에 있는 항목보다 훨씬 더 많이 확장할 수 있습니다. 그 결과 두 번째 행에서 모두 같은 너비를 차지합니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13905/flexbox-grid-incomplete.png" style="display: block; height: 71px; margin: 0px auto; width: 944px;"></p> + +<p>이를 수정하려면 해당 요소에 대해 <code>flex-basis</code>가 사용하는 값을 대체할 너비를 제공하기 위해 <code>span</code> 클래스를 포함해야 합니다.</p> + +<p>또한 상위 항목 무리가 사용하는 격자를 존중하지 않습니다. 왜냐하면 그들은 그것에 대해 아무것도 모르기 때문입니다.</p> + +<p>가변상자는 디자인 자체로 <strong>one-dimensional</strong>입니다. 그것은 1차원 즉 행이나 열을 다룹니다. 열과 행에 대해 엄격한 격자를 만들 수는 없습니다. 즉, 여러분의 격자에 가변상자를 사용하려면 부동 조판에서와 같이 백분율을 계산해야 합니다.</p> + +<p>당신이 참여하는 프로젝트에서 부동체보다 가변상자가 제공하는 공간 배분 능력이나 추가적인 정렬 기능을 이유로 여전히 가변상자 '격자'를 선택해 사용할 수도 있습니다. 하지만 당신이 사용하는 것이 원래 설계된 목적 이외의 다른 목적의 도구를 사용하고 있다는 것을 알아야 합니다. 그래서 당신은 이런 느낌이 들지도 모르겠다. 내가 원하는 최종 결과를 얻으려는 나에게 이놈이 추가적인 장애물을 통과하도록 만들고 있구나.</p> + +<h2 id="제3자_격자_시스템">제3자 격자 시스템</h2> + +<p>이제 우리는 격자 셈법의 배경이 되는 수학을 이해하게 되면서, 널리 이용되고 있는 제3자 격자 시스템 중 일부를 살펴 볼만한 좋은 여건을 갖췄습니다. 웹에서 "씨에스에스 격자 프레임워크"를 검색하면 선택할 수 있는 옵션 목록이 엄청납니다. <a href="http://getbootstrap.com/">Bootstrap</a>와 <a href="http://foundation.zurb.com/">Foundation</a>같은 인기 프레임워크에는 격자 시스템이 포함되어 있습니다. 또한 씨에스에스 혹은 전처리기를 사용하여 개발된 독립형 격자 시스템도 있습니다.</p> + +<p>이 독립형 시스템 중 하나를 살펴봅니다. 이 시스템은 격자 프레임워크를 사용하는 일반적인 기술을 보여줍니다. 우리가 사용할 격자는 단순한 씨에스에스 프레임워크인 Skeleton의 일부입니다.</p> + +<p>시작하려면 <a href="http://getskeleton.com/">Skeleton website</a>를 방문하고 ZIP 파일을 다운로드하기 위해 "다운로드"를 선택합니다. 압축파일을 풀고 skeleton.css와 normalize.css를 새 폴더에 복사하십시요.</p> + +<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton.html">html-skeleton.html</a>파일의 복사본을 만들어, skeleton과 normalize 씨에스에스 파일이 위치한 폴더와 같은 폴더에 저장합니다.</p> + +<p>다음과 같은 내용을 복사본 파일의 헤드 섹션에 skeleton과 normalize 씨에스에스 파일에 포함시킵니다:</p> + +<pre class="brush: html"><link href="normalize.css" rel="stylesheet"> +<link href="skeleton.css" rel="stylesheet"></pre> + +<p>Skeleton에는 격자 시스템 이외에도 많은 내용이 포함되어 있습니다. 타이포그래피를 위한 씨에스에스 및 착수점으로 사용할 수 있는 다른 페이지 요소도 포함되어 있습니다. 하지만 지금은 이들을 기본값으로 남겨둘 겁이다. 우리가 정말로 관심을 갖고 있는 것은 격자입니다.</p> + +<div class="note"> +<p><strong>참고</strong>: <a href="/en-US/docs/">Normalize</a>는 니콜라스 겔러거가 작성한 정말로 유용한 소형 씨에스에스 라이브러리로, 자동으로 몇 가지 유용한 기본 조판의 수정을 수행하고, 기본 요소 스타일링을 브라우저를 막론하고 보다 일관되게 만들어 줍니다.</p> +</div> + +<p>우리는 이전 예와 비슷한 에이치티엠엘을 사용할 것입니다. 다음을 여려분의 에이치티엠엘 바디에 추가하십시요:</p> + +<pre class="brush: html"><div class="container"> + <div class="row"> + <div class="col">1</div> + <div class="col">2</div> + <div class="col">3</div> + <div class="col">4</div> + <div class="col">5</div> + <div class="col">6</div> + <div class="col">7</div> + <div class="col">8</div> + <div class="col">9</div> + <div class="col">10</div> + <div class="col">11</div> + <div class="col">12</div> + </div> + <div class="row"> + <div class="col">13</div> + <div class="col">14</div> + <div class="col">15</div> + <div class="col">16</div> + </div> +</div></pre> + +<p><br> + Skeleton을 사용하기 위해서는 <code>container</code> 클래스를 랩퍼(바깥쪽) {{htmlelement("div")}}에 부여할 필요가 있습니다. 이 내용은 이미 우리 에이치티엠엘에 포함되어 있습니다. 이것은 최대 너비가 960픽셀인 콘텐츠를 중심부에 위치시킵니다. 이제 상자의 너비가 어떻게 960픽셀을 절대 초과할 수 없는지 볼 수 있습니다.</p> + +<p>이 클래스를 적용할 때 사용되는 씨에스에스를 보려면 skeleton.css 파일을 직접 볼 수 있습니다. <code><div></code>는 <code>auto</code> 좌우 여백 을 사용하여 중심부 위치에 놓이고, 20픽셀의 패딩을 좌우로 적용한다. 또한 Skeleton은 {{cssxref("box-sizing")}} 속성을 우리가 이전에 했던 것처럼 <code>border-box</code>로 설정하므로 이 요소의 패딩과 경계가 전체 너비에 포함됩니다.</p> + +<pre class="brush: css">.container { + position: relative; + width: 100%; + max-width: 960px; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; +}</pre> + +<p>요소는 행 안에 있는 경우에만 격자의 일부가 될 수 있으므로, 이전 예제와 마찬가지로 추가적인 <code><div></code>가 필요하거나 <code>content</code>와 <code><div></code>, 실제 콘텐츠 컨테이너 <code><div></code> 무리 사이에 중첩된 <code>row</code> 클래스가 부여된 다른 요소가 필요합니다. 우리는 이미 이것을 완성했습니다.</p> + +<p>이제 컨테이너 상자를 정리해 봅시다. Skeleton은 12개의 열 격자 기반입니다. 맨 위 라인의 상자 전체는 그 상자 무리를 하나의 열로 합치기 위해 모두 <code>one column</code>이란 클래스가 필요합니다.</p> + +<p>아래에 나온 에이치티엠엘 조각 내용을 지금 추가하십시오.</p> + +<pre class="brush: html"><div class="container"> + <div class="row"> + <div class="one column">1</div> + <div class="one column">2</div> + <div class="one column">3</div> + /* and so on */ + </div> +</div></pre> + +<p>다음으로 아래와 같이 하나로 합치기할 열의 수를 설명하는 클래스를 두 번째 행에 놓인 컨테이너에 부여합니다.</p> + +<pre class="brush: html"><div class="row"> + <div class="one column">13</div> + <div class="six columns">14</div> + <div class="three columns">15</div> + <div class="two columns">16</div> +</div></pre> + +<p>에이치티엠엘 파일을 저장하고 브라우저에 불러들여 효과를 확인하십시오.</p> + +<div class="note"> +<p><strong>참고</strong>:위의 예제를 제대로 적용하기가 어렵다면, 그것을 우리의 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html">html-skeleton-finished.html</a> 파일과 비교해 보십시요. (그것을 <a href="http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html">라이브로도 보세요</a>).</p> +</div> + +<p>당신이 (앞서 다운로드한) skeleton.css 내용을 보면 어떻게 작동하는지 알 수 있습니다. 예를 들어, Skeleton 파일에는 다음과 같이 "three columns" 클래스가 적용되는 요소를 스타일링하기 위한 정의가 부여되어 있습니다.</p> + +<pre class="brush: css">.three.columns { width: 22%; }</pre> + +<p>모든 Skeleton(또는 다른 격자 프레임워크)은 여러분의 마크업에 추가하여 사용할 수 있는 미리 정의된 클래스를 설정하는 것입니다. 해당 백분율을 계산하는 작업은 마치 당신이 직접 한 것과 똑같습니다.</p> + +<p>보시다시피, 우리는 Skeleton을 사용할 때 씨에스에스를 거의 쓰지 않아도 됩니다. 그것은(Skeleton) 당신의 마크업에 클래스를 추가할 때 우리를 대신해 모든 부동 요소를 처리합니다. 격자 시스템에 대한 프레임워크를 사용하여 만들어진 무언가에 조판에 대한 책임을 넘겨주는 이러한 능력을 갖춘 Skeleton은 설득력있는 선택입니다. 그러나 요즘 씨에스에스 격자 조판도 있고해서 많은 개발자가 씨에스에스가 제공하는 내장형 고유 격자를 사용하기 위해 이러한 프레임 워크에서 멀어지고 있습니다.</p> + +<h2 id="요약정리">요약정리</h2> + +<p>이제 다양한 격자 시스템이 어떻게 만들어지는지 이해하게 되었는데, 이는 구형 사이트에서 작업할 때와 씨에스에스 격자 조판이 제공하는 기본 격자와 이들 구형 시스템 간의 차이를 이해하는 데 유용합니다.</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="이번_단위에는">이번 단위에는</h2> + +<ul> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">씨에스에스 조판 소개</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">격자</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 조판</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/반응형_디자인">반응형 디자인</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">레거시 조판 메서드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">조판 이해도 필수 평가</a></li> +</ul> diff --git a/files/ko/learn/css/css_layout/multiple-column_layout/index.html b/files/ko/learn/css/css_layout/multiple-column_layout/index.html new file mode 100644 index 0000000000..70f13c6c39 --- /dev/null +++ b/files/ko/learn/css/css_layout/multiple-column_layout/index.html @@ -0,0 +1,415 @@ +--- +title: 다단 레이아웃 +slug: Learn/CSS/CSS_layout/Multiple-column_Layout +tags: + - CSS 붕괴 + - 다단 + - 다단 레이아웃 + - 안내서 + - 초보자 + - 학습 +translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">CSS 다단 레이아웃 규격은 신문에서 볼 수 있듯이 콘텐츠를 단으로 배치하는 방법을 제공합니다. 이 문서는 그 기능을 어떻게 사용하는지 설명합니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선결 사항:</th> + <td>HTML의 기초 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 입문서</a>)와 CSS 작동 방식에 대한 개념(<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS 입문서</a>를 공부하세요.)</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>신문에서 찾을 수 있는 것과 같은 웹 페이지상에 다단 레이아웃을 만드는 방법을 학습합니다.</td> + </tr> + </tbody> +</table> + +<h2 id="기본_사례">기본 사례</h2> + +<p>이제 다단 레이아웃을 사용하는 방법을 탐색할 것입니다. 이를 일컬어 <em>multicol</em>(다단)로 통칭합니다. 아래 내용을 따라하려면 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html">다단 착수 파일</a>을 다운로드하고 적절한 장소에 CSS를 추가할 수 있습니다. 해당 섹션의 맨 아래에는 최종 코드가 어떻게 생겼는지에 대한 실제 예제가 있습니다.</p> + +<p>우리의 착수 파일에는 아주 간단한 HTML이 포함되어 있습니다. 그 내용은 제목과 일부 단락이 내부에 있는 <code>container</code> 클래스 래퍼입니다.</p> + +<p>컨테이너 클래스에 해당하는 {{htmlelement("div")}}는 다단 컨테이너가 될 예정입니다. {{cssxref("column-count")}} 혹은 {{cssxref("column-width")}} 속성 중의 하나를 사용해서 다단으로 전환합니다. <code>column-count</code> 속성은 당신이 부여하는 값만큼 다단을 생성하게 되며, 당신의 스타일시트에 다음과 같은 CSS를 추가하고 페이지를 새로고침하면 당신은 삼단 레이아웃을 얻게 됩니다:</p> + +<pre class="brush: css">.container { + column-count: 3; +} +</pre> + +<p>당신이 생성하는 단은 가변 너비를 갖게됩니다. 말하자면 브라우저가 각 단에 할당한 공간의 크기를 계산합니다.<</p> + +<div id="다단_1"> +<div class="hidden"> +<h6 id="단의_갯수_예제">단의 갯수 예제</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + </pre> +</div> + +<pre class="brush: html"><div class="container"> + <h1>간단한 다단 예제</h1> + + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. + Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. + Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse + ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit + quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique + elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit + cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis + dis parturient montes, nascetur ridiculus mus.</p> +</div> +</pre> + +<pre class="brush: css">.container { + column-count: 3; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('다단_1', '100%', 400) }}</p> + +<p>다음과 같이 <code>column-width</code>를 사용하여 당신의 CSS를 변경하세요:</p> + +<pre class="brush: css">.container { + column-width: 200px; +} +</pre> + +<p>이제 브라우저는 당신이 지정한 크기의 단을 최대한 많이 제공합니다. 남은 공간은 현존하는 단 사이 공평하게 배분됩니다. 즉, 컨테이너가 해당 너비로 정확히 나뉠 수 없는 경우를 제외하고는 지정한 너비를 정확히 얻을 수 없습니다.</p> + +<div id="다단_2"> +<div class="hidden"> +<h6 id="단_너비_예제">단 너비 예제</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +}</pre> + +<pre class="brush: html"><div class="container"> + <h1>간단한 다단 예제</h1> + + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. + Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. + Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse + ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit + quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique + elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit + cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis + dis parturient montes, nascetur ridiculus mus.</p> +</div></pre> +</div> + +<pre class="brush: css">.container { + column-width: 200px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('다단_2', '100%', 400) }}</p> + +<h2 id="다단_스타일링">다단 스타일링</h2> + +<p>다단으로 작성된 단은 개별적으로 스타일링할 수 없습니다. 하나의 단을 다른 단보다 크게 만들거나 단일 단의 배경 또는 텍스트 색상을 변경할 수 있는 방법이 없습니다. 단이 표시되는 방식을 바꿀 수 있는 기회는 두 가지가 주어집니다.</p> + +<ul> + <li>{{cssxref("column-gap")}}를 사용해 다단 사이 간격의 크리를 변경하기.</li> + <li>{{cssxref("column-rule")}}를 가지고 다단 사이 규칙을 추가하기.</li> +</ul> + +<p>상기 예제 용례에서 <code>column-gap</code> 속성을 추가해 간격의 크기를 변경하세요:</p> + +<pre class="brush: css">.container { + column-width: 200px; + column-gap: 20px; +}</pre> + +<p>서로 다른 값을 가지고 마음대로 부릴 수 있습니다. 모든 길이 단위를 속성이 허용한다는 말입니다. 이제 <code>column-rule</code>를 가지고 다단 사이 규칙을 추가하세요. 이전 단원에서 접했던 {{cssxref("border")}} 속성과 비슷한 방식으로 <code>column-rule</code>는 {{cssxref("column-rule-color")}}와 {{cssxref("column-rule-style")}} {{cssxref("column-rule-width")}}의 약칭이며 <code>border</code>와 동일한 값을 허용합니다.</p> + +<pre class="brush: css">.container { + column-count: 3; + column-gap: 20px; + column-rule: 4px dotted rgb(79, 185, 227); +}</pre> + +<p>다른 스타일과 색상 규칙을 추가하세요</p> + +<div id="다단_3"> +<div class="hidden"> +<h6 id="다단_스타일링_2">다단 스타일링</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} +.container { + column-count: 3; + column-gap: 20px; + column-rule: 4px dotted rgb(79, 185, 227); +}</pre> + +<pre class="brush: html"><div class="container"> + <h1>간단한 다단 예제</h1> + + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. + Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. + Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse + ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit + quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique + elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit + cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis + dis parturient montes, nascetur ridiculus mus.</p> +</div></pre> +</div> +</div> + +<p>{{ EmbedLiveSample('다단_3', '100%', 400) }}</p> + +<p>주목할 점은 규칙이 자체적으로 폭을 점유하지 않는다는 것입니다. 규칙이 적용된 내용은 당신이 <code>column-gap</code>으로 생성된 간격을 가로질러 놓여 있습니다. 규칙을 따라 양쪽에 더 많은 공간을 만들려면 <code>column-gap</code> 크기를 늘려야 합니다.</p> + +<h2 id="Spanning_columns">Spanning columns</h2> + +<p>다단 레이아웃에 의해 콘텐츠가 span across 됩니다. 그것은 본질적으로 페이지 미디어상에 콘텐츠가 작동하는 것과 같은 방식으로 작동합니다. 예를 들면 웹페이지 인쇄가 그렇습니다. 콘텐츠를 다단 컨테이너로 만들면 다단으로 나눠지고, 그것이 가능해진 결과로 콘텐츠는 깨집니다.</p> + +<p>때때로, 이런 깨짐 현상은 발생하는 위치에 따라 독서를 저해하는 경험을 낳을 것입니다. 아래의 실제 사용례에서 나는 다단을 사용하여 일련의 상자를 배치했는데, 각각에는 머리글과 약간의 텍스트가 들어 있습니다. 다단 사이가 단편화할 경우 제목은 텍스트와 분리됩니다.</p> + +<div id="다단_4"> +<div class="hidden"> +<h6 id="카드_용례">카드 용례</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} </pre> +</div> + +<pre class="brush: html"><div class="container"> + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + +</div> +</pre> + +<pre class="brush: css">.container { + column-width: 250px; + column-gap: 20px; +} + +.card { + background-color: rgb(207, 232, 220); + border: 2px solid rgb(79, 185, 227); + padding: 10px; + margin: 0 0 1em 0; +}</pre> +</div> + +<p>{{ EmbedLiveSample('다단_4', '100%', 600) }}</p> + +<p>이러한 동작을 제어하기 위해 <a href="/en-US/docs/Web/CSS/CSS_Fragmentation">CSS 붕괴</a> 규격에 있는 속성을 사용할 수 있습니다. 우리는 이 규격에 있는 속성을 통해 다단과 페이지 미디어에 포함된 콘텐츠가 깨지는 것을 제어할 수 있습니다. 예를 들어, <code>.card</code> 클래스에 대한 규칙에 <code>avoid</code> 값을 사용한 {{cssxref("break-inside")}}을 추가하세요. 이것은 머리글과 텍스트로 구성된 컨테이너입니다. 따라서 우리는 이 상자를 분열하고 싶지 않습니다.</p> + +<p>현 시점에 이전 속성인 <code>page-break-inside: avoid</code>을 최상의 브라우저 지원을 위해 추가할 가치가 있습니다.</p> + +<pre class="brush: css">.card { + break-inside: avoid; + page-break-inside: avoid; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 0 0 1em 0; +} +</pre> + +<p>페이지를 새로고침하면 상자가 하나의 형태를 갖추고 있어야 합니다.</p> + +<div id="다단_5"> +<div class="hidden"> +<h6 id="다단_단편">다단 단편</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} </pre> + +<pre class="brush: html"><div class="container"> + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + +</div> +</pre> +</div> + +<pre class="brush: css">.container { + column-width: 250px; + column-gap: 20px; +} + +.card { + break-inside: avoid; + page-break-inside: avoid; + background-color: rgb(207, 232, 220); + border: 2px solid rgb(79, 185, 227); + padding: 10px; + margin: 0 0 1em 0; +}</pre> +</div> + +<p>{{ EmbedLiveSample('다단_5', '100%', 600) }}</p> + +<h2 id="요약정리">요약정리</h2> + +<p>이제 당신이 현재 설계 중인 레이아웃 메서드를 선택할 때 맘껏 사용할 수 있는 다단 레이아웃의 기본 기능과 다른 도구를 사용하는 방법을 알게 되었습니다.</p> + +<h2 id="참조_항목">참조 항목</h2> + +<ul> + <li><a href="/kr/docs/Web/CSS/CSS_Fragmentation">CSS 붕괴</a></li> + <li><a href="/kr/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">다단 레이아웃 사용하기</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="이번_단위에는">이번 단위에는</h2> + +<ul> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 소개</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">그리드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 레이아웃</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/반응형_디자인">반응형 디자인</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/레거시_조판_메서드">레거시 레이아웃 메서드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">레이아웃 이해도 필수 평가</a></li> +</ul> diff --git a/files/ko/learn/css/css_layout/미디어_쿼리_초보자_안내서/index.html b/files/ko/learn/css/css_layout/미디어_쿼리_초보자_안내서/index.html new file mode 100644 index 0000000000..cf13a1421c --- /dev/null +++ b/files/ko/learn/css/css_layout/미디어_쿼리_초보자_안내서/index.html @@ -0,0 +1,424 @@ +--- +title: 미디어 쿼리 초보자 안내서 +slug: Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서 +tags: + - 미디어 쿼리 + - 씨에스에스 + - 조판 + - 초보자 + - 학습 +translation_of: Learn/CSS/CSS_layout/Media_queries +--- +<p>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p> + +<p><strong>CSS Media Query</strong>는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 씨에스에스를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 반응형 웹 디자인의 핵심 부분이다. 뷰포트의 크기에 따라 서로 다른 조판을 생성할 수 있기 때문이다. 그러나 예를들면 사용자는 마우스가 아닌 터치스크린을 사용하는지와 같이 실행 중인 사이트 환경에 대한 여러 내용들을 탐지하는 데도 사용할 수 있습니다. 이번 단원에서는 먼저 미디어 쿼리에 사용된 구문에 대해 배우고, 이어 해당 구문을 가공의 예제에서 사용하여 간단한 디자인이 어떻게 반응할 수 있는지 살펴보겠습니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선결 사항:</th> + <td>에이치티엠엘의 기초인 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">에이치티엠엘 입문서</a>를 공부하세요), 그리고 씨에스에스의 작동 방식을 파악하기 위해 (<a href="/en-US/docs/Learn/CSS/First_steps">씨에스에스 첫걸음</a>과 <a href="/ko/docs/Learn/CSS/Building_blocks">씨에스에스 구성 블록</a>를 공부하세요.)</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>미디어 쿼리를 사용하는 방법과 그걸 이용해 반응형 디자인을 생성하기 위한 가장 대표적인 접근법 파악하기.</td> + </tr> + </tbody> +</table> + +<h2 id="미디어_쿼리_기본">미디어 쿼리 기본</h2> + +<p>가장 간단한 미디어 쿼리 구문은 다음과 같습니다:</p> + +<pre class="brush: css">@media <em>media-type</em> and (<em>media-feature-rule</em>) { + /* CSS rules go here */ +}</pre> + +<p>미디어 쿼리 구문의 구성 요소:</p> + +<ul> + <li>여기 코드가 어떤 미디어를 위한 것인지 브라우저에 알려주는 미디어 유형(예를 들어, 인쇄 또는 화면).</li> + <li>괄호로 묶은 씨에스에스 규칙이 적용되기 위해 전달되어야 하는 규칙 또는 조건문 격인 미디어 표현식.</li> + <li>조건문을 통과하고 미디어 유형이 올바른 경우 적용되는 씨에스에스 규칙 집합.</li> +</ul> + +<h3 id="미디어_유형">미디어 유형</h3> + +<p>당신이 지정할 수 있는 미디어 유형</p> + +<ul> + <li><code>all</code></li> + <li><code>print</code></li> + <li><code>screen</code></li> + <li><code>speech</code></li> +</ul> + +<p>다음 미디어 쿼리는 페이지가 인쇄된 경우에만 본문을 12pt로 설정합니다. 페이지가 브라우저에 로드될 때에는 적용되지 않습니다.</p> + +<pre class="brush: css"><code>@media print { + body { + font-size: 12pt; + } +}</code></pre> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 수준 3 미디어 쿼리 규격에 정의된 여러 가지 다른 미디어 유형이 있습니다. 이들은 사장되었으니 피해야 합니다.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 미디어 유형은 선택사항입니다. 미디어 쿼리에 미디어 유형을 표시하지 않으면 미디어 쿼리는 기본값으로 모든 미디어 유형에 대한 것으로 해석됩니다.</p> +</div> + +<h3 id="미디어_기능_규칙">미디어 기능 규칙</h3> + +<p>미디어 유형을 지정한 뒤에 규칙을 적용할 미디어 기능을 선정할 수 있습니다.</p> + +<h4 id="너비와_높이">너비와 높이</h4> + +<p>반응형 디자인을(그리고 광범위한 브라우저 지원이 되도록) 만들기 위해 가장 자주 탐문하는 기능은 뷰포트 너비이며, <code>min-width</code>와 <code>max-width</code>, <code>width</code> 등의 미디어 기능을 활용하여 뷰포트가 특정 너비 이상 또는 이하인 경우 씨에스에스를 적용할 수 있습니다.</p> + +<p>이러한 특징들은 다른 화면 크기에 반응하는 조판을 생성하는 데 사용됩니다. 예를 들어 뷰포트가 정확히 600픽셀인 경우 본문 색상을 빨간색으로 변경하려면 다음과 같은 미디어 쿼리를 사용합니다.</p> + +<pre class="brush: css"><code>@media screen and (width: 600px) { + body { + color: red; + } +}</code></pre> + +<p><a href="https://mdn.github.io/css-examples/learn/media-queries/width.html">이 예제를</a> 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/width.html">소스를 보세요</a>.</p> + +<p><code>width</code>(및 <code>height</code>) 미디어 기능은 범위 지정에 사용될 수 있다. 따라서 <code>min-</code> or <code>max-</code> 접두사를 붙이게 되면 최소값인지 최대값인지 표시할 수 있다. 예를 들어 뷰포트가 400 픽셀보다 좁은 경우 색깔을 파란색으로 만들기 위해 <code>max-width</code>:를 사용할 수 있다.</p> + +<pre class="brush: css"><code>@media screen and (max-width: 400px) { + body { + color: blue; + } +}</code></pre> + +<p><a href="https://mdn.github.io/css-examples/learn/media-queries/max-width.html">이 예제를</a>를 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/max-width.html">소스를 보세요</a>.</p> + +<p>실제로 최소값 또는 최대값을 사용하는 것이 반응형 디자인인 경우에 훨씬 유용하므로 <code>width</code> 또는 <code>height</code> 값을 사용하는 경우는 좀처럼 흔치앖습니다.</p> + +<p>미디어 쿼리 규격 수준 4 및 5에 소개된 최신 기능 중 일부가 제한적으로 브라우저 지원이 되지만, 당신이 테스트할 수 있는 다른 여러 미디어 기능이 있습니다. 각 기능은 브라우저 지원 정보와 함께 MDN에 문서화되어 있으니만큼 당신은 <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">미디어 쿼리 사용: 미디어 기능</a>에서 전체 목록을 찾을 수 있습니다.</p> + +<h4 id="방향성">방향성</h4> + +<p>잘 지원되는 미디어 기능 중 하나는 <code>orientation</code>로 세로 모드인지 가로 모드인지를 검사할 수 있도록 해줍니다. 장치가 가로 방향에 있는 경우 본문 텍스트 색상을 변경하려면 다음과 같은 미디어 쿼리를 사용합니다.</p> + +<pre class="brush: css"><code>@media (orientation: landscape) { + body { + color: rebeccapurple; + } +}</code></pre> + +<p><a href="https://mdn.github.io/css-examples/learn/media-queries/orientation.html">이 예제를</a> 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/orientation.html">소스를 보세요</a>.</p> + +<p>표준 데스크톱 뷰에는 가로 방향이 주종을 이루고 있으며, 이 가로 방향에서 잘 작동하는 디자인은 휴대폰 또는 태블릿상에서 세로 모드로 볼 때 잘 작동하지 않을 수 있습니다. (가로/세로 모드의) 방향성 테스트는 여러분이 세로 모드의 장치에 최적화된 조판을 생성할 수 있게 도움을 줄 수 있습니다.</p> + +<h4 id="포인팅_장치의_사용">포인팅 장치의 사용</h4> + +<p>수준 4 규격의 일부로 <code>hover</code> 미디어 기능이 도입되었다. 이 기능은 사용자가 요소 위에 (마우스 커서를) 올릴 수 있는 능력을 가진 조건인지를 시험할 수 있다는 것을 의미합니다. 본질적으로 사람들이 어떤 종류의 포인팅 장치를 사용하는지를 말합니다. 터치 스크린 및 키보드 네비게이션은 요소 위에 식별자를 올릴 수 없습니다.</p> + +<pre class="brush: css"><code>@media (hover: hover) { + body { + color: rebeccapurple; + } +}</code></pre> + +<p><a href="https://mdn.github.io/css-examples/learn/media-queries/hover.html">이 예제를</a> 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/hover.html">소스를 보세요</a>.</p> + +<p>사용자가 포인팅 장치를 사용할 수 없다고 파악했다면 기본적으로 대화형 기능을 표시할 수 있습니다. 포인팅 장치를 사용할 수 있는 사용자의 경우 링크에 마우스를 올리는 기능을 이용하도록 선택할 수 있습니다.</p> + +<p>마찬가지로 <code>pointer</code> 미디어 기능이 수준 4 규격에 포함되어 있다. 이것은 <code>none</code>과 <code>fine</code> <code>coarse</code>의 세 가지 값을 취할 수 있다. <code>fine</code> 포인터는 마우스나 트랙패드와 같은 것이다. 이 값으로 사용자가 작은 영역을 정확하게 공략할 수 있게 된다. <code>coarse</code> 포인터는 터치스크린상에 손가락을 말한다. <code>none</code> 값은 사용자가 포인팅 장치가 없다는 의미이다. 아마도 키보드 단독 또는 음성 명령으로 탐색하고 있다고 하겠다.</p> + +<p><code>pointer</code> 사용이 당신에게 주는 잇점이 있다면 사용자가 화면상에서 상호 작용하는 유형에 반응하는 더 나은 인터페이스를 설계할 수 있다는 것입니다. 예를 들어, 사용자가 터치스크린으로 장치와 상호 작용하고 있다는 것을 알면 히트 영역을 더 크게 만들 수 있습니다.</p> + +<h2 id="더_복잡한_미디어_쿼리">더 복잡한 미디어 쿼리</h2> + +<p>당신은 가능한 모든 이종의 미디어 쿼리를 가지고 그것들을 결합하거나, 쿼리 목록을 만들고 싶을 수도 있다. 그 중 어느 경우가 (조건문과) 일치할 수 있습니다.</p> + +<h3 id="논리곱_미디어_쿼리">"논리곱" 미디어 쿼리</h3> + +<p><code>and</code>를 사용해 미디어 기능을 결합할 수 있습니다. 이는 마치 앞에서 미디어 유형과 기능을 결합하기 위해 <code>and</code>를 사용했던 방식과 같습니다. 예를 들어, <code>min-width</code>와 <code>orientation</code>의 논리곱 조건을 테스트해보고 싶을 수도 있습니다. 여기서 에이치티엠엘 본문 텍스트가 파란색이 되는 유일한 경우는 뷰포트의 너비가 최소 400픽셀 이상이고 장치가 가로 모드인 경우에만 해당합니다.</p> + +<pre class="brush: css"><code>@media screen and (min-width: 400px) and (orientation: landscape) { + body { + color: blue; + } +}</code></pre> + +<p><a href="https://mdn.github.io/css-examples/learn/media-queries/and.html">이 예제를</a> 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/and.html">소스를 보세요</a>.</p> + +<h3 id="논리합_미디어_쿼리">"논리합" 미디어 쿼리</h3> + +<p>만약 여러분에게 쿼리는 잔뜩있는 데, 그 중 일도 일치할 수 없다면, 여러분은 해당 쿼리들을 콤마로 분리할 수 있습니다. 아래 예제에서 뷰포트가 최소 400픽셀 너비 또는 장치가 가로 보기 방향이라면 텍스트는 파란색이 될 것입니다. 둘 중 하나라도 사실이 아니라면 쿼리의 조건문은 일치합니다.</p> + +<pre class="brush: css"><code>@media screen and (min-width: 400px), screen and (orientation: landscape) { + body { + color: blue; + } +}</code></pre> + +<p><a href="https://mdn.github.io/css-examples/learn/media-queries/or.html">이 예제를</a> 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/or.html">소스를 보세요</a>.</p> + +<p>"</p> + +<h3 id="부정_논리_미디어_쿼리">"부정 논리" 미디어 쿼리</h3> + +<p><code>not</code> 연산자를 사용하여 전체 미디어 쿼리를 부정할 수 있습니다. 이것은 미디어 쿼리의 전체 의미를 반대로 뒤집습니다. 따라서 다음 예에서 텍스트는 보기 방향이 세로일 경우에만 파란색이 됩니다.</p> + +<pre class="brush: css"><code>@media not all and (orientation: landscape) { + body { + color: blue; + } +}</code></pre> + +<p><a href="https://mdn.github.io/css-examples/learn/media-queries/not.html">이 예제를</a> 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/not.html">소스를 보세요</a>.</p> + +<h2 id="분기점을_선정하는_방법">분기점을 선정하는 방법</h2> + +<p>반응형 디자인 초창기에는 많은 디자이너가 매우 구체적인 화면 크기를 공략 대상으로 삼으려고 시도했습니다. 인기있는 휴대폰 및 태블릿 화면의 크기 목록이 공개되어 해당 기기의 뷰포트와 깔끔하게 일치하도록 디자인을 만들 수 있게 되었습니다.</p> + +<p>지금은 엄청나게 다양한 크기의 지나치게 너무 많은 장치가 있어 그런 방식은 현실성이 없습니다. 즉, 모든 디자인마다 (기기의) 특정 크기에 맞추는 공략보다 더 나은 접근 방법은 콘텐츠가 어떤 식으로든 깨지기 시작하는 해당 (기기의) 크기에 해당하는 디자인을 변경하는 것입니다. 어쩌면 선 길이가 너무 길어지거나 상자 형태의 사이드바가 찌그러져 읽기가 어려워질 수도 있습니다. 그 지경이 되면 미디어 쿼리를 사용하여 이용할 수 있는 공간 대비 개선된 형태의 사이트가 나오도록 디자인을 변경해야할 지점인 것입니다. 이는 사용 기기의 정확한 화면 크기가 무엇이든 상관없이 모든 범주에 맞는 전방위적인 접금법을 말합니다. 미디어 쿼리가 도입되는 지점을 <strong>breakpoints</strong>라고 합니다.</p> + +<p>Firefox DevTools의 <a href="/en-US/docs/Tools/Responsive_Design_Mode">반응형 디자인 모드</a>는 이러한 분기점이 어느 부분이 될지 알아내는 데 매우 유용합니다. 동 툴은 미디어 쿼리를 추가하고 디자인을 조정하면서 콘텐츠가 개선되는 위치를 파악하기 위해 뷰포트를 쉽게 크거나 작게 만들 수 있습니다.</p> + +<p><img alt="파이어폭스 개발툴상에 조판 갈무리" src="https://mdn.mozillademos.org/files/16867/rwd-mode.png" style="height: 917px; width: 1443px;"></p> + +<h2 id="능동_학습_모바일_우선_반응형_디자인">능동 학습: 모바일 우선 반응형 디자인</h2> + +<p>대체로 반응형 디자인에 대한 두 가지 접근법을 취할 수 있습니다. 데스크톱 또는 가장 넓은 뷰로 시작한 뒤 뷰포트의 축소에 맞춰 요소를 주변으로 이동시키기 위한 분기점을 추가하거나 가장 작은 뷰로 시작한 뒤에 뷰포트의 크기 확대에 맞춰 조판을 추가할 수 있습니다. 이 두 번째 접근법은 <strong>mobile first</strong> 반응형 디자인으로 설명되며 종종 선호되는 최상의 접근법입니다.</p> + + + +<p>가장 작은 장치용 뷰는 일반 대열에서 나타나는 것처럼 종종 단순한 단일 열 형태의 콘텐츠가 됩니다. 즉 여러분은 작은 장치용이라 많은 조판을 할 필요가 없다는 말입니다. 다시말해 소스를 순서대로 잘 정렬하면 기본값으로 읽을 수 있는 조판이 됩니다.</p> + +<p>아래의 길라잡이는 매우 간단한 조판으로 동 접근 방식을 안내해 줄 것입니다. 사이트 제작 과정에서는 미디어 쿼리내에서 조정할 수 있는 것이 더 많을 수 있지만, 그 접근 방식은 정확히 동일하게 됩니다.</p> + +<h3 id="길라잡이_간단한_모바일_우선_조판">길라잡이: 간단한 모바일 우선 조판</h3> + +<p>우리는 조판에 포함된 다양한 요소에 배경색을 추가하기 위해 일정한 씨에스에스를 적용한 에이치티엠엘 문서를 가지고 출발합니다.</p> + +<pre class="brush: css"><code>* { + box-sizing: border-box; +} + +body { + width: 90%; + margin: 2em auto; + font: 1em/1.3 Arial, Helvetica, sans-serif; +} + +a:link, +a:visited { + color: #333; +} + +nav ul, + aside ul { + list-style: none; + padding: 0; +} + +nav a:link, +nav a:visited { + background-color: rgba(207, 232, 220, 0.2); + border: 2px solid rgb(79, 185, 227); + text-decoration: none; + display: block; + padding: 10px; + color: #333; + font-weight: bold; +} + +nav a:hover { + background-color: rgba(207, 232, 220, 0.7); +} + +.related { + background-color: rgba(79, 185, 227, 0.3); + border: 1px solid rgb(79, 185, 227); + padding: 10px; +} + +.sidebar { + background-color: rgba(207, 232, 220, 0.5); + padding: 10px; +} + +article { + margin-bottom: 1em; +} +</code></pre> + +<p>우리는 우리가 조판에 변경을 가하지는 않았지만, 문서의 원본은 콘텐츠를 읽을 수 있는 방식으로 순서대로 정렬됩니다. 이것은 중요한 첫 번째 단계이며, 콘텐츠가 화면 읽기 프로그램(tts)에 의해 소리내여 읽혀질 경우 콘텐츠가 (읽을 문자열를) 이해될 수도록 보장합니다.</p> + +<pre class="brush: html"><code><body> + <div class="wrapper"> + <header> + <nav> + <ul> + <li><a href="">사이트 소개</a></li> + <li><a href="">연락처</a></li> + <li><a href="">우리팀 안내</a></li> + <li><a href="">블로그</a></li> + </ul> + </nav> + </header> + <main> + <article> + <div class="content"> + <h1>채식주의자!</h1> + <p> + ... + </p> + </aside> + </article> + + <aside class="sidebar"> + <h2>채식에 관한 외부 링크</h2> + <ul> + <li> + ... + </li> + </ul> + </aside> + </main> + + <footer><p>&copy;2019</p></footer> + </div> + </body> +</code></pre> + +<p>이 간단한 조판은 모바일에서도 잘 작동한다. 우리가 파이어폭스 데브툴 내부 반응형 디자인 모드에서 조판을 본다면, 우리는 그것이 사이트의 직관적인 모바일 뷰로 보더라도 꽤 잘 작동한다는 것을 알 수 있다.</p> + +<p><a href="https://mdn.github.io/css-examples/learn/media-queries/step1.html">이 예제를</a> 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html">소스를 보세요</a>.</p> + +<p><strong>당신이 우리의 진행 과정대로 이 예제를 실행해보려면 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html">step1.html</a>의 사본을 당신 컴퓨터에 만드세요.</strong></p> + +<p>이 지점부터는 반응형 디자인 모드뷰가 점차 확대되어 라인 길이가 상당히 길어지는 모습을 확인할 정도가 되며, 수평선 형태의 탐색 메뉴가 표시될 공간을 갖추고 있습니다. 여기에서 우리는 첫 번째 미디어 쿼리를 추가할 것입니다. 사용자가 텍스트 크기를 늘리게 되면, 텍스트 크기가 작은 장비를 가진 사람과 비교해 비슷한 라인 길이지만 뷰포트가 확대되는 순간에 분기점이 발생한다는 의미입니다. 따라서 우리는 ems 단위를 사용할 것입니다.</p> + +<p><strong>아래 코드를 step1.html 씨에스에스의 하단에 추가하세요.</strong></p> + +<pre class="brush: css"><code>@media screen and (min-width: 40em) { + article { + display: grid; + grid-template-columns: 3fr 1fr; + column-gap: 20px; + } + + nav ul { + display: flex; + } + + nav li { + flex: 1; + } +} +</code></pre> + +<p>이 씨에스에스는 문서 안에 있는 문서 콘텐츠와 aside 요소 내부 관련 정보까지 2단 조판을 우리에게 제공합니다. 또한 우리는 가변상자를 사용하여 탐색 메뉴를 일렬로 배치했습니다.</p> + +<p><a href="https://mdn.github.io/css-examples/learn/media-queries/step2.html">2단계</a> 파일을 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step2.html">소스를 보세요</a>.</p> + +<p>사이드바가 새 단을 형성할 수 있는 충분한 공간이 있다고 느낄 때까지 너비를 계속 확장합니다. 미디어 쿼리안에서 주요 요소를 두 개의 열 형태의 격자로 만들 것입니다. 그런 다음 두 개의 사이드바가 서로 나란히 정렬되도록 문서의 {{cssxref("margin-bottom")}}을 제거해야하며, 바닥글 상단에 {{cssxref("border")}}(테두리)를 추가하게 됩니다. 일반적으로 이러한 미세 조정은 각 분기점 도달시 디자인을 좋게 보이게 하기 위해 여러분이 할 일입니다.</p> + +<p><strong>다시 한 번 아래 코드를 step1.html 씨에스에스의 하단에 추가합니다.</strong></p> + +<pre class="brush: css"><code>@media screen and (min-width: 70em) { + main { + display: grid; + grid-template-columns: 3fr 1fr; + column-gap: 20px; + } + + article { + margin-bottom: 0; + } + + footer { + border-top: 1px solid #ccc; + margin-top: 2em; + } +}</code> +</pre> + +<p><a href="https://mdn.github.io/css-examples/learn/media-queries/step3.html">3단계</a> 파일을 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step3.html">소스를 보세요</a>.</p> + +<p>최종 예제를 다른 너비로 보면 사용 가능한 너비에 따라 디자인이 반응하고 단일 열, 2열 또는 3열로 작동하는 방법을 볼 수 있습니다. 이것은 모바일 우선 반응형 디자인의 아주 간단한 예입니다.</p> + +<h2 id="당신에게_정말_미디어_쿼리가_필요할까요">당신에게 정말 미디어 쿼리가 필요할까요?</h2> + +<p>가변상자, 격자 및 다단 조판은 모두 굳이 미디어 쿼리를 필요로 하지 않고도 가변적이며 심지어 반응형 구성 요소를 만들 수 있는 방법을 제공합니다. 미디어 쿼리를 추가하지 않고도 이러한 조판 메서드를 사용해 원하는 것을 달성할 수 있는지 고려할 가치가 있습니다. 예를 들어, 여러분은 적어도 200 픽셀 너비의 카드 집합을 원할 수 있으며, 최대 200 픽셀이라면 주요 문서 부분에 맞아떨어질 수 있습니다. 이는 미디어 쿼리를 전혀 사용하지 않고 격자 조판만으로 얻을 수 있습니다.</p> + +<p>이것은 아래 용법으로 달성될 수 있습니다.</p> + +<pre class="brush: html"><code><ul class="grid"> + <li> + <h2>카드 1</h2> + <p>...</p> + </li> + <li> + <h2>카드 2</h2> + <p>...</p> + </li> + <li> + <h2>카드 3</h2> + <p>...</p> + </li> + <li> + <h2>카드 4</h2> + <p>...</p> + </li> + <li> + <h2>카드 5</h2> + <p>...</p> + </li> +</ul></code></pre> + +<pre class="brush: css"><code>.grid { + list-style: none; + margin: 0; + padding: 0; + display: grid; + gap: 20px; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); +} + +.grid li { + border: 1px solid #666; + padding: 10px; +}</code></pre> + +<p><a href="https://mdn.github.io/css-examples/learn/media-queries/grid.html">이 격자 예제를</a> 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/grid.html">소스를 보세요</a>.</p> + +<p>상기 예제를 브라우저에서 열면 화면을 넓히거나 좁히거나 하여 열 트랙 수가 변경되는 것을 확인할 수 있습니다. 이 방법의 좋은 점은 격자가 뷰포트 너비를 보는 게 아니라 해당 구성 요소에 맞춰 이용할 수 있는 너비를 살핀다는 것입니다. 당신에게 미디어 쿼리가 전혀 필요하지 않을수도! 있다는 제안으로 이번 절을 마감하는 것은 이상하게 보일 수도 있습니다. 그러나 실제로 미디어 쿼리로 강화된 현대적 조판 메서드를 잘 사용하면 최상의 결과를 얻을 수 있습니다.</p> + +<h2 id="요약정리">요약정리</h2> + +<p>여러분은 이 단원에서 미디어 쿼리에 대해 배웠으며 모바일 우선 반응형 디자인을 실제로 생성하는 방법도 알아 보았습니다.</p> + +<p>우리가 만든 것을 시작점로 더 많은 미디어 쿼리 조건을 테스트할 수 있습니다. 예를 들어, 방문자가 <code>pointer</code> 미디어 기능을 사용하여 거친 포인터를 가지고 있는 것을 감지하면 탐색 메뉴의 크기를 변경할 수 있습니다.</p> + +<p>또한 서로 다른 구성 요소를 추가하고 미디어 쿼리를 추가한다든지 또는 가변상자나 격자와 같은 조판 방법을 사용하는 것이 구성 요소를 반응형으로 만드는 가장 적절한 방법인지 여부를 실험할 수 있습니다. 바른 방식 혹은 그른 방식 따윈 없습니다. 말하자면 어떤 것이 디자인과 콘텐츠에 가장 적합한지 실험하고 관찰해야 합니다.</p> + + + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="이번_단위에는">이번 단위에는</h2> + +<ul> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">씨에스에스 조판 소개</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">격자</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 조판</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/반응형_디자인">반응형 디자인</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/레거시_조판_메서드">레거시 조판 메서드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">조판 이해도 필수 평가</a></li> +</ul> diff --git a/files/ko/learn/css/css_layout/반응형_디자인/index.html b/files/ko/learn/css/css_layout/반응형_디자인/index.html new file mode 100644 index 0000000000..b1311448c7 --- /dev/null +++ b/files/ko/learn/css/css_layout/반응형_디자인/index.html @@ -0,0 +1,333 @@ +--- +title: 반응형 디자인 +slug: Learn/CSS/CSS_layout/반응형_디자인 +tags: + - 가변상장 + - 격자 + - 다단 + - 미디어 쿼리 + - 반응형 웹 디자인 + - 유동 격자 + - 이미지 + - 타이포크래피 +translation_of: Learn/CSS/CSS_layout/Responsive_Design +--- +<div>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</div> + +<p>웹디자인 초창기에는 페이지를 구축할 때 매우 구체적인 화면 크기를 공략 대상으로 삼았습니다. 사용자가 웹디자이너가 예상한 것보다 크거나 작은 화면의 기기를 가지고 있다면 원하지 않는 스크롤 막대에서부터 지나치게 긴 길이의 라인, 사용 공간이 부족하게 되는 결과를 낳습니다. 다양한 화면 크기가 등장함에 따라 <em>responsive web design</em> 개념이 등장했습니다. 말하자면 서로 다른 화면 너비와 해상도 등에 맞게 웹 페이지가 조판과 모양을 변경할 수 있는 일련의 실례를 집대성한 것입니다. 이 아이디어가 우리가 멀티 디바이스 웹에 대한 설계 방식을 바꾸게 만든 장본인입니다. 이 문서에서 우리는 그 내용을 숙달하기 위해 당신이 알아야하는 주요 기술을 이해하도록 도울 것입니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선결 사항:</th> + <td>에이치티엠엘의 기초인 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">에이치티엠엘 입문서</a>를 공부하세요), 그리고 씨에스에스의 작동 방식을 파악하기 위해 (<a href="/en-US/docs/Learn/CSS/First_steps">씨에스에스 첫걸음</a>과 <a href="/ko/docs/Learn/CSS/Building_blocks">씨에스에스 구성 블록</a>를 공부하세요.)</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>반응형 디자인의 역사와 핵심적인 계념 파악하기</td> + </tr> + </tbody> +</table> + +<h2 id="웹사이트_조판_역사">웹사이트 조판 역사</h2> + +<p>역사의 어느 시점 여러분이 웹 사이트를 디자인할 때 두 가지 옵션이 있었습니다.</p> + +<ul> + <li>여러분은 웹브라우저 창에 요소를 연장하도록 하는 <em>liquid</em>(유동) 사이트를 만들 수 있습니다.</li> + <li>픽셀 크기가 고정되어 있는 <em>fixed width</em> 사이트를 만들 수 있었습니다.</li> +</ul> + +<p>이러한 두 가지 접근법은 사이트를 디자인하는 사람의 화면에서 가장 보기 좋은 웹 사이트로 귀결되는 경향이 있었습니다! 유동 사이트는 (아래에서 볼 수 있듯이) 디자이너의 화면보다 더 작은 화면에는 찌부러진 디자인이 나오고, 더 큰 화면에는 읽을 수 없을 정도로 길이가 긴 라인을 만들어냅니다.</p> + +<figure><img alt="두 개의 열이 있는 조판이 모바일 크기 뷰포트에서 찌부러집니다." src="https://mdn.mozillademos.org/files/16834/mdn-rwd-liquid.png" style="display: block; height: 406px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>주석</strong>: 여기 간단한 유동 조판을 보세요: <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">예제</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">소스 코드</a>. 예제를 보면 브라우저 창을 안팎으로 드래그하여 서로 다른 크기에 반응해 어떻게 보이는지 확인합니다.</p> +</div> + +<p>고정 폭 사이트는 (아래에서 보듯) 사이트 너비보다 작은 화면상에 수평 스크롤 막대가 생기는 위험이 있고 더 큰 화면상에서는 웹디자인 가장자리에 많은 흰색 공간이 생길 위험이 있습니다.</p> + +<figure><img alt="이동 뷰포트에 수평 스크롤 막대가 있는 조판입니다." src="https://mdn.mozillademos.org/files/16835/mdn-rwd-fixed.png" style="display: block; height: 411px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>주석</strong>: 여기 간단한 고정 너비 조판을 보세요: <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">예제</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">소스 코드</a>. 역시 브라우저 창 크기를 변경할 때 결과를 관찰하세요.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>주석</strong>: 상단 화면는 파이어폭스 개발툴 안에서 <a href="/en-US/docs/Tools/Responsive_Design_Mode">반응형 디자인 모드</a>을 사용해 갈무리 한 것입니다.</p> +</div> + +<p>모바일 웹이 첫 번째 피처폰의 등장으로 현실화되기 시작하면서 모바일을 수용하고자 하는 회사들은 일반적으로 (종종 <em>m.example.com</em> 또는 <em>example.mobi</em> 이런 식의) 서로 다른 URL를 사용하여 그들의 사이트의 특별한 모바일 버전을 만들게 됩니다. 이는 해당 사이트의 두 가지 별도 버전을 개발하고 최신 상태로 유지해야 한다는 것을 의미했습니다.</p> + +<p>게다가, 이러한 모바일 사이트들을 경험해보면 종종 매우 축소된 기능을 제공합니다. 모바일 장치가 더욱 강력해지고 전체 웹 사이트를 표시할 수 있게 되면서, 그러한 기능 축소 모바일 버전 사이트에 갖힌 자신을 발견한 모바일 사용자들은 그들이 알고 있는 해당 사이트의 전체 기능이 있는 데스크탑 버전의 정보에 접근할 수 없었기에 좌절감을 안겨주었습니다.</p> + +<h2 id="반응형_디자인의_전신_가변_조판">반응형 디자인의 전신 가변 조판</h2> + +<p>유동 및 고정 너비의 웹사이트 구축 방법의 단점을 해결하기 위해 여러 가지 접근법이 개발되었습니다. 2004년 카메론 아담스는 다양한 화면 해상도에 적응할 수 있는 디자인을 만드는 방법을 설명하는 <a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">해상도 의존 조판</a>이라는 제목의 게시물을 작성했습니다. 이 접근방식은 화면 해상도를 감지하고 정확한 씨에스에스를 로드하려면 자바스크립트가 필요했습니다.</p> + +<p>조이 미클리 길렌워터는 그녀의 <a href="http://zomigi.com/blog/voices-that-matter-slides-available/">작업</a>을 통해 화면을 채우는 것과 완전히 고정된 화면 크기 사이를 만족시키는 평균값을 찾으려고 시도하는 등 가변적인 사이트를 만들 수 있는 다양한 방법을 기술하고 공식화하는 데 산파 역할을 했습니다.</p> + +<h2 id="반응형_디자인">반응형 디자인</h2> + +<p>반응형 디자인이라는 용어는 <a href="https://alistapart.com/article/responsive-web-design/">2010년 이단 마르코트가 만든 신조어로</a> 세 가지 기술을 조합한 용법을 설명하고 있습니다.</p> + +<ol> + <li>첫 번째는 이미 길렌워터에 의해 탐구되고 있던 유동 격자라는 아이디어였으며, 마르코트의 <a href="https://alistapart.com/article/fluidgrids/">유동 격자</a>란(2009년 <code>A List Apart</code>에 발표) 문서에서 읽을 수 있다.</li> + <li>두 번째 기술은 <a href="http://unstoppablerobotninja.com/entry/fluid-images">유동 이미지</a>라는 개념이다. <code>max-width</code> 속성을 <code>100%</code>로 설정하는 매우 간단한 기술을 사용하면 이미지의 포함된 열이 이미지의 고유 크기보다 좁아지면 이미지가 더 작아지지만 더 커지지는 않습니다. 이것은 이미지가 대열이탈이 아니라 가변적인 크기의 열에 맞게 축소될 수 있지만 열이 이미지보다 넓어지면 확대되지 않고 픽셀화될 수 있습니다.</li> + <li>세 번째 핵심 구성요소는 <a href="/ko/docs/Web/CSS/Media_Queries">미디어 쿼리</a>였습니다. 미디어 쿼리는카메론 아담스가 앞서 자바스크립의 사용을 탐구했던 조판 전환 유형을 씨에스에스만을 사용하여 실현합니다. 모든 화면 크기마다 하나씩 조판을 부여하기 보다는 조판을 변경할 수 있었다. 사이드바를 작은 화면에 맞게 재배치하거나 대체 탐색 매뉴를 표시할 수 있습니다.</li> +</ol> + +<p><strong>반응형 웹 디자인은 별도의 기술이 아니다</strong>라는 것을 이해하는 것이 중요합니다. 즉, 웹 디자인에 대한 접근 방식이나 콘텐츠를 보는데 사용되는 장치에 <em>반응</em>할 수 있는 조판 생성에 사용되는 모범 사례 집합을 기술하는 데 사용되는 용어다. 마르코트의 원래 연구에서 이것은 (부동체를 사용하는) 가변 격자와 미디어 쿼리를 의미했지만, 그의 문서가 쓰여진지 거의 10년 만에 반응형으로 동작하는 것이 기본값이 되었다. 현대의 씨에스에스 조판 메서드는 본질적으로 반응형이며 반응형 사이트 설계를 쉽게하기 위해 웹 플랫폼에 새로운 요소들이 내장되어 있습니다.</p> + +<p>이 문서의 나머지 절에서는 반응형 사이트를 만들 때 사용할 수 있는 다양한 웹 플랫폼 기능에 대해 안내할 것입니다.</p> + +<h2 id="미디어_쿼리">미디어 쿼리</h2> + +<p>반응형 디자인은 오롯이 미디어 쿼리 때문에 등장할 수 있었습니다. 미디어 쿼리 수준 3 규격은 2009년 권장사항 후보가 되었으며, 이는 브라우저에서 구현할 준비가 되어 있음을 의미합니다. 미디어 쿼리에서는 일련의 테스트를 실행할 수 있습니다(예로 사용자의 화면이 특정 너비나 특정 해성도보다 큰지 여하에 따라). 씨에스에스를 선택적으로 적용하여 사용자의 필요에 따라 페이지를 적절하게 스타일링합니다.</p> + +<p>예를 들어, 아래 미디어 쿼리는 현재 웹 페이지가 화면 미디어로 표시되고 있는지(따라서 인쇄된 문서가 아님) 확인하며 뷰포트는 적어도 800픽셀 너비인지 테스트합니다. <code>.container</code> 선택기는 씨에스에스는 이 두 가지가 사실인 경우에만 적용됩니다.</p> + +<pre class="brush: css"><code>@media screen and (min-width: 800px) { + .container { + margin: 1em 2em; + } +} </code> +</pre> + +<p>스타일시트에 여러 미디어 쿼리를 추가하여 다양한 화면 크기에 맞는 최적의 전체 조판 또는 조판의 일부를 조정할 수 있습니다. 미디어 쿼리가 도입되고 조판이 변경된 지점을 <em>breakpoints</em>(분기점)라고 합니다.</p> + +<p>미디어 쿼리를 사용할 때 일반적인 접근법은 좁은 화면 장치(예: 휴대폰)에 대한 간단한 단일 열 조판을 만든 다음, 큰 화면인지 점검하고, 화면 폭이 충분하다는 것을 알게 될 때 다단 조판을 구현하는 것이다. 이를 <strong>모바일 우선</strong> 디자인이라고 표현하는 경우가 많다.</p> + +<p><a href="/ko/docs/Web/CSS/Media_Queries">미디어 쿼리</a>에 대한 MDN 문서를 더 찾아보십시요.</p> + +<h2 id="가변_격자">가변 격자</h2> + +<p>반응형 사이트는 분기점 전후로 자체 조판을 변경할 뿐만 아니라 가변 격자상에도 동일하게 구축됩니다. 가변 격자는 현존하는 모든 장치 크기를 공략 대상으로 삼을 필요가 없으며, 그 대상에 대한 완벽한 픽셀 조판을 구축할 필요가 없다는 것을 의미합니다. 완벽한 픽셀 접근 방식은 존재하는 다양한 크기의 장치들이 엄청나게 많고, 적어도 데스크톱에서는 사람들이 항상 브라우저 창을 최대화하지는 않는다는 사실을 감안할 때 불가능할 것입니다.</p> + +<p>가변 격자를 사용하면 요소를 분기점에 추가하고, 콘텐츠가 불량으로 보이기 시작하는 지점에서 디자인을 변경할 수 있습니다. 예를 들어, 화면 크기가 커지면 라인 길이가 읽을 수 없게 길어지거나 상자가 좁아질 때 각 라인에 두 단어로 찌브러집니다.</p> + +<p>반응형 디자인 초창기에는 조판 기능을 수행하는 유일한 옵션은 <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">부동체</a>를 사용하는 것이 었습니다. 가변 부동 조판은 각 요소에 백분율 너비를 부여하고 조판 전체의 너비가 100%를 넘지 않도록 보장함으로써 달성되었습니다. 마르코트는 유동 격자와 관련 그의 원래 작품에서 픽셀을 사용하여 설계된 조판을 채택하여 백분율로 변환하는 공식을 상세히 설명했습니다.</p> + +<pre><code>target / context = result </code> +</pre> + +<p>예를 들어, 목표 열 크기가 60픽셀이고, 거기에 들어갈 상황(혹은 컨테이너)가 이 960픽셀이면, 씨에스에스에서 사용할 수 있는 값을 얻기 위해 우선 60픽셀을 960픽셀로 나누고 거기에 소수점을 오른쪽으로 두칸 이동합니다.</p> + +<pre class="brush: css"><code>.col { + width: 6.25%; /* 60 / 960 = 0.0625 */ +} </code> +</pre> + +<p>이 접근 방식은 오늘날 웹상에 여러 곳에서 발견될 것이며, 여기 우리의 <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">레거시 조판 메서드</a> 문서의 조판 절에 문서화되어 있습니다. 여러분이 업무 중에 이 접근법을 사용하는 웹 사이트를 발견할 가능성이 높기 때문에 부동 기반의 가변 조판을 사용하여 현대적인 사이트를 구축하지는 않겠지만, 그 내용을 이해할 가치는 있습니다.</p> + +<p>다음 예제에서는 미디어 쿼리와 가변 격자를 사용하여 간단한 반응형 디자인를 보여줍니다. 좁은 화면상에서는 상자가 상대 요소 위해 겹겹이 쌓여지는 조판 형태로 표시됩니다.</p> + +<figure><img alt="상자 무리가 상대 요소의 상단에 수직으로 겹겹이 쌓이는 모바일뷰 조판입니다." src="https://mdn.mozillademos.org/files/16836/mdn-rwd-mobile.png" style="display: block; height: 407px; width: 300px;"> +<p>On wider screens they move to two columns:</p> + +<figcaption></figcaption> +</figure> + +<figure><img alt="2단 조판이 적용된 데스크탑 뷰입니다." src="https://mdn.mozillademos.org/files/16837/mdn-rwd-desktop.png" style="display: block; height: 217px; width: 600px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>주석</strong>: 여러분은 여기서 <a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">실례</a>를 찾아볼 수 있으며, 이 예제에 대한 <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">소스 코드</a>를 깃허브에서 찾을 수 있습니다.</p> +</div> + +<h2 id="현대_조판_기술">현대 조판 기술</h2> + +<p><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 조판</a>과 <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a>와 <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">격자</a>와 같은 현대 조판 메서드는 기본값으로 응답형입니다. 그것들은 모두 여러분이 가변 격자를 만들려 한다고 가정하고 그렇게 동작하도록 편리한 방법을 제공합니다.</p> + +<h3 id="다단">다단</h3> + +<p>이러한 조판 메서드 중 가장 오래된 것은 다단입니다. 여러분이 <code>column-count</code>를 지정하면, 이는 여러분이 콘텐츠를 나누고자 하는 단의 숫자를 나타냅니다. 그런 다음 브라우저는 다단의 크기를 화면 크기에 따라 변경되는 크기로 계산합니다.</p> + +<pre class="brush: css"><code>.container { + column-count: 3; +} </code> +</pre> + +<p><code>column-width</code>을 지정하는 대신 <em>minimum</em> 너비를 지정하는 것입니다. 브라우저는 컨테이너에 안착할 수 있는 만큼으로 지정한 해당 너비를 가진 열을 최대한 많이 생성하고 난 뒤에 다음 모든 열 사이에서 나머지 공간을 공유합니다. 따라서 열의 수는 공간이 얼마나 되는지에 따라 달라집니다.</p> + +<pre class="brush: css"><code>.container { + column-width: 10em; +} </code> +</pre> + +<h3 id="가변상자">가변상자</h3> + +<p>가변상자에서 가변 항목은 초깃값 동작으로 컨테이너의 공간에 따라 항목 사이의 공간을 축소하고 분배합니다. <code>flex-grow</code> 및 <code>flex-shrink</code> 값을 변경하면 해당 항목에 주어진 주변 공간이 남거나 모질라게 될 경우 원하는 동작 방식을 표기할 수 있습니다.</p> + +<p>아래 예제에서 가변 항목은 가변 컨테이너 안에서 각각 동일한 양의 공간을 차지하며, <a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox#가변_항목의_가변_크기_조정">가변상자: 가변 항목의 가변 크기 조정</a>에서 설명했듯이 <code>flex: 1</code>식의 약칭을 사용할 수 있습니다.</p> + +<pre class="brush: css"><code>.container { + display: flex; +} + +.item { + flex: 1; +} </code> +</pre> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 예제로써 상기된 간단한 반응형 조판을 재구축했는데 이번에는 가변상자를 사용했습니다. 여러분은 더 이상 낮설은 백분율 값을 사용하여 열의 크기를 계산할 필요가 없는 방법을 보게 됩니다: <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">예제</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">소스 코드</a>.</p> +</div> + +<h3 id="씨에스에스_격자">씨에스에스 격자</h3> + +<p>씨에스에스 격자 조판에서 <code>fr</code> 단위는 격자 트랙 전역에 걸쳐 이용할 수 있는 공간을 분배할 수 있습니다. 다음 예에서는 <code>1fr</code> 크기의 트랙 3개가 있는 격자 컨테이너를 만듭니다. 이렇게 하면 3개의 열 트랙이 생성되며, 각 트랙은 컨테이너에 있는 사용 가능한 공간\의 한 부분을 차지합니다. 여러분은 <a href="ko/docs/Learn/CSS/CSS_layout/Grids#fr_단위를_포함하는_가변_격자">fr 단위를 포함한 가변 격자</a>라는 격자 조판 학습 주제에서 격자를 생성하는 이같은 접근 방식에 대해 자세히 알 수 있습니다.</p> + +<pre class="brush: css"><code>.container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} </code> +</pre> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 격자 조판 버전은 .wrapper <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">예제</a>상에 열을 정의할 수 있으므로 더 간단합니다: <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">소스 코드</a>.</p> +</div> + +<h2 id="반응형_이미지">반응형 이미지</h2> + +<p>반응 이미지에 대한 가장 간단한 접근법은 반응형 디자인에 관한 마르코트의 초창기 문서에서 설명한 바와 같습니다. 기본적으로 필요한 최대 크기의 이미지를 촬영하여 그것을 축소할 수 있습니다. 이것은 오늘날에도 사용되는 접근법이며 대부분의 스타일 시트에서 다음과 같은 씨에스에스를 어디선가는 발견할 수 있습니다.</p> + +<pre class="brush: css"><code>img { + max-width: 100%: +} </code> +</pre> + +<p>이 접근법에는 명백한 단점이 있습니다. 해당 이미지는 고유 크기보다 훨씬 작게 표시될 수 있어 대역폭 낭비입니다. 다시말해 모바일 사용자는 브라우저 창에서 실제로 보는 것의 몇 배 크기의 이미지를 다운로드하게 되니 낭비입니다. 또한, 데스크톱과 같은 이미지 가로 세로 비율을 모바일에서 원하지 않을 수도 있습니다. 예를 들어, 모바일의 경우 정사각형 이미지가 좋을 수 있지만 데스크톱상에는 같은 이미지를 가로 보기처럼 장면을 보여줍니다. 또는 모바일 상의 이미지의 크기가 작다는 것을 이해하면서도 서로 다른 이미지를 모두 보여주고 싶을 경우가 있습니다. 말하자면 작은 화면 크기에서 더 쉽게 해석될 수 있는 이미지를 말합니다. 이런 것들은 단순히 이미지를 축소해서는 달성할 수 없습니다.</p> + +<p>반응형 이미지는 <code><a href="/en-US/docs/Web/HTML/Element/picture"><picture></a></code> 요소와 <code><a href="/en-US/docs/Web/HTML/Element/img"><img></a></code>, <code>srcset</code>과 <code>sizes</code> 속성은 이러한 문제를 모두 해결합니다. 여러분은 "힌트"(이미지에 가장 적합한 화면 크기와 해상도를 설명하는 메타 데이터)와 함께 여러 크기를 제공할 수 있으며, 브라우저는 각 장치에 가장 적합한 이미지를 선택하며, 사용자가 사용하고 있는 장치에 적합한 이미지 크기를 다운로드할 수 있도록 담보합니다.</p> + +<p>또한 다른 화면 크기에서 사용되는 이미지를 <em>art direct</em>할 수 있으므로 서로 다른 화면 크기에 대해 서로 다른 자르기 또는 완전히 다른 이미지를 제공할 수 있습니다.</p> + +<p>이곳 MDN 사이트의 에이치티엠엘 학습 섹션에서 <a href="/ko/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">반응형 이미지</a>에 대한 자세한 안내서를 찾을 수 있습니다.</p> + +<h2 id="반응형_타이포그래피">반응형 타이포그래피</h2> + +<p>반응형 타이포그래피 개념은 이전 작업에서 다루지 않은 반응형 디자인의 요소입니다. 본질적으로, 이것은 화면 부동산의 크기가 더 작아지거나 더 커지거나하는 것을 반영하기 위해 미디어 쿼리 구문 안에서 폰트 크기를 변경하는 것을 말합니다.</p> + +<p>이 예제에서 우리는 수준 1 머리글을 <code>4rem</code>로 설정하려고 합니다. 즉, 기본 글꼴 크기의 4배입니다. 정말 큰 제목이네요! 우리는 더 큰 화면 크기상에서만 이 코끼리만한 머리글을 원하기 때문에, 우리는 먼저 더 작은 머리글을 만들고, 미디어 쿼리를 사용해 조건에 맞으면 그것을 더 큰 크기로 덮어쓰기 하면됩니다. 여기서 조건은 사용자가 적어도 1200px의 화면 크기의 기기를 가진 경우가 해당됩니다.</p> + +<pre class="brush: css"><code>html { + font-size: 1em; +} + +h1 { + font-size: 2rem; +} + +@media (min-width: 1200px) { + h1 { + font-size: 4rem; + } +} </code> +</pre> + +<p>상기한 반응형 격자 예제를 편집했고, 거기에 더해 이미 제시된 메서드를 사용하는 응답형 유형을 포함시켰습니다. 조판이 2개의 열 버전으로 이동함에 따라 머리글 크기가 어떻게 전환하는지 볼 수 있습니다.</p> + +<p>모바일에서는 머리글이 더 작다:</p> + +<figure><img alt="머리글 크기가 작은 스택 모양의 조판입니다." src="https://mdn.mozillademos.org/files/16838/mdn-rwd-font-mobile.png" style="display: block; height: 407px; width: 300px;"> +<p>On desktop however we see the larger heading size:</p> + +<figcaption></figcaption> +</figure> + +<figure><img alt="큰 머리글이 딸린 두개의 열 조판입니다." src="https://mdn.mozillademos.org/files/16839/mdn-rwd-font-desktop.png" style="display: block; height: 169px; width: 600px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 이 예제의 실제 구현 장면: <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">예제</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">소스 코드</a>.</p> +</div> + +<p>타이포그래피에 대한 이러한 접근 방식이 보여주듯이, 미디어 쿼리를 제한하여 페이지 조판만 변경할 필요는 없습니다. 그들 접근법을 사용하여 어떤 요소라도 조정해서 대체 화면 크기에 맞는 더 유용하고 매력적인 요소를 만들 수 있다.</p> + +<h3 id="반응형_타이포그래피에_대한_뷰포트_단위_사용하기">반응형 타이포그래피에 대한 뷰포트 단위 사용하기</h3> + +<p>흥미로운 접근 방식은 반응형 타이포그래피를 사용하기 위해 뷰포트 단위 <code>vw</code>를 사용할 수 있다는 점이다. <code>1vw</code>는 뷰포트 너비의 1%와 동일하며, <code>vw</code>를 사용하여 글꼴 크기를 설정하면 항상 뷰포트 크기와 관련이 있다는 것을 의미한다.</p> + +<pre class="brush: css">h1 { + font-size: 6vw; +}</pre> + +<p>위의 작업 수행에서의 문제는 사용자가 vw 단위를 사용하여 텍스트 집합을 확대/축소하는 기능을 상실하는 데 있다. <strong>따라서 여러분은 뷰포트 단위만으로 텍스트를 설정해서는 안 된다</strong>.</p> + +<p>해결책이 하나 있다. <code><a href="/en-US/docs/Web/CSS/calc">calc()</a></code>를 사용하는 것이다. 즉, <code>em</code>와 같은 고정된 크기를 사용하여 속성값 집합에 <code>vw</code> 단위를 추가하면 텍스트는 여전히 확대/축소할 수 있다. 본질적으로 <code>vw</code> 단위는 확대/축소 값에 더해 추가된다.</p> + +<pre class="brush: css">h1 { + font-size: calc(1.5rem + 3vw); +}</pre> + +<p>즉, 머리글에 대한 폰트 크기를 한 번만 지정하면 된다. 크기를 모바일용으로 따로 설정할 게 아니라 미디어 쿼리 내에서 크기를 재정의한다는 말이다. 그러면 뷰포트의 크기가 커질수록 글꼴은 점차 커진다.</p> + +<div class="blockIndicator note"> +<p>이에 대한 예제의 실현: <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">예제</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">소스 코드</a>.</p> +</div> + +<h2 id="뷰포트_메타_테그">뷰포트 메타 테그</h2> + +<p>응답형 페이지의 에이치티엠엘 소스를 보면 일반적으로 문서의 <code><head></code>에서 다음과 같은 {{htmlelement("meta")}} 태그를 볼 수 있다.</p> + +<pre class="brush: html"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> +</pre> + +<p>이 메타 태그는 뷰포트의 너비를 장치의 너비로 설정하여 문서를 의도한 크기의 100%로 확장해야 한다고 모바일 브라우저에게 알려줍니다. 이로써 여러분이 의도한 대로 모바일에 최적화된 크기로 문서를 표시합니다.</p> + +<p>왜 이런 것이 필요할까요? 모바일 브라우저는 뷰포트 너비에 대해 거짓말을 하는 경향이 있기 때문이다.</p> + +<p>이 메타 태그는 원래 iPhone이 출시되고 사람들이 작은 전화 화면에서 웹 사이트를 보기 시작했을 때 대부분의 사이트가 모바일 최적화되지 않았기 때문에 존재합니다. 따라서 모바일 브라우저는 뷰포트 너비를 960픽셀로 설정하게 됩니다. 해당 너비로 페이지를 렌더링하고, 그 결과를 데스크톱 조판의 확대 버전으로 표시합니다. 다른 모바일 브라우저(예를 들어 구글 안드로이드)도 똑같은 일을 합니다. 사용자들은 웹사이트를 확대하고 이리저리 끌어 옮기며(panning) 그들이 관심을 갖는 부분을 볼 수 있었지만, 모양이 형편 없었습니다. 만약 여러분이 반응형 디자인이 아닌 사이트를 우연히 발견하게 된다면, 여러분은 오늘날에도 이런 걸 보게 될 것입니다.</p> + +<p>문제는 분기점과 미디어 쿼리를 포함하는 응답형 디자인이 모바일 브라우저에서 의도한 대로 작동하지 않는다는 점에 있습니다. 여러분이 480px 뷰포트 너비나 그 이하에서 시작하는 좁은 화면 조판을 갖고 있고 뷰포트가 960px로 설정되어 있다면 좁은 화면 조판을 모바일에서 절대 볼 수 없게 된다. <code>width=device-width</code>를 설정하면 애플의 기본값인 <code>width=960px</code>를 장치의 실재 너비로 재지정하므로 당신의 미디어 쿼리가 의도한 대로 작동합니다.</p> + +<p>따라서 에이치티엠엘 문서의 헤더 부분에 상기 에이치티엠엘 라인을 <em>항상</em> 포함해야 합니다.</p> + +<p>뷰포트 메타 태그와 함께 사용할 수 있는 다른 설정이 있지만 일반적으로 상기 에이치티엠엘 라인이면 여러분이 사용하고자 하는 내용에 해당합니다.</p> + +<ul> + <li><code>initial-scale</code>: 페이지의 초기 확대/축소 지정은 1로 설정된다.</li> + <li><code>height</code>: 뷰포트 높이를 특정값으로 지정합니다.</li> + <li><code>minimum-scale</code>: 최소 확대/축소 수준을 설정합니다.</li> + <li><code>maximum-scale</code>: 최대 확대/축소 수준을 설정합니다.</li> + <li><code>user-scalable</code>: <code>no</code>값을 지정하게 되면 확대/축소를 방지합니다.</li> +</ul> + +<p>여러분은 <code>minimum-scale</code>와 <code>maximum-scale</code> 사용을 피해야하며, 특히 <code>user-scalable</code>를 <code>no</code>로 설정하는 것도 피해야 합니다. 사용자는 필요한 만큼 확대하거나 축소할 수 있어야 합니다.이를 방지하면 접근성 문제가 발생합니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 뷰포트 메타 태그를 대체하기 위해 고안된 씨에스에스 @ 규칙이 있습니다. <a href="/ko/docs/Web/CSS/@viewport">@viewport</a> 그러나 브라우저 지원이 매우 형편없습니다. 그것은 인터넷 익스플로러와 에지에서 구현되었지만, 일단 크롬 기반 에지가 출시되면 더 이상 에지 브라우저의 일부가 되지 않게 됩니다.</p> +</div> + +<h2 id="요약정리">요약정리</h2> + +<p>반응형 디자인은 디자인이 보여지는 당해 환경에서 반응하는 사이트 및 애플리케이션 디자인을 말합니다. 그것은 많은 씨에스에스와 에이치티엠엘 기능과 기술을 망라하며 이제 기본값으로 우리가 웹사이트를 구축할 때 필수적인 방법입니다. 여러분이 휴대폰으로 방문하는 사이트를 생각해보세요. 데스크톱 버전이 축소된 사이트, 또는 사물을 찾기 위해 옆으로 스크롤해야 하는 사이트를 우연히 발견한다는 것은 상당히 이례적인 일일 것입니다. 그렇게 된 것은 웹이 반응형으로 디자인하는 접근방식으로 옮겨갔기 때문입니다.</p> + +<p>또한 이번 단원에서 배운 조판 메서드의 도움으로 반응형 디자인을 달성하기가 훨씬 쉬워졌습니다. 여러분이 당대 웹 개발에 신출내기라면, 반응형 디자인 초창기보다 훨씬 많은 도구가 마련되어 있으니 맘껏 이용하십시요. 따라서 당신이 참조하고 있는 어떤 자료의 연혁을 확인할 가치가 있습니다. 역사적 기록 문서로서 여전히 유용하지만, 사이트 방문자가 이용하는 장치가 무엇이건 관계없이 우아하고 유용한 디자인을 훨씬 쉽게 생성하려면 씨에스에스와 에이치티엠엘의 현대적 용법이 정답입니다.</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="이번_단위에는">이번 단위에는</h2> + +<ul> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">씨에스에스 조판 소개</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">격자</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 조판</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/반응형_디자인">반응형 디자인</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/레거시_조판_메서드">레거시 조판 메서드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">조판 이해도 필수 평가</a></li> +</ul> diff --git a/files/ko/learn/css/css_layout/위치잡기/index.html b/files/ko/learn/css/css_layout/위치잡기/index.html new file mode 100644 index 0000000000..76a491ae0e --- /dev/null +++ b/files/ko/learn/css/css_layout/위치잡기/index.html @@ -0,0 +1,585 @@ +--- +title: 위치잡기 +slug: Learn/CSS/CSS_layout/위치잡기 +tags: + - 고정 + - 글 + - 상대 + - 씨에스에스 + - 안내서 + - 위치잡기 + - 절대 + - 조판 + - 초보자 + - 코딩스크립팅 +translation_of: Learn/CSS/CSS_layout/Positioning +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">당신이 일반 문서 조판 대열에서 요소를 끄집어 내어, 그것이 다르게 행동하게 만들수 있게 해주는 것이 위치잡기다. 예를 들어 상대 요소 위에 놓거나 브라우저 뷰 포트 내부의 동일한 위치를 항상 유지하게 해준다. 이 문서는 서로 다른 {{cssxref("position")}} 값을 설명하고, 그 걸 사용하는 방법에 대해서도 설명한다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선결 사항:</th> + <td>에이치티엠엘의 기초 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">에이치티엠엘 입문서</a>)와 씨에스에스 작동 방식에 대한 개념(<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">씨에스에스 입문서</a>를 공부하세요.)</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>씨에스에스 위치잡기가 작동하는 방법 배우기</td> + </tr> + </tbody> +</table> + +<p>가능하면 우리 깃허브 저장소에 있는 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html">0_basic-flow.html</a></code> 파일의 사본을 가지고 당신의 컴퓨터상에서 해당 연습을 함께 따라해보시길 바랍니다. (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html">여기 소스 코드</a>)가 있으니 그걸 착수 파일로 이용하십시요.</p> + +<h2 id="위치잡기_소개">위치잡기 소개</h2> + +<p>크게봐서 위치잡기의 개념은 위에서 설명했듯 기본 문서 대열에 따른 동작을 무시하고 흥미로운 효과를 낼 수 있도록 하는 것입니다. 조판 내부의 일부 상자의 위치를 기본 조판 대열 위치에서 약간 변경한다거나, 약간 기묘하거나, 편치않은 느낌을 주고 싶다면 어떨까? 위치잡기가 바로 당신의 도구입니다. 또는 페이지의 다른 부분의 상위에 부동(浮動)하는 사용자 인터페이스 요소를 만들고 싶다라거나 아울러 페이지가 스크롤된 정도와 상관없이 항상 브라우저 창 내부의 동일한 위치에 놓이게 하고 싶다면? 위치잡기는 그런 조판 작업을 가능하게 합니다.</p> + +<p>에이치티엠엘 요소에 적용될 수 있는 여러 가지 유형의 위치잡기가 존재합니다. 어떤 요소상에 특정 유형의 위치잡기가 활성화되도록 하기 위해 {{cssxref("position")}} 속성을 사용합니다.</p> + +<h3 id="정적_위치잡기">정적 위치잡기</h3> + +<p>정적 위치잡기는 모든 요소에 주어지는 기본값입니다. 즉, "요소를 문서 조판 대열상에 일반 위치에 배치하라는 것으로 여기서 특별한 것은 없습니다."</p> + +<p>이를 입증한다거나, 이어질 섹션에서 다룰 예제를 설정하려면 먼저 에이치티엠엘상에 두 번째 {{htmlelement("p")}} 요소에 <code>positioned</code>라는 클래스를 추가하십시오:</p> + +<pre class="brush: html"><p class="positioned"> ... </p></pre> + +<p>이제 다음과 같은 규칙을 당신의 씨에스에스 하단에 추가하십시요:</p> + +<pre class="brush: css">.positioned { + position: static; + background: yellow; +}</pre> + +<p>이제 저장하고 새로고침하면 두 번째 단락의 배경 색깔이 업데이트된 것을 제외하고 다른 차이가 없다는 것이 확인될 것입니다. 아무 문제없습니다. 앞에서 얘기했듯이 정적 위치잡기는 기본값으로 주어진 동작입니다!</p> + +<div class="note"> +<p><strong>주석</strong>: 이 시점에 예제의 실제 구현 장면을 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code>에서 볼 수 있습니다.(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">소스 코드는 여기서 보세요</a>).</p> +</div> + +<h3 id="상대_위치잡기">상대 위치잡기</h3> + +<p>상대 위치잡기는 우리가 살펴 첫 번째 위치 유형입니다. 이것은 정적 위치 결정과 매우 유사합니다. 단, 일단 정상 조판 대열상에 위치잡기할 요소가 자리를 잡고나면 페이지의 다른 요소와 중첩되는 것을 포함하여 최종 위치를 수정할 수 있습니다. 당신의 코드에 있는 <code>position</code> 선언을 업데이트하십시요.</p> + +<pre class="brush: css">position: relative;</pre> + +<p>현 시점에서 저장하고 새로 고침하면 전혀 변경된 결과가 확인되지 않습니다. 그럼 요소의 위치를 어떻게 수정할까요? 다음 절에서 설명하겠지만, {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}을 사용해야 합니다.</p> + +<h3 id="상하_좌우_위치잡기_소개">상하 좌우 위치잡기 소개</h3> + +<p>{{cssxref("top")}}, {{cssxref("bottom")}}와 {{cssxref("left")}}, and {{cssxref("right")}}는 {{cssxref("position")}}과 나란히 사용되어 기준 위치에 비례해 정확한 위치잡기를 지정한다. 이를 시험하려면 다음 선언문을 씨에스에스 <code>.positioned</code> 규칙에 추가하십시오:</p> + +<pre>top: 30px; +left: 30px;</pre> + +<div class="note"> +<p><strong>참고</strong>: 이러한 속성의 값은 당신이 논리적으로 예상할 수 있는 모든 <a href="/ko/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">단위</a>를 취할 수 있습니다. 예로 pixels, mm, rems, % 등이 해당한다.</p> +</div> + +<p>이제 저장하고 새로고침하면 다음과 같은 내용의 결과를 얻을 것입니다:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>상대 위치잡기</h1> + +<p>나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.</p> + +<p class="positioned">기본적으로 우리는 부모 요소의 너비 100%에 걸쳐 있습니다. 우리의 총 너비와 총 높이는 우리의 콘텐츠 + 패딩 + 테두리 너비 및 높이입니다.</p> + +<p>우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.</p> + +<p>인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 대열이탈할 경우 <span>(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)</span>, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: relative; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('상하_좌우_위치잡기_소개', '100%', 500) }}</p> + +<p>근사하죠, 그쵸? 좋습니다. 그러나 이것은 아마도 여러분이 기대했던 것이 아니었을 것입니다. 우리가 좌측 상단을 지정했는데 왜 우측 하단으로 이동했을까요? 처음에는 비논리적으로 들릴지 모르지만, 이것은 상대적 위치잡기가 작용하는 방식일 뿐입니다. 즉, 위치가 지정된 상자의 특정 측면을 밀어서 반대 방향으로 움직이는 보이지 않는 힘이 있다고 생각할 필요가 있습니다. 예를 들어, <code>top: 30px;</code>를 지정하면 힘은 상자 상단을 밀어서 30px 아래로 이동하게 만듭니다.</p> + +<div class="note"> +<p><strong>참고</strong>: 이 시점에 예제의 실제 구현 장면을 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code>에서 확인할 수 있습니다(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">소스 코드 보기</a>).</p> +</div> + +<h3 id="절대_위치잡기">절대 위치잡기</h3> + +<p>절대적인 위치 결정은 매우 다른 결과를 가져옵니다. 당신의 소스 코드에 다음과 같이 위치 선언을 변경해 보겠습니다.</p> + +<pre>position: absolute;</pre> + +<p>지금 저장한 다음에 새로고침하면 다음과 같은 것이 확인되어야 합니다:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>절대 위치잡기</h1> + +<p>나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.</p> + +<p class="positioned">기본적으로 우리는 부모 요소의 너비 100%에 걸쳐 있습니다. 우리의 총 너비와 총 높이는 우리의 콘텐츠 + 패딩 + 테두리 너비 및 높이입니다.</p> + +<p>우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.</p> + +<p>인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 대열이탈할 경우 <span>(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)</span>, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('절대_위치잡기', '100%', 420) }}</p> + +<p>우선, 위치잡기 요소가 원래 있었어야 했던 문서 대열 속 위치에 있던 간격은 더 이상 존재하지 않는다는 점에 유의하십시오. 즉 간격이 더 이상 존재하지 않는 것처럼 첫 번째와 세 번째 요소가 붙어 버렸습니다! 어떤 면에서는, 이것은 사실입니다. 절대적으로 위치한 요소는 더 이상 일반 문서 조판 대열에서 존재하지 않습니다. 대신 다른 모든 것과는 별개로 독자적인 레이어상에 놓여 있습니다. 이것은 매우 유용합니다. 즉, 페이지의 다른 요소의 위치와 간섭하지 않는 격리된 사용자 인터페이스 기능을 만들 수 있습니다. 예를 들어 팝업 정보 상자 및 제어 메뉴, 롤오버 패널, 페이지 어느 곳에서나 끌어서 놓기할 수 있는 유저 인터페이스 페이지 등등…</p> + +<p>둘째, 요소의 위치가 변경되었음을 알아차립시다. 이는 {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}가 절대 위치잡기에 해당해 다른 방식으로 작동하기 때문입니다. 요소가 진입해야 하는 방향을 지정하기 보다는 요소가 (부모) 콘테이너 요소의 상하좌우 측면으로부터 떨어지는 간격을 지정되어야 합니다. 따라서 이 경우, 내 말은 절대 위치잡기 요소는 "콘테이너 요소"의 상단에서 30px, 왼쪽에서 30px에 위치에 놓여야 한다는 말입니다.</p> + +<div class="note"> +<p><strong>참고</strong>: 당신이 필요하다면 요소의 크기를 재지정하기 위해 {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}를 사용할 수 있습니다. 당신이 위치잡기한 요소에 <code>top: 0; bottom: 0; left: 0; right: 0;</code>과 <code>margin: 0;</code>를 지정한 뒤 어떻게 되냐 보십시요! 해보고 다시 원상태로 돌리십시요...</p> +</div> + +<div class="note"> +<p><strong>주석</strong>: 그렇습니다. 여백이 위치잡기한 요소에 여전히 영향을 미칩니다. 그러나 마진 축소 영향은 업습니다.</p> +</div> + +<div class="note"> +<p><strong>참고</strong>: 당신은 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code>에서 예제를 확인할 수 있습니다(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">소스 코드를 보세요</a>).</p> +</div> + +<h3 id="위치잡기_상황">위치잡기 상황</h3> + +<p>어떤 요소가 절대 위치잡기의 기준이 되는 "콘테이너 요소"입니까? 이것은 위치잡기 요소의 조상에 지정된 위치 속성의 여하에 따라 많이 달라집니다. (See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block">콘테이너 블록 식별하기</a>).</p> + +<p>조상 요소가 명시적으로 정의된 위치 속성을 가지고 있지 않으면 초깃값으로 모든 조상 요소에 정적 위치가 부여됩니다. 그에 따른 결과, 절대적 위치잡기한 요소는 <strong>initial containing block</strong>에 포함되게 됩니다. 초기 콘테이너 블록은 브라우저 뷰포트 크기의 용적을 가지며, 자신도 {{htmlelement("html")}} 요소를 포함하는 블록입니다. 간단히 말해서, 절대적 위치잡기한 요소는 {{htmlelement("html")}} 요소의 외부에 포함되어 초기 뷰포트 기준과 비례한 곳에 위치하게 됩니다.</p> + +<p>위치잡기한 요소는 에이치티엠엘 소스의 {{htmlelement("body")}} 안에 중첩되지만 최종 조판에서는 페이지의 가장자리 상단과 왼쪽에서 30px 떨어져 있습니다. 우리는 요소의 절대적 위치잡기에서 어떤 요소에 비례해 위치잡기할지 기준이 되는 <strong>positioning context</strong>(위치잡기 상황)을 변경할 수 있습니다. 이것은 조상 요소 중 하나를 기준으로 위치잡기 설정이 이뤄집니다. 다시말해 요소의 내부에 중첩된 요소 중 하나가 기준이 됩니다(내부에 중첩되지 않은 요소를 기준삼아 비례적으로 위치시킬 수 없습니다). 이를 증명하기 위해 다음과 같은 선언을 <code>body</code> 규칙에 추가하십시요:</p> + +<pre>position: relative;</pre> + +<p>이로써 다음과 같은 결과가 나와야 합니다.</p> + +<div class="hidden"> +<pre class="brush: html"><h1>위치잡기 상황</h1> + +<p>나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.</p> + +<p class="positioned">이제 나는 <code>&lt;html&gt;</code> 요소가 아닌 <code>&lt;body&gt;</code> 요소를 기준으로 비례하여 절대적 위치잡기합니다.</p> + +<p>우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.</p> + +<p>인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 대열이탈할 경우 <span>(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)</span>, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; + position: relative; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('위치잡기_상황', '100%', 420) }}</p> + +<p>위치잡기한 요소는 이제 기준이 되는 {{htmlelement("body")}} 요소와 비례한 위치에 놓이게 된다.</p> + +<div class="note"> +<p><strong>참고</strong>: 당신은 이 시점에 예제의 실제 구현 장면을 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code>에서 볼 수 있습니다(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">소스 코드 보기</a>).</p> +</div> + +<h3 id="z-인덱스_소개">z-인덱스 소개</h3> + +<p>이 모든 절대적 위치잡기는 제법 재미나지만, 아직 고려하지 않은 또 다른 것이 있습니다. 요소가 겹치기 시작하면 어떤 요소가 다른 요소 위에 나타나는지 결정하는 기준은 무엇입니까? 지금까지 우리가 본 예제에서, 우리는 위치잡기 상황 속에 단 하나의 위치잡기할 요소만 주어졌습니다. 그리고 그것은 상위에 나타납니다. 왜냐면 위치잡기 요소가 비 위치잡기 요소보다 우위를 점하기 때문입니다. 하나 이상의 요소가 있을 때는 어떨까요?</p> + +<p>다음을 씨에스에스에 추가해 첫 단락도 절대적 위치잡기 대상으로 만들어 봅시다.</p> + +<pre>p:nth-of-type(1) { + position: absolute; + background: lime; + top: 10px; + right: 30px; +}</pre> + +<p>이 시점에서 당신이 보게될 것은 첫 번째 단락이 녹색으로 칠해지고, 문서 대열을 벗어나 원래 위치에서 약간 위에 자리를 잡습니다. 또한, 두 개의 단락이 겹치는 원래의 <code>.positioned</code> 클래스가 지정된 단락 아래에 겹겹이 포개집니다. 이렇게 되는 까닭은 <code>.positioned</code> 클래스로 지정된 단락이 소스 순서상에 두 번째 단락이고 소스 순서상에 뒤에 있는 위치잡기한 요소가 소스 순서상 앞서는 위치잡기한 요소보다 우위를 점하기 때문입니다.</p> + +<p>스택 순서를 변경할 수 있습니까? 네, {{cssxref("z-index")}} 속성을 사용하면 가능합니다. z-인덱스는 z축을 가리킵니다. 당신은 앞서 배경 이미지와 그림자 오프셋을 떨어뜨리는 것과 같은 사물의 위치를 파악하는 방법을 찾는 과정에서 웹 페이지를 수평(x축)과 수직(y축) 좌표로 논의한 학습 과정을 기억하실 겁니다. (0,0)은 페이지(또는 요소)의 상단 왼쪽에 있으며, x-축 및 y-축은 페이지의 오른쪽 및 아래쪽으로 진행합니다(가로쓰기 언어의 경우를 말합니다).</p> + +<p>웹 페이지에는 z축이 있습니다. 스크린 표면으로부터 진행하는 가상 라인, 즉 사용자 얼굴 쪽으로 향하는(당신이 화면 위에 놓고 싶은 것을 망론한다). {{cssxref("z-index")}} 값은 위치잡기한 요소가 해당 축상에 놓일 경우에 영향을 미칩니다. 양수 값은 스택 상단으로 이동하고 음수 값은 스택 아래로 이동합니다(역주: 상단으로 겹겹이 쌓이거나 하단으로 겹겹이 쌓여진다) 기본값으로 위치잡기한 요소는 모두 <code>z-index</code>가 <code>auto</code> 값을 가지며, 이는 사실상 0입니다.</p> + +<p>스택 순서를 변경하려면 다음 선언을 <code>p:nth-of-type(1)</code> rule: 규칙에 추가하십시오.</p> + +<pre>z-index: 1;</pre> + +<p>이제 녹색 단락이 상단에 놓여진 완성된 예가 보여야 합니다.</p> + +<div class="hidden"> +<pre class="brush: html"><h1>z-인덱스</h1> + +<p>나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.</p> + +<p class="positioned">이제 나는 <code>&lt;html&gt;</code> 요소가 아닌 <code>&lt;body&gt;</code> 요소를 기준으로 비례하여 절대적 위치잡기합니다.</p> + +<p>우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.</p> + +<p>인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 대열이탈할 경우 <span>(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)</span>, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; + position: relative; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +} + +p:nth-of-type(1) { + position: absolute; + background: lime; + top: 10px; + right: 30px; + z-index: 1; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('z-인덱스_소개', '100%', 400) }}</p> + +<p>z-인덱스는 단위가 없는 인덱스 값만 허용한다는 점에 유의하자; 하나의 요소가 Z축 위로 23픽셀이 되도록 지정할 수 없습니다. 그런 식으론 작동하지 않습니다. 높은 값의 요소는 낮은 값 요소의 위로 간니다. 그러니 당신이 어떤 값을 사용할 지에 달려있습니다. 2와 3을 사용하면 300과 40000과 같은 효과를 얻을 수 있습니다.</p> + +<div class="note"> +<p><strong>참고</strong>: 이 시점에 예제의 실제 구현 장면을 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code>에서 볼 수 있습니다(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">소스 코드 보기</a>).</p> +</div> + +<h3 id="고정_위치잡기">고정 위치잡기</h3> + +<p>이제 고정 위치잡기를 살펴보자. 이것은 절대 위치잡기와 정확히 같은 방식으로 작동합니다.단 한 가지 핵심 차이점이 있습니다. 절대 위치잡기는 {{htmlelement("html")}} 요소나 가까운 조상 요소를 기준으로 비례해 요소를 고정시키지만, 고정 위치잡기는 브라우저 뷰 포트 자체를 기준으로 비례해 요소를 고정합니다. 즉, 탐색 메뉴가 계속 자리를 지키는 것과 같이 제자리에 고정된 유용한 사용자 인터페이스 항목을 생성할 수 있습니다.</p> + +<p>우리가 무슨 얘기를 하는지 보여주기 위해 간단한 예를 들어봅시다. 먼저 씨에스에스에서 기존 <code>p:nth-of-type(1)</code>과 <code>.positioned</code> 규칙을 삭제합니다.</p> + +<p>이제 <code>position: relative;</code> 선언을 지우고, 다음과 같이 고정 높이를 추가하는 규칙을 <code>body</code> 규칙에 업데이트합니다:</p> + +<pre>body { + width: 500px; + height: 1400px; + margin: 0 auto; +}</pre> + +<p>이제 우리는 {{htmlelement("h1")}} 요소에 <code>position: fixed;</code>를 부여하고, 그걸 뷰 포트의 상단 중앙에 놓게 합니다. 다음 규칙을 씨에스에스에 추가하세요.</p> + +<pre>h1 { + position: fixed; + top: 0; + width: 500px; + margin: 0 auto; + background: white; + padding: 10px; +}</pre> + +<p>화면 상단에 고정시키려면 <code>top: 0;</code>이 요구됩니다. 그런 다음 제목에 콘텐츠 열과 동일한 너비를 부여하고 콘텐츠를 중앙에 놓기 위해 오래됐지만, 신뢰감을 주는 <code>margin: 0 auto;</code>를 사용합니다. 그런 다음 제목에 흰색 배경과 패딩을 부여해 제목 아래에 내용이 보이지 않도록 합니다.</p> + +<p>지금 저장하고 새로고침하면 제목이 고정되는 사소하지만, 재미난 효과를 볼 수 있으며, 스크롤 막대를 위로 올리면 콘텐츠가 드러나고 아래로 내리면 제목 밑으로 콘텐츠가 사라지는 것처럼 보입니다. 하지만 우리는 이것을 더 개선할 수 있습니다. 현재 일부 콘텐츠가 시작부터 제목에 밑에 깔려있는 부분 말입니다. 위치잡기한 제목이 문서 대열상에서 모습을 드러내지 않기 때문입니다. 그래서 나머지 콘텐츠가 맨 위로 이동했습니다. 우리는 올라간 것을 조금 아래로 이동시켜야 합니다. 우리는 그걸 첫 번째 단락에 최상위 여백을 설정해서 달성할 수 있습니다. 지금 다음 내용을 추가하세요:</p> + +<pre>p:nth-of-type(1) { + margin-top: 60px; +}</pre> + +<p>당신은 이제 완성된 예제를 볼 수 있어야 합니다:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>고정 위치잡기</h1> + +<p>나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.</p> + +<p class="positioned">나는 더 이상 특별한 위치를 차지하지 않습니다...</p> + +<p>우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.</p> + +<p>인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 대열이탈할 경우 <span>(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)</span>, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + height: 1400px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +h1 { + position: fixed; + top: 0px; + width: 500px; + margin: 0 auto; + background: white; + padding: 10px; +} + +p:nth-of-type(1) { + margin-top: 60px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('고정_위치잡기', '100%', 400) }}</p> + +<div class="note"> +<p><strong>참고</strong>: 당신은 이 시점에 예제의 실제 구현 장면을 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code>에서 볼 수 있습니다 (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">소스 코드는 여기서 보세요</a>).</p> +</div> + +<h3 id="position_sticky">position: sticky</h3> + +<p>이용할 수 있는 <code>position: sticky</code>라고 불리우는 또 다른 위치잡기 값이 있습니다. 이것은 다른 위치잡기보다 다소 새로운 것입니다. 이것은 기본적으로 상대 위치잡기와 고정 위치잡기가 혼합된 하이브리드로서, 위치잡기 요소가 특정 임계점에(예로 뷰포트의 상단으로부터 10px) 스크롤될 때까지 상대 위치잡기처럼 행동할 수 있다가 그 뒤에 위치가 고정됩니다. 예를 들어, 탐색 막대가 특정 지점까지 페이지와 함께 스크롤한 다음 페이지 상단에 흡착되도록 사용할 수 있습니다.</p> + +<div id="흡착_1"> +<div class="hidden"> +<h6 id="흡착_위치잡기_예제">흡착 위치잡기 예제</h6> + +<pre class="brush: html"><h1>흡착 위치잡기</h1> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<div class="positioned">흡착</div> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css">.positioned { + position: sticky; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('흡착_1', '100%', 200) }}</p> + +<p><code>position: sticky</code>의 일반적 사용례기도 하고 흥미로운 사용례는 스크롤링하다 제목에 도달하면 서로 다른 제목이 페이지의 맨 위에 흡착되는 색인 페이지를 만드는 것입니다. 이런 사례에 대한 마크업은 다음과 같은 모습일 수 있습니다:</p> + +<pre class="brush: html"><h1>흡착 위치잡기</h1> + +<dl> + <dt>A</dt> + <dd>Apple</dd> + <dd>Ant</dd> + <dd>Altimeter</dd> + <dd>Airplane</dd> + <dt>B</dt> + <dd>Bird</dd> + <dd>Buzzard</dd> + <dd>Bee</dd> + <dd>Banana</dd> + <dd>Beanstalk</dd> + <dt>C</dt> + <dd>Calculator</dd> + <dd>Cane</dd> + <dd>Camera</dd> + <dd>Camel</dd> + <dt>D</dt> + <dd>Duck</dd> + <dd>Dime</dd> + <dd>Dipstick</dd> + <dd>Drone</dd> + <dt>E</dt> + <dd>Egg</dd> + <dd>Elephant</dd> + <dd>Egret</dd> +</dl> +</pre> + +<p>씨에스에스는 다음과 같이 보일 수 있다. 일반 대열에서는 {{htmlelement("dt")}} 요소가 콘텐츠와 함께 스크롤됩니다. {{cssxref("top")}} 값이 0이고 {{htmlelement("dt")}} 요소에 <code>position: sticky</code>를 추가하면 이를 지원하는 브라우저는 그 위치(0)에 도달할 때 머리글을 브라우저 뷰포트 상단에 흡착시킵니다. 그 후 각각의 후속 머리글은 자신의 위치까지 스크롤하는 시점에 이전 머리글을 교체합니다.</p> + +<pre class="brush: css">dt { + background-color: black; + color: white; + padding: 10px; + position: sticky; + top: 0; + left: 0; + margin: 1em 0; +} +</pre> + +<div id="흡착_2"> +<div class="hidden"> +<pre class="brush: css">body { + width: 500px; + height: 1400px; + margin: 0 auto; +} + +dt { + background-color: black; + color: white; + padding: 10px; + position: sticky; + top: 0; + left: 0; + margin: 1em 0; +} +</pre> + +<pre class="brush: html"><h1>흡착 위치잡기</h1> + +<dl> + <dt>A</dt> + <dd>Apple</dd> + <dd>Ant</dd> + <dd>Altimeter</dd> + <dd>Airplane</dd> + <dt>B</dt> + <dd>Bird</dd> + <dd>Buzzard</dd> + <dd>Bee</dd> + <dd>Banana</dd> + <dd>Beanstalk</dd> + <dt>C</dt> + <dd>Calculator</dd> + <dd>Cane</dd> + <dd>Camera</dd> + <dd>Camel</dd> + <dt>D</dt> + <dd>Duck</dd> + <dd>Dime</dd> + <dd>Dipstick</dd> + <dd>Drone</dd> + <dt>E</dt> + <dd>Egg</dd> + <dd>Elephant</dd> + <dd>Egret</dd> +</dl> +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('흡착_2', '100%', 200) }}</p> + +<div class="note"> +<p><strong>참고</strong>: 당신은 이 시점에 예제의 실제 구현 장면을 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html">7_sticky-positioning.html</a></code>에서 볼 수 있습니다(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">소스 코드는 여기서 보세요</a>).</p> +</div> + +<h2 id="요약정리">요약정리</h2> + +<p>기본적인 위치잡기를 가지고 놀이삼아 시험해 보니 재미있었을 것이다; 비록 이것이 완전체 조판에 사용할 수 있는 방법은 아니지만, 여러분이 보았다시피 이것이 알맞은 용도로 사용될 수 있는 많은 작업들이 있다.</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="참조_항목">참조 항목</h2> + +<ul> + <li>{{cssxref("position")}} 속성 참조.</li> + <li>좀 더 유용한 구상을 위한 <a href="/ko/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">실용적인 위치잡기 사례</a></li> +</ul> + +<h2 id="이번_단위에는">이번 단위에는</h2> + +<ul> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">씨에스에스 조판 소개</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">격자</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 조판</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/반응형_디자인">반응형 디자인</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/레거시_조판_메서드">레거시 조판 메서드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">조판 이해도 필수 평가</a></li> +</ul> diff --git a/files/ko/learn/css/css_layout/이전_브라우저_지원/index.html b/files/ko/learn/css/css_layout/이전_브라우저_지원/index.html new file mode 100644 index 0000000000..07910a4d26 --- /dev/null +++ b/files/ko/learn/css/css_layout/이전_브라우저_지원/index.html @@ -0,0 +1,248 @@ +--- +title: 이전 브라우저 지원 +slug: Learn/CSS/CSS_layout/이전_브라우저_지원 +tags: + - 가변상자 + - 격자 + - 기능 쿼리 + - 레거시 + - 부동체 + - 씨에스에스 + - 안내서 + - 조판 + - 초보자 + - 학습 +translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p> + +<p class="summary">이 모듈에서는 Flexbox 및 Grid를 디자인의 기본 레이아웃 메서드로 사용할 것을 권고합니다. 그러나 당신이 사용한 메서드를 지원하지 않는 브라우저나 이전 브라우저를 사용해 당신의 사이트를 방문하는 사람들이 있을 겁니다. 이런 일은 웹상에서 항상 있는 일입니다. 즉 새로운 기능이 개발됨에 따라 서로 다른 브라우저가 서로 다른 것들의 우선 순위를 정합니다. 이 문서는 구식 기술의 사용자들을 외면하지 않고도 최신 웹 기술을 사용하는 방법에 대해 설명합니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선결 사항:</th> + <td>HTML 기본 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 입문</a> 학습), CSS의 작동 방식 <a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS 입문 </a> 및 (<a href="/ko/docs/Learn/CSS/Styling_boxes">상자 양식 지정</a> 학습)</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>여러분이 사용하려는 기능을 지원하지 않을 수있는 이전 브라우저에서 레이아웃을 지원하는 방법을 파악합니다.</td> + </tr> + </tbody> +</table> + +<h2 id="당신의_사이트_브라우저_지향은">당신의 사이트 브라우저 지향은?</h2> + +<p>모든 웹사이트는 공략 대상에 따라 달라집니다. 접근 방식을 결정하기 전에 이전 브라우저를 사용하여 사이트를 방문하는 방문자 수를 확인하십시오. 사람들이 사용중인 기술을 알려주는 분석 기능(예: Google analytics)을 이용할 수 있고, 추가 및 교체할 기존 웹 사이트가 있는 경우 이는 간단한 작업입니다. 당신이 분석툴이 없거나, 이번이 완전히 새로운 사이트 개설이라면 <a href="http://gs.statcounter.com/">Statcounter</a>같은 위치별로 필터링된 통계를 제공할 수 있는 사이트가 있습니다.</p> + +<p>또한 사람들이 여러분의 사이트를 이용하는 방식이나 장치 유형을 고려해야만 합니다. 예를 들어 모바일 장치 이용 방문자가 평균치를 웃돌거라는 예상을 할 수 있습니다. 접근성 및 보조 기술을 사용하는 사람들은 항상 고려해야하지만 일부 사이트에서는 그 점이 더욱 중요할 수 있습니다. 필자의 경험에 따르면 개발자들은 종종 이전 버전의 인터넷 익스플로러 사용자 1%에 대해 매우 걱정하는 반면, 더 많은 사용자 층인 내게 필요한 옵션 사용자에 대해선 전혀 고려하지 않습니다.</p> + +<h2 id="당신이_사용하려는_기능에_대한_지원은_어떻습니까">당신이 사용하려는 기능에 대한 지원은 어떻습니까?</h2> + +<p>사이트에 들어오는 브라우저를 알면, 해당 대상에 사용하고 싶은 기술을 평가할 수 있고, 그리고 그 기술을 이용할 수 없는 방문객들에게 얼마나 쉽게 대안을 제공할 수 있는지 진단할 수 있습니다. 우리는 CSS 속성을 상세히 설명하는 각 페이지에 대한 브라우저 호환성 정보를 모질라 개발자 네트워크에서 제공함으로써 쉽게 사용할 수 있도록 노력하고 있습니다. 예를 들어, {{cssxref("grid-template-columns")}} 페이지를 살펴보십시오. 이 페이지의 맨 아래에는 이 속성을 지원하기 시작한 버전과 함께 주요 브라우저가 나열된 표가 있습니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16047/browser-table.png" style="height: 1178px; width: 2102px;"></p> + +<p>기능이 얼마나 잘 지원되는지 확인하는 또 다른 일반적인 방법은 <a href="https://caniuse.com/">Can I Use</a> 웹 사이트입니다. 이 사이트에는 대부분의 웹 플랫폼 기능이 브라우저 지원 상태에 대한 정보와 함께 나열됩니다. 위치별로 사용 통계를 볼 수 있습니다. 주로 특정 지역의 사용자가있는 사이트에서 작업하는 경우 유용합니다. Google 웹 로그 분석 계정을 연결하여 사용자 데이터를 기반으로 분석할 수도 있습니다.</p> + +<p>사용자의 브라우저가 보유한 기술과 당신이 사용하려는 것에 대한 지원을 이해하면 당신은 좋은 상황에서 모든 결정을 내리고 모든 사용자를 가장 잘 지원할 수있는 방법을 알 수 있습니다.</p> + +<h2 id="지원하는_것과_모양이_똑같다는_말은_다르다">지원하는 것과 '모양이 똑같다'는 말은 다르다</h2> + +<p>일부 사용자는 휴대 전화로 사이트를 보고 다른 사용자는 대형 데스크톱 화면에서 사이트를 보고 있기 때문에 모든 브라우저에서 웹 사이트가 동일하게 보이지 않을 수 있습니다. 마찬가지로 일부 사용자는 이전 브라우저 버전을 갖고 있고 다른 사용자에게는 최신 브라우저를 갖고 있습니다. 일부 사용자는 화면 읽기 프로그램을 사용해 내용을 읽거나 페이지를 확대하여 읽을 수도 있습니다. 모든 사람을 지원한다는 것은 방어적으로 디자인된 콘텐츠 버전을 제공하여 최신 브라우저에서는 사이트 외관이 뛰어나지만, 이전 브라우저 사용자에게는 기본 수준으로 계속 사용할 수 있음을 의미합니다.</p> + +<p>기본적인 지원 수준이란 페이지의 일반적인 흐름이 이해되도록 콘텐츠를 잘 구성하는 것에서 출발합니다. 기능이 매우 제한적인 전화기 사용자는 많은 CSS를 얻을 수 없지만, 콘텐츠는 쉽게 읽을 수 있는 방식으로 나열됩니다. 따라서 항상 잘 구성된 HTML 문서에서 출발해야 합니다. 여러분의 스타일 시트를 제거했을 때, 컨텐츠가 여전히 잘 이해되나요?</p> + +<p>한 가지 옵션은 아주 오래된 브라우저나 제한된 브라우저를 사용하는 사람들이 찾을 수 있는 대체 페이지로 사이트 외관을 단순화하는 것입니다. 문제가 되는 해당 브라우저를 사용해 소수의 사람들이 사이트를 방문하는 경우 최신 브라우저 사용자들과 비슷한 체험을 그들에게 제공하기 위해 시간을 쏟는 것이 상업적으로 맞지 않을 겁니다. 사이트의 접근성을 높이고 더 많은 사용자에게 서비스를 제공하는 일에 시간을 투자하는 것이 더 좋을 겁니다. 평범한 HTML 페이지와 온갖 장신구가 포함된 페이지 사이에는 중간 지점이 있으며 CSS는 실제로 이러한 대체 페이지를 매우 간단하게 생성해 줍니다.</p> + +<h2 id="CSS로_대체_페이지_생성하기">CSS로 대체 페이지 생성하기</h2> + +<p>CSS 규격에는 두 가지 레이아웃 메서드가 동일한 항목에 적용될 때 브라우저가 수행하는 작업을 설명하는 정보가 포함되어 있습니다. 즉, 부동체 항목이 한편으로는 CSS grid 레이아웃을 사용하는 grid 항목인 경우 발생하는 상황에 대한 정의가 있음을 의미합니다. 이 정보가 브라우저가 이해하지 못하는 CSS를 무시한다는 지식과 결합되어, 이미 다루었던 <a href="/ko/docs/Learn/CSS/CSS_layout/레거시_조판_메서드">레거시 기술</a>을 사용하여 간단한 레이아웃을 생성할 수 있는 방법이 있습니다. 그런 다음 이를 최신 브라우저에서는 grid 레이아웃으로 덮어씁니다.</p> + +<p>아래 예에서는 세 개의 <code><div></code> 부동체를 행으로 표시했습니다. <a href="/ko/docs/Learn/CSS/CSS_layout/Grids">CSS grid 레이아웃</a>을 지원하지 않는 브라우저는 상자 행을 <ruby><em>부동 레이아웃</em><rp> (</rp><rt>浮動 組版</rt><rp>) </rp></ruby>으로 간주합니다. grid 항목이 되는 부동 항목은 부동 동작을 상실합니다. 즉, <code>.wrapper</code> 클레스를 grid 컨테이너로 전환하면 부동 항목이 grid 항목이 됩니다. 브라우저가 grid 레이아웃을 지원하는 경우 grid 디스플레이를 표시합니다. 지원하지 않으면 <code>display: grid</code> 관련 속성은 무시되고 부동 레이아웃이 사용됩니다.</p> + +<div id="예제1"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + max-width: 400px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.item { + float: left; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item">항목 하나</div> + <div class="item">항목 둘</div> + <div class="item">항목 셋</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('예제1', '100%', '200') }}</p> +</div> + +<div class="note"> +<p><strong>참고</strong>: {{cssxref("clear")}} 속성도 마찬가지로 정리된 항목이 grid가 되자마자 효력을 상실합니다. 따라서 정리된 footer가 딸린 레이아웃을 가질 수 있으며, 이 레이아웃이 grid 레이아웃으로 전환됩니다.</p> +</div> + +<h3 id="대체_메서드">대체 메서드</h3> + +<p>이 부동 예제와 비슷한 방식으로 사용할 수있는 여러 레이아웃 메서드가 있습니다. 당신이 생성해야하는 레이아웃 패턴에 가장 적합한 것을 선택할 수 있습니다.</p> + +<dl> + <dd>Float(부동) 및 <strong>clear</strong></dd> + <dd>위에서 볼 수 있듯이, 부동 또는 정리 속성이 레이아웃에 미치는 효과는 부동되거나 정리된 항목이 flex 또는 grid 항목이 되면 중단됩니다.</dd> + <dt>display: inline-block</dt> + <dd>이 방법을 사용하여 열 레이아웃을 생성할 수 있는 경우는 항목이 <code>display: inline-block</code>로 설정되었을 경우이지만, flex 또는 grid 항목이 된다면 인라인 블록 동작은 무시됩니다.</dd> + <dt>display: table</dt> + <dd>CSS 테이블을 생성하는 메서드는 해당 단원의 <a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">입문서</a>가 대체품으로 활용될 수 있습니다. CSS 테이블 레이아웃으로 설정된 항목은 그들이 flex 또는 grid 항목이 될 경우 자기 동작을 상실하게 됩니다. 중요하게는 테이블 구조를 수정하기 위해 생성된 익명 상자는 생성되지 않습니다.</dd> + <dt>다단 레이아웃</dt> + <dd>특정 레이아웃의 경우 당신은 <a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단</a>을 대체품로 사용할 수 있습니다. 여러분의 콘테이너가 <code>column-*</code> 속성에 속한 것으로 정의되었다면 grid 컨테이너가 될 것이고, 다단 동작은 발생하지 않습니다.</dd> + <dt>grid 대체품 역할인 Flexbox</dt> + <dd><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>는 인터넷 익스플로러 10과 11이 지원하기 때문에 grid를 지원하는 브라우저가 훨씬 많이 있습니다. 다만 이 단원의 뒷부분에서 설명하고 있는 구형 브라우저에서 flex를 지원하기 위한 처리 방법에 대해서도 확인해보세요. flex 컨테이너를 grid 컨테이너로 만들면 자식에 적용된 모든 <ruby><code>flex</code><rp> (</rp><rp>) </rp></ruby> 속성은 무시됩니다.</dd> +</dl> + +<p>구형 브라우저에서 레이아웃 조정이 많이 필요한 경우 CSS를 이런 식으로 사용하면 괜찮은 경험을 할 수 있습니다. 오래되고 잘 지원되는 기술을 기반으로 간단한 레이아웃을 추가한 다음 최신 CSS를 사용하여 잠재 고객의 90% 이상이 볼 수있는 레이아웃을 만듭니다. 그러나 대체 코드에 새 브라우저가 해석할 내용이 포함되어야하는 경우가 있습니다. 이에 대한 좋은 예는 부동 항목에 백분율 너비를 추가하여 열을 마치 grid 디스플레이처럼 보이도록 컨테이너를 채울 수 있도록 (너비를) 늘리는 경우입니다.</p> + +<p>부동 레이아웃에서 백분율은 컨테이너를 기준으로 계산됩니다. 33.333%는 컨테이너 너비의 3 분의 1입니다. 그러나 grid에서는 항목이 배치된 grid 영역을 기준으로 33.333%가 계산되므로 grid 레이아웃이 도입되면 실제로 원하는 크기의 3분의 1이 됩니다.</p> + +<div id="예제2"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + max-width: 400px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.item { + float: left; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + width: 33.333%; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item">항목 하나</div> + <div class="item">항목 둘</div> + <div class="item">항목 셋</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('예제2', '100%', '200') }}</p> +</div> + +<p>이 문제를 해결하려면 grid가 지원되는지 여부와 너비가 재정의되는지 여부를 감지할 수있는 방법이 필요합니다. CSS가 우리를 위해 마련한 해결책은 이렇습니다.</p> + +<h2 id="Feature_queries">Feature queries</h2> + +<p>feature queries를 사용하면 브라우저가 특정 CSS 기능을 지원하는지 테스트 할 수 있습니다. 즉, 특정 기능을 지원하지 않는 브라우저 용 CSS를 작성한 다음 브라우저가 지원되는지 여부와 멋진 레이아웃을 제공하는지 확인하십시오.</p> + +<p>위의 예제에 feature query를 추가하면 grid가 지원됨을 알고 있는 경우 이 feature query를 사용하여 항목 너비를 <ruby><code>auto</code><rp> (</rp><rp>) </rp></ruby>으로 다시 설정할 수 있습니다.</p> + +<div id="예제3"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + max-width: 400px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.item { + float: left; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + width: 33.333%; +} + +@supports (display: grid) { + .item { + width: auto; + } +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item">항목 하나</div> + <div class="item">항목 둘</div> + <div class="item">항목 셋</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('예제3', '100%', '200') }}</p> +</div> + +<p>feature query에 대한 지원은 최신 브라우저에서 매우 유용하지만 CSS grid를 지원하지 않는 브라우저는 feature query도 지원하지 않는다는 점에 유의해야합니다. 이는 위에서 설명한 접근 방식이 해당 브라우저에서 작동한다는 것을 의미합니다. 우리가 하는 작업은 feature query를 차치하고 먼저 이전 CSS를 작성하는 것입니다. grid를 지원하지 않고 feature query를 지원하지 않는 브라우저는 자기가 이해할 수 있는 레이아웃 정보를 이용하고 그밖에 다른 것들은 완전히 무시할 수 있습니다. feature query를 지원하는 브라우저는 CSS grid도 지원하므로 grid 코드 및 feature query 내부의 코드를 실행합니다.</p> + +<p>feature query 규격에는 브라우저가 기능을 지원하지 않는지 테스트하는 기능도 포함되어 있습니다. 이는 브라우저가 feature query를 지원하는 경우에만 유용합니다. feature query를 지원하지 않는 브라우저가 갈수록 사라짐에 따라 미래에는 지원 부족 여부를 확인하는 방법은 작동하게 됩니다. 그러나 지금은 최상의 지원을 위해 이전 CSS를 사용한 다음 덮어 쓰는 방식을 사용하십시오.</p> + +<h2 id="Flexbox_예전_버전">Flexbox 예전 버전</h2> + +<p>이전 버전의 브라우저에서는 이전의 Flexbox 명세가 반복되는 것을 여러분은 발견할 수 있습니다. 글을 쓰는 시점에서 이것은 Flexbox에 <code>-ms-</code> 접두사를 사용하는 인터넷 익스플로러 10의 문제입니다. 이는 또한 오래된 문서와 자습서가 있음을 의미합니다. 이 유용한 <a href="https://css-tricks.com/old-flexbox-and-new-flexbox/">안내서</a>는 보고있는 내용을 확인하는 데 도움이되고 매우 오래된 브라우저에서 flex 지원이 필요한 경우에도 도움이 될 수 있습니다.</p> + +<h2 id="인터넷_익스플로러_10과_11_접두사_버전">인터넷 익스플로러 10과 11 접두사 버전</h2> + +<p>CSS grid 규격은 인터넷 익스플로러 10에서 처음 나온 원형이었습니다. 즉, 인터넷 익스플로러 10 및 11에는 최신 grid 지원이 없지만, 이 사이트에 문서화된 최신 규격과는 다르나 매우 유용한 그리드 레이아웃 버전이 있습니다. 인터넷 익스플로러 10 및 11 구현은 <code>-ms-</code> 접두사를 사용해 해당 그리드를 마이크로소프트 브라우저에 사용할 수 있으며 이외의 브라우저에서는 무시됩니다. 에지 브라우저는 여전히 이전 구문을 이해하므로 현대 그리드 CSS에서 모든 항목을 안전하게 덮어씁니다.</p> + +<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">그리드 레이아웃의 점진적 향상</a>에 대한 안내서는 그리드의 인터넷 익스플로러 버전을 이해하는 데 도움이되며 이 단원 끝에는 별도의 유용한 링크를 포함하고 있습니다. 그러나 이전 인터넷 익스플로러 버전 사용자의 방문자 수가 매우 많지 않다면 모든 비지원 브라우저에서 작동하는 대체품을 만드는 것이 더 좋습니다.</p> + +<h2 id="이전_브라우저_여부_확인">이전 브라우저 여부 확인</h2> + +<p>Flexbox 및 그리드를 지원하는 대부분의 브라우저를 사용하면 구형 브라우저를 테스트하기가 상당히 어려울 수 있습니다. 한 가지 방법은 <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">크로스 브라우저 테스트</a> 단위에 설명 된대로 Sauce<em> Labs</em>과 같은 온라인 테스트 도구를 사용하는 것입니다.</p> + +<p>또한 가상 컴퓨터를 다운로드하여 설치한 뒤 제약이 걸린 본인의 컴퓨터 환경에서 이전 버전의 브라우저를 실행할 수 있습니다. 이전 버전의 인터넷 익스플로러에 액세스하는 것이 특히 유용하며 이를 위해 마이크로소프트는 <a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">다양한 가상 컴퓨터를 무료로 다운로드</a> 할 수 있도록 만들었습니다. 맥, 윈도우즈 및 리눅스 운영 체제에서 가상 컴퓨터를 사용할 수 있으므로 윈도우즈 컴퓨터를 사용하지 않더라도 이전 및 최신 윈도우즈 브라우저에서 테스트할 수있는 좋은 방법입니다.</p> + +<h2 id="요약정리">요약정리</h2> + +<p>여러분은 이제 그리드 및 Flexbox와 같은 기술을 자신있게 사용하고, 이전 브라우저를 위한 대체품을 만들고, 향후 발생할 수 있는 새로운 기술을 활용할 수 있는 지식을 얻었습니다.</p> + +<h2 id="참조_항목">참조 항목</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">CSS feature query 사용하기</a></li> + <li><a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Flexbox의 이전 버전과의 호환성</a></li> + <li><a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS 레이아웃과 점진적 향상</a></li> + <li><a href="https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/">CSS 그리드 사용하기: 그리드 없는 브라우저 지원하기</a></li> + <li><a href="https://24ways.org/2012/css3-grid-layout/">인터넷 익스플로러 10 및 11 버전 그리드 사용을 위한 자습서</a></li> + <li><a href="https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/">인터넷 익스플로러 10 용 그리드 레이아웃 구현을 사용해야 하나요</a>?</li> + <li><a href="https://24ways.org/2017/cascading-web-design/">feature query가 포함된 중첩된 웹 디자인</a></li> + <li><a href="https://gridbyexample.com/learn/2016/12/24/learning-grid-day24/">feature query 사용하기 (동영상)</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="이번_단위에는">이번 단위에는</h2> + +<ul> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 소개</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">Normal Flow</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">그리드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 레이아웃</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/반응형_디자인">반응형 디자인</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/레거시_조판_메서드">레거시 레이아웃 메서드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li> + <li>레이아웃 이해도 필수 평가</li> +</ul> diff --git a/files/ko/learn/css/css_layout/일반_흐름/index.html b/files/ko/learn/css/css_layout/일반_흐름/index.html new file mode 100644 index 0000000000..43b4366c0e --- /dev/null +++ b/files/ko/learn/css/css_layout/일반_흐름/index.html @@ -0,0 +1,102 @@ +--- +title: 일반 대열 +slug: Learn/CSS/CSS_layout/일반_흐름 +tags: + - 격자형 + - 부동 + - 씨에스에스 + - 일반 대열 + - 조판 + - 초보자 + - 학습 +translation_of: Learn/CSS/CSS_layout/Normal_Flow +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> + +<p class="summary">이번 글에서는 normal flow, 다른 말로 만일 당신이 요소의 레이아웃을 변경하지 않을 시 웹페이지 요소가 자기 자신을 배치하는 방법에 관해 설명합니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선결 사항:</th> + <td>HTML의 기초 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML에 대한 소개</a>)와 CSS 작동 방식에 대한 개념(<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS 소개</a>를 공부하세요.)</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>변경이 이뤄지기 전에 브라우저가 웹 페이지를 기본값으로 레이아웃하는 방법을 설명하기</td> + </tr> + </tbody> +</table> + +<p>이전 단원에서 상세히 기술한 바와 같이, 당신이 CSS를 적용하지 않을 경우 웹 페이지의 요소는 normal flow로 배치됩니다. 그리고 normal flow에 포함된 요소의 위치를 조정하거나 요소를 완전히 제거함으로써 요소가 동작하는 방법을 변경할 수 있습니다. 모든 웹 페이지를 시작하는 최상의 방법은 normal flow에서 읽기 가능하며, 견고하고 구조화된 문서로 시작하는 것입니다. 이렇게 하면 제한된 기능을 가진 브라우저를 사용하거나 페이지 콘텐츠를 소리 내 읽는 스크린 리더와 같은 장치를 사용하는 사용자들까지 읽을 수 있는(readable) 콘텐츠로 만들 수 있습니다. 또한, normal flow는 읽기 가능한 문서를 만들도록 마련된 것으로, 이를 출발점으로 삼아 레이아웃을 변경할 때 웹페이지 문서와 대립해 싸울 게 아니라 그것과 협력해서 작업하게 됩니다.</p> + +<p>서로 다른 레이아웃 메서드를 본격적으로 파헤치기 전에 일반 문서 흐름과 관련하여 이전 모듈에서 학습했던 내용 중의 일부를 복습하는 것도 가치가 있습니다.</p> + +<h2 id="기본값으로_요소들은_어떻게_배치되는가">기본값으로 요소들은 어떻게 배치되는가?</h2> + +<p>우선 개별 요소인 상자의 배치는 자신의 내용물을 채택하고, 그 주변에 패딩을 더하고, 테두리와 여백을 더하는 식으로 이뤄집니다. 다시 말해 앞서 살펴보았던 박스 모델과 같습니다.</p> + +<p>기본값으로 <a href="/ko/docs/Web/HTML/Block-level_elements">블록 수준 요소</a>의 내용물은 자기 부모 요소의 너비 100%와 자체 내용물의 최대 높이가 됩니다. <a href="/ko/docs/Web/HTML/Inline_elements">인라인 요소</a>는 자체 내용물의 최대 높이를 취하는 동시에 최대 너비를 취합니다. 인라인 요소에 너비나 높이를 설정할 수는 없습니다. 그들은 블록 수준 요소의 콘텐츠 내부에 들어앉았을 뿐입니다. 인라인 요소의 크기를 제어하려면 그것을 <code>display: block;</code> 속성값이나 양쪽의 성격이 혼합된 <code>display: inline-block;</code>을 가지고 블록 수준 요소처럼 행동하도록 설정할 필요가 있습니다.</p> + +<p>앞서 살펴본 내용에서 개별 요소는 설명되지만, 여러 요소가 서로 상호 작용하는 방법은 어떻게 설명할까요? (레이아웃 입문서에서 언급했던) 일반 레이아웃의 flow는 브라우저의 뷰포트 안에 요소를 배치하는 시스템입니다. 기본값으로 블록 수준 요소의 배치는 부모의 <a href="/ko/docs/Web/CSS/writing-mode">쓰기 모드</a>(<em>initial</em>: horizontal-tb)에 기초해 <em>블록 flow 방향</em>에 포함되어 이뤄집니다. 다시 말해 각 블록 요소는 마지막 요소 아래 새 줄에 나타나며, 각 요소에 주어진 margin에 의해 구분됩니다. 그러므로 영어 또는 여타 가로쓰기, 상단에서 하단으로 행갈이 하는 쓰기 모드와 블록 수준 요소는 수직으로 배치됩니다.</p> + +<p>인라인 요소는 다르게 동작합니다. 새로운 줄에 나타나는 대신, 다른 요소와 같은 라인에 차례로 자리 잡습니다. 다만 인접(혹은 접힌) 텍스트 콘텐츠는 해당 부모의 블록 수준 요소의 너비 내에서 자신이 자리를 잡을 수 있는 공간이 있는 경우가 해당합니다. 충분한 공간이 없을 경우 overflow되는 텍스트 또는 요소는 새로운 줄에 나타납니다.</p> + +<p>두 개의 인접 요소가 모두 자체 여백이 지정되어 있다면 두 여백은 접촉하고 그중 큰 여백만 남게 되며, 작은 여백은 사라집니다. 이를 마진 축소(margin collapsing)라고 하며 이전에 확인해본 적이 있습니다.</p> + +<p>이 모든 것을 설명하는 간단한 예를 살펴봅시다.</p> + +<div id="일반_대열"> +<pre class="brush: html"><h1>기본 문서 flow</h1> + +<p>나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.</p> + +<p>기본값으로 우리는 우리 부모 요소의 너비 100%를 넘나들며, 우리 자녀 콘텐츠의 최대 높이를 취합니다. 우리의 총 너비와 총 높이는 우리의 콘텐츠 + 패딩 + 테두리 너비 및 높이입니다.</p> + +<p>우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.</p> + +<p>인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 오버플로할 경우 <span>(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)</span>, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background: rgba(255,84,104,0.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; +} + +span { + background: white; + border: 1px solid black; +}</pre> +</div> + +<p>{{ EmbedLiveSample('일반_flow', '100%', 500) }}</p> + +<h2 id="요약정리">요약정리</h2> + +<p>이제 당신은 normal flow은 물론, 기본값으로 브라우저가 어떤 방식으로 사물을 배치하는지 이해했습니다. 당신의 디자인 필요에 따라 레이아웃을 만들기 위해 디스플레이 기본값을 변경하는 방법을 배우려면 다음 단계로 이동하세요.</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="이번_단위에는">이번 단위에는</h2> + +<ul> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 입문서</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%BC%EB%B0%98_%ED%9D%90%EB%A6%84">normal flow</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">격자</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9C%84%EC%B9%98%EC%9E%A1%EA%B8%B0">위치잡기</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 레이아웃</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EB%B0%98%EC%9D%91%ED%98%95_%EB%94%94%EC%9E%90%EC%9D%B8">반응형 디자인</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">레거시 레이아웃 메서드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li> + <li>필수 레이아웃 이해도 평가</li> +</ul> |