From ee778d6eea54935fd05022e0ba8c49456003381a Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:48:24 +0100 Subject: unslug ko: move --- .../learn/css/css_layout/media_queries/index.html | 424 +++++++++++++++ .../ko/learn/css/css_layout/normal_flow/index.html | 102 ++++ .../ko/learn/css/css_layout/positioning/index.html | 585 +++++++++++++++++++++ .../css/css_layout/responsive_design/index.html | 333 ++++++++++++ .../supporting_older_browsers/index.html | 248 +++++++++ .../index.html" | 424 --------------- .../index.html" | 333 ------------ .../index.html" | 585 --------------------- .../index.html" | 248 --------- .../index.html" | 102 ---- 10 files changed, 1692 insertions(+), 1692 deletions(-) create mode 100644 files/ko/learn/css/css_layout/media_queries/index.html create mode 100644 files/ko/learn/css/css_layout/normal_flow/index.html create mode 100644 files/ko/learn/css/css_layout/positioning/index.html create mode 100644 files/ko/learn/css/css_layout/responsive_design/index.html create mode 100644 files/ko/learn/css/css_layout/supporting_older_browsers/index.html delete mode 100644 "files/ko/learn/css/css_layout/\353\257\270\353\224\224\354\226\264_\354\277\274\353\246\254_\354\264\210\353\263\264\354\236\220_\354\225\210\353\202\264\354\204\234/index.html" delete mode 100644 "files/ko/learn/css/css_layout/\353\260\230\354\235\221\355\230\225_\353\224\224\354\236\220\354\235\270/index.html" delete mode 100644 "files/ko/learn/css/css_layout/\354\234\204\354\271\230\354\236\241\352\270\260/index.html" delete mode 100644 "files/ko/learn/css/css_layout/\354\235\264\354\240\204_\353\270\214\353\235\274\354\232\260\354\240\200_\354\247\200\354\233\220/index.html" delete mode 100644 "files/ko/learn/css/css_layout/\354\235\274\353\260\230_\355\235\220\353\246\204/index.html" (limited to 'files/ko/learn/css/css_layout') diff --git a/files/ko/learn/css/css_layout/media_queries/index.html b/files/ko/learn/css/css_layout/media_queries/index.html new file mode 100644 index 0000000000..cf13a1421c --- /dev/null +++ b/files/ko/learn/css/css_layout/media_queries/index.html @@ -0,0 +1,424 @@ +--- +title: 미디어 쿼리 초보자 안내서 +slug: Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서 +tags: + - 미디어 쿼리 + - 씨에스에스 + - 조판 + - 초보자 + - 학습 +translation_of: Learn/CSS/CSS_layout/Media_queries +--- +

{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

+ +

CSS Media Query는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 씨에스에스를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 반응형 웹 디자인의 핵심 부분이다. 뷰포트의 크기에 따라 서로 다른 조판을 생성할 수 있기 때문이다. 그러나 예를들면 사용자는 마우스가 아닌 터치스크린을 사용하는지와 같이 실행 중인 사이트 환경에 대한 여러 내용들을 탐지하는 데도 사용할 수 있습니다. 이번 단원에서는 먼저 미디어 쿼리에 사용된 구문에 대해 배우고, 이어 해당 구문을 가공의 예제에서 사용하여 간단한 디자인이 어떻게 반응할 수 있는지 살펴보겠습니다.

+ + + + + + + + + + + + +
선결 사항:에이치티엠엘의 기초인 (에이치티엠엘 입문서를 공부하세요), 그리고 씨에스에스의 작동 방식을 파악하기 위해 (씨에스에스 첫걸음과 씨에스에스 구성 블록를 공부하세요.)
목표:미디어 쿼리를 사용하는 방법과 그걸 이용해 반응형 디자인을 생성하기 위한 가장 대표적인 접근법 파악하기.
+ +

미디어 쿼리 기본

+ +

가장 간단한 미디어 쿼리 구문은 다음과 같습니다:

+ +
@media media-type and (media-feature-rule) {
+  /* CSS rules go here */
+}
+ +

미디어 쿼리 구문의 구성 요소:

+ + + +

미디어 유형

+ +

당신이 지정할 수 있는 미디어 유형

+ + + +

다음 미디어 쿼리는 페이지가 인쇄된 경우에만 본문을 12pt로 설정합니다. 페이지가 브라우저에 로드될 때에는 적용되지 않습니다.

+ +
@media print {
+    body {
+        font-size: 12pt;
+    }
+}
+ +
+

참고: 수준 3 미디어 쿼리 규격에 정의된 여러 가지 다른 미디어 유형이 있습니다. 이들은 사장되었으니 피해야 합니다.

+
+ +
+

참고: 미디어 유형은 선택사항입니다. 미디어 쿼리에 미디어 유형을 표시하지 않으면 미디어 쿼리는 기본값으로 모든 미디어 유형에 대한 것으로 해석됩니다.

+
+ +

미디어 기능 규칙

+ +

미디어 유형을 지정한 뒤에 규칙을 적용할 미디어 기능을 선정할 수 있습니다.

+ +

너비와 높이

+ +

반응형 디자인을(그리고 광범위한 브라우저 지원이 되도록) 만들기 위해 가장 자주 탐문하는 기능은 뷰포트 너비이며, min-width와 max-width, width 등의 미디어 기능을 활용하여 뷰포트가 특정 너비 이상 또는 이하인 경우 씨에스에스를 적용할 수 있습니다.

+ +

이러한 특징들은 다른 화면 크기에 반응하는 조판을 생성하는 데 사용됩니다. 예를 들어 뷰포트가 정확히 600픽셀인 경우 본문 색상을 빨간색으로 변경하려면 다음과 같은 미디어 쿼리를 사용합니다.

+ +
@media screen and (width: 600px) {
+    body {
+        color: red;
+    }
+}
+ +

이 예제를 브라우저에서 열거나 소스를 보세요.

+ +

width(및 height) 미디어 기능은 범위 지정에 사용될 수 있다. 따라서 min- or max- 접두사를 붙이게 되면 최소값인지 최대값인지 표시할 수 있다. 예를 들어 뷰포트가 400 픽셀보다 좁은 경우 색깔을 파란색으로 만들기 위해 max-width:를 사용할 수 있다.

+ +
@media screen and (max-width: 400px) {
+    body {
+        color: blue;
+    }
+}
+ +

이 예제를를 브라우저에서 열거나 소스를 보세요.

+ +

실제로 최소값 또는 최대값을 사용하는 것이 반응형 디자인인 경우에 훨씬 유용하므로 width 또는 height 값을 사용하는 경우는 좀처럼 흔치앖습니다.

+ +

미디어 쿼리 규격 수준 4 및 5에 소개된 최신 기능 중 일부가 제한적으로 브라우저 지원이 되지만, 당신이 테스트할 수 있는 다른 여러 미디어 기능이 있습니다. 각 기능은 브라우저 지원 정보와 함께 MDN에 문서화되어 있으니만큼 당신은 미디어 쿼리 사용: 미디어 기능에서 전체 목록을 찾을 수 있습니다.

+ +

방향성

+ +

잘 지원되는 미디어 기능 중 하나는 orientation로 세로 모드인지 가로 모드인지를 검사할 수 있도록 해줍니다. 장치가 가로 방향에 있는 경우 본문 텍스트 색상을 변경하려면 다음과 같은 미디어 쿼리를 사용합니다.

+ +
@media (orientation: landscape) {
+    body {
+        color: rebeccapurple;
+    }
+}
+ +

이 예제를 브라우저에서 열거나 소스를 보세요.

+ +

표준 데스크톱 뷰에는 가로 방향이 주종을 이루고 있으며, 이 가로 방향에서 잘 작동하는 디자인은 휴대폰 또는 태블릿상에서 세로 모드로 볼 때 잘 작동하지 않을 수 있습니다. (가로/세로 모드의) 방향성 테스트는 여러분이 세로 모드의 장치에 최적화된 조판을 생성할 수 있게 도움을 줄 수 있습니다.

+ +

포인팅 장치의 사용

+ +

수준 4 규격의 일부로 hover 미디어 기능이 도입되었다. 이 기능은 사용자가 요소 위에 (마우스 커서를) 올릴 수 있는 능력을 가진 조건인지를 시험할 수 있다는 것을 의미합니다. 본질적으로 사람들이 어떤 종류의 포인팅 장치를 사용하는지를 말합니다. 터치 스크린 및 키보드 네비게이션은 요소 위에 식별자를 올릴 수 없습니다.

+ +
@media (hover: hover) {
+    body {
+        color: rebeccapurple;
+    }
+}
+ +

이 예제를 브라우저에서 열거나 소스를 보세요.

+ +

사용자가 포인팅 장치를 사용할 수 없다고 파악했다면 기본적으로 대화형 기능을 표시할 수 있습니다. 포인팅 장치를 사용할 수 있는 사용자의 경우 링크에 마우스를 올리는 기능을 이용하도록 선택할 수 있습니다.

+ +

마찬가지로 pointer 미디어 기능이 수준 4 규격에 포함되어 있다. 이것은 none과 fine coarse의 세 가지 값을 취할 수 있다. fine 포인터는 마우스나 트랙패드와 같은 것이다. 이 값으로 사용자가 작은 영역을 정확하게 공략할 수 있게 된다. coarse 포인터는 터치스크린상에 손가락을 말한다. none 값은 사용자가 포인팅 장치가 없다는 의미이다. 아마도 키보드 단독 또는 음성 명령으로 탐색하고 있다고 하겠다.

+ +

pointer 사용이 당신에게 주는 잇점이 있다면 사용자가 화면상에서 상호 작용하는 유형에 반응하는 더 나은 인터페이스를 설계할 수 있다는 것입니다. 예를 들어, 사용자가 터치스크린으로 장치와 상호 작용하고 있다는 것을 알면 히트 영역을 더 크게 만들 수 있습니다.

+ +

더 복잡한 미디어 쿼리

+ +

당신은 가능한 모든 이종의 미디어 쿼리를 가지고 그것들을 결합하거나, 쿼리 목록을 만들고 싶을 수도 있다. 그 중 어느 경우가 (조건문과) 일치할 수 있습니다.

+ +

"논리곱" 미디어 쿼리

+ +

and를 사용해 미디어 기능을 결합할 수 있습니다. 이는 마치 앞에서 미디어 유형과 기능을 결합하기 위해 and를 사용했던 방식과 같습니다. 예를 들어, min-width와 orientation의 논리곱 조건을 테스트해보고 싶을 수도 있습니다. 여기서 에이치티엠엘 본문 텍스트가 파란색이 되는 유일한 경우는 뷰포트의 너비가 최소 400픽셀 이상이고 장치가 가로 모드인 경우에만 해당합니다.

+ +
@media screen and (min-width: 400px) and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}
+ +

이 예제를 브라우저에서 열거나 소스를 보세요.

+ +

"논리합" 미디어 쿼리

+ +

만약 여러분에게 쿼리는 잔뜩있는 데, 그 중 일도 일치할 수 없다면, 여러분은 해당 쿼리들을 콤마로 분리할 수 있습니다. 아래 예제에서 뷰포트가 최소 400픽셀 너비 또는 장치가 가로 보기 방향이라면 텍스트는 파란색이 될 것입니다. 둘 중 하나라도 사실이 아니라면 쿼리의 조건문은 일치합니다.

+ +
@media screen and (min-width: 400px), screen and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}
+ +

이 예제를 브라우저에서 열거나 소스를 보세요.

+ +

"

+ +

"부정 논리" 미디어 쿼리

+ +

not 연산자를 사용하여 전체 미디어 쿼리를 부정할 수 있습니다. 이것은 미디어 쿼리의 전체 의미를 반대로 뒤집습니다. 따라서 다음 예에서 텍스트는 보기 방향이 세로일 경우에만 파란색이 됩니다.

+ +
@media not all and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}
+ +

이 예제를 브라우저에서 열거나 소스를 보세요.

+ +

분기점을 선정하는 방법

+ +

반응형 디자인 초창기에는 많은 디자이너가 매우 구체적인 화면 크기를 공략 대상으로 삼으려고 시도했습니다. 인기있는 휴대폰 및 태블릿 화면의 크기 목록이 공개되어 해당 기기의 뷰포트와 깔끔하게 일치하도록 디자인을 만들 수 있게 되었습니다.

+ +

지금은 엄청나게 다양한 크기의 지나치게 너무 많은 장치가 있어 그런 방식은 현실성이 없습니다. 즉, 모든 디자인마다 (기기의) 특정 크기에 맞추는 공략보다 더 나은 접근 방법은 콘텐츠가 어떤 식으로든 깨지기 시작하는 해당 (기기의) 크기에 해당하는 디자인을 변경하는 것입니다. 어쩌면 선 길이가 너무 길어지거나 상자 형태의 사이드바가 찌그러져 읽기가 어려워질 수도 있습니다. 그 지경이 되면 미디어 쿼리를 사용하여 이용할 수 있는 공간 대비 개선된 형태의 사이트가 나오도록 디자인을 변경해야할 지점인 것입니다. 이는 사용 기기의 정확한 화면 크기가 무엇이든 상관없이 모든 범주에 맞는 전방위적인 접금법을 말합니다. 미디어 쿼리가 도입되는 지점을 breakpoints라고 합니다.

+ +

Firefox DevTools의 반응형 디자인 모드는 이러한 분기점이 어느 부분이 될지 알아내는 데 매우 유용합니다. 동 툴은 미디어 쿼리를 추가하고 디자인을 조정하면서 콘텐츠가 개선되는 위치를 파악하기 위해 뷰포트를 쉽게 크거나 작게 만들 수 있습니다.

+ +

파이어폭스 개발툴상에 조판 갈무리

+ +

능동 학습: 모바일 우선 반응형 디자인

+ +

대체로 반응형 디자인에 대한 두 가지 접근법을 취할 수 있습니다. 데스크톱 또는 가장 넓은 뷰로 시작한 뒤 뷰포트의 축소에 맞춰 요소를 주변으로 이동시키기 위한 분기점을 추가하거나 가장 작은 뷰로 시작한 뒤에 뷰포트의 크기 확대에 맞춰 조판을 추가할 수 있습니다. 이 두 번째 접근법은 mobile first 반응형 디자인으로 설명되며 종종 선호되는 최상의 접근법입니다.

+ + + +

가장 작은 장치용 뷰는 일반 대열에서 나타나는 것처럼 종종 단순한 단일 열 형태의 콘텐츠가 됩니다. 즉 여러분은 작은 장치용이라 많은 조판을 할 필요가 없다는 말입니다. 다시말해 소스를 순서대로 잘 정렬하면 기본값으로 읽을 수 있는 조판이 됩니다.

+ +

아래의 길라잡이는 매우 간단한 조판으로 동 접근 방식을 안내해 줄 것입니다. 사이트 제작 과정에서는 미디어 쿼리내에서 조정할 수 있는 것이 더 많을 수 있지만, 그 접근 방식은 정확히 동일하게 됩니다.

+ +

길라잡이: 간단한 모바일 우선 조판

+ +

우리는 조판에 포함된 다양한 요소에 배경색을 추가하기 위해 일정한 씨에스에스를 적용한 에이치티엠엘 문서를 가지고 출발합니다.

+ +
* {
+    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;
+}
+
+ +

우리는 우리가 조판에 변경을 가하지는 않았지만, 문서의 원본은 콘텐츠를 읽을 수 있는 방식으로 순서대로 정렬됩니다. 이것은 중요한 첫 번째 단계이며, 콘텐츠가 화면 읽기 프로그램(tts)에 의해 소리내여 읽혀질 경우 콘텐츠가 (읽을 문자열를) 이해될 수도록 보장합니다.

+ +
<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>
+
+ +

이 간단한 조판은 모바일에서도 잘 작동한다. 우리가 파이어폭스 데브툴 내부 반응형 디자인 모드에서 조판을 본다면, 우리는 그것이 사이트의 직관적인 모바일 뷰로 보더라도 꽤 잘 작동한다는 것을 알 수 있다.

+ +

이 예제를 브라우저에서 열거나 소스를 보세요.

+ +

당신이 우리의 진행 과정대로 이 예제를 실행해보려면 step1.html의 사본을 당신 컴퓨터에 만드세요.

+ +

이 지점부터는 반응형 디자인 모드뷰가 점차 확대되어 라인 길이가 상당히 길어지는 모습을 확인할 정도가 되며, 수평선 형태의 탐색 메뉴가 표시될 공간을 갖추고 있습니다. 여기에서 우리는 첫 번째 미디어 쿼리를 추가할 것입니다. 사용자가 텍스트 크기를 늘리게 되면, 텍스트 크기가 작은 장비를 가진 사람과 비교해 비슷한 라인 길이지만 뷰포트가 확대되는 순간에 분기점이 발생한다는 의미입니다. 따라서 우리는 ems 단위를 사용할 것입니다.

+ +

아래 코드를 step1.html 씨에스에스의 하단에 추가하세요.

+ +
@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;
+    }
+}
+
+ +

이 씨에스에스는 문서 안에 있는 문서 콘텐츠와 aside 요소 내부 관련 정보까지 2단 조판을 우리에게 제공합니다. 또한 우리는 가변상자를 사용하여 탐색 메뉴를 일렬로 배치했습니다.

+ +

2단계 파일을 브라우저에서 열거나 소스를 보세요.

+ +

사이드바가 새 단을 형성할 수 있는 충분한 공간이 있다고 느낄 때까지 너비를 계속 확장합니다. 미디어 쿼리안에서 주요 요소를 두 개의 열 형태의 격자로 만들 것입니다. 그런 다음 두 개의 사이드바가 서로 나란히 정렬되도록 문서의 {{cssxref("margin-bottom")}}을 제거해야하며, 바닥글 상단에 {{cssxref("border")}}(테두리)를 추가하게 됩니다. 일반적으로 이러한 미세 조정은 각 분기점 도달시 디자인을 좋게 보이게 하기 위해 여러분이 할 일입니다.

+ +

다시 한 번 아래 코드를 step1.html 씨에스에스의 하단에 추가합니다.

+ +
@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;
+    }
+}
+
+ +

3단계 파일을 브라우저에서 열거나 소스를 보세요.

+ +

최종 예제를 다른 너비로 보면 사용 가능한 너비에 따라 디자인이 반응하고 단일 열, 2열 또는 3열로 작동하는 방법을 볼 수 있습니다. 이것은 모바일 우선 반응형 디자인의 아주 간단한 예입니다.

+ +

당신에게 정말 미디어 쿼리가 필요할까요?

+ +

가변상자, 격자 및 다단 조판은 모두 굳이 미디어 쿼리를 필요로 하지 않고도 가변적이며 심지어 반응형 구성 요소를 만들 수 있는 방법을 제공합니다. 미디어 쿼리를 추가하지 않고도 이러한 조판 메서드를 사용해 원하는 것을 달성할 수 있는지 고려할 가치가 있습니다. 예를 들어, 여러분은 적어도 200 픽셀 너비의 카드 집합을 원할 수 있으며, 최대 200 픽셀이라면 주요 문서 부분에 맞아떨어질 수 있습니다. 이는 미디어 쿼리를 전혀 사용하지 않고 격자 조판만으로 얻을 수 있습니다.

+ +

이것은 아래 용법으로 달성될 수 있습니다.

+ +
<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>
+ +
.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;
+}
+ +

이 격자 예제를 브라우저에서 열거나 소스를 보세요.

+ +

상기 예제를 브라우저에서 열면 화면을 넓히거나 좁히거나 하여 열 트랙 수가 변경되는 것을 확인할 수 있습니다. 이 방법의 좋은 점은 격자가 뷰포트 너비를 보는 게 아니라 해당 구성 요소에 맞춰 이용할 수 있는 너비를 살핀다는 것입니다. 당신에게 미디어 쿼리가 전혀 필요하지 않을수도! 있다는 제안으로 이번 절을 마감하는 것은 이상하게 보일 수도 있습니다. 그러나 실제로 미디어 쿼리로 강화된 현대적 조판 메서드를 잘 사용하면 최상의 결과를 얻을 수 있습니다.

+ +

요약정리

+ +

여러분은 이 단원에서 미디어 쿼리에 대해 배웠으며 모바일 우선 반응형 디자인을 실제로 생성하는 방법도 알아 보았습니다.

+ +

우리가 만든 것을 시작점로 더 많은 미디어 쿼리 조건을 테스트할 수 있습니다. 예를 들어, 방문자가 pointer 미디어 기능을 사용하여 거친 포인터를 가지고 있는 것을 감지하면 탐색 메뉴의 크기를 변경할 수 있습니다.

+ +

또한 서로 다른 구성 요소를 추가하고 미디어 쿼리를 추가한다든지 또는 가변상자나 격자와 같은 조판 방법을 사용하는 것이 구성 요소를 반응형으로 만드는 가장 적절한 방법인지 여부를 실험할 수 있습니다. 바른 방식 혹은 그른 방식 따윈 없습니다. 말하자면 어떤 것이 디자인과 콘텐츠에 가장 적합한지 실험하고 관찰해야 합니다.

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

+ +

이번 단위에는

+ + diff --git a/files/ko/learn/css/css_layout/normal_flow/index.html b/files/ko/learn/css/css_layout/normal_flow/index.html new file mode 100644 index 0000000000..43b4366c0e --- /dev/null +++ b/files/ko/learn/css/css_layout/normal_flow/index.html @@ -0,0 +1,102 @@ +--- +title: 일반 대열 +slug: Learn/CSS/CSS_layout/일반_흐름 +tags: + - 격자형 + - 부동 + - 씨에스에스 + - 일반 대열 + - 조판 + - 초보자 + - 학습 +translation_of: Learn/CSS/CSS_layout/Normal_Flow +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

이번 글에서는 normal flow, 다른 말로 만일 당신이 요소의 레이아웃을 변경하지 않을 시 웹페이지 요소가 자기 자신을 배치하는 방법에 관해 설명합니다.

+ + + + + + + + + + + + +
선결 사항:HTML의 기초 (HTML에 대한 소개)와 CSS 작동 방식에 대한 개념(CSS 소개를 공부하세요.)
목표:변경이 이뤄지기 전에 브라우저가 웹 페이지를 기본값으로 레이아웃하는 방법을 설명하기
+ +

이전 단원에서 상세히 기술한 바와 같이, 당신이 CSS를 적용하지 않을 경우 웹 페이지의 요소는 normal flow로 배치됩니다. 그리고 normal flow에 포함된 요소의 위치를 조정하거나 요소를 완전히 제거함으로써 요소가 동작하는 방법을 변경할 수 있습니다. 모든 웹 페이지를 시작하는 최상의 방법은 normal flow에서 읽기 가능하며, 견고하고 구조화된 문서로 시작하는 것입니다. 이렇게 하면 제한된 기능을 가진 브라우저를 사용하거나 페이지 콘텐츠를 소리 내 읽는 스크린 리더와 같은 장치를 사용하는 사용자들까지 읽을 수 있는(readable) 콘텐츠로 만들 수 있습니다. 또한, normal flow는 읽기 가능한 문서를 만들도록 마련된 것으로, 이를 출발점으로 삼아 레이아웃을 변경할 때 웹페이지 문서와 대립해 싸울 게 아니라 그것과 협력해서 작업하게 됩니다.

+ +

서로 다른 레이아웃 메서드를 본격적으로 파헤치기 전에 일반 문서 흐름과 관련하여 이전 모듈에서 학습했던 내용 중의 일부를 복습하는 것도 가치가 있습니다.

+ +

기본값으로 요소들은 어떻게 배치되는가?

+ +

우선 개별 요소인 상자의 배치는 자신의 내용물을 채택하고, 그 주변에 패딩을 더하고, 테두리와 여백을 더하는 식으로 이뤄집니다. 다시 말해 앞서 살펴보았던 박스 모델과 같습니다.

+ +

기본값으로 블록 수준 요소의 내용물은 자기 부모 요소의 너비 100%와 자체 내용물의 최대 높이가 됩니다. 인라인 요소는 자체 내용물의 최대 높이를 취하는 동시에 최대 너비를 취합니다. 인라인 요소에 너비나 높이를 설정할 수는 없습니다. 그들은 블록 수준 요소의 콘텐츠 내부에 들어앉았을 뿐입니다. 인라인 요소의 크기를 제어하려면 그것을 display: block; 속성값이나 양쪽의 성격이 혼합된 display: inline-block;을 가지고 블록 수준 요소처럼 행동하도록 설정할 필요가 있습니다.

+ +

앞서 살펴본 내용에서 개별 요소는 설명되지만, 여러 요소가 서로 상호 작용하는 방법은 어떻게 설명할까요? (레이아웃 입문서에서 언급했던) 일반 레이아웃의 flow는 브라우저의 뷰포트 안에 요소를 배치하는 시스템입니다. 기본값으로 블록 수준 요소의 배치는 부모의 쓰기 모드(initial: horizontal-tb)에 기초해 블록 flow 방향에 포함되어 이뤄집니다. 다시 말해 각 블록 요소는 마지막 요소 아래 새 줄에 나타나며, 각 요소에 주어진 margin에 의해 구분됩니다. 그러므로 영어 또는 여타 가로쓰기, 상단에서 하단으로 행갈이 하는 쓰기 모드와 블록 수준 요소는 수직으로 배치됩니다.

+ +

인라인 요소는 다르게 동작합니다. 새로운 줄에 나타나는 대신, 다른 요소와 같은 라인에 차례로 자리 잡습니다. 다만 인접(혹은 접힌) 텍스트 콘텐츠는 해당 부모의 블록 수준 요소의 너비 내에서 자신이 자리를 잡을 수 있는 공간이 있는 경우가 해당합니다. 충분한 공간이 없을 경우 overflow되는 텍스트 또는 요소는 새로운 줄에 나타납니다.

+ +

두 개의 인접 요소가 모두 자체 여백이 지정되어 있다면 두 여백은 접촉하고 그중 큰 여백만 남게 되며, 작은 여백은 사라집니다. 이를 마진 축소(margin collapsing)라고 하며 이전에 확인해본 적이 있습니다.

+ +

이 모든 것을 설명하는 간단한 예를 살펴봅시다.

+ +
+
<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>
+ +
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;
+}
+
+ +

{{ EmbedLiveSample('일반_flow', '100%', 500) }}

+ +

요약정리

+ +

이제 당신은 normal flow은 물론, 기본값으로 브라우저가 어떤 방식으로 사물을 배치하는지 이해했습니다. 당신의 디자인 필요에 따라 레이아웃을 만들기 위해 디스플레이 기본값을 변경하는 방법을 배우려면 다음 단계로 이동하세요.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

이번 단위에는

+ + diff --git a/files/ko/learn/css/css_layout/positioning/index.html b/files/ko/learn/css/css_layout/positioning/index.html new file mode 100644 index 0000000000..76a491ae0e --- /dev/null +++ b/files/ko/learn/css/css_layout/positioning/index.html @@ -0,0 +1,585 @@ +--- +title: 위치잡기 +slug: Learn/CSS/CSS_layout/위치잡기 +tags: + - 고정 + - 글 + - 상대 + - 씨에스에스 + - 안내서 + - 위치잡기 + - 절대 + - 조판 + - 초보자 + - 코딩스크립팅 +translation_of: Learn/CSS/CSS_layout/Positioning +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}
+ +

당신이 일반 문서 조판 대열에서 요소를 끄집어 내어, 그것이 다르게 행동하게 만들수 있게 해주는 것이 위치잡기다. 예를 들어 상대 요소 위에 놓거나 브라우저 뷰 포트 내부의 동일한 위치를 항상 유지하게 해준다. 이 문서는 서로 다른 {{cssxref("position")}} 값을 설명하고, 그 걸 사용하는 방법에 대해서도 설명한다.

+ + + + + + + + + + + + +
선결 사항:에이치티엠엘의 기초 (에이치티엠엘 입문서)와 씨에스에스 작동 방식에 대한 개념(씨에스에스 입문서를 공부하세요.)
목표:씨에스에스 위치잡기가 작동하는 방법 배우기
+ +

가능하면 우리 깃허브 저장소에 있는 0_basic-flow.html 파일의 사본을 가지고 당신의 컴퓨터상에서 해당 연습을 함께 따라해보시길 바랍니다. (여기 소스 코드)가 있으니 그걸 착수 파일로 이용하십시요.

+ +

위치잡기 소개

+ +

크게봐서 위치잡기의 개념은 위에서 설명했듯 기본 문서 대열에 따른 동작을 무시하고 흥미로운 효과를 낼 수 있도록 하는 것입니다. 조판 내부의 일부 상자의 위치를 기본 조판 대열 위치에서 약간 변경한다거나, 약간 기묘하거나, 편치않은 느낌을 주고 싶다면 어떨까? 위치잡기가 바로 당신의 도구입니다. 또는 페이지의 다른 부분의 상위에 부동(浮動)하는 사용자 인터페이스 요소를 만들고 싶다라거나 아울러 페이지가 스크롤된 정도와 상관없이 항상 브라우저 창 내부의 동일한 위치에 놓이게 하고 싶다면? 위치잡기는 그런 조판 작업을 가능하게 합니다.

+ +

에이치티엠엘 요소에 적용될 수 있는 여러 가지 유형의 위치잡기가 존재합니다. 어떤 요소상에 특정 유형의 위치잡기가 활성화되도록 하기 위해 {{cssxref("position")}} 속성을 사용합니다.

+ +

정적 위치잡기

+ +

정적 위치잡기는 모든 요소에 주어지는 기본값입니다. 즉, "요소를 문서 조판 대열상에 일반 위치에 배치하라는 것으로 여기서 특별한 것은 없습니다."

+ +

이를 입증한다거나, 이어질 섹션에서 다룰 예제를 설정하려면 먼저 에이치티엠엘상에 두 번째 {{htmlelement("p")}} 요소에 positioned라는 클래스를 추가하십시오:

+ +
<p class="positioned"> ... </p>
+ +

이제 다음과 같은 규칙을 당신의 씨에스에스 하단에 추가하십시요:

+ +
.positioned {
+  position: static;
+  background: yellow;
+}
+ +

이제 저장하고 새로고침하면 두 번째 단락의 배경 색깔이 업데이트된 것을 제외하고 다른 차이가 없다는 것이 확인될 것입니다. 아무 문제없습니다. 앞에서 얘기했듯이 정적 위치잡기는 기본값으로 주어진 동작입니다!

+ +
+

주석: 이 시점에 예제의 실제 구현 장면을 1_static-positioning.html에서 볼 수 있습니다.(소스 코드는 여기서 보세요).

+
+ +

상대 위치잡기

+ +

상대 위치잡기는 우리가 살펴 첫 번째 위치 유형입니다. 이것은 정적 위치 결정과 매우 유사합니다. 단, 일단 정상 조판 대열상에 위치잡기할 요소가 자리를 잡고나면 페이지의 다른 요소와 중첩되는 것을 포함하여 최종 위치를 수정할 수 있습니다. 당신의 코드에 있는 position 선언을 업데이트하십시요.

+ +
position: relative;
+ +

현 시점에서 저장하고 새로 고침하면 전혀 변경된 결과가 확인되지 않습니다. 그럼 요소의 위치를 어떻게 수정할까요? 다음 절에서 설명하겠지만, {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}을 사용해야 합니다.

+ +

상하 좌우 위치잡기 소개

+ +

{{cssxref("top")}}, {{cssxref("bottom")}}와 {{cssxref("left")}}, and {{cssxref("right")}}는 {{cssxref("position")}}과 나란히 사용되어 기준 위치에 비례해 정확한 위치잡기를 지정한다. 이를 시험하려면 다음 선언문을 씨에스에스 .positioned 규칙에 추가하십시오:

+ +
top: 30px;
+left: 30px;
+ +
+

참고: 이러한 속성의 값은 당신이 논리적으로 예상할 수 있는 모든 단위를 취할 수 있습니다. 예로 pixels, mm, rems, % 등이 해당한다.

+
+ +

이제 저장하고 새로고침하면 다음과 같은 내용의 결과를 얻을 것입니다:

+ + + +

{{ EmbedLiveSample('상하_좌우_위치잡기_소개', '100%', 500) }}

+ +

근사하죠, 그쵸? 좋습니다. 그러나 이것은 아마도 여러분이 기대했던 것이 아니었을 것입니다. 우리가 좌측 상단을 지정했는데 왜 우측 하단으로 이동했을까요? 처음에는 비논리적으로 들릴지 모르지만, 이것은 상대적 위치잡기가 작용하는 방식일 뿐입니다. 즉, 위치가 지정된 상자의 특정 측면을 밀어서 반대 방향으로 움직이는 보이지 않는 힘이 있다고 생각할 필요가 있습니다. 예를 들어, top: 30px;를 지정하면 힘은 상자 상단을 밀어서 30px 아래로 이동하게 만듭니다.

+ +
+

참고: 이 시점에 예제의 실제 구현 장면을 2_relative-positioning.html에서 확인할 수 있습니다(소스 코드 보기).

+
+ +

절대 위치잡기

+ +

절대적인 위치 결정은 매우 다른 결과를 가져옵니다. 당신의 소스 코드에 다음과 같이 위치 선언을 변경해 보겠습니다.

+ +
position: absolute;
+ +

지금 저장한 다음에 새로고침하면 다음과 같은 것이 확인되어야 합니다:

+ + + +

{{ EmbedLiveSample('절대_위치잡기', '100%', 420) }}

+ +

우선, 위치잡기 요소가 원래 있었어야 했던 문서 대열 속 위치에 있던 간격은 더 이상 존재하지 않는다는 점에 유의하십시오. 즉 간격이 더 이상 존재하지 않는 것처럼 첫 번째와 세 번째 요소가 붙어 버렸습니다! 어떤 면에서는, 이것은 사실입니다. 절대적으로 위치한 요소는 더 이상 일반 문서 조판 대열에서 존재하지 않습니다. 대신 다른 모든 것과는 별개로 독자적인 레이어상에 놓여 있습니다. 이것은 매우 유용합니다. 즉, 페이지의 다른 요소의 위치와 간섭하지 않는 격리된 사용자 인터페이스 기능을 만들 수 있습니다. 예를 들어 팝업 정보 상자 및 제어 메뉴, 롤오버 패널, 페이지 어느 곳에서나 끌어서 놓기할 수 있는 유저 인터페이스 페이지 등등…

+ +

둘째, 요소의 위치가 변경되었음을 알아차립시다. 이는 {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}가 절대 위치잡기에 해당해 다른 방식으로 작동하기 때문입니다. 요소가 진입해야 하는 방향을 지정하기 보다는 요소가 (부모) 콘테이너 요소의 상하좌우 측면으로부터 떨어지는 간격을 지정되어야 합니다. 따라서 이 경우, 내 말은 절대 위치잡기 요소는 "콘테이너 요소"의 상단에서 30px, 왼쪽에서 30px에 위치에 놓여야 한다는 말입니다.

+ +
+

참고: 당신이 필요하다면 요소의 크기를 재지정하기 위해 {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}를 사용할 수 있습니다. 당신이 위치잡기한 요소에 top: 0; bottom: 0; left: 0; right: 0;과 margin: 0;를 지정한 뒤 어떻게 되냐 보십시요! 해보고 다시 원상태로 돌리십시요...

+
+ +
+

주석: 그렇습니다. 여백이 위치잡기한 요소에 여전히 영향을 미칩니다. 그러나 마진 축소 영향은 업습니다.

+
+ +
+

참고: 당신은 3_absolute-positioning.html에서 예제를 확인할 수 있습니다(소스 코드를 보세요).

+
+ +

위치잡기 상황

+ +

어떤 요소가 절대 위치잡기의 기준이 되는 "콘테이너 요소"입니까? 이것은 위치잡기 요소의 조상에 지정된 위치 속성의 여하에 따라 많이 달라집니다. (See 콘테이너 블록 식별하기).

+ +

조상 요소가 명시적으로 정의된 위치 속성을 가지고 있지 않으면 초깃값으로 모든 조상 요소에 정적 위치가 부여됩니다. 그에 따른 결과, 절대적 위치잡기한 요소는 initial containing block에 포함되게 됩니다. 초기 콘테이너 블록은 브라우저 뷰포트 크기의 용적을 가지며, 자신도 {{htmlelement("html")}} 요소를 포함하는 블록입니다. 간단히 말해서, 절대적 위치잡기한 요소는 {{htmlelement("html")}} 요소의 외부에 포함되어 초기 뷰포트 기준과 비례한 곳에 위치하게 됩니다.

+ +

위치잡기한 요소는 에이치티엠엘 소스의 {{htmlelement("body")}} 안에 중첩되지만 최종 조판에서는 페이지의 가장자리 상단과 왼쪽에서 30px 떨어져 있습니다. 우리는 요소의 절대적 위치잡기에서 어떤 요소에 비례해 위치잡기할지 기준이 되는 positioning context(위치잡기 상황)을 변경할 수 있습니다. 이것은 조상 요소 중 하나를 기준으로 위치잡기 설정이 이뤄집니다. 다시말해 요소의 내부에 중첩된 요소 중 하나가 기준이 됩니다(내부에 중첩되지 않은 요소를 기준삼아 비례적으로 위치시킬 수 없습니다). 이를 증명하기 위해 다음과 같은 선언을 body 규칙에 추가하십시요:

+ +
position: relative;
+ +

이로써 다음과 같은 결과가 나와야 합니다.

+ + + +

{{ EmbedLiveSample('위치잡기_상황', '100%', 420) }}

+ +

위치잡기한 요소는 이제 기준이 되는 {{htmlelement("body")}} 요소와 비례한 위치에 놓이게 된다.

+ +
+

참고: 당신은 이 시점에 예제의 실제 구현 장면을 4_positioning-context.html에서 볼 수 있습니다(소스 코드 보기).

+
+ +

z-인덱스 소개

+ +

이 모든 절대적 위치잡기는 제법 재미나지만, 아직 고려하지 않은 또 다른 것이 있습니다. 요소가 겹치기 시작하면 어떤 요소가 다른 요소 위에 나타나는지 결정하는 기준은 무엇입니까? 지금까지 우리가 본 예제에서, 우리는 위치잡기 상황 속에 단 하나의 위치잡기할 요소만 주어졌습니다. 그리고 그것은 상위에 나타납니다. 왜냐면 위치잡기 요소가 비 위치잡기 요소보다 우위를 점하기 때문입니다. 하나 이상의 요소가 있을 때는 어떨까요?

+ +

다음을 씨에스에스에 추가해 첫 단락도 절대적 위치잡기 대상으로 만들어 봅시다.

+ +
p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+}
+ +

이 시점에서 당신이 보게될 것은 첫 번째 단락이 녹색으로 칠해지고, 문서 대열을 벗어나 원래 위치에서 약간 위에 자리를 잡습니다. 또한, 두 개의 단락이 겹치는 원래의 .positioned 클래스가 지정된 단락 아래에 겹겹이 포개집니다. 이렇게 되는 까닭은 .positioned 클래스로 지정된 단락이 소스 순서상에 두 번째 단락이고 소스 순서상에 뒤에 있는 위치잡기한 요소가 소스 순서상 앞서는 위치잡기한 요소보다 우위를 점하기 때문입니다.

+ +

스택 순서를 변경할 수 있습니까? 네, {{cssxref("z-index")}} 속성을 사용하면 가능합니다. z-인덱스는 z축을 가리킵니다. 당신은 앞서 배경 이미지와 그림자 오프셋을 떨어뜨리는 것과 같은 사물의 위치를 파악하는 방법을 찾는 과정에서 웹 페이지를 수평(x축)과 수직(y축) 좌표로 논의한 학습 과정을 기억하실 겁니다. (0,0)은 페이지(또는 요소)의 상단 왼쪽에 있으며, x-축 및 y-축은 페이지의 오른쪽 및 아래쪽으로 진행합니다(가로쓰기 언어의 경우를 말합니다).

+ +

웹 페이지에는 z축이 있습니다. 스크린 표면으로부터 진행하는 가상 라인, 즉 사용자 얼굴 쪽으로 향하는(당신이 화면 위에 놓고 싶은 것을 망론한다). {{cssxref("z-index")}} 값은 위치잡기한 요소가 해당 축상에 놓일 경우에 영향을 미칩니다. 양수 값은 스택 상단으로 이동하고 음수 값은 스택 아래로 이동합니다(역주: 상단으로 겹겹이 쌓이거나 하단으로 겹겹이 쌓여진다) 기본값으로 위치잡기한 요소는 모두 z-index가 auto 값을 가지며, 이는 사실상 0입니다.

+ +

스택 순서를 변경하려면 다음 선언을 p:nth-of-type(1) rule: 규칙에 추가하십시오.

+ +
z-index: 1;
+ +

이제 녹색 단락이 상단에 놓여진 완성된 예가 보여야 합니다.

+ + + +

{{ EmbedLiveSample('z-인덱스_소개', '100%', 400) }}

+ +

z-인덱스는 단위가 없는 인덱스 값만 허용한다는 점에 유의하자; 하나의 요소가 Z축 위로 23픽셀이 되도록 지정할 수 없습니다. 그런 식으론 작동하지 않습니다. 높은 값의 요소는 낮은 값 요소의 위로 간니다. 그러니 당신이 어떤 값을 사용할 지에 달려있습니다. 2와 3을 사용하면 300과 40000과 같은 효과를 얻을 수 있습니다.

+ +
+

참고: 이 시점에 예제의 실제 구현 장면을 5_z-index.html에서 볼 수 있습니다(소스 코드 보기).

+
+ +

고정 위치잡기

+ +

이제 고정 위치잡기를 살펴보자. 이것은 절대 위치잡기와 정확히 같은 방식으로 작동합니다.단 한 가지 핵심 차이점이 있습니다. 절대 위치잡기는 {{htmlelement("html")}} 요소나 가까운 조상 요소를 기준으로 비례해 요소를 고정시키지만, 고정 위치잡기는 브라우저 뷰 포트 자체를 기준으로 비례해 요소를 고정합니다. 즉, 탐색 메뉴가 계속 자리를 지키는 것과 같이 제자리에 고정된 유용한 사용자 인터페이스 항목을 생성할 수 있습니다.

+ +

우리가 무슨 얘기를 하는지 보여주기 위해 간단한 예를 들어봅시다. 먼저 씨에스에스에서 기존 p:nth-of-type(1)과 .positioned 규칙을 삭제합니다.

+ +

이제 position: relative; 선언을 지우고, 다음과 같이 고정 높이를 추가하는 규칙을 body 규칙에 업데이트합니다:

+ +
body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+ +

이제 우리는 {{htmlelement("h1")}} 요소에 position: fixed;를 부여하고, 그걸 뷰 포트의 상단 중앙에 놓게 합니다. 다음 규칙을 씨에스에스에 추가하세요.

+ +
h1 {
+  position: fixed;
+  top: 0;
+  width: 500px;
+  margin: 0 auto;
+  background: white;
+  padding: 10px;
+}
+ +

화면 상단에 고정시키려면 top: 0;이 요구됩니다. 그런 다음 제목에 콘텐츠 열과 동일한 너비를 부여하고 콘텐츠를 중앙에 놓기 위해 오래됐지만, 신뢰감을 주는 margin: 0 auto;를 사용합니다. 그런 다음 제목에 흰색 배경과 패딩을 부여해 제목 아래에 내용이 보이지 않도록 합니다.

+ +

지금 저장하고 새로고침하면 제목이 고정되는 사소하지만, 재미난 효과를 볼 수 있으며, 스크롤 막대를 위로 올리면 콘텐츠가 드러나고 아래로 내리면 제목 밑으로 콘텐츠가 사라지는 것처럼 보입니다. 하지만 우리는 이것을 더 개선할 수 있습니다. 현재 일부 콘텐츠가 시작부터 제목에 밑에 깔려있는 부분 말입니다. 위치잡기한 제목이 문서 대열상에서 모습을 드러내지 않기 때문입니다. 그래서 나머지 콘텐츠가 맨 위로 이동했습니다. 우리는 올라간 것을 조금 아래로 이동시켜야 합니다. 우리는 그걸 첫 번째 단락에 최상위 여백을 설정해서 달성할 수 있습니다. 지금 다음 내용을 추가하세요:

+ +
p:nth-of-type(1) {
+  margin-top: 60px;
+}
+ +

당신은 이제 완성된 예제를 볼 수 있어야 합니다:

+ + + +

{{ EmbedLiveSample('고정_위치잡기', '100%', 400) }}

+ +
+

참고: 당신은 이 시점에 예제의 실제 구현 장면을 6_fixed-positioning.html에서 볼 수 있습니다 (소스 코드는 여기서 보세요).

+
+ +

position: sticky

+ +

이용할 수 있는 position: sticky라고 불리우는 또 다른 위치잡기 값이 있습니다. 이것은 다른 위치잡기보다 다소 새로운 것입니다. 이것은 기본적으로 상대 위치잡기와 고정 위치잡기가 혼합된 하이브리드로서, 위치잡기 요소가 특정 임계점에(예로 뷰포트의 상단으로부터 10px) 스크롤될 때까지 상대 위치잡기처럼 행동할 수 있다가 그 뒤에 위치가 고정됩니다. 예를 들어, 탐색 막대가 특정 지점까지 페이지와 함께 스크롤한 다음 페이지 상단에 흡착되도록 사용할 수 있습니다.

+ +
+ + +
.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{ EmbedLiveSample('흡착_1', '100%', 200) }}

+ +

position: sticky의 일반적 사용례기도 하고 흥미로운 사용례는 스크롤링하다 제목에 도달하면 서로 다른 제목이 페이지의 맨 위에 흡착되는 색인 페이지를 만드는 것입니다. 이런 사례에 대한 마크업은 다음과 같은 모습일 수 있습니다:

+ +
<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>
+
+ +

씨에스에스는 다음과 같이 보일 수 있다. 일반 대열에서는 {{htmlelement("dt")}} 요소가 콘텐츠와 함께 스크롤됩니다. {{cssxref("top")}} 값이 0이고 {{htmlelement("dt")}} 요소에 position: sticky를 추가하면 이를 지원하는 브라우저는 그 위치(0)에 도달할 때 머리글을 브라우저 뷰포트 상단에 흡착시킵니다. 그 후 각각의 후속 머리글은 자신의 위치까지 스크롤하는 시점에 이전 머리글을 교체합니다.

+ +
dt {
+  background-color: black;
+  color: white;
+  padding: 10px;
+  position: sticky;
+  top: 0;
+  left: 0;
+  margin: 1em 0;
+}
+
+ +
+ +
+ +

{{ EmbedLiveSample('흡착_2', '100%', 200) }}

+ +
+

참고: 당신은 이 시점에 예제의 실제 구현 장면을 7_sticky-positioning.html에서 볼 수 있습니다(소스 코드는 여기서 보세요).

+
+ +

요약정리

+ +

기본적인 위치잡기를 가지고 놀이삼아 시험해 보니 재미있었을 것이다; 비록 이것이 완전체 조판에 사용할 수 있는 방법은 아니지만, 여러분이 보았다시피 이것이 알맞은 용도로 사용될 수 있는 많은 작업들이 있다.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}

+ +

참조 항목

+ + + +

이번 단위에는

+ + diff --git a/files/ko/learn/css/css_layout/responsive_design/index.html b/files/ko/learn/css/css_layout/responsive_design/index.html new file mode 100644 index 0000000000..b1311448c7 --- /dev/null +++ b/files/ko/learn/css/css_layout/responsive_design/index.html @@ -0,0 +1,333 @@ +--- +title: 반응형 디자인 +slug: Learn/CSS/CSS_layout/반응형_디자인 +tags: + - 가변상장 + - 격자 + - 다단 + - 미디어 쿼리 + - 반응형 웹 디자인 + - 유동 격자 + - 이미지 + - 타이포크래피 +translation_of: Learn/CSS/CSS_layout/Responsive_Design +--- +
{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
+ +

웹디자인 초창기에는 페이지를 구축할 때 매우 구체적인 화면 크기를 공략 대상으로 삼았습니다. 사용자가 웹디자이너가 예상한 것보다 크거나 작은 화면의 기기를 가지고 있다면 원하지 않는 스크롤 막대에서부터 지나치게 긴 길이의 라인, 사용 공간이 부족하게 되는 결과를 낳습니다. 다양한 화면 크기가 등장함에 따라 responsive web design 개념이 등장했습니다. 말하자면 서로 다른 화면 너비와 해상도 등에 맞게 웹 페이지가 조판과 모양을 변경할 수 있는 일련의 실례를 집대성한 것입니다. 이 아이디어가 우리가 멀티 디바이스 웹에 대한 설계 방식을 바꾸게 만든 장본인입니다. 이 문서에서 우리는 그 내용을 숙달하기 위해 당신이 알아야하는 주요 기술을 이해하도록 도울 것입니다.

+ + + + + + + + + + + + +
선결 사항:에이치티엠엘의 기초인 (에이치티엠엘 입문서를 공부하세요), 그리고 씨에스에스의 작동 방식을 파악하기 위해 (씨에스에스 첫걸음과 씨에스에스 구성 블록를 공부하세요.)
목표:반응형 디자인의 역사와 핵심적인 계념 파악하기
+ +

웹사이트 조판 역사

+ +

역사의 어느 시점 여러분이 웹 사이트를 디자인할 때 두 가지 옵션이 있었습니다.

+ + + +

이러한 두 가지 접근법은 사이트를 디자인하는 사람의 화면에서 가장 보기 좋은 웹 사이트로 귀결되는 경향이 있었습니다! 유동 사이트는 (아래에서 볼 수 있듯이) 디자이너의 화면보다 더 작은 화면에는 찌부러진 디자인이 나오고, 더 큰 화면에는 읽을 수 없을 정도로 길이가 긴 라인을 만들어냅니다.

+ +
두 개의 열이 있는 조판이 모바일 크기 뷰포트에서 찌부러집니다. +
+
+ +
+

주석: 여기 간단한 유동 조판을 보세요: 예제, 소스 코드. 예제를 보면 브라우저 창을 안팎으로 드래그하여 서로 다른 크기에 반응해 어떻게 보이는지 확인합니다.

+
+ +

고정 폭 사이트는 (아래에서 보듯) 사이트 너비보다 작은 화면상에 수평 스크롤 막대가 생기는 위험이 있고 더 큰 화면상에서는 웹디자인 가장자리에 많은 흰색 공간이 생길 위험이 있습니다.

+ +
이동 뷰포트에 수평 스크롤 막대가 있는 조판입니다. +
+
+ +
+

주석: 여기 간단한 고정 너비 조판을 보세요: 예제, 소스 코드. 역시 브라우저 창 크기를 변경할 때 결과를 관찰하세요.

+
+ +
+

주석: 상단 화면는 파이어폭스 개발툴 안에서 반응형 디자인 모드을 사용해 갈무리 한 것입니다.

+
+ +

모바일 웹이 첫 번째 피처폰의 등장으로 현실화되기 시작하면서 모바일을 수용하고자 하는 회사들은 일반적으로 (종종 m.example.com 또는 example.mobi 이런 식의) 서로 다른 URL를 사용하여 그들의 사이트의 특별한 모바일 버전을 만들게 됩니다. 이는 해당 사이트의 두 가지 별도 버전을 개발하고 최신 상태로 유지해야 한다는 것을 의미했습니다.

+ +

게다가, 이러한 모바일 사이트들을 경험해보면 종종 매우 축소된 기능을 제공합니다. 모바일 장치가 더욱 강력해지고 전체 웹 사이트를 표시할 수 있게 되면서, 그러한 기능 축소 모바일 버전 사이트에 갖힌 자신을 발견한 모바일 사용자들은 그들이 알고 있는 해당 사이트의 전체 기능이 있는 데스크탑 버전의 정보에 접근할 수 없었기에 좌절감을 안겨주었습니다.

+ +

반응형 디자인의 전신 가변 조판

+ +

유동 및 고정 너비의 웹사이트 구축 방법의 단점을 해결하기 위해 여러 가지 접근법이 개발되었습니다. 2004년 카메론 아담스는 다양한 화면 해상도에 적응할 수 있는 디자인을 만드는 방법을 설명하는 해상도 의존 조판이라는 제목의 게시물을 작성했습니다. 이 접근방식은 화면 해상도를 감지하고 정확한 씨에스에스를 로드하려면 자바스크립트가 필요했습니다.

+ +

조이 미클리 길렌워터는 그녀의 작업을 통해 화면을 채우는 것과 완전히 고정된 화면 크기 사이를 만족시키는 평균값을 찾으려고 시도하는 등 가변적인 사이트를 만들 수 있는 다양한 방법을 기술하고 공식화하는 데 산파 역할을 했습니다.

+ +

반응형 디자인

+ +

반응형 디자인이라는 용어는 2010년 이단 마르코트가 만든 신조어로 세 가지 기술을 조합한 용법을 설명하고 있습니다.

+ +
    +
  1. 첫 번째는 이미 길렌워터에 의해 탐구되고 있던 유동 격자라는 아이디어였으며, 마르코트의 유동 격자란(2009년 A List Apart에 발표) 문서에서 읽을 수 있다.
    2. +
  2. 두 번째 기술은 유동 이미지라는 개념이다. max-width 속성을 100%로 설정하는 매우 간단한 기술을 사용하면 이미지의 포함된 열이 이미지의 고유 크기보다 좁아지면 이미지가 더 작아지지만 더 커지지는 않습니다. 이것은 이미지가 대열이탈이 아니라 가변적인 크기의 열에 맞게 축소될 수 있지만 열이 이미지보다 넓어지면 확대되지 않고 픽셀화될 수 있습니다.
    3. +
  3. 세 번째 핵심 구성요소는 미디어 쿼리였습니다. 미디어 쿼리는카메론 아담스가 앞서 자바스크립의 사용을 탐구했던 조판 전환 유형을 씨에스에스만을 사용하여 실현합니다. 모든 화면 크기마다 하나씩 조판을 부여하기 보다는 조판을 변경할 수 있었다. 사이드바를 작은 화면에 맞게 재배치하거나 대체 탐색 매뉴를 표시할 수 있습니다.
    4. +
+ +

반응형 웹 디자인은 별도의 기술이 아니다라는 것을 이해하는 것이 중요합니다. 즉, 웹 디자인에 대한 접근 방식이나 콘텐츠를 보는데 사용되는 장치에 반응할 수 있는 조판 생성에 사용되는 모범 사례 집합을 기술하는 데 사용되는 용어다. 마르코트의 원래 연구에서 이것은 (부동체를 사용하는) 가변 격자와 미디어 쿼리를 의미했지만, 그의 문서가 쓰여진지 거의 10년 만에 반응형으로 동작하는 것이 기본값이 되었다. 현대의 씨에스에스 조판 메서드는 본질적으로 반응형이며 반응형 사이트 설계를 쉽게하기 위해 웹 플랫폼에 새로운 요소들이 내장되어 있습니다.

+ +

이 문서의 나머지 절에서는 반응형 사이트를 만들 때 사용할 수 있는 다양한 웹 플랫폼 기능에 대해 안내할 것입니다.

+ +

미디어 쿼리

+ +

반응형 디자인은 오롯이 미디어 쿼리 때문에 등장할 수 있었습니다. 미디어 쿼리 수준 3 규격은 2009년 권장사항 후보가 되었으며, 이는 브라우저에서 구현할 준비가 되어 있음을 의미합니다. 미디어 쿼리에서는 일련의 테스트를 실행할 수 있습니다(예로 사용자의 화면이 특정 너비나 특정 해성도보다 큰지 여하에 따라). 씨에스에스를 선택적으로 적용하여 사용자의 필요에 따라 페이지를 적절하게 스타일링합니다.

+ +

예를 들어, 아래 미디어 쿼리는 현재 웹 페이지가 화면 미디어로 표시되고 있는지(따라서 인쇄된 문서가 아님) 확인하며 뷰포트는 적어도 800픽셀 너비인지 테스트합니다. .container 선택기는 씨에스에스는 이 두 가지가 사실인 경우에만 적용됩니다.

+ +
@media screen and (min-width: 800px) {
+  .container {
+    margin: 1em 2em;
+  }
+} 
+
+ +

스타일시트에 여러 미디어 쿼리를 추가하여 다양한 화면 크기에 맞는 최적의 전체 조판 또는 조판의 일부를 조정할 수 있습니다. 미디어 쿼리가 도입되고 조판이 변경된 지점을 breakpoints(분기점)라고 합니다.

+ +

미디어 쿼리를 사용할 때 일반적인 접근법은 좁은 화면 장치(예: 휴대폰)에 대한 간단한 단일 열 조판을 만든 다음, 큰 화면인지 점검하고, 화면 폭이 충분하다는 것을 알게 될 때 다단 조판을 구현하는 것이다. 이를 모바일 우선 디자인이라고 표현하는 경우가 많다.

+ +

미디어 쿼리에 대한 MDN 문서를 더 찾아보십시요.

+ +

가변 격자

+ +

반응형 사이트는 분기점 전후로 자체 조판을 변경할 뿐만 아니라 가변 격자상에도 동일하게 구축됩니다. 가변 격자는 현존하는 모든 장치 크기를 공략 대상으로 삼을 필요가 없으며, 그 대상에 대한 완벽한 픽셀 조판을 구축할 필요가 없다는 것을 의미합니다. 완벽한 픽셀 접근 방식은 존재하는 다양한 크기의 장치들이 엄청나게 많고, 적어도 데스크톱에서는 사람들이 항상 브라우저 창을 최대화하지는 않는다는 사실을 감안할 때 불가능할 것입니다.

+ +

가변 격자를 사용하면 요소를 분기점에 추가하고, 콘텐츠가 불량으로 보이기 시작하는 지점에서 디자인을 변경할 수 있습니다. 예를 들어, 화면 크기가 커지면 라인 길이가 읽을 수 없게 길어지거나 상자가 좁아질 때 각 라인에 두 단어로 찌브러집니다.

+ +

반응형 디자인 초창기에는 조판 기능을 수행하는 유일한 옵션은 부동체를 사용하는 것이 었습니다. 가변 부동 조판은 각 요소에 백분율 너비를 부여하고 조판 전체의 너비가 100%를 넘지 않도록 보장함으로써 달성되었습니다. 마르코트는 유동 격자와 관련 그의 원래 작품에서 픽셀을 사용하여 설계된 조판을 채택하여 백분율로 변환하는 공식을 상세히 설명했습니다.

+ +
target / context = result 
+
+ +

예를 들어, 목표 열 크기가 60픽셀이고, 거기에 들어갈 상황(혹은 컨테이너)가 이 960픽셀이면, 씨에스에스에서 사용할 수 있는 값을 얻기 위해 우선 60픽셀을 960픽셀로 나누고 거기에 소수점을 오른쪽으로 두칸 이동합니다.

+ +
.col {
+  width: 6.25%; /* 60 / 960 = 0.0625 */
+} 
+
+ +

이 접근 방식은 오늘날 웹상에 여러 곳에서 발견될 것이며, 여기 우리의 레거시 조판 메서드 문서의 조판 절에 문서화되어 있습니다. 여러분이 업무 중에 이 접근법을 사용하는 웹 사이트를 발견할 가능성이 높기 때문에 부동 기반의 가변 조판을 사용하여 현대적인 사이트를 구축하지는 않겠지만, 그 내용을 이해할 가치는 있습니다.

+ +

다음 예제에서는 미디어 쿼리와 가변 격자를 사용하여 간단한 반응형 디자인를 보여줍니다. 좁은 화면상에서는 상자가 상대 요소 위해 겹겹이 쌓여지는 조판 형태로 표시됩니다.

+ +
상자 무리가 상대 요소의 상단에 수직으로 겹겹이 쌓이는 모바일뷰 조판입니다. +

On wider screens they move to two columns:

+ +
+
+ +
2단 조판이 적용된 데스크탑 뷰입니다. +
+
+ +
+

주석: 여러분은 여기서 실례를 찾아볼 수 있으며, 이 예제에 대한 소스 코드를 깃허브에서 찾을 수 있습니다.

+
+ +

현대 조판 기술

+ +

다단 조판과 가변상자와 격자와 같은 현대 조판 메서드는 기본값으로 응답형입니다. 그것들은 모두 여러분이 가변 격자를 만들려 한다고 가정하고 그렇게 동작하도록 편리한 방법을 제공합니다.

+ +

다단

+ +

이러한 조판 메서드 중 가장 오래된 것은 다단입니다. 여러분이 column-count를 지정하면, 이는 여러분이 콘텐츠를 나누고자 하는 단의 숫자를 나타냅니다. 그런 다음 브라우저는 다단의 크기를 화면 크기에 따라 변경되는 크기로 계산합니다.

+ +
.container {
+  column-count: 3;
+} 
+
+ +

column-width을 지정하는 대신 minimum 너비를 지정하는 것입니다. 브라우저는 컨테이너에 안착할 수 있는 만큼으로 지정한 해당 너비를 가진 열을 최대한 많이 생성하고 난 뒤에 다음 모든 열 사이에서 나머지 공간을 공유합니다. 따라서 열의 수는 공간이 얼마나 되는지에 따라 달라집니다.

+ +
.container {
+  column-width: 10em;
+} 
+
+ +

가변상자

+ +

가변상자에서 가변 항목은 초깃값 동작으로 컨테이너의 공간에 따라 항목 사이의 공간을 축소하고 분배합니다. flex-grow 및 flex-shrink 값을 변경하면 해당 항목에 주어진 주변 공간이 남거나 모질라게 될 경우 원하는 동작 방식을 표기할 수 있습니다.

+ +

아래 예제에서 가변 항목은 가변 컨테이너 안에서 각각 동일한 양의 공간을 차지하며, 가변상자: 가변 항목의 가변 크기 조정에서 설명했듯이 flex: 1식의 약칭을 사용할 수 있습니다.

+ +
.container {
+  display: flex;
+}
+
+.item {
+  flex: 1;
+} 
+
+ +
+

참고: 예제로써 상기된 간단한 반응형 조판을 재구축했는데 이번에는 가변상자를 사용했습니다. 여러분은 더 이상 낮설은 백분율 값을 사용하여 열의 크기를 계산할 필요가 없는 방법을 보게 됩니다: 예제, 소스 코드.

+
+ +

씨에스에스 격자

+ +

씨에스에스 격자 조판에서 fr 단위는 격자 트랙 전역에 걸쳐 이용할 수 있는 공간을 분배할 수 있습니다. 다음 예에서는 1fr 크기의 트랙 3개가 있는 격자 컨테이너를 만듭니다. 이렇게 하면 3개의 열 트랙이 생성되며, 각 트랙은 컨테이너에 있는 사용 가능한 공간\의 한 부분을 차지합니다. 여러분은 fr 단위를 포함한 가변 격자라는 격자 조판 학습 주제에서 격자를 생성하는 이같은 접근 방식에 대해 자세히 알 수 있습니다.

+ +
.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+} 
+
+ +
+

참고: 격자 조판 버전은 .wrapper 예제상에 열을 정의할 수 있으므로 더 간단합니다: 소스 코드.

+
+ +

반응형 이미지

+ +

반응 이미지에 대한 가장 간단한 접근법은 반응형 디자인에 관한 마르코트의 초창기 문서에서 설명한 바와 같습니다. 기본적으로 필요한 최대 크기의 이미지를 촬영하여 그것을 축소할 수 있습니다. 이것은 오늘날에도 사용되는 접근법이며 대부분의 스타일 시트에서 다음과 같은 씨에스에스를 어디선가는 발견할 수 있습니다.

+ +
img {
+  max-width: 100%:
+} 
+
+ +

이 접근법에는 명백한 단점이 있습니다. 해당 이미지는 고유 크기보다 훨씬 작게 표시될 수 있어 대역폭 낭비입니다. 다시말해 모바일 사용자는 브라우저 창에서 실제로 보는 것의 몇 배 크기의 이미지를 다운로드하게 되니 낭비입니다. 또한, 데스크톱과 같은 이미지 가로 세로 비율을 모바일에서 원하지 않을 수도 있습니다. 예를 들어, 모바일의 경우 정사각형 이미지가 좋을 수 있지만 데스크톱상에는 같은 이미지를 가로 보기처럼 장면을 보여줍니다. 또는 모바일 상의 이미지의 크기가 작다는 것을 이해하면서도 서로 다른 이미지를 모두 보여주고 싶을 경우가 있습니다. 말하자면 작은 화면 크기에서 더 쉽게 해석될 수 있는 이미지를 말합니다. 이런 것들은 단순히 이미지를 축소해서는 달성할 수 없습니다.

+ +

반응형 이미지는 <picture> 요소와 <img>, srcset과 sizes 속성은 이러한 문제를 모두 해결합니다. 여러분은 "힌트"(이미지에 가장 적합한 화면 크기와 해상도를 설명하는 메타 데이터)와 함께 여러 크기를 제공할 수 있으며, 브라우저는 각 장치에 가장 적합한 이미지를 선택하며, 사용자가 사용하고 있는 장치에 적합한 이미지 크기를 다운로드할 수 있도록 담보합니다.

+ +

또한 다른 화면 크기에서 사용되는 이미지를 art direct할 수 있으므로 서로 다른 화면 크기에 대해 서로 다른 자르기 또는 완전히 다른 이미지를 제공할 수 있습니다.

+ +

이곳 MDN 사이트의 에이치티엠엘 학습 섹션에서 반응형 이미지에 대한 자세한 안내서를 찾을 수 있습니다.

+ +

반응형 타이포그래피

+ +

반응형 타이포그래피 개념은 이전 작업에서 다루지 않은 반응형 디자인의 요소입니다. 본질적으로, 이것은 화면 부동산의 크기가 더 작아지거나 더 커지거나하는 것을 반영하기 위해 미디어 쿼리 구문 안에서 폰트 크기를 변경하는 것을 말합니다.

+ +

이 예제에서 우리는 수준 1 머리글을 4rem로 설정하려고 합니다. 즉, 기본 글꼴 크기의 4배입니다. 정말 큰 제목이네요! 우리는 더 큰 화면 크기상에서만 이 코끼리만한 머리글을 원하기 때문에, 우리는 먼저 더 작은 머리글을 만들고, 미디어 쿼리를 사용해 조건에 맞으면 그것을 더 큰 크기로 덮어쓰기 하면됩니다. 여기서 조건은 사용자가 적어도 1200px의 화면 크기의 기기를 가진 경우가 해당됩니다.

+ +
html {
+  font-size: 1em;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 4rem;
+  }
+} 
+
+ +

상기한 반응형 격자 예제를 편집했고, 거기에 더해 이미 제시된 메서드를 사용하는 응답형 유형을 포함시켰습니다. 조판이 2개의 열 버전으로 이동함에 따라 머리글 크기가 어떻게 전환하는지 볼 수 있습니다.

+ +

모바일에서는 머리글이 더 작다:

+ +
머리글 크기가 작은 스택 모양의 조판입니다. +

On desktop however we see the larger heading size:

+ +
+
+ +
큰 머리글이 딸린 두개의 열 조판입니다. +
+
+ +
+

참고: 이 예제의 실제 구현 장면: 예제, 소스 코드.

+
+ +

타이포그래피에 대한 이러한 접근 방식이 보여주듯이, 미디어 쿼리를 제한하여 페이지 조판만 변경할 필요는 없습니다. 그들 접근법을 사용하여 어떤 요소라도 조정해서 대체 화면 크기에 맞는 더 유용하고 매력적인 요소를 만들 수 있다.

+ +

반응형 타이포그래피에 대한 뷰포트 단위 사용하기

+ +

흥미로운 접근 방식은 반응형 타이포그래피를 사용하기 위해 뷰포트 단위 vw를 사용할 수 있다는 점이다. 1vw는 뷰포트 너비의 1%와 동일하며, vw를 사용하여 글꼴 크기를 설정하면 항상 뷰포트 크기와 관련이 있다는 것을 의미한다.

+ +
h1 {
+  font-size: 6vw;
+}
+ +

위의 작업 수행에서의 문제는 사용자가 vw 단위를 사용하여 텍스트 집합을 확대/축소하는 기능을 상실하는 데 있다. 따라서 여러분은 뷰포트 단위만으로 텍스트를 설정해서는 안 된다.

+ +

해결책이 하나 있다. calc()를 사용하는 것이다. 즉, em와 같은 고정된 크기를 사용하여 속성값 집합에 vw 단위를 추가하면 텍스트는 여전히 확대/축소할 수 있다. 본질적으로 vw 단위는 확대/축소 값에 더해 추가된다.

+ +
h1 {
+  font-size: calc(1.5rem + 3vw);
+}
+ +

즉, 머리글에 대한 폰트 크기를 한 번만 지정하면 된다. 크기를 모바일용으로 따로 설정할 게 아니라 미디어 쿼리 내에서 크기를 재정의한다는 말이다. 그러면 뷰포트의 크기가 커질수록 글꼴은 점차 커진다.

+ +
+

이에 대한 예제의 실현: 예제, 소스 코드.

+
+ +

뷰포트 메타 테그

+ +

응답형 페이지의 에이치티엠엘 소스를 보면 일반적으로 문서의 <head>에서 다음과 같은 {{htmlelement("meta")}} 태그를 볼 수 있다.

+ +
<meta name="viewport" content="width=device-width,initial-scale=1">
+
+ +

이 메타 태그는 뷰포트의 너비를 장치의 너비로 설정하여 문서를 의도한 크기의 100%로 확장해야 한다고 모바일 브라우저에게 알려줍니다. 이로써 여러분이 의도한 대로 모바일에 최적화된 크기로 문서를 표시합니다.

+ +

왜 이런 것이 필요할까요? 모바일 브라우저는 뷰포트 너비에 대해 거짓말을 하는 경향이 있기 때문이다.

+ +

이 메타 태그는 원래 iPhone이 출시되고 사람들이 작은 전화 화면에서 웹 사이트를 보기 시작했을 때 대부분의 사이트가 모바일 최적화되지 않았기 때문에 존재합니다. 따라서 모바일 브라우저는 뷰포트 너비를 960픽셀로 설정하게 됩니다. 해당 너비로 페이지를 렌더링하고, 그 결과를 데스크톱 조판의 확대 버전으로 표시합니다. 다른 모바일 브라우저(예를 들어 구글 안드로이드)도 똑같은 일을 합니다. 사용자들은 웹사이트를 확대하고 이리저리 끌어 옮기며(panning) 그들이 관심을 갖는 부분을 볼 수 있었지만, 모양이 형편 없었습니다. 만약 여러분이 반응형 디자인이 아닌 사이트를 우연히 발견하게 된다면, 여러분은 오늘날에도 이런 걸 보게 될 것입니다.

+ +

문제는 분기점과 미디어 쿼리를 포함하는 응답형 디자인이 모바일 브라우저에서 의도한 대로 작동하지 않는다는 점에 있습니다. 여러분이 480px 뷰포트 너비나 그 이하에서 시작하는 좁은 화면 조판을 갖고 있고 뷰포트가 960px로 설정되어 있다면 좁은 화면 조판을 모바일에서 절대 볼 수 없게 된다. width=device-width를 설정하면 애플의 기본값인 width=960px를 장치의 실재 너비로 재지정하므로 당신의 미디어 쿼리가 의도한 대로 작동합니다.

+ +

따라서 에이치티엠엘 문서의 헤더 부분에 상기 에이치티엠엘 라인을 항상 포함해야 합니다.

+ +

뷰포트 메타 태그와 함께 사용할 수 있는 다른 설정이 있지만 일반적으로 상기 에이치티엠엘 라인이면 여러분이 사용하고자 하는 내용에 해당합니다.

+ + + +

여러분은 minimum-scale와 maximum-scale 사용을 피해야하며, 특히 user-scalable를 no로 설정하는 것도 피해야 합니다. 사용자는 필요한 만큼 확대하거나 축소할 수 있어야 합니다.이를 방지하면 접근성 문제가 발생합니다.

+ +
+

참고: 뷰포트 메타 태그를 대체하기 위해 고안된 씨에스에스 @ 규칙이 있습니다. @viewport 그러나 브라우저 지원이 매우 형편없습니다. 그것은 인터넷 익스플로러와 에지에서 구현되었지만, 일단 크롬 기반 에지가 출시되면 더 이상 에지 브라우저의 일부가 되지 않게 됩니다.

+
+ +

요약정리

+ +

반응형 디자인은 디자인이 보여지는 당해 환경에서 반응하는 사이트 및 애플리케이션 디자인을 말합니다. 그것은 많은 씨에스에스와 에이치티엠엘 기능과 기술을 망라하며 이제 기본값으로 우리가 웹사이트를 구축할 때 필수적인 방법입니다. 여러분이 휴대폰으로 방문하는 사이트를 생각해보세요. 데스크톱 버전이 축소된 사이트, 또는 사물을 찾기 위해 옆으로 스크롤해야 하는 사이트를 우연히 발견한다는 것은 상당히 이례적인 일일 것입니다. 그렇게 된 것은 웹이 반응형으로 디자인하는 접근방식으로 옮겨갔기 때문입니다.

+ +

또한 이번 단원에서 배운 조판 메서드의 도움으로 반응형 디자인을 달성하기가 훨씬 쉬워졌습니다. 여러분이 당대 웹 개발에 신출내기라면, 반응형 디자인 초창기보다 훨씬 많은 도구가 마련되어 있으니 맘껏 이용하십시요. 따라서 당신이 참조하고 있는 어떤 자료의 연혁을 확인할 가치가 있습니다. 역사적 기록 문서로서 여전히 유용하지만, 사이트 방문자가 이용하는 장치가 무엇이건 관계없이 우아하고 유용한 디자인을 훨씬 쉽게 생성하려면 씨에스에스와 에이치티엠엘의 현대적 용법이 정답입니다.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}

+ +

이번 단위에는

+ + diff --git a/files/ko/learn/css/css_layout/supporting_older_browsers/index.html b/files/ko/learn/css/css_layout/supporting_older_browsers/index.html new file mode 100644 index 0000000000..07910a4d26 --- /dev/null +++ b/files/ko/learn/css/css_layout/supporting_older_browsers/index.html @@ -0,0 +1,248 @@ +--- +title: 이전 브라우저 지원 +slug: Learn/CSS/CSS_layout/이전_브라우저_지원 +tags: + - 가변상자 + - 격자 + - 기능 쿼리 + - 레거시 + - 부동체 + - 씨에스에스 + - 안내서 + - 조판 + - 초보자 + - 학습 +translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

+ +

이 모듈에서는 Flexbox 및 Grid를 디자인의 기본 레이아웃 메서드로 사용할 것을 권고합니다. 그러나 당신이 사용한 메서드를 지원하지 않는 브라우저나 이전 브라우저를 사용해 당신의 사이트를 방문하는 사람들이 있을 겁니다. 이런 일은 웹상에서 항상 있는 일입니다. 즉 새로운 기능이 개발됨에 따라 서로 다른 브라우저가 서로 다른 것들의 우선 순위를 정합니다. 이 문서는 구식 기술의 사용자들을 외면하지 않고도 최신 웹 기술을 사용하는 방법에 대해 설명합니다.

+ + + + + + + + + + + + +
선결 사항:HTML 기본 (HTML 입문 학습), CSS의 작동 방식 CSS 입문 및 (상자 양식 지정 학습)
목표:여러분이 사용하려는 기능을 지원하지 않을 수있는 이전 브라우저에서 레이아웃을 지원하는 방법을 파악합니다.
+ +

당신의 사이트 브라우저 지향은?

+ +

모든 웹사이트는 공략 대상에 따라 달라집니다. 접근 방식을 결정하기 전에 이전 브라우저를 사용하여 사이트를 방문하는 방문자 수를 확인하십시오. 사람들이 사용중인 기술을 알려주는 분석 기능(예: Google analytics)을 이용할 수 있고, 추가 및 교체할 기존 웹 사이트가 있는 경우 이는 간단한 작업입니다. 당신이 분석툴이 없거나, 이번이 완전히 새로운 사이트 개설이라면 Statcounter같은 위치별로 필터링된 통계를 제공할 수 있는 사이트가 있습니다.

+ +

또한 사람들이 여러분의 사이트를 이용하는 방식이나 장치 유형을 고려해야만 합니다. 예를 들어 모바일 장치 이용 방문자가 평균치를 웃돌거라는 예상을 할 수 있습니다. 접근성 및 보조 기술을 사용하는 사람들은 항상 고려해야하지만 일부 사이트에서는 그 점이 더욱 중요할 수 있습니다. 필자의 경험에 따르면 개발자들은 종종 이전 버전의 인터넷 익스플로러 사용자 1%에 대해 매우 걱정하는 반면, 더 많은 사용자 층인 내게 필요한 옵션 사용자에 대해선 전혀 고려하지 않습니다.

+ +

당신이 사용하려는 기능에 대한 지원은 어떻습니까?

+ +

사이트에 들어오는 브라우저를 알면, 해당 대상에 사용하고 싶은 기술을 평가할 수 있고, 그리고 그 기술을 이용할 수 없는 방문객들에게 얼마나 쉽게 대안을 제공할 수 있는지 진단할 수 있습니다. 우리는 CSS 속성을 상세히 설명하는 각 페이지에 대한 브라우저 호환성 정보를 모질라 개발자 네트워크에서 제공함으로써 쉽게 사용할 수 있도록 노력하고 있습니다. 예를 들어, {{cssxref("grid-template-columns")}} 페이지를 살펴보십시오. 이 페이지의 맨 아래에는 이 속성을 지원하기 시작한 버전과 함께 주요 브라우저가 나열된 표가 있습니다.

+ +

+ +

기능이 얼마나 잘 지원되는지 확인하는 또 다른 일반적인 방법은 Can I Use 웹 사이트입니다. 이 사이트에는 대부분의 웹 플랫폼 기능이 브라우저 지원 상태에 대한 정보와 함께 나열됩니다. 위치별로 사용 통계를 볼 수 있습니다. 주로 특정 지역의 사용자가있는 사이트에서 작업하는 경우 유용합니다. Google 웹 로그 분석 계정을 연결하여 사용자 데이터를 기반으로 분석할 수도 있습니다.

+ +

사용자의 브라우저가 보유한 기술과 당신이 사용하려는 것에 대한 지원을 이해하면 당신은 좋은 상황에서 모든 결정을 내리고 모든 사용자를 가장 잘 지원할 수있는 방법을 알 수 있습니다.

+ +

지원하는 것과 '모양이 똑같다'는 말은 다르다

+ +

일부 사용자는 휴대 전화로 사이트를 보고 다른 사용자는 대형 데스크톱 화면에서 사이트를 보고 있기 때문에 모든 브라우저에서 웹 사이트가 동일하게 보이지 않을 수 있습니다. 마찬가지로 일부 사용자는 이전 브라우저 버전을 갖고 있고 다른 사용자에게는 최신 브라우저를 갖고 있습니다. 일부 사용자는 화면 읽기 프로그램을 사용해 내용을 읽거나 페이지를 확대하여 읽을 수도 있습니다. 모든 사람을 지원한다는 것은 방어적으로 디자인된 콘텐츠 버전을 제공하여 최신 브라우저에서는 사이트 외관이 뛰어나지만, 이전 브라우저 사용자에게는 기본 수준으로 계속 사용할 수 있음을 의미합니다.

+ +

기본적인 지원 수준이란 페이지의 일반적인 흐름이 이해되도록 콘텐츠를 잘 구성하는 것에서 출발합니다. 기능이 매우 제한적인 전화기 사용자는 많은 CSS를 얻을 수 없지만, 콘텐츠는 쉽게 읽을 수 있는 방식으로 나열됩니다. 따라서 항상 잘 구성된 HTML 문서에서 출발해야 합니다. 여러분의 스타일 시트를 제거했을 때, 컨텐츠가 여전히 잘 이해되나요?

+ +

한 가지 옵션은 아주 오래된 브라우저나 제한된 브라우저를 사용하는 사람들이 찾을 수 있는 대체 페이지로 사이트 외관을 단순화하는 것입니다. 문제가 되는 해당 브라우저를 사용해 소수의 사람들이 사이트를 방문하는 경우 최신 브라우저 사용자들과 비슷한 체험을 그들에게 제공하기 위해 시간을 쏟는 것이 상업적으로 맞지 않을 겁니다. 사이트의 접근성을 높이고 더 많은 사용자에게 서비스를 제공하는 일에 시간을 투자하는 것이 더 좋을 겁니다. 평범한 HTML 페이지와 온갖 장신구가 포함된 페이지 사이에는 중간 지점이 있으며 CSS는 실제로 이러한 대체 페이지를 매우 간단하게 생성해 줍니다.

+ +

CSS로 대체 페이지 생성하기

+ +

CSS 규격에는 두 가지 레이아웃 메서드가 동일한 항목에 적용될 때 브라우저가 수행하는 작업을 설명하는 정보가 포함되어 있습니다. 즉, 부동체 항목이 한편으로는 CSS grid 레이아웃을 사용하는 grid 항목인 경우 발생하는 상황에 대한 정의가 있음을 의미합니다. 이 정보가 브라우저가 이해하지 못하는 CSS를 무시한다는 지식과 결합되어, 이미 다루었던 레거시 기술을 사용하여 간단한 레이아웃을 생성할 수 있는 방법이 있습니다. 그런 다음 이를 최신 브라우저에서는 grid 레이아웃으로 덮어씁니다.

+ +

아래 예에서는 세 개의 <div> 부동체를 행으로 표시했습니다. CSS grid 레이아웃을 지원하지 않는 브라우저는 상자 행을 부동 레이아웃 (浮動 組版) 으로 간주합니다. grid 항목이 되는 부동 항목은 부동 동작을 상실합니다. 즉, .wrapper 클레스를 grid 컨테이너로 전환하면 부동 항목이 grid 항목이 됩니다. 브라우저가 grid 레이아웃을 지원하는 경우 grid 디스플레이를 표시합니다. 지원하지 않으면 display: grid 관련 속성은 무시되고 부동 레이아웃이 사용됩니다.

+ +
+
* {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;
+}
+
+ +
<div class="wrapper">
+  <div class="item">항목 하나</div>
+  <div class="item">항목 둘</div>
+  <div class="item">항목 셋</div>
+</div>
+
+ +

{{ EmbedLiveSample('예제1', '100%', '200') }}

+
+ +
+

참고: {{cssxref("clear")}} 속성도 마찬가지로 정리된 항목이 grid가 되자마자 효력을 상실합니다. 따라서 정리된 footer가 딸린 레이아웃을 가질 수 있으며, 이 레이아웃이 grid 레이아웃으로 전환됩니다.

+
+ +

대체 메서드

+ +

이 부동 예제와 비슷한 방식으로 사용할 수있는 여러 레이아웃 메서드가 있습니다. 당신이 생성해야하는 레이아웃 패턴에 가장 적합한 것을 선택할 수 있습니다.

+ +
+
Float(부동) 및 clear
+
위에서 볼 수 있듯이, 부동 또는 정리 속성이 레이아웃에 미치는 효과는 부동되거나 정리된 항목이 flex 또는 grid 항목이 되면 중단됩니다.
+
display: inline-block
+
이 방법을 사용하여 열 레이아웃을 생성할 수 있는 경우는 항목이 display: inline-block로 설정되었을 경우이지만, flex 또는 grid 항목이 된다면 인라인 블록 동작은 무시됩니다.
+
display: table
+
CSS 테이블을 생성하는 메서드는 해당 단원의 입문서가 대체품으로 활용될 수 있습니다. CSS 테이블 레이아웃으로 설정된 항목은 그들이 flex 또는 grid 항목이 될 경우 자기 동작을 상실하게 됩니다. 중요하게는 테이블 구조를 수정하기 위해 생성된 익명 상자는 생성되지 않습니다.
+
다단 레이아웃
+
특정 레이아웃의 경우 당신은 다단을 대체품로 사용할 수 있습니다. 여러분의 콘테이너가 column-* 속성에 속한 것으로 정의되었다면 grid 컨테이너가 될 것이고, 다단 동작은 발생하지 않습니다.
+
grid 대체품 역할인 Flexbox
+
Flexbox는 인터넷 익스플로러 10과 11이 지원하기 때문에 grid를 지원하는 브라우저가 훨씬 많이 있습니다. 다만 이 단원의 뒷부분에서 설명하고 있는 구형 브라우저에서 flex를 지원하기 위한 처리 방법에 대해서도 확인해보세요. flex 컨테이너를 grid 컨테이너로 만들면 자식에 적용된 모든 flex () 속성은 무시됩니다.
+
+ +

구형 브라우저에서 레이아웃 조정이 많이 필요한 경우 CSS를 이런 식으로 사용하면 괜찮은 경험을 할 수 있습니다. 오래되고 잘 지원되는 기술을 기반으로 간단한 레이아웃을 추가한 다음 최신 CSS를 사용하여 잠재 고객의 90% 이상이 볼 수있는 레이아웃을 만듭니다. 그러나 대체 코드에 새 브라우저가 해석할 내용이 포함되어야하는 경우가 있습니다. 이에 대한 좋은 예는 부동 항목에 백분율 너비를 추가하여 열을 마치 grid 디스플레이처럼 보이도록 컨테이너를 채울 수 있도록 (너비를) 늘리는 경우입니다.

+ +

부동 레이아웃에서 백분율은 컨테이너를 기준으로 계산됩니다. 33.333%는 컨테이너 너비의 3 분의 1입니다. 그러나 grid에서는 항목이 배치된 grid 영역을 기준으로 33.333%가 계산되므로 grid 레이아웃이 도입되면 실제로 원하는 크기의 3분의 1이 됩니다.

+ +
+
* {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%;
+}
+
+ +
<div class="wrapper">
+  <div class="item">항목 하나</div>
+  <div class="item">항목 둘</div>
+  <div class="item">항목 셋</div>
+</div>
+
+ +

{{ EmbedLiveSample('예제2', '100%', '200') }}

+
+ +

이 문제를 해결하려면 grid가 지원되는지 여부와 너비가 재정의되는지 여부를 감지할 수있는 방법이 필요합니다. CSS가 우리를 위해 마련한 해결책은 이렇습니다.

+ +

Feature queries

+ +

feature queries를 사용하면 브라우저가 특정 CSS 기능을 지원하는지 테스트 할 수 있습니다. 즉, 특정 기능을 지원하지 않는 브라우저 용 CSS를 작성한 다음 브라우저가 지원되는지 여부와 멋진 레이아웃을 제공하는지 확인하십시오.

+ +

위의 예제에 feature query를 추가하면 grid가 지원됨을 알고 있는 경우 이 feature query를 사용하여 항목 너비를 auto () 으로 다시 설정할 수 있습니다.

+ +
+
* {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;
+  }
+}
+
+ +
<div class="wrapper">
+  <div class="item">항목 하나</div>
+  <div class="item">항목 둘</div>
+  <div class="item">항목 셋</div>
+</div>
+
+ +

{{ EmbedLiveSample('예제3', '100%', '200') }}

+
+ +

feature query에 대한 지원은 최신 브라우저에서 매우 유용하지만 CSS grid를 지원하지 않는 브라우저는 feature query도 지원하지 않는다는 점에 유의해야합니다. 이는 위에서 설명한 접근 방식이 해당 브라우저에서 작동한다는 것을 의미합니다. 우리가 하는 작업은 feature query를 차치하고 먼저 이전 CSS를 작성하는 것입니다. grid를 지원하지 않고 feature query를 지원하지 않는 브라우저는 자기가 이해할 수 있는 레이아웃 정보를 이용하고 그밖에 다른 것들은 완전히 무시할 수 있습니다. feature query를 지원하는 브라우저는 CSS grid도 지원하므로 grid 코드 및 feature query 내부의 코드를 실행합니다.

+ +

feature query 규격에는 브라우저가 기능을 지원하지 않는지 테스트하는 기능도 포함되어 있습니다. 이는 브라우저가 feature query를 지원하는 경우에만 유용합니다. feature query를 지원하지 않는 브라우저가 갈수록 사라짐에 따라 미래에는 지원 부족 여부를 확인하는 방법은 작동하게 됩니다. 그러나 지금은 최상의 지원을 위해 이전 CSS를 사용한 다음 덮어 쓰는 방식을 사용하십시오.

+ +

Flexbox 예전 버전

+ +

이전 버전의 브라우저에서는 이전의 Flexbox 명세가 반복되는 것을 여러분은 발견할 수 있습니다. 글을 쓰는 시점에서 이것은 Flexbox에 -ms- 접두사를 사용하는 인터넷 익스플로러 10의 문제입니다. 이는 또한 오래된 문서와 자습서가 있음을 의미합니다. 이 유용한 안내서는 보고있는 내용을 확인하는 데 도움이되고 매우 오래된 브라우저에서 flex 지원이 필요한 경우에도 도움이 될 수 있습니다.

+ +

인터넷 익스플로러 10과 11 접두사 버전

+ +

CSS grid 규격은 인터넷 익스플로러 10에서 처음 나온 원형이었습니다. 즉, 인터넷 익스플로러 10 및 11에는 최신 grid 지원이 없지만, 이 사이트에 문서화된 최신 규격과는 다르나 매우 유용한 그리드 레이아웃 버전이 있습니다. 인터넷 익스플로러 10 및 11 구현은 -ms- 접두사를 사용해 해당 그리드를 마이크로소프트 브라우저에 사용할 수 있으며 이외의 브라우저에서는 무시됩니다. 에지 브라우저는 여전히 이전 구문을 이해하므로 현대 그리드 CSS에서 모든 항목을 안전하게 덮어씁니다.

+ +

그리드 레이아웃의 점진적 향상에 대한 안내서는 그리드의 인터넷 익스플로러 버전을 이해하는 데 도움이되며 이 단원 끝에는 별도의 유용한 링크를 포함하고 있습니다. 그러나 이전 인터넷 익스플로러 버전 사용자의 방문자 수가 매우 많지 않다면 모든 비지원 브라우저에서 작동하는 대체품을 만드는 것이 더 좋습니다.

+ +

이전 브라우저 여부 확인

+ +

Flexbox 및 그리드를 지원하는 대부분의 브라우저를 사용하면 구형 브라우저를 테스트하기가 상당히 어려울 수 있습니다. 한 가지 방법은 크로스 브라우저 테스트 단위에 설명 된대로 Sauce Labs과 같은 온라인 테스트 도구를 사용하는 것입니다.

+ +

또한 가상 컴퓨터를 다운로드하여 설치한 뒤 제약이 걸린 본인의 컴퓨터 환경에서 이전 버전의 브라우저를 실행할 수 있습니다. 이전 버전의 인터넷 익스플로러에 액세스하는 것이 특히 유용하며 이를 위해 마이크로소프트는 다양한 가상 컴퓨터를 무료로 다운로드 할 수 있도록 만들었습니다. 맥, 윈도우즈 및 리눅스 운영 체제에서 가상 컴퓨터를 사용할 수 있으므로 윈도우즈 컴퓨터를 사용하지 않더라도 이전 및 최신 윈도우즈 브라우저에서 테스트할 수있는 좋은 방법입니다.

+ +

요약정리

+ +

여러분은 이제 그리드 및 Flexbox와 같은 기술을 자신있게 사용하고, 이전 브라우저를 위한 대체품을 만들고, 향후 발생할 수 있는 새로운 기술을 활용할 수 있는 지식을 얻었습니다.

+ +

참조 항목

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

+ +

이번 단위에는

+ + diff --git "a/files/ko/learn/css/css_layout/\353\257\270\353\224\224\354\226\264_\354\277\274\353\246\254_\354\264\210\353\263\264\354\236\220_\354\225\210\353\202\264\354\204\234/index.html" "b/files/ko/learn/css/css_layout/\353\257\270\353\224\224\354\226\264_\354\277\274\353\246\254_\354\264\210\353\263\264\354\236\220_\354\225\210\353\202\264\354\204\234/index.html" deleted file mode 100644 index cf13a1421c..0000000000 --- "a/files/ko/learn/css/css_layout/\353\257\270\353\224\224\354\226\264_\354\277\274\353\246\254_\354\264\210\353\263\264\354\236\220_\354\225\210\353\202\264\354\204\234/index.html" +++ /dev/null @@ -1,424 +0,0 @@ ---- -title: 미디어 쿼리 초보자 안내서 -slug: Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서 -tags: - - 미디어 쿼리 - - 씨에스에스 - - 조판 - - 초보자 - - 학습 -translation_of: Learn/CSS/CSS_layout/Media_queries ---- -

{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

- -

CSS Media Query는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 씨에스에스를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 반응형 웹 디자인의 핵심 부분이다. 뷰포트의 크기에 따라 서로 다른 조판을 생성할 수 있기 때문이다. 그러나 예를들면 사용자는 마우스가 아닌 터치스크린을 사용하는지와 같이 실행 중인 사이트 환경에 대한 여러 내용들을 탐지하는 데도 사용할 수 있습니다. 이번 단원에서는 먼저 미디어 쿼리에 사용된 구문에 대해 배우고, 이어 해당 구문을 가공의 예제에서 사용하여 간단한 디자인이 어떻게 반응할 수 있는지 살펴보겠습니다.

- - - - - - - - - - - - -
선결 사항:에이치티엠엘의 기초인 (에이치티엠엘 입문서를 공부하세요), 그리고 씨에스에스의 작동 방식을 파악하기 위해 (씨에스에스 첫걸음과 씨에스에스 구성 블록를 공부하세요.)
목표:미디어 쿼리를 사용하는 방법과 그걸 이용해 반응형 디자인을 생성하기 위한 가장 대표적인 접근법 파악하기.
- -

미디어 쿼리 기본

- -

가장 간단한 미디어 쿼리 구문은 다음과 같습니다:

- -
@media media-type and (media-feature-rule) {
-  /* CSS rules go here */
-}
- -

미디어 쿼리 구문의 구성 요소:

- - - -

미디어 유형

- -

당신이 지정할 수 있는 미디어 유형

- - - -

다음 미디어 쿼리는 페이지가 인쇄된 경우에만 본문을 12pt로 설정합니다. 페이지가 브라우저에 로드될 때에는 적용되지 않습니다.

- -
@media print {
-    body {
-        font-size: 12pt;
-    }
-}
- -
-

참고: 수준 3 미디어 쿼리 규격에 정의된 여러 가지 다른 미디어 유형이 있습니다. 이들은 사장되었으니 피해야 합니다.

-
- -
-

참고: 미디어 유형은 선택사항입니다. 미디어 쿼리에 미디어 유형을 표시하지 않으면 미디어 쿼리는 기본값으로 모든 미디어 유형에 대한 것으로 해석됩니다.

-
- -

미디어 기능 규칙

- -

미디어 유형을 지정한 뒤에 규칙을 적용할 미디어 기능을 선정할 수 있습니다.

- -

너비와 높이

- -

반응형 디자인을(그리고 광범위한 브라우저 지원이 되도록) 만들기 위해 가장 자주 탐문하는 기능은 뷰포트 너비이며, min-width와 max-width, width 등의 미디어 기능을 활용하여 뷰포트가 특정 너비 이상 또는 이하인 경우 씨에스에스를 적용할 수 있습니다.

- -

이러한 특징들은 다른 화면 크기에 반응하는 조판을 생성하는 데 사용됩니다. 예를 들어 뷰포트가 정확히 600픽셀인 경우 본문 색상을 빨간색으로 변경하려면 다음과 같은 미디어 쿼리를 사용합니다.

- -
@media screen and (width: 600px) {
-    body {
-        color: red;
-    }
-}
- -

이 예제를 브라우저에서 열거나 소스를 보세요.

- -

width(및 height) 미디어 기능은 범위 지정에 사용될 수 있다. 따라서 min- or max- 접두사를 붙이게 되면 최소값인지 최대값인지 표시할 수 있다. 예를 들어 뷰포트가 400 픽셀보다 좁은 경우 색깔을 파란색으로 만들기 위해 max-width:를 사용할 수 있다.

- -
@media screen and (max-width: 400px) {
-    body {
-        color: blue;
-    }
-}
- -

이 예제를를 브라우저에서 열거나 소스를 보세요.

- -

실제로 최소값 또는 최대값을 사용하는 것이 반응형 디자인인 경우에 훨씬 유용하므로 width 또는 height 값을 사용하는 경우는 좀처럼 흔치앖습니다.

- -

미디어 쿼리 규격 수준 4 및 5에 소개된 최신 기능 중 일부가 제한적으로 브라우저 지원이 되지만, 당신이 테스트할 수 있는 다른 여러 미디어 기능이 있습니다. 각 기능은 브라우저 지원 정보와 함께 MDN에 문서화되어 있으니만큼 당신은 미디어 쿼리 사용: 미디어 기능에서 전체 목록을 찾을 수 있습니다.

- -

방향성

- -

잘 지원되는 미디어 기능 중 하나는 orientation로 세로 모드인지 가로 모드인지를 검사할 수 있도록 해줍니다. 장치가 가로 방향에 있는 경우 본문 텍스트 색상을 변경하려면 다음과 같은 미디어 쿼리를 사용합니다.

- -
@media (orientation: landscape) {
-    body {
-        color: rebeccapurple;
-    }
-}
- -

이 예제를 브라우저에서 열거나 소스를 보세요.

- -

표준 데스크톱 뷰에는 가로 방향이 주종을 이루고 있으며, 이 가로 방향에서 잘 작동하는 디자인은 휴대폰 또는 태블릿상에서 세로 모드로 볼 때 잘 작동하지 않을 수 있습니다. (가로/세로 모드의) 방향성 테스트는 여러분이 세로 모드의 장치에 최적화된 조판을 생성할 수 있게 도움을 줄 수 있습니다.

- -

포인팅 장치의 사용

- -

수준 4 규격의 일부로 hover 미디어 기능이 도입되었다. 이 기능은 사용자가 요소 위에 (마우스 커서를) 올릴 수 있는 능력을 가진 조건인지를 시험할 수 있다는 것을 의미합니다. 본질적으로 사람들이 어떤 종류의 포인팅 장치를 사용하는지를 말합니다. 터치 스크린 및 키보드 네비게이션은 요소 위에 식별자를 올릴 수 없습니다.

- -
@media (hover: hover) {
-    body {
-        color: rebeccapurple;
-    }
-}
- -

이 예제를 브라우저에서 열거나 소스를 보세요.

- -

사용자가 포인팅 장치를 사용할 수 없다고 파악했다면 기본적으로 대화형 기능을 표시할 수 있습니다. 포인팅 장치를 사용할 수 있는 사용자의 경우 링크에 마우스를 올리는 기능을 이용하도록 선택할 수 있습니다.

- -

마찬가지로 pointer 미디어 기능이 수준 4 규격에 포함되어 있다. 이것은 none과 fine coarse의 세 가지 값을 취할 수 있다. fine 포인터는 마우스나 트랙패드와 같은 것이다. 이 값으로 사용자가 작은 영역을 정확하게 공략할 수 있게 된다. coarse 포인터는 터치스크린상에 손가락을 말한다. none 값은 사용자가 포인팅 장치가 없다는 의미이다. 아마도 키보드 단독 또는 음성 명령으로 탐색하고 있다고 하겠다.

- -

pointer 사용이 당신에게 주는 잇점이 있다면 사용자가 화면상에서 상호 작용하는 유형에 반응하는 더 나은 인터페이스를 설계할 수 있다는 것입니다. 예를 들어, 사용자가 터치스크린으로 장치와 상호 작용하고 있다는 것을 알면 히트 영역을 더 크게 만들 수 있습니다.

- -

더 복잡한 미디어 쿼리

- -

당신은 가능한 모든 이종의 미디어 쿼리를 가지고 그것들을 결합하거나, 쿼리 목록을 만들고 싶을 수도 있다. 그 중 어느 경우가 (조건문과) 일치할 수 있습니다.

- -

"논리곱" 미디어 쿼리

- -

and를 사용해 미디어 기능을 결합할 수 있습니다. 이는 마치 앞에서 미디어 유형과 기능을 결합하기 위해 and를 사용했던 방식과 같습니다. 예를 들어, min-width와 orientation의 논리곱 조건을 테스트해보고 싶을 수도 있습니다. 여기서 에이치티엠엘 본문 텍스트가 파란색이 되는 유일한 경우는 뷰포트의 너비가 최소 400픽셀 이상이고 장치가 가로 모드인 경우에만 해당합니다.

- -
@media screen and (min-width: 400px) and (orientation: landscape) {
-    body {
-        color: blue;
-    }
-}
- -

이 예제를 브라우저에서 열거나 소스를 보세요.

- -

"논리합" 미디어 쿼리

- -

만약 여러분에게 쿼리는 잔뜩있는 데, 그 중 일도 일치할 수 없다면, 여러분은 해당 쿼리들을 콤마로 분리할 수 있습니다. 아래 예제에서 뷰포트가 최소 400픽셀 너비 또는 장치가 가로 보기 방향이라면 텍스트는 파란색이 될 것입니다. 둘 중 하나라도 사실이 아니라면 쿼리의 조건문은 일치합니다.

- -
@media screen and (min-width: 400px), screen and (orientation: landscape) {
-    body {
-        color: blue;
-    }
-}
- -

이 예제를 브라우저에서 열거나 소스를 보세요.

- -

"

- -

"부정 논리" 미디어 쿼리

- -

not 연산자를 사용하여 전체 미디어 쿼리를 부정할 수 있습니다. 이것은 미디어 쿼리의 전체 의미를 반대로 뒤집습니다. 따라서 다음 예에서 텍스트는 보기 방향이 세로일 경우에만 파란색이 됩니다.

- -
@media not all and (orientation: landscape) {
-    body {
-        color: blue;
-    }
-}
- -

이 예제를 브라우저에서 열거나 소스를 보세요.

- -

분기점을 선정하는 방법

- -

반응형 디자인 초창기에는 많은 디자이너가 매우 구체적인 화면 크기를 공략 대상으로 삼으려고 시도했습니다. 인기있는 휴대폰 및 태블릿 화면의 크기 목록이 공개되어 해당 기기의 뷰포트와 깔끔하게 일치하도록 디자인을 만들 수 있게 되었습니다.

- -

지금은 엄청나게 다양한 크기의 지나치게 너무 많은 장치가 있어 그런 방식은 현실성이 없습니다. 즉, 모든 디자인마다 (기기의) 특정 크기에 맞추는 공략보다 더 나은 접근 방법은 콘텐츠가 어떤 식으로든 깨지기 시작하는 해당 (기기의) 크기에 해당하는 디자인을 변경하는 것입니다. 어쩌면 선 길이가 너무 길어지거나 상자 형태의 사이드바가 찌그러져 읽기가 어려워질 수도 있습니다. 그 지경이 되면 미디어 쿼리를 사용하여 이용할 수 있는 공간 대비 개선된 형태의 사이트가 나오도록 디자인을 변경해야할 지점인 것입니다. 이는 사용 기기의 정확한 화면 크기가 무엇이든 상관없이 모든 범주에 맞는 전방위적인 접금법을 말합니다. 미디어 쿼리가 도입되는 지점을 breakpoints라고 합니다.

- -

Firefox DevTools의 반응형 디자인 모드는 이러한 분기점이 어느 부분이 될지 알아내는 데 매우 유용합니다. 동 툴은 미디어 쿼리를 추가하고 디자인을 조정하면서 콘텐츠가 개선되는 위치를 파악하기 위해 뷰포트를 쉽게 크거나 작게 만들 수 있습니다.

- -

파이어폭스 개발툴상에 조판 갈무리

- -

능동 학습: 모바일 우선 반응형 디자인

- -

대체로 반응형 디자인에 대한 두 가지 접근법을 취할 수 있습니다. 데스크톱 또는 가장 넓은 뷰로 시작한 뒤 뷰포트의 축소에 맞춰 요소를 주변으로 이동시키기 위한 분기점을 추가하거나 가장 작은 뷰로 시작한 뒤에 뷰포트의 크기 확대에 맞춰 조판을 추가할 수 있습니다. 이 두 번째 접근법은 mobile first 반응형 디자인으로 설명되며 종종 선호되는 최상의 접근법입니다.

- - - -

가장 작은 장치용 뷰는 일반 대열에서 나타나는 것처럼 종종 단순한 단일 열 형태의 콘텐츠가 됩니다. 즉 여러분은 작은 장치용이라 많은 조판을 할 필요가 없다는 말입니다. 다시말해 소스를 순서대로 잘 정렬하면 기본값으로 읽을 수 있는 조판이 됩니다.

- -

아래의 길라잡이는 매우 간단한 조판으로 동 접근 방식을 안내해 줄 것입니다. 사이트 제작 과정에서는 미디어 쿼리내에서 조정할 수 있는 것이 더 많을 수 있지만, 그 접근 방식은 정확히 동일하게 됩니다.

- -

길라잡이: 간단한 모바일 우선 조판

- -

우리는 조판에 포함된 다양한 요소에 배경색을 추가하기 위해 일정한 씨에스에스를 적용한 에이치티엠엘 문서를 가지고 출발합니다.

- -
* {
-    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;
-}
-
- -

우리는 우리가 조판에 변경을 가하지는 않았지만, 문서의 원본은 콘텐츠를 읽을 수 있는 방식으로 순서대로 정렬됩니다. 이것은 중요한 첫 번째 단계이며, 콘텐츠가 화면 읽기 프로그램(tts)에 의해 소리내여 읽혀질 경우 콘텐츠가 (읽을 문자열를) 이해될 수도록 보장합니다.

- -
<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>
-
- -

이 간단한 조판은 모바일에서도 잘 작동한다. 우리가 파이어폭스 데브툴 내부 반응형 디자인 모드에서 조판을 본다면, 우리는 그것이 사이트의 직관적인 모바일 뷰로 보더라도 꽤 잘 작동한다는 것을 알 수 있다.

- -

이 예제를 브라우저에서 열거나 소스를 보세요.

- -

당신이 우리의 진행 과정대로 이 예제를 실행해보려면 step1.html의 사본을 당신 컴퓨터에 만드세요.

- -

이 지점부터는 반응형 디자인 모드뷰가 점차 확대되어 라인 길이가 상당히 길어지는 모습을 확인할 정도가 되며, 수평선 형태의 탐색 메뉴가 표시될 공간을 갖추고 있습니다. 여기에서 우리는 첫 번째 미디어 쿼리를 추가할 것입니다. 사용자가 텍스트 크기를 늘리게 되면, 텍스트 크기가 작은 장비를 가진 사람과 비교해 비슷한 라인 길이지만 뷰포트가 확대되는 순간에 분기점이 발생한다는 의미입니다. 따라서 우리는 ems 단위를 사용할 것입니다.

- -

아래 코드를 step1.html 씨에스에스의 하단에 추가하세요.

- -
@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;
-    }
-}
-
- -

이 씨에스에스는 문서 안에 있는 문서 콘텐츠와 aside 요소 내부 관련 정보까지 2단 조판을 우리에게 제공합니다. 또한 우리는 가변상자를 사용하여 탐색 메뉴를 일렬로 배치했습니다.

- -

2단계 파일을 브라우저에서 열거나 소스를 보세요.

- -

사이드바가 새 단을 형성할 수 있는 충분한 공간이 있다고 느낄 때까지 너비를 계속 확장합니다. 미디어 쿼리안에서 주요 요소를 두 개의 열 형태의 격자로 만들 것입니다. 그런 다음 두 개의 사이드바가 서로 나란히 정렬되도록 문서의 {{cssxref("margin-bottom")}}을 제거해야하며, 바닥글 상단에 {{cssxref("border")}}(테두리)를 추가하게 됩니다. 일반적으로 이러한 미세 조정은 각 분기점 도달시 디자인을 좋게 보이게 하기 위해 여러분이 할 일입니다.

- -

다시 한 번 아래 코드를 step1.html 씨에스에스의 하단에 추가합니다.

- -
@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;
-    }
-}
-
- -

3단계 파일을 브라우저에서 열거나 소스를 보세요.

- -

최종 예제를 다른 너비로 보면 사용 가능한 너비에 따라 디자인이 반응하고 단일 열, 2열 또는 3열로 작동하는 방법을 볼 수 있습니다. 이것은 모바일 우선 반응형 디자인의 아주 간단한 예입니다.

- -

당신에게 정말 미디어 쿼리가 필요할까요?

- -

가변상자, 격자 및 다단 조판은 모두 굳이 미디어 쿼리를 필요로 하지 않고도 가변적이며 심지어 반응형 구성 요소를 만들 수 있는 방법을 제공합니다. 미디어 쿼리를 추가하지 않고도 이러한 조판 메서드를 사용해 원하는 것을 달성할 수 있는지 고려할 가치가 있습니다. 예를 들어, 여러분은 적어도 200 픽셀 너비의 카드 집합을 원할 수 있으며, 최대 200 픽셀이라면 주요 문서 부분에 맞아떨어질 수 있습니다. 이는 미디어 쿼리를 전혀 사용하지 않고 격자 조판만으로 얻을 수 있습니다.

- -

이것은 아래 용법으로 달성될 수 있습니다.

- -
<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>
- -
.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;
-}
- -

이 격자 예제를 브라우저에서 열거나 소스를 보세요.

- -

상기 예제를 브라우저에서 열면 화면을 넓히거나 좁히거나 하여 열 트랙 수가 변경되는 것을 확인할 수 있습니다. 이 방법의 좋은 점은 격자가 뷰포트 너비를 보는 게 아니라 해당 구성 요소에 맞춰 이용할 수 있는 너비를 살핀다는 것입니다. 당신에게 미디어 쿼리가 전혀 필요하지 않을수도! 있다는 제안으로 이번 절을 마감하는 것은 이상하게 보일 수도 있습니다. 그러나 실제로 미디어 쿼리로 강화된 현대적 조판 메서드를 잘 사용하면 최상의 결과를 얻을 수 있습니다.

- -

요약정리

- -

여러분은 이 단원에서 미디어 쿼리에 대해 배웠으며 모바일 우선 반응형 디자인을 실제로 생성하는 방법도 알아 보았습니다.

- -

우리가 만든 것을 시작점로 더 많은 미디어 쿼리 조건을 테스트할 수 있습니다. 예를 들어, 방문자가 pointer 미디어 기능을 사용하여 거친 포인터를 가지고 있는 것을 감지하면 탐색 메뉴의 크기를 변경할 수 있습니다.

- -

또한 서로 다른 구성 요소를 추가하고 미디어 쿼리를 추가한다든지 또는 가변상자나 격자와 같은 조판 방법을 사용하는 것이 구성 요소를 반응형으로 만드는 가장 적절한 방법인지 여부를 실험할 수 있습니다. 바른 방식 혹은 그른 방식 따윈 없습니다. 말하자면 어떤 것이 디자인과 콘텐츠에 가장 적합한지 실험하고 관찰해야 합니다.

- - - -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

- -

이번 단위에는

- - diff --git "a/files/ko/learn/css/css_layout/\353\260\230\354\235\221\355\230\225_\353\224\224\354\236\220\354\235\270/index.html" "b/files/ko/learn/css/css_layout/\353\260\230\354\235\221\355\230\225_\353\224\224\354\236\220\354\235\270/index.html" deleted file mode 100644 index b1311448c7..0000000000 --- "a/files/ko/learn/css/css_layout/\353\260\230\354\235\221\355\230\225_\353\224\224\354\236\220\354\235\270/index.html" +++ /dev/null @@ -1,333 +0,0 @@ ---- -title: 반응형 디자인 -slug: Learn/CSS/CSS_layout/반응형_디자인 -tags: - - 가변상장 - - 격자 - - 다단 - - 미디어 쿼리 - - 반응형 웹 디자인 - - 유동 격자 - - 이미지 - - 타이포크래피 -translation_of: Learn/CSS/CSS_layout/Responsive_Design ---- -
{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
- -

웹디자인 초창기에는 페이지를 구축할 때 매우 구체적인 화면 크기를 공략 대상으로 삼았습니다. 사용자가 웹디자이너가 예상한 것보다 크거나 작은 화면의 기기를 가지고 있다면 원하지 않는 스크롤 막대에서부터 지나치게 긴 길이의 라인, 사용 공간이 부족하게 되는 결과를 낳습니다. 다양한 화면 크기가 등장함에 따라 responsive web design 개념이 등장했습니다. 말하자면 서로 다른 화면 너비와 해상도 등에 맞게 웹 페이지가 조판과 모양을 변경할 수 있는 일련의 실례를 집대성한 것입니다. 이 아이디어가 우리가 멀티 디바이스 웹에 대한 설계 방식을 바꾸게 만든 장본인입니다. 이 문서에서 우리는 그 내용을 숙달하기 위해 당신이 알아야하는 주요 기술을 이해하도록 도울 것입니다.

- - - - - - - - - - - - -
선결 사항:에이치티엠엘의 기초인 (에이치티엠엘 입문서를 공부하세요), 그리고 씨에스에스의 작동 방식을 파악하기 위해 (씨에스에스 첫걸음과 씨에스에스 구성 블록를 공부하세요.)
목표:반응형 디자인의 역사와 핵심적인 계념 파악하기
- -

웹사이트 조판 역사

- -

역사의 어느 시점 여러분이 웹 사이트를 디자인할 때 두 가지 옵션이 있었습니다.

- - - -

이러한 두 가지 접근법은 사이트를 디자인하는 사람의 화면에서 가장 보기 좋은 웹 사이트로 귀결되는 경향이 있었습니다! 유동 사이트는 (아래에서 볼 수 있듯이) 디자이너의 화면보다 더 작은 화면에는 찌부러진 디자인이 나오고, 더 큰 화면에는 읽을 수 없을 정도로 길이가 긴 라인을 만들어냅니다.

- -
두 개의 열이 있는 조판이 모바일 크기 뷰포트에서 찌부러집니다. -
-
- -
-

주석: 여기 간단한 유동 조판을 보세요: 예제, 소스 코드. 예제를 보면 브라우저 창을 안팎으로 드래그하여 서로 다른 크기에 반응해 어떻게 보이는지 확인합니다.

-
- -

고정 폭 사이트는 (아래에서 보듯) 사이트 너비보다 작은 화면상에 수평 스크롤 막대가 생기는 위험이 있고 더 큰 화면상에서는 웹디자인 가장자리에 많은 흰색 공간이 생길 위험이 있습니다.

- -
이동 뷰포트에 수평 스크롤 막대가 있는 조판입니다. -
-
- -
-

주석: 여기 간단한 고정 너비 조판을 보세요: 예제, 소스 코드. 역시 브라우저 창 크기를 변경할 때 결과를 관찰하세요.

-
- -
-

주석: 상단 화면는 파이어폭스 개발툴 안에서 반응형 디자인 모드을 사용해 갈무리 한 것입니다.

-
- -

모바일 웹이 첫 번째 피처폰의 등장으로 현실화되기 시작하면서 모바일을 수용하고자 하는 회사들은 일반적으로 (종종 m.example.com 또는 example.mobi 이런 식의) 서로 다른 URL를 사용하여 그들의 사이트의 특별한 모바일 버전을 만들게 됩니다. 이는 해당 사이트의 두 가지 별도 버전을 개발하고 최신 상태로 유지해야 한다는 것을 의미했습니다.

- -

게다가, 이러한 모바일 사이트들을 경험해보면 종종 매우 축소된 기능을 제공합니다. 모바일 장치가 더욱 강력해지고 전체 웹 사이트를 표시할 수 있게 되면서, 그러한 기능 축소 모바일 버전 사이트에 갖힌 자신을 발견한 모바일 사용자들은 그들이 알고 있는 해당 사이트의 전체 기능이 있는 데스크탑 버전의 정보에 접근할 수 없었기에 좌절감을 안겨주었습니다.

- -

반응형 디자인의 전신 가변 조판

- -

유동 및 고정 너비의 웹사이트 구축 방법의 단점을 해결하기 위해 여러 가지 접근법이 개발되었습니다. 2004년 카메론 아담스는 다양한 화면 해상도에 적응할 수 있는 디자인을 만드는 방법을 설명하는 해상도 의존 조판이라는 제목의 게시물을 작성했습니다. 이 접근방식은 화면 해상도를 감지하고 정확한 씨에스에스를 로드하려면 자바스크립트가 필요했습니다.

- -

조이 미클리 길렌워터는 그녀의 작업을 통해 화면을 채우는 것과 완전히 고정된 화면 크기 사이를 만족시키는 평균값을 찾으려고 시도하는 등 가변적인 사이트를 만들 수 있는 다양한 방법을 기술하고 공식화하는 데 산파 역할을 했습니다.

- -

반응형 디자인

- -

반응형 디자인이라는 용어는 2010년 이단 마르코트가 만든 신조어로 세 가지 기술을 조합한 용법을 설명하고 있습니다.

- -
    -
  1. 첫 번째는 이미 길렌워터에 의해 탐구되고 있던 유동 격자라는 아이디어였으며, 마르코트의 유동 격자란(2009년 A List Apart에 발표) 문서에서 읽을 수 있다.
    2. -
  2. 두 번째 기술은 유동 이미지라는 개념이다. max-width 속성을 100%로 설정하는 매우 간단한 기술을 사용하면 이미지의 포함된 열이 이미지의 고유 크기보다 좁아지면 이미지가 더 작아지지만 더 커지지는 않습니다. 이것은 이미지가 대열이탈이 아니라 가변적인 크기의 열에 맞게 축소될 수 있지만 열이 이미지보다 넓어지면 확대되지 않고 픽셀화될 수 있습니다.
    3. -
  3. 세 번째 핵심 구성요소는 미디어 쿼리였습니다. 미디어 쿼리는카메론 아담스가 앞서 자바스크립의 사용을 탐구했던 조판 전환 유형을 씨에스에스만을 사용하여 실현합니다. 모든 화면 크기마다 하나씩 조판을 부여하기 보다는 조판을 변경할 수 있었다. 사이드바를 작은 화면에 맞게 재배치하거나 대체 탐색 매뉴를 표시할 수 있습니다.
    4. -
- -

반응형 웹 디자인은 별도의 기술이 아니다라는 것을 이해하는 것이 중요합니다. 즉, 웹 디자인에 대한 접근 방식이나 콘텐츠를 보는데 사용되는 장치에 반응할 수 있는 조판 생성에 사용되는 모범 사례 집합을 기술하는 데 사용되는 용어다. 마르코트의 원래 연구에서 이것은 (부동체를 사용하는) 가변 격자와 미디어 쿼리를 의미했지만, 그의 문서가 쓰여진지 거의 10년 만에 반응형으로 동작하는 것이 기본값이 되었다. 현대의 씨에스에스 조판 메서드는 본질적으로 반응형이며 반응형 사이트 설계를 쉽게하기 위해 웹 플랫폼에 새로운 요소들이 내장되어 있습니다.

- -

이 문서의 나머지 절에서는 반응형 사이트를 만들 때 사용할 수 있는 다양한 웹 플랫폼 기능에 대해 안내할 것입니다.

- -

미디어 쿼리

- -

반응형 디자인은 오롯이 미디어 쿼리 때문에 등장할 수 있었습니다. 미디어 쿼리 수준 3 규격은 2009년 권장사항 후보가 되었으며, 이는 브라우저에서 구현할 준비가 되어 있음을 의미합니다. 미디어 쿼리에서는 일련의 테스트를 실행할 수 있습니다(예로 사용자의 화면이 특정 너비나 특정 해성도보다 큰지 여하에 따라). 씨에스에스를 선택적으로 적용하여 사용자의 필요에 따라 페이지를 적절하게 스타일링합니다.

- -

예를 들어, 아래 미디어 쿼리는 현재 웹 페이지가 화면 미디어로 표시되고 있는지(따라서 인쇄된 문서가 아님) 확인하며 뷰포트는 적어도 800픽셀 너비인지 테스트합니다. .container 선택기는 씨에스에스는 이 두 가지가 사실인 경우에만 적용됩니다.

- -
@media screen and (min-width: 800px) {
-  .container {
-    margin: 1em 2em;
-  }
-} 
-
- -

스타일시트에 여러 미디어 쿼리를 추가하여 다양한 화면 크기에 맞는 최적의 전체 조판 또는 조판의 일부를 조정할 수 있습니다. 미디어 쿼리가 도입되고 조판이 변경된 지점을 breakpoints(분기점)라고 합니다.

- -

미디어 쿼리를 사용할 때 일반적인 접근법은 좁은 화면 장치(예: 휴대폰)에 대한 간단한 단일 열 조판을 만든 다음, 큰 화면인지 점검하고, 화면 폭이 충분하다는 것을 알게 될 때 다단 조판을 구현하는 것이다. 이를 모바일 우선 디자인이라고 표현하는 경우가 많다.

- -

미디어 쿼리에 대한 MDN 문서를 더 찾아보십시요.

- -

가변 격자

- -

반응형 사이트는 분기점 전후로 자체 조판을 변경할 뿐만 아니라 가변 격자상에도 동일하게 구축됩니다. 가변 격자는 현존하는 모든 장치 크기를 공략 대상으로 삼을 필요가 없으며, 그 대상에 대한 완벽한 픽셀 조판을 구축할 필요가 없다는 것을 의미합니다. 완벽한 픽셀 접근 방식은 존재하는 다양한 크기의 장치들이 엄청나게 많고, 적어도 데스크톱에서는 사람들이 항상 브라우저 창을 최대화하지는 않는다는 사실을 감안할 때 불가능할 것입니다.

- -

가변 격자를 사용하면 요소를 분기점에 추가하고, 콘텐츠가 불량으로 보이기 시작하는 지점에서 디자인을 변경할 수 있습니다. 예를 들어, 화면 크기가 커지면 라인 길이가 읽을 수 없게 길어지거나 상자가 좁아질 때 각 라인에 두 단어로 찌브러집니다.

- -

반응형 디자인 초창기에는 조판 기능을 수행하는 유일한 옵션은 부동체를 사용하는 것이 었습니다. 가변 부동 조판은 각 요소에 백분율 너비를 부여하고 조판 전체의 너비가 100%를 넘지 않도록 보장함으로써 달성되었습니다. 마르코트는 유동 격자와 관련 그의 원래 작품에서 픽셀을 사용하여 설계된 조판을 채택하여 백분율로 변환하는 공식을 상세히 설명했습니다.

- -
target / context = result 
-
- -

예를 들어, 목표 열 크기가 60픽셀이고, 거기에 들어갈 상황(혹은 컨테이너)가 이 960픽셀이면, 씨에스에스에서 사용할 수 있는 값을 얻기 위해 우선 60픽셀을 960픽셀로 나누고 거기에 소수점을 오른쪽으로 두칸 이동합니다.

- -
.col {
-  width: 6.25%; /* 60 / 960 = 0.0625 */
-} 
-
- -

이 접근 방식은 오늘날 웹상에 여러 곳에서 발견될 것이며, 여기 우리의 레거시 조판 메서드 문서의 조판 절에 문서화되어 있습니다. 여러분이 업무 중에 이 접근법을 사용하는 웹 사이트를 발견할 가능성이 높기 때문에 부동 기반의 가변 조판을 사용하여 현대적인 사이트를 구축하지는 않겠지만, 그 내용을 이해할 가치는 있습니다.

- -

다음 예제에서는 미디어 쿼리와 가변 격자를 사용하여 간단한 반응형 디자인를 보여줍니다. 좁은 화면상에서는 상자가 상대 요소 위해 겹겹이 쌓여지는 조판 형태로 표시됩니다.

- -
상자 무리가 상대 요소의 상단에 수직으로 겹겹이 쌓이는 모바일뷰 조판입니다. -

On wider screens they move to two columns:

- -
-
- -
2단 조판이 적용된 데스크탑 뷰입니다. -
-
- -
-

주석: 여러분은 여기서 실례를 찾아볼 수 있으며, 이 예제에 대한 소스 코드를 깃허브에서 찾을 수 있습니다.

-
- -

현대 조판 기술

- -

다단 조판과 가변상자와 격자와 같은 현대 조판 메서드는 기본값으로 응답형입니다. 그것들은 모두 여러분이 가변 격자를 만들려 한다고 가정하고 그렇게 동작하도록 편리한 방법을 제공합니다.

- -

다단

- -

이러한 조판 메서드 중 가장 오래된 것은 다단입니다. 여러분이 column-count를 지정하면, 이는 여러분이 콘텐츠를 나누고자 하는 단의 숫자를 나타냅니다. 그런 다음 브라우저는 다단의 크기를 화면 크기에 따라 변경되는 크기로 계산합니다.

- -
.container {
-  column-count: 3;
-} 
-
- -

column-width을 지정하는 대신 minimum 너비를 지정하는 것입니다. 브라우저는 컨테이너에 안착할 수 있는 만큼으로 지정한 해당 너비를 가진 열을 최대한 많이 생성하고 난 뒤에 다음 모든 열 사이에서 나머지 공간을 공유합니다. 따라서 열의 수는 공간이 얼마나 되는지에 따라 달라집니다.

- -
.container {
-  column-width: 10em;
-} 
-
- -

가변상자

- -

가변상자에서 가변 항목은 초깃값 동작으로 컨테이너의 공간에 따라 항목 사이의 공간을 축소하고 분배합니다. flex-grow 및 flex-shrink 값을 변경하면 해당 항목에 주어진 주변 공간이 남거나 모질라게 될 경우 원하는 동작 방식을 표기할 수 있습니다.

- -

아래 예제에서 가변 항목은 가변 컨테이너 안에서 각각 동일한 양의 공간을 차지하며, 가변상자: 가변 항목의 가변 크기 조정에서 설명했듯이 flex: 1식의 약칭을 사용할 수 있습니다.

- -
.container {
-  display: flex;
-}
-
-.item {
-  flex: 1;
-} 
-
- -
-

참고: 예제로써 상기된 간단한 반응형 조판을 재구축했는데 이번에는 가변상자를 사용했습니다. 여러분은 더 이상 낮설은 백분율 값을 사용하여 열의 크기를 계산할 필요가 없는 방법을 보게 됩니다: 예제, 소스 코드.

-
- -

씨에스에스 격자

- -

씨에스에스 격자 조판에서 fr 단위는 격자 트랙 전역에 걸쳐 이용할 수 있는 공간을 분배할 수 있습니다. 다음 예에서는 1fr 크기의 트랙 3개가 있는 격자 컨테이너를 만듭니다. 이렇게 하면 3개의 열 트랙이 생성되며, 각 트랙은 컨테이너에 있는 사용 가능한 공간\의 한 부분을 차지합니다. 여러분은 fr 단위를 포함한 가변 격자라는 격자 조판 학습 주제에서 격자를 생성하는 이같은 접근 방식에 대해 자세히 알 수 있습니다.

- -
.container {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-} 
-
- -
-

참고: 격자 조판 버전은 .wrapper 예제상에 열을 정의할 수 있으므로 더 간단합니다: 소스 코드.

-
- -

반응형 이미지

- -

반응 이미지에 대한 가장 간단한 접근법은 반응형 디자인에 관한 마르코트의 초창기 문서에서 설명한 바와 같습니다. 기본적으로 필요한 최대 크기의 이미지를 촬영하여 그것을 축소할 수 있습니다. 이것은 오늘날에도 사용되는 접근법이며 대부분의 스타일 시트에서 다음과 같은 씨에스에스를 어디선가는 발견할 수 있습니다.

- -
img {
-  max-width: 100%:
-} 
-
- -

이 접근법에는 명백한 단점이 있습니다. 해당 이미지는 고유 크기보다 훨씬 작게 표시될 수 있어 대역폭 낭비입니다. 다시말해 모바일 사용자는 브라우저 창에서 실제로 보는 것의 몇 배 크기의 이미지를 다운로드하게 되니 낭비입니다. 또한, 데스크톱과 같은 이미지 가로 세로 비율을 모바일에서 원하지 않을 수도 있습니다. 예를 들어, 모바일의 경우 정사각형 이미지가 좋을 수 있지만 데스크톱상에는 같은 이미지를 가로 보기처럼 장면을 보여줍니다. 또는 모바일 상의 이미지의 크기가 작다는 것을 이해하면서도 서로 다른 이미지를 모두 보여주고 싶을 경우가 있습니다. 말하자면 작은 화면 크기에서 더 쉽게 해석될 수 있는 이미지를 말합니다. 이런 것들은 단순히 이미지를 축소해서는 달성할 수 없습니다.

- -

반응형 이미지는 <picture> 요소와 <img>, srcset과 sizes 속성은 이러한 문제를 모두 해결합니다. 여러분은 "힌트"(이미지에 가장 적합한 화면 크기와 해상도를 설명하는 메타 데이터)와 함께 여러 크기를 제공할 수 있으며, 브라우저는 각 장치에 가장 적합한 이미지를 선택하며, 사용자가 사용하고 있는 장치에 적합한 이미지 크기를 다운로드할 수 있도록 담보합니다.

- -

또한 다른 화면 크기에서 사용되는 이미지를 art direct할 수 있으므로 서로 다른 화면 크기에 대해 서로 다른 자르기 또는 완전히 다른 이미지를 제공할 수 있습니다.

- -

이곳 MDN 사이트의 에이치티엠엘 학습 섹션에서 반응형 이미지에 대한 자세한 안내서를 찾을 수 있습니다.

- -

반응형 타이포그래피

- -

반응형 타이포그래피 개념은 이전 작업에서 다루지 않은 반응형 디자인의 요소입니다. 본질적으로, 이것은 화면 부동산의 크기가 더 작아지거나 더 커지거나하는 것을 반영하기 위해 미디어 쿼리 구문 안에서 폰트 크기를 변경하는 것을 말합니다.

- -

이 예제에서 우리는 수준 1 머리글을 4rem로 설정하려고 합니다. 즉, 기본 글꼴 크기의 4배입니다. 정말 큰 제목이네요! 우리는 더 큰 화면 크기상에서만 이 코끼리만한 머리글을 원하기 때문에, 우리는 먼저 더 작은 머리글을 만들고, 미디어 쿼리를 사용해 조건에 맞으면 그것을 더 큰 크기로 덮어쓰기 하면됩니다. 여기서 조건은 사용자가 적어도 1200px의 화면 크기의 기기를 가진 경우가 해당됩니다.

- -
html {
-  font-size: 1em;
-}
-
-h1 {
-  font-size: 2rem;
-}
-
-@media (min-width: 1200px) {
-  h1 {
-    font-size: 4rem;
-  }
-} 
-
- -

상기한 반응형 격자 예제를 편집했고, 거기에 더해 이미 제시된 메서드를 사용하는 응답형 유형을 포함시켰습니다. 조판이 2개의 열 버전으로 이동함에 따라 머리글 크기가 어떻게 전환하는지 볼 수 있습니다.

- -

모바일에서는 머리글이 더 작다:

- -
머리글 크기가 작은 스택 모양의 조판입니다. -

On desktop however we see the larger heading size:

- -
-
- -
큰 머리글이 딸린 두개의 열 조판입니다. -
-
- -
-

참고: 이 예제의 실제 구현 장면: 예제, 소스 코드.

-
- -

타이포그래피에 대한 이러한 접근 방식이 보여주듯이, 미디어 쿼리를 제한하여 페이지 조판만 변경할 필요는 없습니다. 그들 접근법을 사용하여 어떤 요소라도 조정해서 대체 화면 크기에 맞는 더 유용하고 매력적인 요소를 만들 수 있다.

- -

반응형 타이포그래피에 대한 뷰포트 단위 사용하기

- -

흥미로운 접근 방식은 반응형 타이포그래피를 사용하기 위해 뷰포트 단위 vw를 사용할 수 있다는 점이다. 1vw는 뷰포트 너비의 1%와 동일하며, vw를 사용하여 글꼴 크기를 설정하면 항상 뷰포트 크기와 관련이 있다는 것을 의미한다.

- -
h1 {
-  font-size: 6vw;
-}
- -

위의 작업 수행에서의 문제는 사용자가 vw 단위를 사용하여 텍스트 집합을 확대/축소하는 기능을 상실하는 데 있다. 따라서 여러분은 뷰포트 단위만으로 텍스트를 설정해서는 안 된다.

- -

해결책이 하나 있다. calc()를 사용하는 것이다. 즉, em와 같은 고정된 크기를 사용하여 속성값 집합에 vw 단위를 추가하면 텍스트는 여전히 확대/축소할 수 있다. 본질적으로 vw 단위는 확대/축소 값에 더해 추가된다.

- -
h1 {
-  font-size: calc(1.5rem + 3vw);
-}
- -

즉, 머리글에 대한 폰트 크기를 한 번만 지정하면 된다. 크기를 모바일용으로 따로 설정할 게 아니라 미디어 쿼리 내에서 크기를 재정의한다는 말이다. 그러면 뷰포트의 크기가 커질수록 글꼴은 점차 커진다.

- -
-

이에 대한 예제의 실현: 예제, 소스 코드.

-
- -

뷰포트 메타 테그

- -

응답형 페이지의 에이치티엠엘 소스를 보면 일반적으로 문서의 <head>에서 다음과 같은 {{htmlelement("meta")}} 태그를 볼 수 있다.

- -
<meta name="viewport" content="width=device-width,initial-scale=1">
-
- -

이 메타 태그는 뷰포트의 너비를 장치의 너비로 설정하여 문서를 의도한 크기의 100%로 확장해야 한다고 모바일 브라우저에게 알려줍니다. 이로써 여러분이 의도한 대로 모바일에 최적화된 크기로 문서를 표시합니다.

- -

왜 이런 것이 필요할까요? 모바일 브라우저는 뷰포트 너비에 대해 거짓말을 하는 경향이 있기 때문이다.

- -

이 메타 태그는 원래 iPhone이 출시되고 사람들이 작은 전화 화면에서 웹 사이트를 보기 시작했을 때 대부분의 사이트가 모바일 최적화되지 않았기 때문에 존재합니다. 따라서 모바일 브라우저는 뷰포트 너비를 960픽셀로 설정하게 됩니다. 해당 너비로 페이지를 렌더링하고, 그 결과를 데스크톱 조판의 확대 버전으로 표시합니다. 다른 모바일 브라우저(예를 들어 구글 안드로이드)도 똑같은 일을 합니다. 사용자들은 웹사이트를 확대하고 이리저리 끌어 옮기며(panning) 그들이 관심을 갖는 부분을 볼 수 있었지만, 모양이 형편 없었습니다. 만약 여러분이 반응형 디자인이 아닌 사이트를 우연히 발견하게 된다면, 여러분은 오늘날에도 이런 걸 보게 될 것입니다.

- -

문제는 분기점과 미디어 쿼리를 포함하는 응답형 디자인이 모바일 브라우저에서 의도한 대로 작동하지 않는다는 점에 있습니다. 여러분이 480px 뷰포트 너비나 그 이하에서 시작하는 좁은 화면 조판을 갖고 있고 뷰포트가 960px로 설정되어 있다면 좁은 화면 조판을 모바일에서 절대 볼 수 없게 된다. width=device-width를 설정하면 애플의 기본값인 width=960px를 장치의 실재 너비로 재지정하므로 당신의 미디어 쿼리가 의도한 대로 작동합니다.

- -

따라서 에이치티엠엘 문서의 헤더 부분에 상기 에이치티엠엘 라인을 항상 포함해야 합니다.

- -

뷰포트 메타 태그와 함께 사용할 수 있는 다른 설정이 있지만 일반적으로 상기 에이치티엠엘 라인이면 여러분이 사용하고자 하는 내용에 해당합니다.

- - - -

여러분은 minimum-scale와 maximum-scale 사용을 피해야하며, 특히 user-scalable를 no로 설정하는 것도 피해야 합니다. 사용자는 필요한 만큼 확대하거나 축소할 수 있어야 합니다.이를 방지하면 접근성 문제가 발생합니다.

- -
-

참고: 뷰포트 메타 태그를 대체하기 위해 고안된 씨에스에스 @ 규칙이 있습니다. @viewport 그러나 브라우저 지원이 매우 형편없습니다. 그것은 인터넷 익스플로러와 에지에서 구현되었지만, 일단 크롬 기반 에지가 출시되면 더 이상 에지 브라우저의 일부가 되지 않게 됩니다.

-
- -

요약정리

- -

반응형 디자인은 디자인이 보여지는 당해 환경에서 반응하는 사이트 및 애플리케이션 디자인을 말합니다. 그것은 많은 씨에스에스와 에이치티엠엘 기능과 기술을 망라하며 이제 기본값으로 우리가 웹사이트를 구축할 때 필수적인 방법입니다. 여러분이 휴대폰으로 방문하는 사이트를 생각해보세요. 데스크톱 버전이 축소된 사이트, 또는 사물을 찾기 위해 옆으로 스크롤해야 하는 사이트를 우연히 발견한다는 것은 상당히 이례적인 일일 것입니다. 그렇게 된 것은 웹이 반응형으로 디자인하는 접근방식으로 옮겨갔기 때문입니다.

- -

또한 이번 단원에서 배운 조판 메서드의 도움으로 반응형 디자인을 달성하기가 훨씬 쉬워졌습니다. 여러분이 당대 웹 개발에 신출내기라면, 반응형 디자인 초창기보다 훨씬 많은 도구가 마련되어 있으니 맘껏 이용하십시요. 따라서 당신이 참조하고 있는 어떤 자료의 연혁을 확인할 가치가 있습니다. 역사적 기록 문서로서 여전히 유용하지만, 사이트 방문자가 이용하는 장치가 무엇이건 관계없이 우아하고 유용한 디자인을 훨씬 쉽게 생성하려면 씨에스에스와 에이치티엠엘의 현대적 용법이 정답입니다.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}

- -

이번 단위에는

- - diff --git "a/files/ko/learn/css/css_layout/\354\234\204\354\271\230\354\236\241\352\270\260/index.html" "b/files/ko/learn/css/css_layout/\354\234\204\354\271\230\354\236\241\352\270\260/index.html" deleted file mode 100644 index 76a491ae0e..0000000000 --- "a/files/ko/learn/css/css_layout/\354\234\204\354\271\230\354\236\241\352\270\260/index.html" +++ /dev/null @@ -1,585 +0,0 @@ ---- -title: 위치잡기 -slug: Learn/CSS/CSS_layout/위치잡기 -tags: - - 고정 - - 글 - - 상대 - - 씨에스에스 - - 안내서 - - 위치잡기 - - 절대 - - 조판 - - 초보자 - - 코딩스크립팅 -translation_of: Learn/CSS/CSS_layout/Positioning ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}
- -

당신이 일반 문서 조판 대열에서 요소를 끄집어 내어, 그것이 다르게 행동하게 만들수 있게 해주는 것이 위치잡기다. 예를 들어 상대 요소 위에 놓거나 브라우저 뷰 포트 내부의 동일한 위치를 항상 유지하게 해준다. 이 문서는 서로 다른 {{cssxref("position")}} 값을 설명하고, 그 걸 사용하는 방법에 대해서도 설명한다.

- - - - - - - - - - - - -
선결 사항:에이치티엠엘의 기초 (에이치티엠엘 입문서)와 씨에스에스 작동 방식에 대한 개념(씨에스에스 입문서를 공부하세요.)
목표:씨에스에스 위치잡기가 작동하는 방법 배우기
- -

가능하면 우리 깃허브 저장소에 있는 0_basic-flow.html 파일의 사본을 가지고 당신의 컴퓨터상에서 해당 연습을 함께 따라해보시길 바랍니다. (여기 소스 코드)가 있으니 그걸 착수 파일로 이용하십시요.

- -

위치잡기 소개

- -

크게봐서 위치잡기의 개념은 위에서 설명했듯 기본 문서 대열에 따른 동작을 무시하고 흥미로운 효과를 낼 수 있도록 하는 것입니다. 조판 내부의 일부 상자의 위치를 기본 조판 대열 위치에서 약간 변경한다거나, 약간 기묘하거나, 편치않은 느낌을 주고 싶다면 어떨까? 위치잡기가 바로 당신의 도구입니다. 또는 페이지의 다른 부분의 상위에 부동(浮動)하는 사용자 인터페이스 요소를 만들고 싶다라거나 아울러 페이지가 스크롤된 정도와 상관없이 항상 브라우저 창 내부의 동일한 위치에 놓이게 하고 싶다면? 위치잡기는 그런 조판 작업을 가능하게 합니다.

- -

에이치티엠엘 요소에 적용될 수 있는 여러 가지 유형의 위치잡기가 존재합니다. 어떤 요소상에 특정 유형의 위치잡기가 활성화되도록 하기 위해 {{cssxref("position")}} 속성을 사용합니다.

- -

정적 위치잡기

- -

정적 위치잡기는 모든 요소에 주어지는 기본값입니다. 즉, "요소를 문서 조판 대열상에 일반 위치에 배치하라는 것으로 여기서 특별한 것은 없습니다."

- -

이를 입증한다거나, 이어질 섹션에서 다룰 예제를 설정하려면 먼저 에이치티엠엘상에 두 번째 {{htmlelement("p")}} 요소에 positioned라는 클래스를 추가하십시오:

- -
<p class="positioned"> ... </p>
- -

이제 다음과 같은 규칙을 당신의 씨에스에스 하단에 추가하십시요:

- -
.positioned {
-  position: static;
-  background: yellow;
-}
- -

이제 저장하고 새로고침하면 두 번째 단락의 배경 색깔이 업데이트된 것을 제외하고 다른 차이가 없다는 것이 확인될 것입니다. 아무 문제없습니다. 앞에서 얘기했듯이 정적 위치잡기는 기본값으로 주어진 동작입니다!

- -
-

주석: 이 시점에 예제의 실제 구현 장면을 1_static-positioning.html에서 볼 수 있습니다.(소스 코드는 여기서 보세요).

-
- -

상대 위치잡기

- -

상대 위치잡기는 우리가 살펴 첫 번째 위치 유형입니다. 이것은 정적 위치 결정과 매우 유사합니다. 단, 일단 정상 조판 대열상에 위치잡기할 요소가 자리를 잡고나면 페이지의 다른 요소와 중첩되는 것을 포함하여 최종 위치를 수정할 수 있습니다. 당신의 코드에 있는 position 선언을 업데이트하십시요.

- -
position: relative;
- -

현 시점에서 저장하고 새로 고침하면 전혀 변경된 결과가 확인되지 않습니다. 그럼 요소의 위치를 어떻게 수정할까요? 다음 절에서 설명하겠지만, {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}을 사용해야 합니다.

- -

상하 좌우 위치잡기 소개

- -

{{cssxref("top")}}, {{cssxref("bottom")}}와 {{cssxref("left")}}, and {{cssxref("right")}}는 {{cssxref("position")}}과 나란히 사용되어 기준 위치에 비례해 정확한 위치잡기를 지정한다. 이를 시험하려면 다음 선언문을 씨에스에스 .positioned 규칙에 추가하십시오:

- -
top: 30px;
-left: 30px;
- -
-

참고: 이러한 속성의 값은 당신이 논리적으로 예상할 수 있는 모든 단위를 취할 수 있습니다. 예로 pixels, mm, rems, % 등이 해당한다.

-
- -

이제 저장하고 새로고침하면 다음과 같은 내용의 결과를 얻을 것입니다:

- - - -

{{ EmbedLiveSample('상하_좌우_위치잡기_소개', '100%', 500) }}

- -

근사하죠, 그쵸? 좋습니다. 그러나 이것은 아마도 여러분이 기대했던 것이 아니었을 것입니다. 우리가 좌측 상단을 지정했는데 왜 우측 하단으로 이동했을까요? 처음에는 비논리적으로 들릴지 모르지만, 이것은 상대적 위치잡기가 작용하는 방식일 뿐입니다. 즉, 위치가 지정된 상자의 특정 측면을 밀어서 반대 방향으로 움직이는 보이지 않는 힘이 있다고 생각할 필요가 있습니다. 예를 들어, top: 30px;를 지정하면 힘은 상자 상단을 밀어서 30px 아래로 이동하게 만듭니다.

- -
-

참고: 이 시점에 예제의 실제 구현 장면을 2_relative-positioning.html에서 확인할 수 있습니다(소스 코드 보기).

-
- -

절대 위치잡기

- -

절대적인 위치 결정은 매우 다른 결과를 가져옵니다. 당신의 소스 코드에 다음과 같이 위치 선언을 변경해 보겠습니다.

- -
position: absolute;
- -

지금 저장한 다음에 새로고침하면 다음과 같은 것이 확인되어야 합니다:

- - - -

{{ EmbedLiveSample('절대_위치잡기', '100%', 420) }}

- -

우선, 위치잡기 요소가 원래 있었어야 했던 문서 대열 속 위치에 있던 간격은 더 이상 존재하지 않는다는 점에 유의하십시오. 즉 간격이 더 이상 존재하지 않는 것처럼 첫 번째와 세 번째 요소가 붙어 버렸습니다! 어떤 면에서는, 이것은 사실입니다. 절대적으로 위치한 요소는 더 이상 일반 문서 조판 대열에서 존재하지 않습니다. 대신 다른 모든 것과는 별개로 독자적인 레이어상에 놓여 있습니다. 이것은 매우 유용합니다. 즉, 페이지의 다른 요소의 위치와 간섭하지 않는 격리된 사용자 인터페이스 기능을 만들 수 있습니다. 예를 들어 팝업 정보 상자 및 제어 메뉴, 롤오버 패널, 페이지 어느 곳에서나 끌어서 놓기할 수 있는 유저 인터페이스 페이지 등등…

- -

둘째, 요소의 위치가 변경되었음을 알아차립시다. 이는 {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}가 절대 위치잡기에 해당해 다른 방식으로 작동하기 때문입니다. 요소가 진입해야 하는 방향을 지정하기 보다는 요소가 (부모) 콘테이너 요소의 상하좌우 측면으로부터 떨어지는 간격을 지정되어야 합니다. 따라서 이 경우, 내 말은 절대 위치잡기 요소는 "콘테이너 요소"의 상단에서 30px, 왼쪽에서 30px에 위치에 놓여야 한다는 말입니다.

- -
-

참고: 당신이 필요하다면 요소의 크기를 재지정하기 위해 {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}를 사용할 수 있습니다. 당신이 위치잡기한 요소에 top: 0; bottom: 0; left: 0; right: 0;과 margin: 0;를 지정한 뒤 어떻게 되냐 보십시요! 해보고 다시 원상태로 돌리십시요...

-
- -
-

주석: 그렇습니다. 여백이 위치잡기한 요소에 여전히 영향을 미칩니다. 그러나 마진 축소 영향은 업습니다.

-
- -
-

참고: 당신은 3_absolute-positioning.html에서 예제를 확인할 수 있습니다(소스 코드를 보세요).

-
- -

위치잡기 상황

- -

어떤 요소가 절대 위치잡기의 기준이 되는 "콘테이너 요소"입니까? 이것은 위치잡기 요소의 조상에 지정된 위치 속성의 여하에 따라 많이 달라집니다. (See 콘테이너 블록 식별하기).

- -

조상 요소가 명시적으로 정의된 위치 속성을 가지고 있지 않으면 초깃값으로 모든 조상 요소에 정적 위치가 부여됩니다. 그에 따른 결과, 절대적 위치잡기한 요소는 initial containing block에 포함되게 됩니다. 초기 콘테이너 블록은 브라우저 뷰포트 크기의 용적을 가지며, 자신도 {{htmlelement("html")}} 요소를 포함하는 블록입니다. 간단히 말해서, 절대적 위치잡기한 요소는 {{htmlelement("html")}} 요소의 외부에 포함되어 초기 뷰포트 기준과 비례한 곳에 위치하게 됩니다.

- -

위치잡기한 요소는 에이치티엠엘 소스의 {{htmlelement("body")}} 안에 중첩되지만 최종 조판에서는 페이지의 가장자리 상단과 왼쪽에서 30px 떨어져 있습니다. 우리는 요소의 절대적 위치잡기에서 어떤 요소에 비례해 위치잡기할지 기준이 되는 positioning context(위치잡기 상황)을 변경할 수 있습니다. 이것은 조상 요소 중 하나를 기준으로 위치잡기 설정이 이뤄집니다. 다시말해 요소의 내부에 중첩된 요소 중 하나가 기준이 됩니다(내부에 중첩되지 않은 요소를 기준삼아 비례적으로 위치시킬 수 없습니다). 이를 증명하기 위해 다음과 같은 선언을 body 규칙에 추가하십시요:

- -
position: relative;
- -

이로써 다음과 같은 결과가 나와야 합니다.

- - - -

{{ EmbedLiveSample('위치잡기_상황', '100%', 420) }}

- -

위치잡기한 요소는 이제 기준이 되는 {{htmlelement("body")}} 요소와 비례한 위치에 놓이게 된다.

- -
-

참고: 당신은 이 시점에 예제의 실제 구현 장면을 4_positioning-context.html에서 볼 수 있습니다(소스 코드 보기).

-
- -

z-인덱스 소개

- -

이 모든 절대적 위치잡기는 제법 재미나지만, 아직 고려하지 않은 또 다른 것이 있습니다. 요소가 겹치기 시작하면 어떤 요소가 다른 요소 위에 나타나는지 결정하는 기준은 무엇입니까? 지금까지 우리가 본 예제에서, 우리는 위치잡기 상황 속에 단 하나의 위치잡기할 요소만 주어졌습니다. 그리고 그것은 상위에 나타납니다. 왜냐면 위치잡기 요소가 비 위치잡기 요소보다 우위를 점하기 때문입니다. 하나 이상의 요소가 있을 때는 어떨까요?

- -

다음을 씨에스에스에 추가해 첫 단락도 절대적 위치잡기 대상으로 만들어 봅시다.

- -
p:nth-of-type(1) {
-  position: absolute;
-  background: lime;
-  top: 10px;
-  right: 30px;
-}
- -

이 시점에서 당신이 보게될 것은 첫 번째 단락이 녹색으로 칠해지고, 문서 대열을 벗어나 원래 위치에서 약간 위에 자리를 잡습니다. 또한, 두 개의 단락이 겹치는 원래의 .positioned 클래스가 지정된 단락 아래에 겹겹이 포개집니다. 이렇게 되는 까닭은 .positioned 클래스로 지정된 단락이 소스 순서상에 두 번째 단락이고 소스 순서상에 뒤에 있는 위치잡기한 요소가 소스 순서상 앞서는 위치잡기한 요소보다 우위를 점하기 때문입니다.

- -

스택 순서를 변경할 수 있습니까? 네, {{cssxref("z-index")}} 속성을 사용하면 가능합니다. z-인덱스는 z축을 가리킵니다. 당신은 앞서 배경 이미지와 그림자 오프셋을 떨어뜨리는 것과 같은 사물의 위치를 파악하는 방법을 찾는 과정에서 웹 페이지를 수평(x축)과 수직(y축) 좌표로 논의한 학습 과정을 기억하실 겁니다. (0,0)은 페이지(또는 요소)의 상단 왼쪽에 있으며, x-축 및 y-축은 페이지의 오른쪽 및 아래쪽으로 진행합니다(가로쓰기 언어의 경우를 말합니다).

- -

웹 페이지에는 z축이 있습니다. 스크린 표면으로부터 진행하는 가상 라인, 즉 사용자 얼굴 쪽으로 향하는(당신이 화면 위에 놓고 싶은 것을 망론한다). {{cssxref("z-index")}} 값은 위치잡기한 요소가 해당 축상에 놓일 경우에 영향을 미칩니다. 양수 값은 스택 상단으로 이동하고 음수 값은 스택 아래로 이동합니다(역주: 상단으로 겹겹이 쌓이거나 하단으로 겹겹이 쌓여진다) 기본값으로 위치잡기한 요소는 모두 z-index가 auto 값을 가지며, 이는 사실상 0입니다.

- -

스택 순서를 변경하려면 다음 선언을 p:nth-of-type(1) rule: 규칙에 추가하십시오.

- -
z-index: 1;
- -

이제 녹색 단락이 상단에 놓여진 완성된 예가 보여야 합니다.

- - - -

{{ EmbedLiveSample('z-인덱스_소개', '100%', 400) }}

- -

z-인덱스는 단위가 없는 인덱스 값만 허용한다는 점에 유의하자; 하나의 요소가 Z축 위로 23픽셀이 되도록 지정할 수 없습니다. 그런 식으론 작동하지 않습니다. 높은 값의 요소는 낮은 값 요소의 위로 간니다. 그러니 당신이 어떤 값을 사용할 지에 달려있습니다. 2와 3을 사용하면 300과 40000과 같은 효과를 얻을 수 있습니다.

- -
-

참고: 이 시점에 예제의 실제 구현 장면을 5_z-index.html에서 볼 수 있습니다(소스 코드 보기).

-
- -

고정 위치잡기

- -

이제 고정 위치잡기를 살펴보자. 이것은 절대 위치잡기와 정확히 같은 방식으로 작동합니다.단 한 가지 핵심 차이점이 있습니다. 절대 위치잡기는 {{htmlelement("html")}} 요소나 가까운 조상 요소를 기준으로 비례해 요소를 고정시키지만, 고정 위치잡기는 브라우저 뷰 포트 자체를 기준으로 비례해 요소를 고정합니다. 즉, 탐색 메뉴가 계속 자리를 지키는 것과 같이 제자리에 고정된 유용한 사용자 인터페이스 항목을 생성할 수 있습니다.

- -

우리가 무슨 얘기를 하는지 보여주기 위해 간단한 예를 들어봅시다. 먼저 씨에스에스에서 기존 p:nth-of-type(1)과 .positioned 규칙을 삭제합니다.

- -

이제 position: relative; 선언을 지우고, 다음과 같이 고정 높이를 추가하는 규칙을 body 규칙에 업데이트합니다:

- -
body {
-  width: 500px;
-  height: 1400px;
-  margin: 0 auto;
-}
- -

이제 우리는 {{htmlelement("h1")}} 요소에 position: fixed;를 부여하고, 그걸 뷰 포트의 상단 중앙에 놓게 합니다. 다음 규칙을 씨에스에스에 추가하세요.

- -
h1 {
-  position: fixed;
-  top: 0;
-  width: 500px;
-  margin: 0 auto;
-  background: white;
-  padding: 10px;
-}
- -

화면 상단에 고정시키려면 top: 0;이 요구됩니다. 그런 다음 제목에 콘텐츠 열과 동일한 너비를 부여하고 콘텐츠를 중앙에 놓기 위해 오래됐지만, 신뢰감을 주는 margin: 0 auto;를 사용합니다. 그런 다음 제목에 흰색 배경과 패딩을 부여해 제목 아래에 내용이 보이지 않도록 합니다.

- -

지금 저장하고 새로고침하면 제목이 고정되는 사소하지만, 재미난 효과를 볼 수 있으며, 스크롤 막대를 위로 올리면 콘텐츠가 드러나고 아래로 내리면 제목 밑으로 콘텐츠가 사라지는 것처럼 보입니다. 하지만 우리는 이것을 더 개선할 수 있습니다. 현재 일부 콘텐츠가 시작부터 제목에 밑에 깔려있는 부분 말입니다. 위치잡기한 제목이 문서 대열상에서 모습을 드러내지 않기 때문입니다. 그래서 나머지 콘텐츠가 맨 위로 이동했습니다. 우리는 올라간 것을 조금 아래로 이동시켜야 합니다. 우리는 그걸 첫 번째 단락에 최상위 여백을 설정해서 달성할 수 있습니다. 지금 다음 내용을 추가하세요:

- -
p:nth-of-type(1) {
-  margin-top: 60px;
-}
- -

당신은 이제 완성된 예제를 볼 수 있어야 합니다:

- - - -

{{ EmbedLiveSample('고정_위치잡기', '100%', 400) }}

- -
-

참고: 당신은 이 시점에 예제의 실제 구현 장면을 6_fixed-positioning.html에서 볼 수 있습니다 (소스 코드는 여기서 보세요).

-
- -

position: sticky

- -

이용할 수 있는 position: sticky라고 불리우는 또 다른 위치잡기 값이 있습니다. 이것은 다른 위치잡기보다 다소 새로운 것입니다. 이것은 기본적으로 상대 위치잡기와 고정 위치잡기가 혼합된 하이브리드로서, 위치잡기 요소가 특정 임계점에(예로 뷰포트의 상단으로부터 10px) 스크롤될 때까지 상대 위치잡기처럼 행동할 수 있다가 그 뒤에 위치가 고정됩니다. 예를 들어, 탐색 막대가 특정 지점까지 페이지와 함께 스크롤한 다음 페이지 상단에 흡착되도록 사용할 수 있습니다.

- -
- - -
.positioned {
-  position: sticky;
-  top: 30px;
-  left: 30px;
-}
-
- -

{{ EmbedLiveSample('흡착_1', '100%', 200) }}

- -

position: sticky의 일반적 사용례기도 하고 흥미로운 사용례는 스크롤링하다 제목에 도달하면 서로 다른 제목이 페이지의 맨 위에 흡착되는 색인 페이지를 만드는 것입니다. 이런 사례에 대한 마크업은 다음과 같은 모습일 수 있습니다:

- -
<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>
-
- -

씨에스에스는 다음과 같이 보일 수 있다. 일반 대열에서는 {{htmlelement("dt")}} 요소가 콘텐츠와 함께 스크롤됩니다. {{cssxref("top")}} 값이 0이고 {{htmlelement("dt")}} 요소에 position: sticky를 추가하면 이를 지원하는 브라우저는 그 위치(0)에 도달할 때 머리글을 브라우저 뷰포트 상단에 흡착시킵니다. 그 후 각각의 후속 머리글은 자신의 위치까지 스크롤하는 시점에 이전 머리글을 교체합니다.

- -
dt {
-  background-color: black;
-  color: white;
-  padding: 10px;
-  position: sticky;
-  top: 0;
-  left: 0;
-  margin: 1em 0;
-}
-
- -
- -
- -

{{ EmbedLiveSample('흡착_2', '100%', 200) }}

- -
-

참고: 당신은 이 시점에 예제의 실제 구현 장면을 7_sticky-positioning.html에서 볼 수 있습니다(소스 코드는 여기서 보세요).

-
- -

요약정리

- -

기본적인 위치잡기를 가지고 놀이삼아 시험해 보니 재미있었을 것이다; 비록 이것이 완전체 조판에 사용할 수 있는 방법은 아니지만, 여러분이 보았다시피 이것이 알맞은 용도로 사용될 수 있는 많은 작업들이 있다.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}

- -

참조 항목

- - - -

이번 단위에는

- - diff --git "a/files/ko/learn/css/css_layout/\354\235\264\354\240\204_\353\270\214\353\235\274\354\232\260\354\240\200_\354\247\200\354\233\220/index.html" "b/files/ko/learn/css/css_layout/\354\235\264\354\240\204_\353\270\214\353\235\274\354\232\260\354\240\200_\354\247\200\354\233\220/index.html" deleted file mode 100644 index 07910a4d26..0000000000 --- "a/files/ko/learn/css/css_layout/\354\235\264\354\240\204_\353\270\214\353\235\274\354\232\260\354\240\200_\354\247\200\354\233\220/index.html" +++ /dev/null @@ -1,248 +0,0 @@ ---- -title: 이전 브라우저 지원 -slug: Learn/CSS/CSS_layout/이전_브라우저_지원 -tags: - - 가변상자 - - 격자 - - 기능 쿼리 - - 레거시 - - 부동체 - - 씨에스에스 - - 안내서 - - 조판 - - 초보자 - - 학습 -translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers ---- -
{{LearnSidebar}}
- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

- -

이 모듈에서는 Flexbox 및 Grid를 디자인의 기본 레이아웃 메서드로 사용할 것을 권고합니다. 그러나 당신이 사용한 메서드를 지원하지 않는 브라우저나 이전 브라우저를 사용해 당신의 사이트를 방문하는 사람들이 있을 겁니다. 이런 일은 웹상에서 항상 있는 일입니다. 즉 새로운 기능이 개발됨에 따라 서로 다른 브라우저가 서로 다른 것들의 우선 순위를 정합니다. 이 문서는 구식 기술의 사용자들을 외면하지 않고도 최신 웹 기술을 사용하는 방법에 대해 설명합니다.

- - - - - - - - - - - - -
선결 사항:HTML 기본 (HTML 입문 학습), CSS의 작동 방식 CSS 입문 및 (상자 양식 지정 학습)
목표:여러분이 사용하려는 기능을 지원하지 않을 수있는 이전 브라우저에서 레이아웃을 지원하는 방법을 파악합니다.
- -

당신의 사이트 브라우저 지향은?

- -

모든 웹사이트는 공략 대상에 따라 달라집니다. 접근 방식을 결정하기 전에 이전 브라우저를 사용하여 사이트를 방문하는 방문자 수를 확인하십시오. 사람들이 사용중인 기술을 알려주는 분석 기능(예: Google analytics)을 이용할 수 있고, 추가 및 교체할 기존 웹 사이트가 있는 경우 이는 간단한 작업입니다. 당신이 분석툴이 없거나, 이번이 완전히 새로운 사이트 개설이라면 Statcounter같은 위치별로 필터링된 통계를 제공할 수 있는 사이트가 있습니다.

- -

또한 사람들이 여러분의 사이트를 이용하는 방식이나 장치 유형을 고려해야만 합니다. 예를 들어 모바일 장치 이용 방문자가 평균치를 웃돌거라는 예상을 할 수 있습니다. 접근성 및 보조 기술을 사용하는 사람들은 항상 고려해야하지만 일부 사이트에서는 그 점이 더욱 중요할 수 있습니다. 필자의 경험에 따르면 개발자들은 종종 이전 버전의 인터넷 익스플로러 사용자 1%에 대해 매우 걱정하는 반면, 더 많은 사용자 층인 내게 필요한 옵션 사용자에 대해선 전혀 고려하지 않습니다.

- -

당신이 사용하려는 기능에 대한 지원은 어떻습니까?

- -

사이트에 들어오는 브라우저를 알면, 해당 대상에 사용하고 싶은 기술을 평가할 수 있고, 그리고 그 기술을 이용할 수 없는 방문객들에게 얼마나 쉽게 대안을 제공할 수 있는지 진단할 수 있습니다. 우리는 CSS 속성을 상세히 설명하는 각 페이지에 대한 브라우저 호환성 정보를 모질라 개발자 네트워크에서 제공함으로써 쉽게 사용할 수 있도록 노력하고 있습니다. 예를 들어, {{cssxref("grid-template-columns")}} 페이지를 살펴보십시오. 이 페이지의 맨 아래에는 이 속성을 지원하기 시작한 버전과 함께 주요 브라우저가 나열된 표가 있습니다.

- -

- -

기능이 얼마나 잘 지원되는지 확인하는 또 다른 일반적인 방법은 Can I Use 웹 사이트입니다. 이 사이트에는 대부분의 웹 플랫폼 기능이 브라우저 지원 상태에 대한 정보와 함께 나열됩니다. 위치별로 사용 통계를 볼 수 있습니다. 주로 특정 지역의 사용자가있는 사이트에서 작업하는 경우 유용합니다. Google 웹 로그 분석 계정을 연결하여 사용자 데이터를 기반으로 분석할 수도 있습니다.

- -

사용자의 브라우저가 보유한 기술과 당신이 사용하려는 것에 대한 지원을 이해하면 당신은 좋은 상황에서 모든 결정을 내리고 모든 사용자를 가장 잘 지원할 수있는 방법을 알 수 있습니다.

- -

지원하는 것과 '모양이 똑같다'는 말은 다르다

- -

일부 사용자는 휴대 전화로 사이트를 보고 다른 사용자는 대형 데스크톱 화면에서 사이트를 보고 있기 때문에 모든 브라우저에서 웹 사이트가 동일하게 보이지 않을 수 있습니다. 마찬가지로 일부 사용자는 이전 브라우저 버전을 갖고 있고 다른 사용자에게는 최신 브라우저를 갖고 있습니다. 일부 사용자는 화면 읽기 프로그램을 사용해 내용을 읽거나 페이지를 확대하여 읽을 수도 있습니다. 모든 사람을 지원한다는 것은 방어적으로 디자인된 콘텐츠 버전을 제공하여 최신 브라우저에서는 사이트 외관이 뛰어나지만, 이전 브라우저 사용자에게는 기본 수준으로 계속 사용할 수 있음을 의미합니다.

- -

기본적인 지원 수준이란 페이지의 일반적인 흐름이 이해되도록 콘텐츠를 잘 구성하는 것에서 출발합니다. 기능이 매우 제한적인 전화기 사용자는 많은 CSS를 얻을 수 없지만, 콘텐츠는 쉽게 읽을 수 있는 방식으로 나열됩니다. 따라서 항상 잘 구성된 HTML 문서에서 출발해야 합니다. 여러분의 스타일 시트를 제거했을 때, 컨텐츠가 여전히 잘 이해되나요?

- -

한 가지 옵션은 아주 오래된 브라우저나 제한된 브라우저를 사용하는 사람들이 찾을 수 있는 대체 페이지로 사이트 외관을 단순화하는 것입니다. 문제가 되는 해당 브라우저를 사용해 소수의 사람들이 사이트를 방문하는 경우 최신 브라우저 사용자들과 비슷한 체험을 그들에게 제공하기 위해 시간을 쏟는 것이 상업적으로 맞지 않을 겁니다. 사이트의 접근성을 높이고 더 많은 사용자에게 서비스를 제공하는 일에 시간을 투자하는 것이 더 좋을 겁니다. 평범한 HTML 페이지와 온갖 장신구가 포함된 페이지 사이에는 중간 지점이 있으며 CSS는 실제로 이러한 대체 페이지를 매우 간단하게 생성해 줍니다.

- -

CSS로 대체 페이지 생성하기

- -

CSS 규격에는 두 가지 레이아웃 메서드가 동일한 항목에 적용될 때 브라우저가 수행하는 작업을 설명하는 정보가 포함되어 있습니다. 즉, 부동체 항목이 한편으로는 CSS grid 레이아웃을 사용하는 grid 항목인 경우 발생하는 상황에 대한 정의가 있음을 의미합니다. 이 정보가 브라우저가 이해하지 못하는 CSS를 무시한다는 지식과 결합되어, 이미 다루었던 레거시 기술을 사용하여 간단한 레이아웃을 생성할 수 있는 방법이 있습니다. 그런 다음 이를 최신 브라우저에서는 grid 레이아웃으로 덮어씁니다.

- -

아래 예에서는 세 개의 <div> 부동체를 행으로 표시했습니다. CSS grid 레이아웃을 지원하지 않는 브라우저는 상자 행을 부동 레이아웃 (浮動 組版) 으로 간주합니다. grid 항목이 되는 부동 항목은 부동 동작을 상실합니다. 즉, .wrapper 클레스를 grid 컨테이너로 전환하면 부동 항목이 grid 항목이 됩니다. 브라우저가 grid 레이아웃을 지원하는 경우 grid 디스플레이를 표시합니다. 지원하지 않으면 display: grid 관련 속성은 무시되고 부동 레이아웃이 사용됩니다.

- -
-
* {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;
-}
-
- -
<div class="wrapper">
-  <div class="item">항목 하나</div>
-  <div class="item">항목 둘</div>
-  <div class="item">항목 셋</div>
-</div>
-
- -

{{ EmbedLiveSample('예제1', '100%', '200') }}

-
- -
-

참고: {{cssxref("clear")}} 속성도 마찬가지로 정리된 항목이 grid가 되자마자 효력을 상실합니다. 따라서 정리된 footer가 딸린 레이아웃을 가질 수 있으며, 이 레이아웃이 grid 레이아웃으로 전환됩니다.

-
- -

대체 메서드

- -

이 부동 예제와 비슷한 방식으로 사용할 수있는 여러 레이아웃 메서드가 있습니다. 당신이 생성해야하는 레이아웃 패턴에 가장 적합한 것을 선택할 수 있습니다.

- -
-
Float(부동) 및 clear
-
위에서 볼 수 있듯이, 부동 또는 정리 속성이 레이아웃에 미치는 효과는 부동되거나 정리된 항목이 flex 또는 grid 항목이 되면 중단됩니다.
-
display: inline-block
-
이 방법을 사용하여 열 레이아웃을 생성할 수 있는 경우는 항목이 display: inline-block로 설정되었을 경우이지만, flex 또는 grid 항목이 된다면 인라인 블록 동작은 무시됩니다.
-
display: table
-
CSS 테이블을 생성하는 메서드는 해당 단원의 입문서가 대체품으로 활용될 수 있습니다. CSS 테이블 레이아웃으로 설정된 항목은 그들이 flex 또는 grid 항목이 될 경우 자기 동작을 상실하게 됩니다. 중요하게는 테이블 구조를 수정하기 위해 생성된 익명 상자는 생성되지 않습니다.
-
다단 레이아웃
-
특정 레이아웃의 경우 당신은 다단을 대체품로 사용할 수 있습니다. 여러분의 콘테이너가 column-* 속성에 속한 것으로 정의되었다면 grid 컨테이너가 될 것이고, 다단 동작은 발생하지 않습니다.
-
grid 대체품 역할인 Flexbox
-
Flexbox는 인터넷 익스플로러 10과 11이 지원하기 때문에 grid를 지원하는 브라우저가 훨씬 많이 있습니다. 다만 이 단원의 뒷부분에서 설명하고 있는 구형 브라우저에서 flex를 지원하기 위한 처리 방법에 대해서도 확인해보세요. flex 컨테이너를 grid 컨테이너로 만들면 자식에 적용된 모든 flex () 속성은 무시됩니다.
-
- -

구형 브라우저에서 레이아웃 조정이 많이 필요한 경우 CSS를 이런 식으로 사용하면 괜찮은 경험을 할 수 있습니다. 오래되고 잘 지원되는 기술을 기반으로 간단한 레이아웃을 추가한 다음 최신 CSS를 사용하여 잠재 고객의 90% 이상이 볼 수있는 레이아웃을 만듭니다. 그러나 대체 코드에 새 브라우저가 해석할 내용이 포함되어야하는 경우가 있습니다. 이에 대한 좋은 예는 부동 항목에 백분율 너비를 추가하여 열을 마치 grid 디스플레이처럼 보이도록 컨테이너를 채울 수 있도록 (너비를) 늘리는 경우입니다.

- -

부동 레이아웃에서 백분율은 컨테이너를 기준으로 계산됩니다. 33.333%는 컨테이너 너비의 3 분의 1입니다. 그러나 grid에서는 항목이 배치된 grid 영역을 기준으로 33.333%가 계산되므로 grid 레이아웃이 도입되면 실제로 원하는 크기의 3분의 1이 됩니다.

- -
-
* {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%;
-}
-
- -
<div class="wrapper">
-  <div class="item">항목 하나</div>
-  <div class="item">항목 둘</div>
-  <div class="item">항목 셋</div>
-</div>
-
- -

{{ EmbedLiveSample('예제2', '100%', '200') }}

-
- -

이 문제를 해결하려면 grid가 지원되는지 여부와 너비가 재정의되는지 여부를 감지할 수있는 방법이 필요합니다. CSS가 우리를 위해 마련한 해결책은 이렇습니다.

- -

Feature queries

- -

feature queries를 사용하면 브라우저가 특정 CSS 기능을 지원하는지 테스트 할 수 있습니다. 즉, 특정 기능을 지원하지 않는 브라우저 용 CSS를 작성한 다음 브라우저가 지원되는지 여부와 멋진 레이아웃을 제공하는지 확인하십시오.

- -

위의 예제에 feature query를 추가하면 grid가 지원됨을 알고 있는 경우 이 feature query를 사용하여 항목 너비를 auto () 으로 다시 설정할 수 있습니다.

- -
-
* {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;
-  }
-}
-
- -
<div class="wrapper">
-  <div class="item">항목 하나</div>
-  <div class="item">항목 둘</div>
-  <div class="item">항목 셋</div>
-</div>
-
- -

{{ EmbedLiveSample('예제3', '100%', '200') }}

-
- -

feature query에 대한 지원은 최신 브라우저에서 매우 유용하지만 CSS grid를 지원하지 않는 브라우저는 feature query도 지원하지 않는다는 점에 유의해야합니다. 이는 위에서 설명한 접근 방식이 해당 브라우저에서 작동한다는 것을 의미합니다. 우리가 하는 작업은 feature query를 차치하고 먼저 이전 CSS를 작성하는 것입니다. grid를 지원하지 않고 feature query를 지원하지 않는 브라우저는 자기가 이해할 수 있는 레이아웃 정보를 이용하고 그밖에 다른 것들은 완전히 무시할 수 있습니다. feature query를 지원하는 브라우저는 CSS grid도 지원하므로 grid 코드 및 feature query 내부의 코드를 실행합니다.

- -

feature query 규격에는 브라우저가 기능을 지원하지 않는지 테스트하는 기능도 포함되어 있습니다. 이는 브라우저가 feature query를 지원하는 경우에만 유용합니다. feature query를 지원하지 않는 브라우저가 갈수록 사라짐에 따라 미래에는 지원 부족 여부를 확인하는 방법은 작동하게 됩니다. 그러나 지금은 최상의 지원을 위해 이전 CSS를 사용한 다음 덮어 쓰는 방식을 사용하십시오.

- -

Flexbox 예전 버전

- -

이전 버전의 브라우저에서는 이전의 Flexbox 명세가 반복되는 것을 여러분은 발견할 수 있습니다. 글을 쓰는 시점에서 이것은 Flexbox에 -ms- 접두사를 사용하는 인터넷 익스플로러 10의 문제입니다. 이는 또한 오래된 문서와 자습서가 있음을 의미합니다. 이 유용한 안내서는 보고있는 내용을 확인하는 데 도움이되고 매우 오래된 브라우저에서 flex 지원이 필요한 경우에도 도움이 될 수 있습니다.

- -

인터넷 익스플로러 10과 11 접두사 버전

- -

CSS grid 규격은 인터넷 익스플로러 10에서 처음 나온 원형이었습니다. 즉, 인터넷 익스플로러 10 및 11에는 최신 grid 지원이 없지만, 이 사이트에 문서화된 최신 규격과는 다르나 매우 유용한 그리드 레이아웃 버전이 있습니다. 인터넷 익스플로러 10 및 11 구현은 -ms- 접두사를 사용해 해당 그리드를 마이크로소프트 브라우저에 사용할 수 있으며 이외의 브라우저에서는 무시됩니다. 에지 브라우저는 여전히 이전 구문을 이해하므로 현대 그리드 CSS에서 모든 항목을 안전하게 덮어씁니다.

- -

그리드 레이아웃의 점진적 향상에 대한 안내서는 그리드의 인터넷 익스플로러 버전을 이해하는 데 도움이되며 이 단원 끝에는 별도의 유용한 링크를 포함하고 있습니다. 그러나 이전 인터넷 익스플로러 버전 사용자의 방문자 수가 매우 많지 않다면 모든 비지원 브라우저에서 작동하는 대체품을 만드는 것이 더 좋습니다.

- -

이전 브라우저 여부 확인

- -

Flexbox 및 그리드를 지원하는 대부분의 브라우저를 사용하면 구형 브라우저를 테스트하기가 상당히 어려울 수 있습니다. 한 가지 방법은 크로스 브라우저 테스트 단위에 설명 된대로 Sauce Labs과 같은 온라인 테스트 도구를 사용하는 것입니다.

- -

또한 가상 컴퓨터를 다운로드하여 설치한 뒤 제약이 걸린 본인의 컴퓨터 환경에서 이전 버전의 브라우저를 실행할 수 있습니다. 이전 버전의 인터넷 익스플로러에 액세스하는 것이 특히 유용하며 이를 위해 마이크로소프트는 다양한 가상 컴퓨터를 무료로 다운로드 할 수 있도록 만들었습니다. 맥, 윈도우즈 및 리눅스 운영 체제에서 가상 컴퓨터를 사용할 수 있으므로 윈도우즈 컴퓨터를 사용하지 않더라도 이전 및 최신 윈도우즈 브라우저에서 테스트할 수있는 좋은 방법입니다.

- -

요약정리

- -

여러분은 이제 그리드 및 Flexbox와 같은 기술을 자신있게 사용하고, 이전 브라우저를 위한 대체품을 만들고, 향후 발생할 수 있는 새로운 기술을 활용할 수 있는 지식을 얻었습니다.

- -

참조 항목

- - - -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

- -

이번 단위에는

- - diff --git "a/files/ko/learn/css/css_layout/\354\235\274\353\260\230_\355\235\220\353\246\204/index.html" "b/files/ko/learn/css/css_layout/\354\235\274\353\260\230_\355\235\220\353\246\204/index.html" deleted file mode 100644 index 43b4366c0e..0000000000 --- "a/files/ko/learn/css/css_layout/\354\235\274\353\260\230_\355\235\220\353\246\204/index.html" +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: 일반 대열 -slug: Learn/CSS/CSS_layout/일반_흐름 -tags: - - 격자형 - - 부동 - - 씨에스에스 - - 일반 대열 - - 조판 - - 초보자 - - 학습 -translation_of: Learn/CSS/CSS_layout/Normal_Flow ---- -
{{LearnSidebar}}
- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

- -

이번 글에서는 normal flow, 다른 말로 만일 당신이 요소의 레이아웃을 변경하지 않을 시 웹페이지 요소가 자기 자신을 배치하는 방법에 관해 설명합니다.

- - - - - - - - - - - - -
선결 사항:HTML의 기초 (HTML에 대한 소개)와 CSS 작동 방식에 대한 개념(CSS 소개를 공부하세요.)
목표:변경이 이뤄지기 전에 브라우저가 웹 페이지를 기본값으로 레이아웃하는 방법을 설명하기
- -

이전 단원에서 상세히 기술한 바와 같이, 당신이 CSS를 적용하지 않을 경우 웹 페이지의 요소는 normal flow로 배치됩니다. 그리고 normal flow에 포함된 요소의 위치를 조정하거나 요소를 완전히 제거함으로써 요소가 동작하는 방법을 변경할 수 있습니다. 모든 웹 페이지를 시작하는 최상의 방법은 normal flow에서 읽기 가능하며, 견고하고 구조화된 문서로 시작하는 것입니다. 이렇게 하면 제한된 기능을 가진 브라우저를 사용하거나 페이지 콘텐츠를 소리 내 읽는 스크린 리더와 같은 장치를 사용하는 사용자들까지 읽을 수 있는(readable) 콘텐츠로 만들 수 있습니다. 또한, normal flow는 읽기 가능한 문서를 만들도록 마련된 것으로, 이를 출발점으로 삼아 레이아웃을 변경할 때 웹페이지 문서와 대립해 싸울 게 아니라 그것과 협력해서 작업하게 됩니다.

- -

서로 다른 레이아웃 메서드를 본격적으로 파헤치기 전에 일반 문서 흐름과 관련하여 이전 모듈에서 학습했던 내용 중의 일부를 복습하는 것도 가치가 있습니다.

- -

기본값으로 요소들은 어떻게 배치되는가?

- -

우선 개별 요소인 상자의 배치는 자신의 내용물을 채택하고, 그 주변에 패딩을 더하고, 테두리와 여백을 더하는 식으로 이뤄집니다. 다시 말해 앞서 살펴보았던 박스 모델과 같습니다.

- -

기본값으로 블록 수준 요소의 내용물은 자기 부모 요소의 너비 100%와 자체 내용물의 최대 높이가 됩니다. 인라인 요소는 자체 내용물의 최대 높이를 취하는 동시에 최대 너비를 취합니다. 인라인 요소에 너비나 높이를 설정할 수는 없습니다. 그들은 블록 수준 요소의 콘텐츠 내부에 들어앉았을 뿐입니다. 인라인 요소의 크기를 제어하려면 그것을 display: block; 속성값이나 양쪽의 성격이 혼합된 display: inline-block;을 가지고 블록 수준 요소처럼 행동하도록 설정할 필요가 있습니다.

- -

앞서 살펴본 내용에서 개별 요소는 설명되지만, 여러 요소가 서로 상호 작용하는 방법은 어떻게 설명할까요? (레이아웃 입문서에서 언급했던) 일반 레이아웃의 flow는 브라우저의 뷰포트 안에 요소를 배치하는 시스템입니다. 기본값으로 블록 수준 요소의 배치는 부모의 쓰기 모드(initial: horizontal-tb)에 기초해 블록 flow 방향에 포함되어 이뤄집니다. 다시 말해 각 블록 요소는 마지막 요소 아래 새 줄에 나타나며, 각 요소에 주어진 margin에 의해 구분됩니다. 그러므로 영어 또는 여타 가로쓰기, 상단에서 하단으로 행갈이 하는 쓰기 모드와 블록 수준 요소는 수직으로 배치됩니다.

- -

인라인 요소는 다르게 동작합니다. 새로운 줄에 나타나는 대신, 다른 요소와 같은 라인에 차례로 자리 잡습니다. 다만 인접(혹은 접힌) 텍스트 콘텐츠는 해당 부모의 블록 수준 요소의 너비 내에서 자신이 자리를 잡을 수 있는 공간이 있는 경우가 해당합니다. 충분한 공간이 없을 경우 overflow되는 텍스트 또는 요소는 새로운 줄에 나타납니다.

- -

두 개의 인접 요소가 모두 자체 여백이 지정되어 있다면 두 여백은 접촉하고 그중 큰 여백만 남게 되며, 작은 여백은 사라집니다. 이를 마진 축소(margin collapsing)라고 하며 이전에 확인해본 적이 있습니다.

- -

이 모든 것을 설명하는 간단한 예를 살펴봅시다.

- -
-
<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>
- -
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;
-}
-
- -

{{ EmbedLiveSample('일반_flow', '100%', 500) }}

- -

요약정리

- -

이제 당신은 normal flow은 물론, 기본값으로 브라우저가 어떤 방식으로 사물을 배치하는지 이해했습니다. 당신의 디자인 필요에 따라 레이아웃을 만들기 위해 디스플레이 기본값을 변경하는 방법을 배우려면 다음 단계로 이동하세요.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

- -

이번 단위에는

- - -- cgit v1.2.3-54-g00ecf