이전 브라우저 지원 - Web 개발 학습하기

이전 브라우저 지원
==========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
* 이전
* Overview: CSS layout
* 다음  (en-US)

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

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

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

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

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

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

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

![](/ko/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers/browser-table.png)

기능이 얼마나 잘 지원되는지 확인하는 또 다른 일반적인 방법은 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` 관련 속성은 무시되고 부동 레이아웃이 사용됩니다.

```css
\* {
  box-sizing: border-box;
}

.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.item {
  float: left;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}
```

```html
<div class="wrapper">
  <div class="item">항목 하나</div>
  <div class="item">항목 둘</div>
  <div class="item">항목 셋</div>
</div>
```

**참고:** `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이 됩니다.

```css
\* {
  box-sizing: border-box;
}

.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.item {
  float: left;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
  width: 33.333%;
}
```

```html
<div class="wrapper">
  <div class="item">항목 하나</div>
  <div class="item">항목 둘</div>
  <div class="item">항목 셋</div>
</div>
```

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

Feature queries
---------------

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

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

```css
\* {
  box-sizing: border-box;
}

.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.item {
  float: left;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
  width: 33.333%;
}

@supports (display: grid) {
  .item {
    width: auto;
  }
}
```

```html
<div class="wrapper">
  <div class="item">항목 하나</div>
  <div class="item">항목 둘</div>
  <div class="item">항목 셋</div>
</div>
```

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에서 모든 항목을 안전하게 덮어씁니다.

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

이전 브라우저 여부 확인
-------------

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

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

요약정리
----

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

참조 항목
-----

* CSS feature query 사용하기
* Flexbox의 이전 버전과의 호환성 (en-US)
* CSS 레이아웃과 점진적 향상 (en-US)
* CSS 그리드 사용하기: 그리드 없는 브라우저 지원하기
* 인터넷 익스플로러 10 및 11 버전 그리드 사용을 위한 자습서
* 인터넷 익스플로러 10 용 그리드 레이아웃 구현을 사용해야 하나요?
* feature query가 포함된 중첩된 웹 디자인
* feature query 사용하기 (동영상)
* 이전
* Overview: CSS layout
* 다음  (en-US)


Floats - Web 개발 학습하기

Floats
======

* 이전
* Overview: CSS layout
* 다음

원래 텍스트 블록 내에서 float 이미지를 위한 `float` 속성은 웹 페이지에서 다단 레이아웃을 생성할 용도로 가장 널리 사용되는 도구 중 하나로 자리매김했었습니다. flexbox와 grid의 출현과 함께 float 속성은 이 문서에서 설명하겠지만, 원래의 목적대로 돌아갔습니다.

|  |  |
| --- | --- |
| 선결 사항: | HTML의 기초 (HTML 입문서)와 CSS 작동 방식에 대한 개념(CSS 입문서를 공부하세요.) |
| 목표: |
 웹페이지상에 float 기능을 생성하는 방법과 clear 속성과 floats clearing
 을 배웁니다.
  |

floats의 배경
----------

float 속성은 웹 개발자가 텍스트 열 내부에 float하는 이미지를 포함하고, 아울러 해당 이미지의 좌측 우측 주변으로 텍스트를 둘러싸는 간단한 레이아웃을 구현할 수 있도록 도입되었습니다. 이런 것은 신문 레이아웃에서 볼 수 있는 종류입니다.

그러나 웹 개발자들은 이미지뿐만 아니라 무엇이든 float할 수 있음을 빠르게 깨달았고, 그래서 floats 사용이 확대되었습니다. 앞서 살펴본 고급 단락 예제는 재미있는 드롭캡 효과를 생성하는 데 floats를 어떻게 사용할 수 있는지를 보여줍니다.

floats는 일반적으로 상대 요소와 나란히 놓이도록 float(浮動)하는 다단 정보를 갖춘 웹 사이트의 전체 레이아웃을 만들는데 널리 사용되어 왔다(기본 행동은 다단 무리가 소스에서 보이는 순서와 같은 순서대로 상대 요소 아래에 자리잡기하는 것이다). 더 새롭고 더 나은 레이아웃 기술이 나와있으므로 이러한 방식으로 floats를 사용하는 것은 낡은 기술로 간주되어야 합니다.

이 문서에서는 floats의 적절한 용도에 집중할 것입니다.

간단한 float 예제
------------

floats를 어떻게 사용하는지 알아보자. 우리는 요소 주위에 텍스트 블록을 float하는 것이 포함된 아주 간단한 예제로 시작할 것입니다. 아래 내용을 따라하려면 당신의 컴퓨터에 `index.html` 파일을 새로 작성하여, 거기에 간단한 HTML 템플릿으로 채우고, 파일 내부의 적절한 위치에 아래 코드를 삽입하면 됩니다. 해당 섹션의 맨 아래에는 최종 코드가 어떻게 생겼는지에 대한 실제 예제가 있습니다.

첫째, 간단한 HTML로 시작하겠습니다. HTML body 부분에 다음 내용을 추가하고, body 안에 있었던 모든 내용을 제거합니다.

```html
<h1>간단한 float 예제</h1>

<div class="box">float</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet.
</p>

<p>
  Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
  orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
  ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
  ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et
  a urna. Ut id ornare felis, eget fermentum sapien.
</p>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
```

이제 다음 CSS를 HTML에 적용하십시요.(`<style>` 요소를 사용할지 개별 `.css` 파일에 대한 `<link>`를 사용할지는 당신의 선택 여하에 달려있습니다.):

```css
body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.box {
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}
```

지금 저장하고 새로 고침하면, 여러분이 기대한 것과 비슷한 것을 보게 될 것입니다. 다시말해 일반 대열에 속한 상자는 텍스트 위에 위치를 잡고 있습니다. 텍스트가 상자 주변에 float하려면 아래에서 보듯 `.box` 규칙에 두 가지 속성을 추가하십시요.

```css
.box {
  float: left;
  margin-right: 15px;
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}
```

이제 저장하고 새로 고침하면 다음과 같은 것을 볼 수 있습니다.
```

<h1>간단한 float 예제</h1>

<div class="box">float</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate.
</p>

<p>
  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
  felis, eget fermentum sapien.
</p>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
```

```
body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.box {
  float: left;
  margin-right: 15px;
  width: 150px;
  height: 150px;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}
```

이제 floats가 어떻게 작동하는지 생각해 봅시다. floats로 설정된 대상 요소(이 경우 `<div>` (en-US) 요소)는 문서의 일반 레이아웃 대열에서 들어내어 부모 콘테이너(이 경우는 `<body>`)의 왼편에 고정되어 있습니다. 일반 레이아웃 대열에서 float 요소 아래에 오는 모든 콘텐츠는 이제 그 주변을 감싸게 되며, 애초 해당 float 요소가 있던 상층부를 포함해 오른쪽으로 공간을 차지합니다. 거기서 멈추게 됩니다.

콘텐츠를 오른쪽으로 float하는 것은 정확히 같은 효과를 가져 오지만, float 요소는 역으로 오른쪽에 고정되고 컨텐츠는 float 요소의 왼쪽 주변을 둘러싸게 됩니다. 직전 CSS 규칙 집합에서 float 값을 `right`로 변경하고 `margin-right`를 `margin-left`로 대체해 그 결과가 무엇인지 확인하십시오.

텍스트를 밀어내도록 float에 여백을 추가할 수 있지만, float 로부터 텍스트를 이동시키기 위해 텍스트에 여백을 추가할 수는 없습니다. 왜 그런가하면 float 요소가 일반 대열에서 이탈된 상태이고, 후속 항목에 속한 상자 무리가 실제로 동 float 의 뒤에 나열되기 때문입니다. 당신의 예제에 일부 내용을 변경해보면 그점을 증명할 수 있습니다.

float 상자의 바로 뒤에 있는 텍스트 형태의 첫 번째 단락에 `special` 클래스를 추가하십시요. 그 다음에 당신의 CSS에 다음 규칙을 추가합니다. 이들 규칙에 따라 당신의 후속 단락에는 배경색이 주어집니다.

```css
.special {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
}
```

해당 효과를 쉽게 확인해보려면 float에 대한 `margin-right`를 `margin`으로 대체하여 float의 주변 전체에 공간을 확보하십시오. 아래 예제에서와 같이 단락의 배경이 float 상자 바로 아래에서 펼쳐지는 것을 확인할 수 있습니다.
```

<h1>간단한 float 예제</h1>

<div class="box">float</div>

<p class="special">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate.
</p>

<p>
  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
  felis, eget fermentum sapien.
</p>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
```

```
body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.box {
  float: left;
  margin: 15px;
  width: 150px;
  height: 150px;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}

.special {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
}
```

우리의 후속 요소에 속한 라인 상자가 짧아져서 텍스트가 floats 주위로 펼쳐지고 있지만, floats가 일반 대열에서 제거되었기 때문에 단락 주변 상자는 여전히 전체 너비로 유지하고 있습니다.

floats 정리하기
-----------

우리는 float가 일반 대열에서 제거되고 다른 요소가 그 옆에 표시되는 것을 보았습니다. 따라서 후속 요소가 치고 올라오는 것을 막으려면 그것을 정리해야 합니다. 그것은 `clear` 속성으로 달성됩니다.

이전 예제에서 당신이 사용한 HTML에서 float 항목 아래에 위치한 두 번째 단락에 `cleared` 클래스를 추가하십시요. 그 뒤 당신의 CSS에 다음 내용을 추가하세요.

```css
.cleared {
  clear: left;
}
```

```
<h1>간단한 float 예제</h1>

<div class="box">float</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate.
</p>

<p class="cleared">
  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
  felis, eget fermentum sapien.
</p>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
```

```
body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.box {
  float: left;
  margin: 15px;
  width: 150px;
  height: 150px;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}

.cleared {
  clear: left;
}
```

다음 단락은 float 요소를 clear 하며, 더 이상 그 옆에 부상하지 않음을 알아야 합니다. `clear` 속성은 다음과 같은 값을 받아들입니다:

* `left`: 왼쪽에 부상한 항목들 clear
* `right`: 오른쪽에 부상한 항목들 clear
* `both`: 왼쪽 오른쪽 관계 없이 부상한 항목들 clear
floats 주변을 둘러싼 상자 정리하기
----------------------

이제 당신은 float 요소를 후속하는 무언가를 정리하는 방법을 알고 있지만, 장신 floats와 단신 단락이 있고 두 요소 주변을 둘러싼 하나의 상자가 있을 경우에는 어떤 일이 일어나는지 살펴보십시요. 첫 단락과 우리의 float 상자가 `wrapper` 클래스에 해당하는 `<div>` (en-US) 요소로 둘러싸지도록 문서를 변경하십시오.

```html
<div class="wrapper">
  <div class="box">float</div>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate.
  </p>
</div>
```

당신의 CSS에 `.wrapper` 클래스에 대해 다음 규칙을 추가한 뒤 페이지를 새로 고침하십시오.

```css
.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
}
```

원형 `.cleared` 클래스에 추가된 것입니다.

```css
.cleared {
  clear: left;
}
```

여러분이 보게 될 것은 문단에 배경 이미지를 놓는 예제에서와 비슷하게 배경색이 floats 뒤에서 펼쳐지고 있습니다.
```

<h1>간단한 float 예제</h1>
<div class="wrapper">
  <div class="box">float</div>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate.
  </p>
</div>

<p class="cleared">
  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
  felis, eget fermentum sapien.
</p>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
```

```
body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
}

.box {
  float: left;
  margin: 15px;
  width: 150px;
  height: 150px;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}

.cleared {
  clear: left;
}
```

반복되는 얘기지만, 이렇게 된 까닭은 floats가 정상 대열에서 제거되었기 때문입니다. 후속 요소를 정리해도 이럴 때는 상자 정리 문제에 도움이 되지 않습니다. 즉 상자의 밑단이 float 항목을 애워싸고, 짧은 컨텐츠라도 동 컨텐츠를 애워싸길 원할 경우에는 도움이 되질 않습니다. 이를 처리하려면 생각할 수 있는 세 가지 방법이 있는데, 그 중 두 가지 방법은 모든 브라우저에서 작동하지만, 약간 땜질식이며, 세 번째 새로운 방법은 이런 상황을 제대로 처리합니다.

### The clearfix hack

이 상황을 처리하는 전통적인 방법은 "clearfix hack"이라고 알려진 내용을 사용하는 것입니다. 여기에는 floats와 그걸 둘러싼 콘텐츠가 들어 있는 상자 뒤에 일부 생성된 콘텐츠를 삽입하고, 그것에 (좌측 우측 관계없는) `clear: both;`를 설정하는 것을 말합니다.

우리의 예제에 다음과 같은 CSS를 추가하세요.

```css
.wrapper::after {
  content: "";
  clear: both;
  display: block;
}
```

이제 페이지를 새로고침하면 상자가 지워집니다. 이것은 본질적으로 항목 아래에 `<div>`와 같은 HTML 요소를 추가하고, 거기에 `clear: both`를 설정한 것과 같습니다.
```

<h1>간단한 float 예제</h1>
<div class="wrapper">
  <div class="box">float</div>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate.
  </p>
</div>
<p class="cleared">
  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
  felis, eget fermentum sapien.
</p>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
```

```
body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
}

.box {
  float: left;
  margin: 15px;
  width: 150px;
  height: 150px;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}

.wrapper::after {
  content: "";
  clear: both;
  display: block;
}
```

### overflow 사용

다른 대안으로는 `.wrapper` 클래스에 `overflow` 속성을 `visible` 이 외의 값으로 설정하는 방법이 있습니다.

이전 섹션에서 추가한 clearfix CSS 부분을 제거하고 그 대신 `.wrapper` 클래스에 대한 CSS 규칙에 `overflow: auto`를 추가합니다. 반복되는 얘기지만, 상자가 정리되었을 겁니다.

```css
.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
  overflow: auto;
}
```

```
<h1>간단한 float 예제</h1>
<div class="wrapper">
  <div class="box">float</div>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate.
  </p>
</div>
<p class="cleared">
  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
  felis, eget fermentum sapien.
</p>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
```

```
body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
  overflow: auto;
}

.box {
  float: left;
  margin: 15px;
  width: 150px;
  height: 150px;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}
```

이 예는 **block formatting context**라고(블록 서식 상황) 알려진 것을 생성하여 처리합니다. 이것은 당신의 페이제 내부 미니 레이아웃과도 같습니다. 그 안에 모든 것이 포함되어 있으므로 우리의 float 요소는 블록 서식 상황 내부에 포함되어 있으며 배경은 두 개 항목 뒤에 펼쳐집니다. 그러나 어떤 경우에는 overflow 사용에 따른 의도하지 않은 결과 때문에 원치 않는 스크롤 막대나 잘린 그림자가 발견될 수 있습니다.

### display: flow-root

이 문제를 해결하는 현대적인 방식은 `display` 속성에서 `flow-root`값을 사용하는 방법입니다. 이것은 임시방편을 사용하지 않고 블록 서식 상황을 생성하기 위해만 존재합니다. 이를 사용할 때 의도하지 않은 결과는 없습니다. 당신의 `.wrapper` 규칙에서 `overflow: auto`를 제거하고 `display: flow-root`를 추가합니다. 당신이 이 기능을 지원하는 브라우저가 있다는 가정 하에 상자가 정리될 것입니다.

```css
.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
  display: flow-root;
}
```

```
<h1>간단한 float 예제</h1>
<div class="wrapper">
  <div class="box">float</div>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate.
  </p>
</div>
<p class="cleared">
  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
  felis, eget fermentum sapien.
</p>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
```

```
body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
  display: flow-root;
}

.box {
  float: left;
  margin: 15px;
  width: 150px;
  height: 150px;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}
```

요약정리
----

당신은 현대적인 웹 개발에서 floats에 대해 알아야 할 것은 이제 모두 알게 되었습니다. 과거에 어떤 식으로 사용되었는지에 관한 정보에 대해선 레거시 레이아웃 메서드에 관한 문서를 보십시요. 오래된 프로젝드에 몸 담을 일이 생긴다면 유용할 수도 있습니다.

* 이전
* Overview: CSS layout
* 다음


CSS 레이아웃 입문서 - Web 개발 학습하기

CSS 레이아웃 입문서
============

* Overview: CSS layout
* 다음

이 문서에서는 이전 모듈에서 이미 다뤘던 CSS 레이아웃 기능, 예를 들어 다양한 `display` (en-US) 속성값의 차이 등을 복습하고, 이번 과정에서 다룰 몇 가지 CSS 개념을 소개합니다.

|  |  |
| --- | --- |
| 선결 사항: | HTML의 기초 (HTML에 대한 소개)와 CSS 작동 방식에 대한 개념(CSS 소개를 공부하세요.) |
| 목표: |
 CSS 페이지 레이아웃 기술에 대한 개요를 제공합니다. 개별 기술은 후속
 자습서에서 보다 자세하게 학습할 수 있습니다.
  |

CSS 페이지 레이아웃 기술은 웹페이지에 포함될 요소들을 가져와 일반적인 레이아웃 흐름에서의 기본 위치, 주변의 다른 요소, 부모 컨테이너, 기본 뷰포트 및 윈도우 등의 요소와 관련하여 해당 요소가 어디에 위치할지 제어할 수 있습니다. 우리가 이번 과정에서 자세하게 다룰 페이지 레이아웃 기술은 다음과 같습니다.

* 일반 흐름(normal flow)
* `display` (en-US) 속성
* 플렉스박스(Flexbox)
* 그리드(Grid)
* 플로트(Floats)
* 포지셔닝
* 테이블 레이아웃
* 다단 레이아웃

각각의 기술은 저마다 용도와 장단점이 있습니다. 어떤 기술도 단독으로 사용하도록 설계되지는 않았습니다. 각 레이아웃 기술이 어떤 용도로 설계된 것인지 이해하게 되면 해당 작업에 가장 적합한 도구가 어떤 것인지 파악할 수 있습니다.

일반 흐름(normal flow)
------------------

일반 흐름(normal flow)은 페이지 레이아웃을 제어하기 위해 아무것도 하지 않을 경우, 브라우저가 기본값으로 HTML 페이지를 배치하는 방법을 말합니다. 간단한 HTML 예를 살펴봅시다:

```html
<p>나는 고양이를 사랑한다.</p>

<ul>
  <li>고양이 먹이를 사세요</li>
  <li>운동</li>
  <li>기운내 친구야</li>
</ul>

<p>여기가 끝!</p>
```

기본적으로 브라우저는 이 코드를 다음과 같이 표시합니다.

HTML이 소스 코드에 나타나는 순서 그대로 표시되는지, 첫 번째 단락과 정렬되지 않은 목록, 두 번째 단락 등 요소들이 서로 겹쳐있는지 확인하세요.

요소들이 서로 나란히 표시되는 요소를 **인라인(inline)** 요소라고 하며, 다른 요소 아래 하나씩 표시되는 요소를 **블록(block)** 요소라고 합니다.

**참고:** 블록 요소 콘텐츠가 배치되는 방향을 블록 방향이라고 합니다. 영어와 같은 언어 상에서 블록 방향은 수직 방향이 되며, 이는 가로쓰기 모드입니다. 일본어와 같은 세로 쓰기 모드가 있는 언어에서는 블록 방향은 수평 방향이 됩니다. 인라인 방향은 문장과 같은 인라인 콘텐츠가 흘러가는 방향을 말합니다.

페이지의 많은 요소에서 일반 흐름(normal flow)은 필요한 레이아웃을 정확히 생성합니다. 그러나 더 복잡한 레이아웃의 경우, CSS에서 사용할 수 있는 몇 가지 도구를 사용하여 이 기본 동작을 변경해야 합니다. 잘 구조화된 HTML 문서로 시작하는 것이 아주 중요한 이유는 기본 레이아웃과 충돌하지 않는 레이아웃으로 작업할 수 있기 때문입니다.

CSS에서 요소가 배치되는 방식을 변경시키는 메서드는 다음과 같습니다.

* **`display` (en-US) 속성** — `block`, `inline` 또는 `inline-block`과 같은 기준 속성값은 일반 흐름(normal flow) 속에서 요소가 동작하는 방식을 변경할 수 있습니다. 예를 들면 블록 요소를 인라인 요소로 동작하게 할 수도 있습니다. (더 자세한 정보는 CSS 박스 유형 (en-US)을 참조하세요). 또한 `display` 속성값 지정을 통해 활성화될 수 있는 전체 레이아웃 메서드도 존재합니다. 그 예로는 CSS 그리드와 플렉스박스가 있으며, 부모 요소 내부에 자식 요소가 배치되는 방식을 변경할 수 있습니다.
* **플로트(Floats)** — `float` 속성의 값을 예로 `left`로 적용하면 흔히 매거진 레이아웃에 속한 이미지가 텍스트를 자신의 주변에 떠 있게 하는 방식과 같이 블록 수준 요소가 어떤 요소의 한쪽 측면으로 밀려나도록 할 수 있다.
* **`position` 속성** — 다른 박스 내부에 있는 박스의 배치를 정밀하게 제어할 수 있습니다. 일반 흐름에서는 `정적(static)` 포지셔닝이 기본값이지만, 브라우저 뷰포트에 고정하는 등 다른 값을 사용하여 요소를 다르게 배치할 수 있습니다.
* **테이블 레이아웃** — HTML 테이블의 일부 스타일을 지정하기 위해 고안된 기능으로, `display: table` 관련 속성을 사용하여 테이블 관련 속성을 비테이블 요소에서도 사용할 수 있습니다.
* **다단 레이아웃** — 다단 레이아웃 속성을 사용하면 마치 신문처럼 블록 콘텐츠를 단 형태로 배치되도록 만들 수 있습니다.
디스플레이(display) 속성
-----------------

CSS 상에서 페이지 레이아웃을 구현하는 주요 방법은 `display` 속성에 포함된 모든 속성의 값을 지정하는 것입니다. 이 속성을 사용하면 무언가를 표시하는 기본값을 변경할 수 있습니다. 일반 흐름(normal flow)상의 모든 요소에는 기본 `display` 속성값, 즉 요소가 작동하도록 설정된 기본 방식을 가지고 있습니다. 예를 들어 영어로 된 단락이 다른 대상 요소 바로 밑에 표시되는 것은 그들 요소의 스타일이 `display: block`으로 지정되었기 때문입니다. 단락 내부 일부 텍스트 주변에 링크를 만들면, 해당 링크는 나머지 텍스트와 함께 인라인을 유지하며 새 줄로 넘어가는 행갈이를 하지 않습니다. 이는 `<a>` 요소가 기본값으로 `display: inline`이기 때문입니다.

이러한 기본값 display 속성을 변경할 수 있습니다. 예를 들어 `<li>` 요소는 기본값으로 `display: block`이므로 영어 문서상에서 다른 대상 요소 바로 밑에 표시됩니다. display 속성값을 `inline`으로 변경하면 문장에서 단어가 나란히 표시되는 것처럼 목록 항목이 나란히 표시됩니다. 모든 요소에 대해 `display` 속성값을 변경할 수 있다는 것은 HTML 요소들이 어떻게 보일지 신경 쓰지 않고, 해당 HTML 요소의 의미론적 의의를 선택할 수 있다는 뜻입니다. 표시 방식은 사용자가 변경할 수 있는 부분입니다.

한 항목을 `block`에서 `inline`으로 바꾸거나, 그 반대로 바꿔 기본 표시 방식을 변경할 수 있는 것 외에도, 하나의 `display` 속성값으로 시작해서 몇 가지 더 복잡한 레이아웃 방법들도 있습니다. 그러나 이러한 방법을 사용할 때는 추가 속성을 호출해야 합니다. 레이아웃의 목적이 무엇인지 논할 때 가장 중요한 두 가지 속성값은 `display: flex`와 `display: grid`이다.

플렉스박스(flexbox)
--------------

플렉스박스(flexbox)는 유연한 박스 레이아웃 CSS 모듈의 줄임말로, 행이나 열을 한 차원으로 쉽게 레이아웃할 수 있도록 설계되었습니다. 플렉스박스를 사용하려면 레이아웃하려는 요소의 부모 요소에 `display: flex`를 적용하면 모든 직계 자식이 *플렉스 항목*이 됩니다. 간단한 예시를 통해 이를 확인할 수 있습니다.

### `display:flex` 설정하기

아래 HTML 마크업은 `wrapper` 클래스를 가진 컨테이너 요소를 제공하고, 그 요소 내부에는 세 개의 `<div>` (en-US) 요소를 가지고 있습니다. 기본적으로 이러한 요소는 영어 문서상에서 블록 요소로 서로 아래에 표시됩니다.

그러나 부모 요소에 `display: flex`를 추가하면 이제 세 항목이 열로 정렬됩니다. 이것은 요소들이 *플렉스 항목*이 되었을 뿐만 아니라 플렉스박스가 설정하는 일부 초기 값의 영향을 받았기 때문입니다. 부모 요소의 `flex-direction` 속성의 초기 값이 `row`이기 때문에 행으로 표시됩니다. 그리고 부모 요소의 `align-items` (en-US) 속성의 초기 값이 `stretch`이기 때문에 모두 높이가 늘어나는 것처럼 보입니다. 즉, 항목이 플렉스 컨테이너의 높이까지 늘어나는데, 이 경우 가장 높은 항목에 의해 정의됩니다. 항목은 모두 컨테이너의 시작 부분에 정렬되며 행 끝에 여분의 공간이 남습니다.
```

\* {
  box-sizing: border-box;
}

.wrapper > div {
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}
```

```css
.wrapper {
  display: flex;
}
```

```html
<div class="wrapper">
  <div class="box1">하나</div>
  <div class="box2">둘</div>
  <div class="box3">셋</div>
</div>
```

### 플렉스 속성 설정하기

*플렉스 콘테이너*에 적용할 수 있는 속성 외에도 *플렉스 항목*에 적용할 수 있는 속성도 있습니다. 이러한 속성은 무엇보다도 항목이 *플렉스*되는 방식을 변경하여 사용 가능한 공간에 따라 항목을 확장하거나 축소할 수 있습니다.

간단한 예로 모든 하위 항목에 `flex` 속성을 추가하고 값을 `1`로 지정할 수 있습니다. 이렇게 하면 끝에 공간이 남지 않고, 모든 항목이 커져서 컨테이너를 채우게 됩니다. 공간이 더 많으면 항목이 더 넓어지고, 공간이 더 적다면 항목이 더 좁아집니다. 또한 마크업에 다른 요소를 추가하면 해당 요소를 위한 공간을 만들기 위해 다른 항목이 모두 작아지며, 모든 항목이 계속해서 모든 공간을 차지하게 됩니다.
```

\* {
  box-sizing: border-box;
}

.wrapper > div {
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}
```

```css
.wrapper {
  display: flex;
}

.wrapper > div {
  flex: 1;
}
```

```html
<div class="wrapper">
  <div class="box1">하나</div>
  <div class="box2">둘</div>
  <div class="box3">셋</div>
</div>
```

**참고:** 지금까지 플렉스박스에서 가능한 기능에 대해 간략히 소개했습니다. 더 자세한 내용은 flexbox 편을 참조하세요.

그리드 레이아웃
--------

플렉스박스는 일차원 레이아웃을 위해 설계된 반면, 그리드 레이아웃은 행과 열로 정렬하는 이차원 레이아웃을 위해 설계되었습니다.

### `display:grid` 설정하기

플렉스박스와 마찬가지로 디스플레이 속성에 `display: grid`라는 특정 값을 지정하면 그리드 레이아웃으로 활성화할 수 있다. 아래 예시에서는 플렉스 예시와 유사한 마크업을 사용하여 컨테이너와 일부 자식 요소를 사용합니다. `display: grid`를 사용하는 것 외에도 `grid-template-rows` (en-US)와 `grid-template-columns` 속성을 사용하여 부모 요소에 대한 행과 열 칸을 정의합니다. 각각 `1fr`값이 지정된 3개의 열과 `100px`이 지정된 2개의 행을 정의했습니다. 그리드에서 생성한 셀에 자동으로 배치되므로 자식 요소에 규칙을 적용할 필요가 없습니다.
```

\* {
  box-sizing: border-box;
}

.wrapper > div {
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}
```

```css
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-gap: 10px;
}
```

```html
<div class="wrapper">
  <div class="box1">하나</div>
  <div class="box2">둘</div>
  <div class="box3">셋</div>
  <div class="box4">넷</div>
  <div class="box5">다섯</div>
  <div class="box6">여섯</div>
</div>
```

### 그리드에 항목 배치하기

그리드가 있으면 위에 표시된 자동 배치 동작에 의존하지 않고, 명시적으로 항목을 그리드에 배치할 수 있습니다. 아래 다음 예제에서는 동일한 그리드를 정의했지만, 이번에는 세 개의 하위 항목이 정의했습니다. `grid-column` (en-US)과 `grid-row` (en-US)를 사용해서 각 항목의 시작 및 끝 줄을 설정했습니다. 이렇게 하면 항목이 여러 칸에 걸쳐있습니다.
```

\* {
  box-sizing: border-box;
}

.wrapper > div {
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}
```

```css
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-gap: 10px;
}

.box1 {
  grid-column: 2 / 4;
  grid-row: 1;
}

.box2 {
  grid-column: 1;
  grid-row: 1 / 3;
}

.box3 {
  grid-row: 2;
  grid-column: 3;
}
```

```html
<div class="wrapper">
  <div class="box1">하나</div>
  <div class="box2">둘</div>
  <div class="box3">셋</div>
</div>
```

**참고:** 이 두 예제는 그리드 레이아웃의 강력한 기능을 보여주는 작은 샘플에 불과합니다. 자세한 내용은 그리드 레이아웃 문서를 참조하세요.

이 가이드의 나머지 부분에서는 페이지의 기본 레이아웃 구조로 보기엔 덜 중요하지만, 특정 작업을 수행하는 데 여전히 도움이 될 수 있는 다른 레이아웃 방법을 다룹니다. 각 레이아웃 작업의 특성을 이해함으로써 디자인의 특정 구성 요소를 볼 때, 해당 구성 요소에 가장 적합한 레이아웃 유형이 명확하게 드러나는 경우가 많습니다.

플로트(Floats)
-----------

요소를 플로팅 하면 일반 흐름(normal flow)에서 해당 요소와 그 뒤에 따르는 블록 수준 요소의 동작이 변경됩니다. 플로팅 된 요소는 왼쪽이나 오른쪽으로 이동되어 일반 흐름(normal flow)에서 벗어나게 되며 주변 콘텐츠가 그 주위에 떠 있습니다.

이 `float` 속성은 네 가지 값을 가질 수 있습니다.

* `left` — 요소를 왼쪽으로 띄웁니다.
* `right` — 요소를 오른쪽으로 띄웁니다.
* `none` — 플로팅을 전혀 지정하지 않습니다. 이것이 기본값입니다.
* `inherit` — 플로팅 속성의 값을 요소의 부모 요소에서 상속하도록 지정합니다.

아래 예제에서 `<div>`를 왼쪽으로 띄우고, 오른쪽에 `margin`을 두어 주변 텍스트를 밀어냅니다. 이렇게 하면 텍스트가 박스 요소를 감싸는 효과를 얻을 수 있으며, 최신 웹 디자인에서 사용되는 플로트에 대해 알아야 할 대부분의 내용을 알 수 있습니다.
```

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

p {
  line-height: 2;
  word-spacing: 0.1rem;
}

.box {
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  padding: 10px;
  border-radius: 5px;
}
```

```html
<h1>간단한 플로트 예제</h1>

<div class="box">플로트</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
</p>
```

```css
.box {
  float: left;
  width: 150px;
  height: 150px;
  margin-right: 30px;
}
```

**참고:** 플로트에 대한 설명은 플로트 및 해제 속성 편에서 충분히 다룹니다. 플렉스박스 및 그리드 레이아웃과 같은 기술이 나오기 이전에 플로트는 열 레이아웃을 만드는 방법으로 사용되었습니다. 웹에서 여전히 이러한 방법을 접할 수 있으며, 레거시 레이아웃 방법에서 그 내용을 다룰 것입니다.

포지셔닝 기술
-------

포지셔닝을 사용하면 요소를 일반 흐름(normal flow)에서 배치되는 위치에서 다른 위치로 이동할 수 있습니다. 포지셔닝은 페이지의 기본 레이아웃을 만드는 방법이 아니라, 페이지에서 특정 항목의 위치를 관리하고 미세 조정하는 데 사용됩니다.

그러나 `position` 속성에 의존하는 특정 레이아웃 패턴을 얻는 데 유용한 기술이 있습니다. 포지셔닝를 이해하면 일반 흐름(normal flow)과 항목을 정상적인 흐름에서 벗어나는 것이 무엇을 의미하는지 이해하는 데도 도움이 됩니다.

알아야 할 다섯 가지 유형의 포지셔닝이 있습니다.

* **정적(static) 포지셔닝**은 모든 요소에 기본값으로 부여된 속성입니다. 이는 "문서 레이아웃 흐름에서 요소를 정상 위치에 배치하는 것이며, 특별히 더 살펴볼 것은 없다는 것"을 의미합니다.
* **상대(relative) 포지셔닝**을 사용하면 페이지에서 요소의 위치를 수정하여 일반 흐름의 위치에 비해 상대적으로 이동하고, 페이지의 다른 요소와 겹치도록 만들 수 있습니다.
* **절대(absolute) 포지셔닝**은 요소를 페이지의 일반적인 레이아웃 흐름에서 완전히 벗어나 마치 별도의 레이어에 있는 것처럼 이동시킵니다. 여기에서 가장 가까운 위치에 있는 상위요소의 가장자리를 기준으로 한 위치를 고정할 수 있습니다.(다른 상위 요소가 없는 경우, `<html>`이 기준이 됨.) 이 기능은 서로 다른 콘텐츠 패널이 서로 겹쳐져 있고, 원하는 대로 표시되거나 숨겨지는 탭 상자나, 기본적으로 화면 밖에 있지만 제어 버튼을 사용하여 화면에서 슬라이드되도록 만들 수 있는 정보 패널과 같은 복잡한 레이아웃 효과를 만드는 데 유용합니다.
* **고정(fixed) 포지셔닝**은 다른 요소가 아닌 브라우저 뷰포트를 기준으로 요소를 고정한다는 점을 제외하면 절대 포지셔닝과 매우 유사합니다. 이 방법은 나머지 콘텐츠가 스크롤될 때, 항상 화면의 같은 위치에 유지되는 영구 탐색 메뉴와 같은 효과를 만드는 데 유용합니다.
* **스티키(sticky) 포지셔닝**은 뷰포트에서 사전에 정의된 오프셋에 도달할 때까지 요소가 `position: relative`와 같이 작동하고, 그 시점부터는 `position: fixed`와 같이 작동하는 새로운 포지셔닝 방법입니다.
### 간단한 포지셔닝 예제

이러한 페이지 레이아웃 기술에 친숙해지도록 몇 가지 간단한 예시를 보여드리겠습니다. 예제는 모두 다음과 같은 동일한 HTML 구조(제목 뒤에 세 개의 단락이 있는)를 사용합니다.

```html
<h1>포지셔닝</h1>

<p>나는 기본 블록 수준 요소입니다.</p>
<p class="positioned">나는 기본 블록 수준 요소입니다.</p>
<p>나는 기본 블록 수준 요소입니다.</p>
```

이 HTML은 다음 CSS를 사용하여 스타일이 지정됩니다.

```css
body {
  width: 500px;
  margin: 0 auto;
}

p {
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}
```

렌더링된 출력은 다음과 같습니다.

### 상대(relative) 포지셔닝

상대 포지셔닝을 사용하면 일반 흐름에서 항목을 기본 위치에서 주어지는 오프셋만큼 간격을 띄울 수 있습니다. 즉, 아이콘을 약간 아래로 이동하여 텍스트와 일직선이 되도록 하는 등의 작업을 수행할 수 있습니다. 이를 위해 다음 규칙을 추가하여 상대 포지셔닝을 추가할 수 있습니다.

```css
.positioned {
  position: relative;
  top: 30px;
  left: 30px;
}
```

여기서는 중간 단락에 `position` 값을 `relative`로 지정합니다. 이것은 그 자체적로는 아무것도 하지 않으므로 `top` (en-US) 및 `left` (en-US) 속성도 추가합니다. 이는 영향을 받는 요소를 아래쪽과 오른쪽으로 이동시키는 역할을 합니다. 이는 기대했던 것과 반대되는 것처럼 보일 수 있지만, 요소가 왼쪽과 위쪽에서 밀려서 오른쪽과 아래로 이동한다고 생각하면 됩니다.

이 코드를 추가하면 다음과 같은 결과가 나타납니다.
```

<h1>상대 포지셔닝</h1>

<p>나는 기본 블록 수준 요소입니다.</p>
<p class="positioned">이것은 내가 상대적으로 포지셔닝한 요소입니다.</p>
<p>나는 기본 블록 수준 요소입니다.</p>
```

```
body {
  width: 500px;
  margin: 0 auto;
}

p {
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}
```

```css
.positioned {
  position: relative;
  background: rgba(255, 84, 104, 0.3);
  border: 2px solid rgb(255, 84, 104);
  top: 30px;
  left: 30px;
}
```

### 절대(absolute) 포지셔닝

절대 포지셔닝은 일반 흐름(normal flow)에서 요소를 완전히 제거하고, 대신 컨테이너 블록의 가장자리로부터 오프셋을 사용하여 요소를 배치하는 데 사용됩니다.

원래의 포지셔닝 되지 않은 예제로 돌아가서 다음 CSS 규칙을 추가하여 절대 위치 지정을 구현할 수 있습니다.

```css
.positioned {
  position: absolute;
  top: 30px;
  left: 30px;
}
```

여기서는 중간 단락에 `position` 값을 `absolute`로 지정하고, 이전과 동일한 `top` (en-US)과 `left` (en-US)속성을 지정합니다. 이 코드를 추가하면 다음과 같은 결과가 생성됩니다.
```

<h1>절대 포지셔닝</h1>

<p>나는 기본 블록 수준 요소입니다.</p>
<p class="positioned">이것은 내가 절대적으로 포지셔닝한 요소입니다.</p>
<p>나는 기본 블록 수준 요소입니다.</p>
```

```
body {
  width: 500px;
  margin: 0 auto;
}

p {
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}
```

```css
.positioned {
  position: absolute;
  background: rgba(255, 84, 104, 0.3);
  border: 2px solid rgb(255, 84, 104);
  top: 30px;
  left: 30px;
}
```

아주 많이 달라졌습니다! 이제 배치된 요소가 페이지 레이아웃의 나머지 부분과 완전히 분리되어 그 위에 배치됩니다. 다른 두 단락은 이제 위치가 지정된 형제 단락이 존재하지 않는 것처럼 함께 배치됩니다. `top` (en-US) 및 `left` (en-US) 속성은 상대 포지셔닝 요소에 대해 미치는 것과는 다르게 절대 포지셔닝 요소에 대해 영향을 줍니다. 이 경우 오프셋은 페이지의 상단과 왼쪽에서 계산되었습니다. 이 컨테이너가 되는 부모 요소를 변경할 수 있으며, 포지셔닝에 관한 과정에서 이에 대해 살펴보겠습니다.

### 고정(fixed) 포지셔닝

고정 포지셔닝은 절대 포지셔닝과 같은 방식으로 문서 일반 흐름에서 요소를 제거합니다. 그러나 오프셋이 컨테이너에서 적용되는 대신 뷰포트를 기준으로 적용됩니다. 항목이 뷰포트 기준으로 고정되기 때문에 페이지가 아래로 스크롤될 때 고정된 상태로 유지되는 메뉴와 같은 효과를 만들 수 있습니다.

이번 예제에서는 페이지를 스크롤할 수 있도록 세 단락의 텍스트와 `position: fixed`가 지정된 박스가 포함되어 있습니다.

```html
<h1>고정 포지셔닝</h1>

<div class="positioned">고정</div>

<p>단락 1.</p>
<p>단락 2.</p>
<p>단락 3.</p>
```

```
<h1>고정 포지셔닝</h1>

<div class="positioned">고정</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
</p>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
</p>
```

```
body {
  width: 500px;
  margin: 0 auto;
}

.positioned {
  background: rgba(255, 84, 104, 0.3);
  border: 2px solid rgb(255, 84, 104);
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}
```

```css
.positioned {
  position: fixed;
  top: 30px;
  left: 30px;
}
```

### 스티키(sticky) 포지셔닝

스티키 포지셔닝은 포지셔닝 유형 중 남은 마지막 포지셔닝 방법입니다. 상대 포지셔닝과 고정 포지셔닝을 혼합한 것입니다. 항목에 `position: sticky`가 지정된 경우, 해당 항목은 뷰포트 기준에서 오프셋에 도달할 때까지 일반 흐름으로 스크롤 됩니다. 이 시점에서 `position: fixed`가 적용된 것처럼 "고정"됩니다.
```

<h1>스티키 포지셔닝</h1>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
</p>

<div class="positioned">스티키</div>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
</p>
```

```
body {
  width: 500px;
  margin: 0 auto;
}

.positioned {
  background: rgba(255, 84, 104, 0.3);
  border: 2px solid rgb(255, 84, 104);
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}
```

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

**참고:** 포지셔닝에 대해 더 알아보고 싶다면, 포지셔닝 문서를 참조하세요.

테이블 레이아웃
--------

HTML 테이블은 테이블 형식의 데이터를 표시하는 데 적합하지만, 수년 전, 즉 기본적인 CSS조차 브라우저에서 안정적으로 지원되기 전에는 웹 개발자가 전체 웹 페이지 레이아웃에도 테이블을 사용하여 머리글, 바닥글, 열 등을 다양한 테이블 행과 열에 넣곤 했습니다. 이 방식은 당시에는 효과가 있었지만, 테이블 레이아웃이 유연하지 않고, 마크업이 매우 무거우며, 디버깅이 어렵고, 의미상 잘못된 점(예: 스크린 리더 사용자가 테이블 레이아웃을 탐색하는 데 문제가 있음) 등 많은 문제점을 가지고 있었습니다.

테이블 마크업을 사용할 때, 웹 페이지에서 테이블이 보이는 방식은 테이블 레이아웃을 정의하는 일련의 CSS 속성에 의해 표시됩니다. 이러한 동일한 속성은 테이블이 아닌 요소를 레이아웃하는 데 사용할 수 있으며, 이를 "CSS 테이블 용법"이라고 설명하기도 합니다.

아래 예시는 이러한 사용법을 보여줍니다. 레이아웃에 CSS 테이블을 사용하는 것은 현재로서는 레거시 방법으로 간주되어야 하며, 플렉스박스 또는 그리드를 지원하지 않는 구형 브라우저를 지원할 때만 사용해야 한다는 점에 유의해야 합니다.

예제를 살펴보겠습니다. 우선, HTML 양식을 만드는 간단한 마크업입니다. 각 입력 요소에는 레이블이 있으며, 단락 안에 캡션도 포함했습니다. 각 레이블/입력 요소 쌍은 레이아웃을 위해 `<div>` (en-US) 요소에 둘러싸여 있습니다.

```html
<form>
  <p>우선, 이름과 나이를 말씀해주세요</p>
  <div>
    <label for="이름">이름:</label>
    <input type="text" id="이름" />
  </div>
  <div>
    <label for="성">성:</label>
    <input type="text" id="성" />
  </div>
  <div>
    <label for="나이">나이:</label>
    <input type="text" id="나이" />
  </div>
</form>
```

CSS의 경우 `display` (en-US) 속성을 사용하는 것을 제외하면 대부분 평범합니다. `<form>`과 `<div>` (en-US), `<label>`, `<input>` (en-US)은 각각 테이블, 테이블 행, 테이블 셀처럼 표시되도록 지정되었습니다. 기본적으로 HTML 테이블 마크업처럼 작동하여 기본적으로 레이블과 입력이 멋지게 정렬됩니다. 그런 다음 약간의 크기 조정, 여백 등을 추가하여 모든 것이 좀 더 멋지게 보이도록 하면 완료됩니다.

캡션 단락에 `display: table-caption;`을 지정하여 테이블 `<caption>`처럼 동작하도록 하고, 또한 캡션이 소스의 `<input>` 요소 앞에 있지만 스타일 지정 목적으로 캡션이 테이블 하단에 위치하도록 하기 위해 `caption-side: bottom;`이 지정되어 있음을 알 수 있습니다. 이를 통해 약간의 유연성을 확보할 수 있습니다.

```css
html {
  font-family: sans-serif;
}

form {
  display: table;
  margin: 0 auto;
}

form div {
  display: table-row;
}

form label,
form input {
  display: table-cell;
  margin-bottom: 10px;
}

form label {
  width: 200px;
  padding-right: 5%;
  text-align: right;
}

form input {
  width: 300px;
}

form p {
  display: table-caption;
  caption-side: bottom;
  width: 300px;
  color: #999;
  font-style: italic;
}
```

이렇게 하면 다음과 같은 결과가 나옵니다.

이 예제는 CSS 테이블 예제.html에서 실시간으로 볼 수 있고, 소스 코드도 참조할 수 있습니다.

**참고:** 이 페이지의 다른 주제와 달리 표 레이아웃은 레거시 적용으로 인해 이 과정에서 더 이상 다루지 않습니다.

다단 레이아웃
-------

다단 레이아웃 CSS 모듈은 신문에서 텍스트가 흐르는 방식과 유사하게 콘텐츠를 열로 배치하는 방법을 제공합니다. 사용자가 위아래로 스크롤해야 하기 때문에 웹 환경에서는 열을 위아래로 읽는 것이 덜 유용하지만, 그럼에도 불구하고 콘텐츠를 열로 배열하는 것은 유용한 기술이 될 수 있습니다.

한 블록을 다단 컨테이너로 바꾸려면 `column-count` (en-US) 속성을 사용하여, 브라우저에 원하는 열 수를 지정하거나 `column-width` (en-US) 속성을 사용하여 지정된 너비의 열로 컨테이너를 최대한 많이 채우도록 지시합니다.

아래 예제에서는 `container` 클래스에 해당하는 `<div>` 요소를 포함하는 HTML 블록으로 시작합니다.

```html
<div class="container">
  <h1>다단 레이아웃</h1>

  <p>단락 1.</p>
  <p>단락 2.</p>
</div>
```

해당 컨테이너에 200픽셀의 열 너비를 사용하므로, 브라우저에서 200픽셀 열을 최대한 많이 만들게 됩니다. 열 사이에 남은 공간은 모두 공유됩니다.
```

<div class="container">
  <h1>다단 레이아웃</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
    ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
    vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
    Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
    sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
    Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
    eget fermentum sapien.
  </p>

  <p>
    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </p>
</div>
```

```
body {
  max-width: 800px;
  margin: 0 auto;
}
```

```css
.container {
  column-width: 200px;
}
```

요약
--

이 글에서는 알아야 할 모든 레이아웃 기술에 대해 간략하게 요약했습니다. 각 개별 기술에 대한 자세한 내용을 계속 읽어보세요!

* Overview: CSS layout
* 다음


그리드 - Web 개발 학습하기

그리드
===

* 이전
* Overview: CSS layout
* 다음

CSS 그리드 레이아웃은 웹페이지를 위한 이차원 레이아웃 시스템입니다. 이 기능을 통해 콘텐츠를 행과 열에 배치할 수 있으며 복잡한 레이아웃을 직접 직관적으로 구축할 수 있는 많은 기능이 있습니다. 이 글은 페이지 레이아웃을 시작하기 위해 필요한 모든 것을 알려드립니다.

|  |  |
| --- | --- |
| 선결 사항: |
 HTML 기본 (HTML 입문
 학습), CSS의 작동 방식
 CSS 입문 및 (박스 양식 지정
 학습)
  |
| 목표: | 그리드 레이아웃 시스템의 근간 개념과 그리드 레이아웃 구현 방법 이해하기 |

그리드 레이아웃이란 무엇인가?
----------------

그리드는 수평선과 수직선으로 이루어진 집합체로, 디자인 요소를 정렬할 수 있는 대상 패턴을 생성합니다. 이 디자인은 페이지에서 페이지로 이동할 때 요소가 널뛰거나 너비가 바뀌지 않는 디자인 생성에 도움을 주어 웹 사이트의 일관성을 높여줍니다.

하나의 그리드은 대게 **columns**, **rows**로 구성되며, 각 행과 열 사이에 공백이 있는데, 대게는 이를 일컬어 **gutters**라고 부릅니다.

![행, 열, 여백으로 레이블이 지정된 부분이 있는 CSS 그리드입니다. 행은 그리드의 가로 세그먼트이고 열은 그리드의 세로 세그먼트입니다. 두 행 사이의 공간을 '행 여백'이라고 하고 두 열 사이의 공간을 '열 여백'이라고 합니다.](/ko/docs/Learn/CSS/CSS_layout/Grids/grid.png)

CSS에서 그리드 생성하기
--------------

당신의 디자인에 필요한 그리드를 결정했다면 해당 CSS 그리드 레이아웃을 생성하고 그 위에 항목을 올려놓기 위해 CSS 그리드 레이아웃을 사용할 수 있습니다. 우리는 먼저 그리드 레이아웃의 기본 기능을 살펴보고 난 뒤 당신의 프로젝트에 맞는 간단한 그리드 시스템을 생성하는 방법을 살펴보겠습니다.

다음 동영상은 CSS 그리드 사용에 대한 멋진 시각적 설명을 제공합니다.

### 그리드의 정의

본격적인 출발에 앞서 텍스트 편집기 및 브라우저 상에서 시작 파일을 다운로드하고 엽니다(여기에서 라이브로 볼 수도 있습니다). 예를 들어, 당신은 일부 자식 항목이 있는 컨테이너 예제를 보게됩니다. 기본값으로 이들은 일반 대열로 표시되므로 상자들은 다른 대상 요소 바로 밑에 표시됩니다. 우리는 이 단원의 첫 번째 부분은 이 (시작) 파일을 가지고 작업할 것이며, 거기에 변경을 더해 그리드가 어떻게 동작하는지 확인하게 됩니다.

`display` (en-US) 속성에 `grid` 값을 사용해 그리드를 규정합니다. 이로써 Flexbox와 마찬가지로 그리드 레이아웃으로 전환하며, 컨테이너의 직계 자식 전체가 그리드 아이템이 됩니다. 내려받은 시작 파일 내부 CSS 부분에 다음을 추가하세요.

```css
.container {
  display: grid;
}
```

플렉스박스와 달리 항목이 즉시 다르게 보이지는 않습니다. `display: grid`를 선언하면 한 열 그리드가 생성되므로 일반 흐름에서와 마찬가지로 항목이 다른 항목 아래에 계속 표시됩니다.

그리드처럼 보이는 것을 보려면 그리드에 열을 추가해야 합니다. 200픽셀 열 3개를 추가해 보겠습니다. 길이 단위나 백분율을 사용하여 이러한 열 트랙을 만들 수 있습니다.

```css
.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}
```

두 번째 선언을 CSS 규칙에 추가한 다음 페이지를 새로고침합니다. 그리드의 각 셀에 항목이 하나씩 있도록 항목이 재정렬된 것을 볼 수 있습니다.
```

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}
```

```
<div class="container">
  <div>하나</div>
  <div>둘</div>
  <div>셋</div>
  <div>넷</div>
  <div>다섯</div>
  <div>여섯</div>
  <div>일곱</div>
</div>
```

### fr 단위를 포함한 가변 그리드

길이와 백분율을 사용하여 그리드를 생성하는 것 외에도 `fr` 단위를 사용하여 그리드 행과 열을 가변적으로 조정할 수 있습니다. `fr` 단위는 그리드 컨테이너에서 그리드 행과 열의 크기를 유연하게 조정할 수 있는 사용 가능한 공간의 한 분율을 나타냅니다.

트랙 목록을 다음과 같이 정의로 변경하여, 세 개의 `1fr` 트랙을 생성합니다.

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

이제 가변 트랙이 생겼습니다. `fr` 단위는 공간을 비례적으로 분배합니다. 다음과 같이 트랙에 다른 양수 값을 지정할 수 있습니다.

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

첫 번째 트랙은 사용 가능한 공간의 `2fr`을 차지하고 다른 두 트랙은 `1fr`을 차지하여 첫 번째 트랙이 더 커집니다. `fr` 단위와 고정 길이 단위를 혼합할 수 있습니다. 이 경우 고정 트랙에 필요한 공간이 먼저 소진된 후 나머지 공간이 다른 트랙에 분배됩니다.
```

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}
```

```
<div class="container">
  <div>하나</div>
  <div>둘</div>
  <div>셋</div>
  <div>넷</div>
  <div>다섯</div>
  <div>여섯</div>
  <div>일곱</div>
</div>
```

**참고:** `fr` 단위는 *전체* 공간이 아닌 *이용 가능한* 공간을 분배합니다. 따라서 당신의 트랙 중 하나가 자기 내부에 뭔가 큰 공간을 차지한다면 공유할 수 있는 여유 공간이 줄어들 것입니다.

### 트랙 사이 간격

트랙 사이에 간격을 만들려면 프로퍼티를 사용합니다.

* `column-gap` (en-US) 열 사이의 간격
* `row-gap` (en-US) 행 사이의 간격
* `gap` 열과 행 모두의 약어

```css
.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: 20px;
}
```

이러한 간격은 길이 단위 또는 백분율이 될 수 있지만, `fr` 단위는 될 수 없습니다.
```

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}
```

```
<div class="container">
  <div>하나</div>
  <div>둘</div>
  <div>셋</div>
  <div>넷</div>
  <div>다섯</div>
  <div>여섯</div>
  <div>일곱</div>
</div>
```

**참고:** `gap` 속성(`column-gap`, `row-gap`, `gap`)은 예전에는 `grid-` 접두사를 사용하곤 했습니다. 사양은 변경되었지만 접두사가 붙은 버전은 별칭으로 유지됩니다. 안전을 보장하고 코드의 보안을 강화하려면 두 속성을 모두 추가할 수 있습니다.

```css
.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
}
```

### 트랙 목록의 반복

 CSS `repeat()` 함수를 사용하여 트랙 목록의 전체 또는 일부 섹션만 반복할 수 있습니다.
 트랙 목록을 다음과 같이 변경합니다.

```css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}
```

이제 당신은 이전과 마찬가지로 3개의 `1fr` 트랙을 얻을 수 있습니다. `repeat()` 함수에 전달되는 첫 번째 값은 목록을 반복할 횟수를 지정하고, 두 번째 값은 트랙 목록으로, 반복하려는 트랙이 하나 이상일 수 있습니다.

### 암시적 그리드와 명시적 그리드

지금까지는 열 트랙만 지정했지만, 콘텐츠를 저장하기 위해 행도 만들어지고 있습니다. 이것은 명시적 그리드와 암시적 그리드의 예시입니다.

차이

* 명시적 그리드: `grid-template-columns` 또는 `grid-template-rows`을 사용하여 생성합니다.
* 암시적 그리드: 콘텐츠가 해당 그리드 외부(예: 행)에 배치될 때 추가 그리드 선을 그려서 정의된 명시적 그리드를 확장합니다.

기본값으로 암시적 그리드 상에 생성된 트랙은 `auto` 크기이며, 이는 일반적으로 콘텐츠를 알맞게 들여놓기에 충분히 크다는 것을 의미합니다. 당신이 암시적 그리드 트랙에 크기를 지정하려면 `grid-auto-rows` (en-US)와 `grid-auto-columns` (en-US) 속성을 사용할 수 있습니다. `grid-auto-rows`에 `100px` 값을 추가하면 생성된 행의 높이가 100픽셀이 되는 것을 확인할 수 있습니다.
```

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}
```

```
<div class="container">
  <div>하나</div>
  <div>둘</div>
  <div>셋</div>
  <div>넷</div>
  <div>다섯</div>
  <div>여섯</div>
  <div>일곱</div>
</div>
```

```css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 20px;
}
```

### minmax() 함수

100픽셀 높이의 트랙에 100픽셀보다 큰 콘텐츠를 추가하면 오버플로우가 발생하기 때문에 100픽셀 높이의 트랙은 그다지 유용하지 않습니다. 콘텐츠가 더 추가되더라도 확장할 수 있는 100픽셀 이상의 트랙을 사용하는 것이 더 좋을 수 있습니다. 웹에서 가장 기본적인 사실은 콘텐츠가 얼마나 길어질지 알 수 없다는 것입니다. 콘텐츠를 추가하거나 글꼴 크기가 커지면 모든 치수에 픽셀을 완벽하게 맞추려는 디자인에 문제가 발생할 수 있습니다.

`minmax()` (en-US) 함수는 트랙의 최소 및 최대 크기를 설정할 수 있게 해줍니다(예: `minmax(100px, auto)`). 최소 크기는 100 픽셀이지만 최대 크기는 `auto`로써 더 많은 콘텐츠를 수용하기 위해 확장됩니다. 최소최대값을 사용하도록 `grid-auto-rows`를 변경해 보세요.

```css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  gap: 20px;
}
```

콘텐츠를 추가하면 트랙이 트랙에 맞게 확장되는 것을 볼 수 있습니다. 행을 따라 바로 확장된다는 점에 유의하세요.

### 들어맞을 때까지 열 생성

우리는 트랙 목록, 반복 표기법, {cssxref("minmax", "minmax()")} 등에 대해 우리가 배운 몇 가지를 결합하여 유용한 패턴을 만들 수 있습니다. 때로는 그리드에 컨테이너에 들어갈 수 있는 만큼의 열을 만들도록 요청하는 것이 유용할 수 있습니다. 이를 위해 `repeat()` (en-US) 함수를 사용하여 `grid-template-columns` 값을 설정하되, 숫자를 전달하는 대신 `auto-fit` 키워드를 전달합니다. 함수의 두 번째 매개변수에는 최소값은 원하는 최소 트랙 크기와 같고 최대값은 `1fr`인 `minmax()`를 사용합니다.

아래 CSS를 사용하여 지금 파일에서 이 기능을 사용해 보세요.
```

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}
```

```
<div class="container">
  <div>하나</div>
  <div>둘</div>
  <div>셋</div>
  <div>넷</div>
  <div>다섯</div>
  <div>여섯</div>
  <div>일곱</div>
</div>
```

```css
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  gap: 20px;
}
```

그리드가 컨테이너에 들어갈 수 있는 만큼의 200픽셀 열을 생성한 다음 모든 열에 남은 공간을 공유하기 때문에 작동합니다. 최대값은 `1fr`로, 이미 알고 있듯이 트랙 간에 공간을 균등하게 분배합니다.

라인 기반 배치
--------

이제 우리는 그리드를 만드는 것에서 그리드에 사물을 배치하는 것으로 넘어갑니다. 우리의 그리드에는 항상 라인이 있으며, 이 라인은 1에서 시작하며, 문서의 CSS Writing Modes와 관련이 있습니다. 예를 들어 영어(왼쪽에서 오른쪽으로 작성)의 경우 그리드의 왼쪽에 열 1줄이 있고 상단에 행 1줄이 있으며, 아랍어(오른쪽에서 왼쪽으로 작성)의 경우 열 1줄이 오른쪽에 있습니다.

시작 라인과 끝 라인을 지정하여 이 라인에 따라 사물을 정렬할 수 있습니다. 다음 속성을 사용하여 이 작업을 수행합니다.

* `grid-column-start` (en-US)
* `grid-column-end` (en-US)
* `grid-row-start` (en-US)
* `grid-row-end` (en-US)

이러한 속성은 모두 라인 번호를 값으로 사용할 수 있습니다. 약칭으로 속성을 사용할 수도 있습니다.

* `grid-column` (en-US)
* `grid-row` (en-US)

이를 통해 시작 줄과 끝 줄을 슬래시 `/`로 구분하여 한 번에 지정할 수 있습니다.

착수 파일로 이 파일을 다운로드하세요. 또는 여기 라이브로도 보세요.. 여기에는 정의된 그리드와 간단한 글의 개요가 있습니다. *auto-placement*가 각 항목을 그리드의 자체 셀에 배치하는 것을 볼 수 있습니다.

대신 그리드 라인을 사용하여 사이트의 모든 요소를 정렬해 보겠습니다. CSS 하단에 다음 규칙을 추가합니다.

```css
header {
  grid-column: 1 / 3;
  grid-row: 1;
}

article {
  grid-column: 2;
  grid-row: 2;
}

aside {
  grid-column: 1;
  grid-row: 2;
}

footer {
  grid-column: 1 / 3;
  grid-row: 3;
}
```

```
body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 20px;
}

header,
footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}

aside {
  border-right: 1px solid #999;
}
```

```
<div class="container">
  <header>이것은 나의 사랑스런 블로그입니다</header>
  <article>
    <h1>내 글</h1>
    <p>
      Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
      imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus
      massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
      egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada
      et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac
      imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
      ornare egestas augue ut luctus. Proin blandit quam nec lacus varius
      commodo et a urna. Ut id ornare felis, eget fermentum sapien.
    </p>

    <p>
      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
      est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
      tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
      lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra
      quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis
      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    </p>
  </article>
  <aside>
    <h2>다른 것들</h2>
    <p>
      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
      est.
    </p>
  </aside>
  <footer>Contact me@example.com</footer>
</div>
```

**참고:** 마지막 열 또는 행 라인을 상대로 `-1` 값을 사용할 수 있으며, 음수값을 사용하여 끝에서 안쪽으로 카운트할 수도 있습니다. 줄은 항상 implicit grid가 아닌 명시적 격자의 가장자리부터 계산된다는 점에 유의하세요.

grid-template-areas로 위치잡기
-------------------------

그리드에서 항목을 정렬하는 다른 방법은 `grid-template-areas` (en-US) 속성을 사용하여 디자인의 다양한 요소에 이름을 지정하는 것입니다.

마지막 예제에서 라인 기반 위치잡기를 제거하고(또는 파일을 다시 다운로드하여 새로운 시작점을 확보하세요) 다음 CSS를 추가합니다.

```css
.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  gap: 20px;
}

header {
  grid-area: header;
}

article {
  grid-area: content;
}

aside {
  grid-area: sidebar;
}

footer {
  grid-area: footer;
}
```

페이지를 새로고침하면, 우리가 어떤 라인 번호를 사용할 필요없이 방금 전과 같이 항목이 배치되었음을 알 수 있습니다!
```

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

header,
footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}

aside {
  border-right: 1px solid #999;
}
```

```
<div class="container">
  <header>이것은 나의 사랑스런 블로그입니다</header>
  <article>
    <h1>내 글</h1>
    <p>
      Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
      imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus
      massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
      egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada
      et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac
      imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
      ornare egestas augue ut luctus. Proin blandit quam nec lacus varius
      commodo et a urna. Ut id ornare felis, eget fermentum sapien.
    </p>

    <p>
      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
      est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
      tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
      lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra
      quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis
      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    </p>
  </article>
  <aside>
    <h2>다른 것들</h2>
    <p>
      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
      est.
    </p>
  </aside>
  <footer>Contact me@example.com</footer>
</div>
```

`grid-template-areas`에 대한 규칙은 다음과 같습니다.

* 그리드로 이뤄진 전체 셀을 채우도록 해야 합니다.
* 두 개의 셀을 합치려면 해당 이름을 반복하세요.
* 셀을 비우려면 `.`(마침표)를 사용하세요.
* 영역은 반드시 직사각형이어야 합니다. 예를 들어 L자 모양의 면적을 취할 수는 없습니다.
* 영역은 다른 위치에서 반복될 수 없습니다.

바닥글을 글 바로 밑에만 위치하도록 변경하고 사이드바를 아래까지 길게 늘어뜨리는 등 레이아웃을 마음대로 바꿔볼 수 있습니다. CSS만 봐도 어떤 일이 일어나고 있는지 정확히 알 수 있으므로 레이아웃을 설명하는 데 매우 좋은 방법입니다.

CSS 그리드의 그리드 프레임워크
------------------

그리드 "프레임워크"는 12열 또는 16열 그리드를 기반으로 하는 경향이 있습니다. CSS 그리드를 사용하면 이러한 프레임워크를 제공하기 위해 타사 도구가 필요하지 않으며 사양에 이미 포함되어 있습니다.

착수 파일을 다운로드하세요.. 여기에는 12열 그리드가 정의된 컨테이너와 앞의 두 예제에서 사용한 것과 동일한 마크업이 있습니다. 이제 라인 기반 배치를 사용하여 12열 그리드에 콘텐츠를 배치할 수 있습니다.

```css
header {
  grid-column: 1 / 13;
  grid-row: 1;
}

article {
  grid-column: 4 / 13;
  grid-row: 2;
}

aside {
  grid-column: 1 / 4;
  grid-row: 2;
}

footer {
  grid-column: 1 / 13;
  grid-row: 3;
}
```

```
body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}

header,
footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}

aside {
  border-right: 1px solid #999;
}
```

```
<div class="container">
  <header>이것은 나의 사랑스런 블로그입니다</header>
  <article>
    <h1>내 글</h1>
    <p>
      Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
      imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus
      massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
      egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada
      et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac
      imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
      ornare egestas augue ut luctus. Proin blandit quam nec lacus varius
      commodo et a urna. Ut id ornare felis, eget fermentum sapien.
    </p>

    <p>
      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
      est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
      tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
      lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra
      quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis
      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    </p>
  </article>
  <aside>
    <h2>다른 것들</h2>
    <p>
      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
      est.
    </p>
  </aside>
  <footer>Contact me@example.com</footer>
</div>
```

Firefox 그리드 검사기 (en-US)를 사용하여 당신의 디자인 상의 그리드 라인을 겹쳐놓으면 12개로 구성된 열 그리드가 작동하는 방법을 볼 수 있습니다.

![A 12 column grid overlaid on our design.](/ko/docs/Learn/CSS/CSS_layout/Grids/learn-grids-inspector.png)

실력을 체크해 보세요
-----------

이 글의 마지막까지 읽었지만 가장 중요한 정보를 기억할 수 있나요? 계속 진행하기 전에 이 정보를 기억하고 있는지 확인할 수 있는 몇 가지 추가 테스트가 있습니다. Test your skills: Grid (en-US).

요약
--

이 개요에서는 CSS 그리드 레이아웃의 주요 기능을 살펴봤습니다. 이제 디자인에 바로 사용할 수 있을 것입니다. 사양에 대해 더 자세히 알아보려면 아래에서 그리드 레이아웃에 대한 가이드를 읽어보세요.

참조 항목
-----

* CSS 그리드 안내서
* CSS 그리드 검사기: Examine grid layouts
* CSS-Tricks Guide to Grid : 그리드에 대한 모든 것을 시각적으로 알기 쉽게 설명하는 글
* Grid Garden : 그리드의 기본을 배우고 더 잘 이해할 수 있는 교육용 게임입니다.
* 이전
* Overview: CSS layout
* 다음


미디어 쿼리 초보자 안내서 - Web 개발 학습하기

미디어 쿼리 초보자 안내서
==============

* 이전
* Overview: CSS layout
* 다음

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

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

미디어 쿼리 기본
---------

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

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

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

* 여기 코드가 어떤 미디어를 위한 것인지 브라우저에 알려주는 미디어 유형(예를 들어, 인쇄 또는 화면).
* 괄호로 묶은 CSS 규칙이 적용되기 위해 전달되어야 하는 규칙 또는 조건문 격인 미디어 표현식.
* 조건문을 통과하고 미디어 유형이 올바른 경우 적용되는 CSS 규칙 집합.
### 미디어 유형

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

* `all`
* `print`
* `screen`

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

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

**참고:** 이 미디어 타입은 MIME type과 다릅니다.

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

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

### 미디어 기능 규칙

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

#### 너비와 높이

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

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

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

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

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

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

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

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

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

#### 방향성

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

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

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

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

#### 포인팅 장치의 사용

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

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

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

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

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

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

더 복잡한 미디어 쿼리
------------

사용 가능한 다양한 미디어 쿼리들을 이용해서 쿼리를 함께 결합하거나, 일치할 수 있는 쿼리 목록들을 만들 수 있습니다.

### "논리곱" 미디어 쿼리

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

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

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

### "논리합" 미디어 쿼리

여러 쿼리들의 집합이 있는 경우, 어떤 것이라도 일치할 수 있습니다. 여러분은 해당 쿼리들을 콤마로 분리할 수 있습니다. 아래 예제에서 뷰포트가 최소 600픽셀 너비 또는 장치가 가로 보기 방향이라면 텍스트는 파란색이 될 것입니다. 둘 중 하나라도 사실이라면 쿼리가 일치합니다.

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

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

### "부정 논리" 미디어 쿼리

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

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

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

분기점을 선정하는 방법
------------

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

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

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

![Firefox 개발툴상에 레이아웃 갈무리](/ko/docs/Learn/CSS/CSS_layout/Media_queries/rwd-mode.png)

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

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

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

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

### 길라잡이: 간단한 모바일 우선 레이아웃

우리는 레이아웃에 포함된 다양한 요소에 배경색을 추가하기 위해 일정한 CSS를 적용한 HTML 문서를 가지고 출발합니다.

```css
\* {
  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)에 의해 소리내여 읽혀질 경우 콘텐츠가 (읽을 문자열를) 이해될 수도록 보장합니다.

```html
<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>©2019</p></footer>
    </div>
  </body>
```

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

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

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

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

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

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

이 CSS는 문서 안에 있는 문서 콘텐츠와 aside 요소 내부 관련 정보까지 2단 레이아웃을 우리에게 제공합니다. 또한 우리는 플렉스박스를 사용하여 탐색 메뉴를 일렬로 배치했습니다.

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

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

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

```css
@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 픽셀이라면 주요 문서 부분에 맞아떨어질 수 있습니다. 이는 미디어 쿼리를 전혀 사용하지 않고 격자 레이아웃만으로 얻을 수 있습니다.

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

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

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

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

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

스킬을 테스트하세요!
-----------

게시글의 맨 마지막 부분까지 도달했지만, 중요한 정보를 기억할 수 있으신가요? 계속 진행하기 전에 이 정보를 기억하고 있는지 확인할 수 있는 테스트를 찾을 수 있습니다. 여기 (en-US)를 확인해주세요.

요약정리
----

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

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

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

* 이전
* Overview: CSS layout
* 다음


반응형 디자인 - Web 개발 학습하기

반응형 디자인
=======

* 이전
* Overview: CSS layout
* 다음

반응형 웹 설계 는 웹 페이지가 모든 화면 크기와 해상도에서 잘 렌더링되도록 하면서도 사용성을 보장하는 웹 디자인 접근 방식입니다. 멀티 디바이스 웹을 위한 디자인 방식입니다. 이 글에서는 이를 숙달하기 위해 사용할 수 있는 몇 가지 기술을 이해하는 데 도움이 될 것입니다.

|  |  |
| --- | --- |
| 필요한 사전 지식: |
 HTML의 기초인 (HTML 입문서를 공부하세요), 그리고 CSS의 작동 방식을 파악하기 위해 (CSS 첫걸음과
 CSS 구성 블록를
 공부하세요.)
  |
| 목표: | 반응형 디자인의 역사와 핵심적인 개념 파악하기 |

HTML은 기본적으로 반응형 또는 유동적 입니다. CSS 없이 HTML만 포함된 웹 페이지를 만들고 창 크기를 조정하면 브라우저는 뷰포트에 맞게 텍스트를 자동으로 리플로우합니다.

기본 반응형 동작은 별다른 해결책이 필요하지 않은 것처럼 보일 수 있지만 와이드 모니터에서 전체 화면으로 표시되는 긴 텍스트 줄은 읽기 어려울 수 있습니다. 열을 만들거나 패딩을 크게 추가하는 등 CSS를 사용하여 와이드 스크린 줄 길이를 줄이면 브라우저 창을 좁히거나 모바일 장치에서 사이트를 여는 사용자에게 사이트가 찌그러져 보일 수 있습니다.

![두 개의 열이 있는 레이아웃이 모바일 크기 뷰포트에서 찌부러집니다.](/ko/docs/Learn/CSS/CSS_layout/Responsive_Design/mdn-rwd-liquid.png)

고정 너비를 설정하여 크기를 조정할 수 없는 웹 페이지를 만들면 좁은 기기에서는 스크롤 막대가 나타나고 넓은 화면에서는 빈 공간이 너무 많아집니다.

반응형 웹 디자인(RWD)은 다양한 디바이스와 디바이스 크기에 대응하는 디자인 접근 방식으로, 태블릿, 휴대폰, 텔레비전, 시계 등 어떤 디바이스에서 콘텐츠를 보든 화면에 맞게 자동으로 조정할 수 있습니다.

반응형 웹 디자인은 별도의 기술이 아니라 하나의 접근 방식입니다. 콘텐츠를 보는 데 사용되는 모든 기기에 대응할 수 있는 레이아웃을 만드는 데 사용되는 일련의 모범 사례를 설명하는 데 사용되는 용어입니다.

반응형 디자인이라는 용어는 2010년 Ethan Marcotte가 만든 것으로, Zoe Mickley Gillenwater의 저서 Flexible Web Design에서 설명한 대로 유동 그리드, 유동 이미지, 미디어 쿼리를 사용하여 반응형 콘텐츠를 만드는 것을 설명합니다.

당시에는 레이아웃 및 미디어 쿼리에 CSS `float`를 사용하여 브라우저 너비를 쿼리하고 다양한 분기점에 대한 레이아웃을 생성하는 것이 권장되었습니다. Fluid 이미지는 컨테이너 너비를 초과하지 않도록 설정되며, `max-width` 속성이 `100%`로 설정되어 있습니다. Fluid 이미지는 포함 열이 좁아지면 축소되지만 열이 커질 때 고유 크기보다 커지지 않습니다. 이렇게 하면 컨테이너가 이미지보다 넓어져도 이미지가 넘치지 않고 콘텐츠에 맞게 축소되지만 더 커지거나 픽셀화되지 않습니다.

최신 CSS 레이아웃 방식은 본질적으로 반응형이며, Gillenwater의 책과 Marcotte의 글이 출간된 이후 반응형 사이트를 더 쉽게 디자인할 수 있도록 웹 플랫폼에 다양한 기능이 내장되어 있습니다.

이 글의 나머지 부분에서는 반응형 사이트를 만들 때 사용할 수 있는 다양한 웹 플랫폼 기능을 소개합니다.

미디어 쿼리
------

미디어 쿼리 사용하기를 사용하면 일련의 테스트(예: 사용자의 화면이 특정 너비 또는 특정 해상도보다 큰지 여부)를 실행하고 CSS를 선택적으로 적용하여 사용자의 요구에 맞게 페이지의 스타일을 지정할 수 있습니다.

예를 들어, 다음 미디어 쿼리는 현재 웹 페이지가 화면 미디어로 표시되고 있고(따라서 인쇄된 문서가 아님) 뷰포트의 너비가 `80rem` 이상인지 테스트합니다. `.container` 선택기에 대한 CSS는 이 두 가지가 참인 경우에만 적용됩니다.

```css
@media screen and (min-width: 80rem) {
  .container {
    margin: 1em 2em;
  }
}
```

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

미디어 쿼리를 사용할 때 일반적인 접근 방식은 화면이 좁은 디바이스(예: 휴대폰)를 위해 간단한 단일 열 레이아웃을 만든 다음 화면이 더 넓은지 확인하고 화면 너비가 충분하다고 판단되면 다중 열 레이아웃을 구현하는 것입니다. 이를 **모바일 우선** 디자인이라고 합니다.

분기점을 사용하는 경우, 개별 디바이스의 절대 크기보다는 CSS 값과 단위를 사용하여 미디어 쿼리 분기점을 정의하는 것이 모범 사례입니다.

미디어 쿼리 블록 내에 정의된 스타일에 대한 접근 방식은 브라우저 크기 범위에 따라 `<link>` 스타일 시트에 미디어 쿼리를 사용하는 것부터 각 분기점과 관련된 값을 저장하기 위해 사용자 지정 속성 변수만 포함하는 것까지 다양합니다.

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

반응형 레이아웃 기술
-----------

반응형 사이트는 유연한 그리드를 기반으로 구축되므로 픽셀 단위의 완벽한 레이아웃으로 가능한 모든 기기 크기를 타겟팅할 필요가 없습니다.

유연한 그리드를 사용하면 기능을 변경하거나 분기점을 추가하여 콘텐츠가 보기 좋지 않게 보이는 지점에서 디자인을 변경할 수 있습니다. 예를 들어 화면 크기가 커짐에 따라 줄 길이가 읽기 힘들 정도로 길어지지 않도록 `columns` (en-US)를 사용할 수 있으며, 상자가 좁아지면서 각 줄에 두 단어가 찌그러지는 경우 분기점을 설정할 수 있습니다.

다단 레이아웃, Flexbox, 그리드 등 여러 레이아웃 방식이 기본적으로 반응형입니다. 모두 사용자가 유연한 그리드를 만들려고 한다고 가정하고 더 쉬운 방법을 제공합니다.

### 다단

다단을 사용하면 콘텐츠를 분할할 최대 열 수를 나타내는 `column-count`를 지정할 수 있습니다. 그러면 브라우저에서 화면 크기에 따라 변경되는 크기를 계산합니다.

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

`column-width`을 지정하는 대신 *minimum* 너비를 지정하는 것입니다. 브라우저는 컨테이너에 편안하게 들어갈 수 있는 만큼 해당 너비의 열을 생성한 다음 모든 열 사이에 남은 공간을 공유합니다. 따라서 열의 수는 공간의 양에 따라 변경됩니다.

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

`columns` (en-US) 단축키를 사용하여 최대 열 수와 최소 열 너비를 지정할 수 있습니다. 이렇게 하면 화면 크기가 커짐에 따라 줄 길이가 읽기 힘들 정도로 길어지거나 화면 크기가 작아짐에 따라 너무 좁아지는 것을 방지할 수 있습니다.

### 플렉스박스

플렉스박스에서 플렉스 항목은 컨테이너의 공간에 따라 항목 사이의 공간을 분배하여 축소 또는 증가합니다. `flex-grow` 및 `flex-shrink` 값을 변경하여 주변에 공간이 많거나 적을 때 항목이 어떻게 동작할지 지정할 수 있습니다.

아래 예시에서 플렉스 항목은 레이아웃 항목 플렉스박스: 가변 항목의 가변 크기 조정에 설명된 대로 `flex: 1`의 약어를 사용하여 플렉스 컨테이너에서 각각 동일한 공간을 차지합니다.

```css
.container {
  display: flex;
}

.item {
  flex: 1;
}
```

**참고:** 예를 들어, 플렉스박스를 사용하여 위의 간단한 반응형 레이아웃을 만들었습니다. 화면이 커지면 중단점을 사용하여 여러 열로 전환하고 `max-width`로 메인 콘텐츠의 크기를 제한합니다. 예시, 소스 코드.

### CSS 격자

CSS 그리드 레이아웃에서 `fr` 단위는 그리드 트랙에 사용 가능한 공간을 분배할 수 있게 해줍니다. 다음 예제는 `1fr` 크기의 트랙 3개가 있는 그리드 컨테이너를 생성합니다. 이렇게 하면 컨테이너에서 사용 가능한 공간의 한 부분을 차지하는 세 개의 열 트랙이 생성됩니다. 그리드를 만드는 이 접근 방식에 대한 자세한 내용은 레이아웃 그리드 배우기 주제의 fr 단위를 포함한 가변 격자 아래에서 확인할 수 있습니다.

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

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

반응형 이미지
-------

미디어가 반응형 컨테이너보다 크지 않도록 하려면 다음과 같은 방법을 사용할 수 있습니다.

```css
img,
picture,
video {
  max-width: 100%;
}
```

이렇게 하면 미디어가 컨테이너를 넘치지 않도록 크기를 조정합니다. 하나의 큰 이미지를 사용했다가 작은 디바이스에 맞게 축소하면 필요한 것보다 큰 이미지를 다운로드하여 대역폭이 낭비됩니다.

반응형 이미지는 `<picture>` (en-US)와 `<img>` 요소, `srcset` 및 `sizes` 속성을 사용해 사용자의 뷰포트와 디바이스의 해상도에 맞는 이미지를 제공할 수 있습니다. 예를 들어 모바일용 정사각형 이미지를 포함할 수 있지만 데스크톱에서는 가로 이미지와 동일한 장면을 표시할 수 있습니다.

`<picture>` 요소를 사용하면 "hints"(이미지가 가장 적합한 화면 크기 및 해상도를 설명하는 메타데이터)와 함께 여러 크기를 제공할 수 있으며, 브라우저는 각 디바이스에 가장 적합한 이미지를 선택하므로 사용자가 사용 중인 디바이스에 적합한 이미지 크기를 다운로드할 수 있습니다. `max-width`와 함께 `<picture>`을 사용하면 미디어 쿼리로 이미지 크기를 조정할 필요가 없습니다. 이는 다른 화면비의 이미지를 다른 뷰포트 크기에 맞추어 사용할 수 있도록 합니다.

또한 다양한 크기로 사용되는 이미지를 직접 *art direct* 하여 화면 크기에 따라 다른 자르기 또는 완전히 다른 이미지를 제공할 수도 있습니다.

이곳 MDN 사이트의 반응형 이미지에서 자세한 안내서를 찾을 수 있습니다.

반응형 타이포그래피
----------

반응형 타이포그래피는 미디어 쿼리 내에서 글꼴 크기를 변경하거나 뷰포트 단위를 사용하여 화면 공간을 더 적게 또는 더 많이 반영하는 것을 설명합니다.

### 반응형 타이포그래피에 대한 미디어 쿼리 사용하기

이 예제에서 우리는 수준 1 머리글을 `4rem`로 설정하려고 합니다. 즉, 기본 글꼴 크기의 4배입니다. 정말 큰 제목이네요! 이 커다란 제목은 더 큰 화면 크기에서만 사용해야 하므로 먼저 더 작은 제목을 만든 다음 사용자의 화면 크기가 `1200px` 이상인 경우 미디어 쿼리를 사용하여 더 큰 크기로 덮어씁니다.

```css
html {
  font-size: 1em;
}

h1 {
  font-size: 2rem;
}

@media (min-width: 1200px) {
  h1 {
    font-size: 4rem;
  }
}
```

위의 반응형 그리드 예시를 편집하여 설명한 방법을 사용하여 반응형 유형도 포함하도록 했습니다. 레이아웃이 두 열 버전으로 전환됨에 따라 제목의 크기가 어떻게 전환되는지 확인할 수 있습니다.

모바일에서는 제목이 더 작아집니다.

![머리글 크기가 작은 스택 모양의 레이아웃입니다.](/ko/docs/Learn/CSS/CSS_layout/Responsive_Design/mdn-rwd-font-mobile.png)

그러나 데스크톱에서는 제목 크기가 더 크게 표시됩니다.

![큰 머리글이 딸린 두개의 열 레이아웃입니다.](/ko/docs/Learn/CSS/CSS_layout/Responsive_Design/mdn-rwd-font-desktop.png)

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

타이포그래피에 대한 이 접근 방식에서 알 수 있듯이 미디어 쿼리를 페이지 레이아웃 변경에만 제한할 필요는 없습니다. 모든 요소를 조정하여 다른 화면 크기에서 더 유용하거나 매력적으로 보이도록 하는 데 사용할 수 있습니다.

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

뷰포트 단위 `vw`를 사용하여 미디어 쿼리로 중단점을 설정할 필요 없이 반응형 타이포그래피를 활성화할 수도 있습니다. `1vw`는 뷰포트 너비의 1%에 해당하므로 `vw`를 사용하여 글꼴 크기를 설정하면 항상 뷰포트의 크기와 관련됩니다.

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

위와 같이 할 때의 문제점은 텍스트가 항상 뷰포트의 크기와 관련되어 있기 때문에 사용자가 'vw' 단위를 사용하여 설정한 텍스트를 확대/축소할 수 없다는 것입니다. **따라서 뷰포트 단위만 사용하여 텍스트를 설정해서는 안 됩니다**.

해결책이 있는데, `calc()`를 사용하는 것입니다. `em` 또는 `rem`과 같은 고정 크기를 사용하여 설정된 값에 `vw` 단위를 추가하면 텍스트를 계속 확대/축소할 수 있습니다. 기본적으로 `vw` 단위는 확대된 값 위에 추가됩니다.

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

즉, 모바일용으로 설정하고 미디어 쿼리에서 다시 정의할 필요 없이 제목의 글꼴 크기를 한 번만 지정하면 됩니다. 그런 다음 뷰포트의 크기를 늘리면 글꼴이 점차 커집니다.

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

뷰포트 메타 테그
---------

반응형 페이지의 HTML 소스를 보면 일반적으로 문서의 `<head>`에 다음과 같은 `<meta>` 태그를 볼 수 있습니다.

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

이 viewport (en-US) 메타 태그는 모바일 브라우저에 뷰포트의 너비를 기기 너비로 설정하고 문서의 크기를 의도한 크기의 100%로 조정하여 문서를 모바일에 최적화된 크기로 표시해야 함을 알려줍니다.

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

이 메타 태그가 존재하는 이유는 스마트폰이 처음 등장했을 때 대부분의 사이트가 모바일에 최적화되지 않았기 때문입니다. 따라서 모바일 브라우저는 뷰포트 너비를 980픽셀로 설정하고 해당 너비로 페이지를 렌더링한 후 데스크톱 레이아웃의 축소된 버전으로 결과를 표시했습니다. 사용자는 웹사이트를 확대하고 이동하면서 관심 있는 부분을 볼 수 있었지만 보기가 좋지 않았습니다.

`width=device-width`를 설정하면 Apple의 기본값인 `width=980px`와 같은 모바일 디바이스의 기본값을 디바이스의 실제 너비로 재정의하게 됩니다. 이 설정이 없으면 중단점 및 미디어 쿼리가 포함된 반응형 디자인이 모바일 브라우저에서 의도한 대로 작동하지 않을 수 있습니다. 뷰포트 너비가 480픽셀 이하인 좁은 화면 레이아웃이 있는데 기기에서 980픽셀 너비라고 표시되는 경우 해당 사용자는 좁은 화면 레이아웃을 볼 수 없습니다.

**따라서 문서 헤드에 뷰포트 메타 태그를 항상 포함해야 합니다.**

요약 정리
-----

반응형 디자인이란 보는 환경에 따라 반응하는 사이트 또는 애플리케이션 디자인을 말합니다. 반응형 디자인은 여러 CSS 및 HTML 기능과 기술을 포함하며, 이제는 기본적으로 웹사이트를 구축하는 방식이 되었습니다. 휴대폰으로 방문하는 사이트를 생각해 보세요. 데스크톱 버전이 축소되어 있거나 옆으로 스크롤해야 무언가를 찾을 수 있는 사이트를 접하는 것은 매우 드문 일입니다. 이는 웹이 반응형 디자인 방식으로 전환되었기 때문입니다.

또한 이번 단원에서 배운 레이아웃 방법을 사용하면 반응형 디자인을 훨씬 쉽게 구현할 수 있습니다. 오늘날 웹 개발이 처음이라면 반응형 디자인 초창기보다 더 많은 도구를 사용할 수 있습니다. 따라서 사용 중인 자료의 연도를 확인하는 것이 좋습니다. 과거의 자료는 여전히 유용하지만, 최신 CSS와 HTML을 사용하면 방문자가 어떤 디바이스로 사이트를 보든 우아하고 유용한 디자인을 훨씬 쉽게 만들 수 있습니다.

같이 보기
-----

* 미디어 쿼리에 대한 CSS 요령 가이드
* 이전
* Overview: CSS layout
* 다음