font - CSS: Cascading Style Sheets

font
====

**`font`** CSS 속성은 `font-style` (en-US), `font-variant` (en-US), `font-weight`, `font-size`, `line-height` (en-US), `font-family` (en-US)의 단축 속성입니다. 요소의 글꼴을 시스템 폰트로 설정할 수도 있습니다.

시도해보기
-----

다른 단축 속성과 마찬가지로, 생략한 속성은 초기값으로 설정하며 이 과정에서 다른 속성으로 설정한 값을 덮어 쓸 수도 있습니다. `font` 속성으로 설정할 수 없는 `font-stretch` (en-US), `font-size-adjust` (en-US), `font-kerning` (en-US)의 값도 초기값으로 돌아갑니다.

구문
--

`font` 속성은 하나의 키워드를 지정해 시스템 폰트를 사용하도록 설정할 수도 있고, 여러 글꼴 관련 속성의 단축 속성으로도 사용할 수 있습니다.

`font`를 시스템 폰트 키워드로 사용하려면 `caption`, `icon`, `menu`, `message-box`, `small-caption`, `status-bar` 중 하나를 사용해야 합니다.

`font`를 단축 속성으로 사용하려면,

* 다음 속성의 값을 포함해야 합니다.
    + `<font-size>`
    + `<font-family>` (en-US)
* 다음 속성의 값을 포함할 수 있습니다.
    + `<font-style>` (en-US)
    + `<font-variant>` (en-US)
    + `<font-weight>`
    + `<line-height>` (en-US)
* `font-style`, `font-variant`, `font-weight`는 `font-size`의 앞에 와야 합니다.
* `font-variant`는 CSS 2.1에서 정의한 `normal`과 `small-caps`만 사용할 수 있습니다.
* `line-height`는 `font-size` 바로 다음에 와야 하며 "/"로 구분해야 합니다. 예: "`16px/3`"
* `font-family`는 마지막 값이어야 합니다.
### 값

`<'font-style'>`

`font-style` (en-US) 참고

`<'font-variant'>`

`font-variant` (en-US) 참고

`<'font-weight'>`

`font-weight` 참고

`<'font-stretch'>`

`font-stretch` (en-US) 참고

`<'font-size'>`

`font-size` 참고

`<'line-height'>`

`line-height` (en-US) 참고

`<'font-family'>`

`font-family` (en-US) 참고

#### 시스템 폰트 키워드

`caption`

버튼, 드랍다운 메뉴 등 설명이 붙은 컨트롤에 사용하는 시스템 폰트.

`icon`

아이콘 이름에 사용하는 시스템 폰트.

`menu`

드랍다운 메뉴, 메뉴 리스트 등 메뉴에서 사용하는 시스템 폰트.

`message-box`

다이얼로그 창에 사용하는 폰트.

`small-caption`

소형 컨트롤에 사용하는 시스템 폰트.

`status-bar`

창의 상태표시줄에 사용하는 시스템 폰트.

추가 시스템 폰트 키워드

각 브라우저마다 더 많은 키워드를 접두사와 함께 구현하고 있습니다. Gecko는 `-moz-window`, `-moz-document`, `-moz-desktop`, `-moz-info`, `-moz-dialog`, `-moz-button`, `-moz-pull-down-menu`, `-moz-list`, `-moz-field`를 가지고 있습니다.

### 형식 구문
```

font =
  [ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-stretch-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]  |
  <system-family-name>

<font-variant-css2> =
  normal      |
  small-caps

<font-stretch-css3> =
  normal           |
  ultra-condensed  |
  extra-condensed  |
  condensed        |
  semi-condensed   |
  semi-expanded    |
  expanded         |
  extra-expanded   |
  ultra-expanded

<system-family-name> =
  caption        |
  icon           |
  menu           |
  message-box    |
  small-caption  |
  status-bar

```

Examples
--------

### Setting font properties

```css
/\* Set the font size to 12px and the line height to 14px.
 Set the font family to sans-serif \*/
p {
  font: 12px/14px sans-serif;
}

/\* Set the font size to 80% of the parent element
 or default value (if no parent element present).
 Set the font family to sans-serif \*/
p {
  font: 80% sans-serif;
}

/\* Set the font weight to bold,
 the font-style to italic,
 the font size to large,
 and the font family to serif. \*/
p {
  font: bold italic large serif;
}

/\* Use the same font as the status bar of the window \*/
p {
  font: status-bar;
}
```

### Live sample
```

<p>
  Change the radio buttons below to see the generated shorthand and its effect.
</p>
<form action="createShortHand()">
  <div class="cf">
    <div class="setPropCont">
      font-style<br />
      <input
 type="radio"
 id="font-style-none"
 name="font\_style"
 checked=""
 value=""
 onchange="setCss()" />
      <label for="font-style-none">none</label><br />
      <input
 type="radio"
 id="font-style-normal"
 name="font\_style"
 value="normal"
 onchange="setCss()" />
      <label for="font-style-normal">normal</label><br />
      <input
 type="radio"
 id="font-style-italic"
 name="font\_style"
 value="italic"
 onchange="setCss()" />
      <label for="font-style-italic">italic</label><br />
      <input
 type="radio"
 id="font-style-oblique"
 name="font\_style"
 value="oblique"
 onchange="setCss()" />
      <label for="font-style-oblique">oblique</label>
    </div>

    <div class="setPropCont">
      font-variant<br />
      <input
 type="radio"
 id="font-variant-none"
 name="font\_variant"
 checked=""
 value=" "
 onchange="setCss()" />
      <label for="font-variant-none">none</label><br />
      <input
 type="radio"
 id="font-variant-normal"
 name="font\_variant"
 value="normal"
 onchange="setCss()" />
      <label for="font-variant-normal">normal</label><br />
      <input
 type="radio"
 id="font-variant-small-caps"
 name="font\_variant"
 value="small-caps"
 onchange="setCss()" />
      <label for="font-variant-small-caps">small-caps</label>
    </div>

    <div class="setPropCont">
      font-weight<br />
      <input
 type="radio"
 id="font-weight-none"
 name="font\_weight"
 value=""
 onchange="setCss()" />
      <label for="font-weight-none">none</label><br />
      <input
 type="radio"
 id="font-weight-normal"
 checked=""
 name="font\_weight"
 value="400"
 onchange="setCss()" />
      <label for="font-weight-normal">normal</label><br />
      <input
 type="radio"
 id="font-weight-bold"
 name="font\_weight"
 value="700"
 onchange="setCss()" />
      <label for="font-weight-bold">bold</label>
    </div>

    <div class="setPropCont">
      font-size<br />
      <input
 type="radio"
 id="font-size-12px"
 name="font\_size"
 value="12px"
 onchange="setCss()" />
      <label for="font-size-12px">12px</label><br />
      <input
 type="radio"
 id="font-size-16px"
 name="font\_size"
 value="16px"
 checked=""
 onchange="setCss()" />
      <label for="font-size-16px">16px</label><br />
      <input
 type="radio"
 id="font-size-24px"
 name="font\_size"
 value="24px"
 onchange="setCss()" />
      <label for="font-size-24px">24px</label>
    </div>

    <div class="setPropCont">
      line-height<br />
      <input
 type="radio"
 id="line-height-none"
 name="line\_height"
 checked=""
 value=""
 onchange="setCss()" />
      <label for="line-height-none">none</label><br />
      <input
 type="radio"
 id="line-height-1.2"
 name="line\_height"
 value="/1.2"
 onchange="setCss()" />
      <label for="line-height-1.2">1.2</label><br />
      <input
 type="radio"
 id="line-height-3"
 name="line\_height"
 value="/3"
 onchange="setCss()" />
      <label for="line-height-3">3</label>
    </div>
    <br />

    <div class="setPropCont fontfamily">
      font-family<br />
      <input
 type="radio"
 id="font-family-courier"
 name="font\_family"
 checked=""
 value="courier"
 onchange="setCss(5,'courier')" />
      <label for="font-family-courier">courier</label><br />
      <input
 type="radio"
 id="font-family-serif"
 name="font\_family"
 value="serif"
 onchange="setCss()" />
      <label for="font-family-serif">serif</label><br />
      <input
 type="radio"
 id="font-family-sans-serif"
 name="font\_family"
 value="sans-serif"
 onchange="setCss()" />
      <label for="font-family-sans-serif">sans-serif</label><br />
      <input
 type="radio"
 id="font-family-arial"
 name="font\_family"
 value="arial"
 onchange="setCss()" />
      <label for="font-family-arial">Arial</label><br />
      <input
 type="radio"
 id="font-family-monospace"
 name="font\_family"
 value="monospace"
 onchange="setCss()" />
      <label for="font-family-monospace">monospace</label><br />
      <input
 type="radio"
 id="font-family-cursive"
 name="font\_family"
 value="cursive"
 onchange="setCss()" />
      <label for="font-family-cursive">cursive</label><br />
      <input
 type="radio"
 id="font-family-fantasy"
 name="font\_family"
 value="fantasy"
 onchange="setCss()" />
      <label for="font-family-fantasy">fantasy</label><br />
      <input
 type="radio"
 id="font-family-system-ui"
 name="font\_family"
 value="system-ui"
 onchange="setCss()" />
      <label for="font-family-system-ui">system-ui</label><br />
    </div>
  </div>

  <div class="cf propInputs">
    <div class="propInputCont tar">font :</div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_font\_style" /><br />
      font-style <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_font\_variant" /> <br />
      font-variant <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_font\_weight" /> <br />
      font-weight <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss mandatory" id="input\_font\_size" /> <br />
      font-size <br />
      mandatory
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_line\_height" /> <br />
      line-height <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss mandatory" id="input\_font\_family" />
      <br />
      font-family <br />
      mandatory
    </div>
  </div>
</form>

<div class="fontShortHand">This is some sample text.</div>
<br /><br /><br /><br /><br /><br />
```

```
body,
input {
  font: 14px arial;
  overflow: hidden;
}

.propInputCont {
  float: left;
  text-align: center;
  margin-right: 5px;
  width: 80px;
}

.setPropCont {
  float: left;
  margin-right: 5px;
  width: 120px;
}

.propInputs,
.setPropCont {
  margin-bottom: 1em;
}

.curCss {
  border: none;
  border-bottom: 1px solid black;
  text-align: center;
  width: 80px;
}

.mandatory {
  border-bottom-color: red;
}

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

.tar {
  width: 40px;
  text-align: right;
}
.fontfamily {
  display: inline-block;
}
```

```
const textAreas = document.getElementsByClassName("curCss");

function getProperties() {
  return (
    `${getCheckedValue("font\_style")} ` +
    `${getCheckedValue("font\_variant")} ` +
    `${getCheckedValue("font\_weight")} ` +
    `${getCheckedValue("font\_size")}` +
    `${getCheckedValue("line\_height")} ` +
    `${getCheckedValue("font\_family")}`
  );
}

function getCheckedValue(radioName) {
  const radios = document.forms[0].elements[radioName];
  for (let i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      const curElemName = `input\_${radioName}`;
      const curElem = document.getElementById(curElemName);
      curElem.value = radios[i].value;

      return radios[i].value;
    }
  }
}

function setCss() {
  getProperties();
  injectCss(shortText);
}

function injectCss(cssFragment) {
  const old = document.body.getElementsByTagName("style");
  if (old.length > 1) {
    old[1].parentElement.removeChild(old[1]);
  }
  css = document.createElement("style");
  css.textContent = `.fontShortHand{font: ${cssFragment}}`;
  document.body.appendChild(css);
}

setCss();
```

명세서
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-prop |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `font-style` (en-US)
* `font-weight`
* Fundamental text and font styling


:last-child - CSS: Cascading Style Sheets

:last-child
===========

CSS **`:last-child`** 의사 클래스는 형제 요소 중 제일 마지막 요소를 나타냅니다.

시도해보기
-----

구문
--
```

:last-child
```

예제
--

### 기본 예제

#### HTML

```html
<div>
  <p>This text isn't selected.</p>
  <p>This text is selected!</p>
</div>

<div>
  <p>This text isn't selected.</p>
  <h2>This text isn't selected: it's not a `p`.</h2>
</div>
```

#### CSS

```css
p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}
```

#### 결과

### 목록 스타일링

#### HTML

```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>
```

#### CSS

```css
ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}
```

#### 결과

명세
--

| Specification |
| --- |
| Selectors Level 4 # the-last-child-pseudo |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이보기
----

* `:-moz-last-node` (en-US)
비표준
* `:last-of-type` (en-US)
* `:first-child`
* `:nth-child`


CSS Scrollbars - CSS: Cascading Style Sheets

CSS Scrollbars
==============

**실험적:** **이 기능은 실험적인 기능입니다.**
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

**CSS Scrollbars**는 Windows IE 5.5에서 2000년에 도입한 더이상 사용되지 않는(obsolete) 스크롤바 색상 프로퍼티를 표준화합니다.

기본 예제
-----

이 예제에서 우리는 녹색 트랙과 보라색 썸(thumb)을 가진 얇은 스크롤바를 사용하기로 선택했습니다.

```css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}
```

### HTML

```html
<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>
```

### 결과

참고
--

### CSS 속성

* `scrollbar-width` (en-US)
* `scrollbar-color` (en-US)
명세
--

| Specification |
| --- |
| CSS Scrollbars Styling Module Level 1  |

접근성 고려사항
--------

스크롤바를 커스터마이징 할 때, 스크롤바에 충분한 대비가 있고 터치 입력을 사용하는 사람들에게도 충분히 히트 영역(hit area)이 큰지 고려하십시오.

* Baseline Rules for Scrollbar Usability | Adrian Roselli
브라우저 호환성
--------

### css.properties.scrollbar-color

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.scrollbar-width

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `::-webkit-scrollbar`
* `-ms-overflow-style`


outline-style - CSS: Cascading Style Sheets

outline-style
=============

CSS **`outline-style`** 속성은 요소 외곽선의 스타일을 설정합니다. 외곽선은 요소의 테두리 바깥에 그려지는 선입니다.

시도해보기
-----

외곽선 외형을 설정할 땐 `outline` 단축 속성을 사용하는게 편리한 상황이 많습니다.

구문
--

```css
/\* 키워드 값 \*/
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

/\* 전역 값 \*/
outline-style: inherit;
outline-style: initial;
outline-style: unset;
```

`outline-style` 속성은 다음 값 중 하나를 사용해 지정합니다.

### 값

`auto`

사용자 에이전트가 사용자 지정 외곽선을 그릴 수 있도록 허용합니다.

`none`

외곽선을 제거합니다. `outline-width`가 `0`입니다.

`dotted`

외곽선을 점 여러 개로 그립니다.

`dashed`

외곽선을 짧은 선 여러 개로 그립니다.

`solid`

외곽선을 하나의 선으로 그립니다.

`double`

외곽선을 두 개의 선으로 그립니다. `outline-width`는 두 선과 그 사이의 간격을 합친 값입니다.

`groove`

외곽선을 마치 파낸 것처럼 그립니다.

`ridge`

`groove`의 반대입니다. 외곽선을 마치 튀어나온 것처럼 그립니다.

`inset`

요소가 페이지 안에 박힌 것처럼 외곽선을 그립니다.

`outset`

`inset`의 반대입니다. 요소가 페이지 밖으로 나온 것처럼 그립니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `none` |
| 적용대상 | all elements |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | by computed value type |

형식 구문
-----
```

outline-style =
  auto                  |
  <outline-line-style>

```

예제
--

### 외곽선 스타일을 `auto`로 설정하기

`auto` 값은 사용자 지정 스타일을 의미합니다. "일반적으로 플랫폼 기본 사용자 인터페이스 스타일이거나, CSS에서 나타낼 수 있는 것보다 더 풍부한 스타일 (예컨대 둥근 꼭짓점에 바깥쪽 픽셀은 반투명하여 빛나는 것처럼 보이는 외곽선)입니다."

#### HTML

```html
<div>
  <p class="auto">Outline Demo</p>
</div>
```

#### CSS

```css
.auto {
  outline-style: auto; /\* same result as "outline: auto" \*/
}

/\* To make the Demo clearer \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

#### 결과

### 외곽선 스타일을 `dashed`, `dotted`로 설정하기

#### HTML

```html
<div>
  <div class="dotted">
    <p class="dashed">Outline Demo</p>
  </div>
</div>
```

#### CSS

```css
.dotted {
  outline-style: dotted; /\* same result as "outline: dotted" \*/
}
.dashed {
  outline-style: dashed;
}

/\* To make the Demo clearer \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

#### 결과

### 외곽선 스타일을 `solid`, `double`로 설정하기

#### HTML

```html
<div>
  <div class="solid">
    <p class="double">Outline Demo</p>
  </div>
</div>
```

#### CSS

```css
.solid {
  outline-style: solid;
}
.double {
  outline-style: double;
}

/\* To make the Demo clearer \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

#### 결과

### 외곽선 스타일을 `groove`, `ridge`로 설정하기

#### HTML

```html
<div>
  <div class="groove">
    <p class="ridge">Outline Demo</p>
  </div>
</div>
```

#### CSS

```css
.groove {
  outline-style: groove;
}
.ridge {
  outline-style: ridge;
}

/\* To make the Demo clearer \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

#### 결과

### 외곽선 스타일을 inset, outset으로 설정하기

#### HTML

```html
<div>
  <div class="inset">
    <p class="outset">Outline Demo</p>
  </div>
</div>
```

#### CSS

```css
.inset {
  outline-style: inset;
}
.outset {
  outline-style: outset;
}

/\* To make the Demo clearer \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

#### 결과

명세
--

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-style |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


CSS Positioning - CSS: Cascading Style Sheets

CSS Positioning
===============

**CSS Positioning**은 요소를 페이지에 배치하는 방법을 정의하는 CSS 모듈입니다.

참고서
---

### CSS 속성

* `bottom` (en-US)
* `clear`
* `float`
* `left` (en-US)
* `position`
* `right` (en-US)
* `top` (en-US)
* `z-index`
안내서
---

CSS z-index 이해하기

쌓임 문맥의 개념을 소개하고 몇 가지 예와 함께 z축 순서의 동작을 설명합니다.

명세
--

| Specification |
| --- |
| CSS Positioned Layout Module Level 3  |


자식 결합자 - CSS: Cascading Style Sheets

자식 결합자
======

**자식 결합자**(`>`)는 두 개의 CSS 선택자 사이에 위치하여 뒤쪽 선택자의 요소가 앞쪽 선택자 요소의 바로 밑에 위치할 경우에만 선택합니다.

```css
/\* List items that are children of the "my-things" list \*/
ul.my-things > li {
  margin: 2em;
}
```

뒤쪽 선택자의 요소는 앞쪽 선택자 요소의 바로 아래에 위치해야 하므로, DOM 트리의 깊이에 상관하지 않고 아래의 모든 요소를 선택하는 자손 결합자보다 더 엄격합니다.

구문
--
```

selector1 > selector2 { style properties }
```

예제
--

### CSS

```css
span {
  background-color: white;
}

div > span {
  background-color: DodgerBlue;
}
```

### HTML

```html
<div>
  <span
 >Span #1, in the div.
    <span>Span #2, in the span that's in the div.</span>
  </span>
</div>
<span>Span #3, not in the div at all.</span>
```

### 결과

명세
--

| Specification |
| --- |
| Selectors Level 4 # child-combinators |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 자손 결합자


image-rendering - CSS: Cascading Style Sheets

image-rendering
===============

**`image-rendering`** CSS 프로퍼티는 브라우저의 이미지 스케일링 방식에 대한 힌트를 제공합니다. 이 프로퍼티는 엘리먼트 자신에게 적용시킵니다. 스케일링(크기변경)이 안 된 이미지에게는 적용되지 않습니다.

예를들어, 100x100 픽셀의 이미지가 있는데 페이지에서 요구하는 이미지는 200x200픽셀 (혹은 50x50px)이라면, 이미지는 새로운 면적만큼의 특정 알고리즘으로 인해 확대(혹은 축소)됩니다. 스케일링은 사용자의 상호작용(줌기능) 으로 인해 일어날겁니다.

|  |  |
| --- | --- |
| 초기값 | `auto` |
| 적용대상 | all elements |
| 상속 | yes |
| 계산 값 | as specified |
| Animation type | discrete |

구문
--

```css
/\* 키워드 값 \*/
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

/\* 전역 값 \*/
image-rendering: inherit;
image-rendering: initial;
image-rendering: unset;
```

### Values

**`auto`**

 기본값입니다.
 이미지의 스케일링 알고리즘은 이미지를 최대치로 활용해서 나타냅니다. 특히, 스케일링 알고리즘은 이중선형보간법같은 알고리즘이 보기에 괜찮은 "부드러운"색상을 나타냅니다. 사진같은 종류의 것들을 위해 GEcko엔진 1.9버전(Firefox 3.0) 에서는 이중선형 리샘플링(고품질) 을 사용해왔습니다.

**`crisp-edges`**

이미지 스케일링 알고리즘은 반드시 색상대조와 이미지의 표준을 맞게 보존해야 합니다. 그리고 smooth 하지 못한 색상 혹은 이미지의 흐림효과 또한 알고리즘 공정에 있어야합니다. 이 속성은 픽셀아트같은 의도되어 만들어진 이미지들에게 필요합니다.

**`pixelated`**

이미지 스케일링을 크게 확대할 때는 "nearest neighbor" 혹은 비슷한 알고리즘을 반드시 사용해야 합니다. 그래서 이미지의 큰 픽셀로 구성해서 나타낼 수 있습니다. 이미지를 작게 축소할 때는 "auto" 속성과 같습니다.

**참고:** The values `optimizeQuality` and `optimizeSpeed` present in early draft (and coming from its SVG counterpart) are defined as synonyms for the `auto` value.

### 공식 문법
```

image-rendering =
  auto          |
  smooth        |
  high-quality  |
  pixelated     |
  crisp-edges

```

예제
--

```css
/\* applies to GIF and PNG images; avoids blurry edges \*/

img[src$=".gif"],
img[src$=".png"] {
  image-rendering: -moz-crisp-edges; /\* Firefox \*/
  image-rendering: -o-crisp-edges; /\* Opera \*/
  image-rendering: -webkit-optimize-contrast; /\* Webkit (non-standard naming) \*/
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor; /\* IE (non-standard property) \*/
}
```

```css
div {
  background: url(chessboard.gif) no-repeat 50% 50%;
  image-rendering: -moz-crisp-edges; /\* Firefox \*/
  image-rendering: -o-crisp-edges; /\* Opera \*/
  image-rendering: -webkit-optimize-contrast; /\* Webkit (non-standard naming) \*/
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor; /\* IE (non-standard property) \*/
}
```

### Live Examples

#### image-rendering: auto

78%
 ![squares.gif](/ko/docs/Web/CSS/image-rendering/squares.gif) 100%
 ![squares.gif](/ko/docs/Web/CSS/image-rendering/squares.gif) 138%
 ![squares.gif](/ko/docs/Web/CSS/image-rendering/squares.gif) downsized
 ![hut.jpg](/ko/docs/Web/CSS/image-rendering/hut.jpg) upsized
 ![blumen.jpg](/ko/docs/Web/CSS/image-rendering/blumen.jpg)

#### image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)

78%
 ![squares.gif](/ko/docs/Web/CSS/image-rendering/squares.gif) 100%
 ![squares.gif](/ko/docs/Web/CSS/image-rendering/squares.gif) 138%
 ![squares.gif](/ko/docs/Web/CSS/image-rendering/squares.gif) downsized
 ![hut.jpg](/ko/docs/Web/CSS/image-rendering/hut.jpg) upsized
 ![blumen.jpg](/ko/docs/Web/CSS/image-rendering/blumen.jpg)

#### image-rendering: crisp-edges; (-webkit-optimize-contrast)

78%
 ![squares.gif](/ko/docs/Web/CSS/image-rendering/squares.gif) 100%
 ![squares.gif](/ko/docs/Web/CSS/image-rendering/squares.gif) 138%
 ![squares.gif](/ko/docs/Web/CSS/image-rendering/squares.gif) downsized
 ![hut.jpg](/ko/docs/Web/CSS/image-rendering/hut.jpg) upsized
 ![blumen.jpg](/ko/docs/Web/CSS/image-rendering/blumen.jpg)

명세
--

| Specification |
| --- |
| CSS Images Module Level 3 # the-image-rendering |

**참고:** Though initially close from the SVG `image-rendering` property, the values are quite different now.

브라우저 지원
-------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


CSS Conditional Rules - CSS: Cascading Style Sheets

CSS Conditional Rules
=====================

**CSS Conditional Rules**는 프로세서 또는 스타일 시트에 적용되는 문서의 기능에만 기반을 두는 규칙 집합을 정의할 수 있는 CSS 모듈입니다.

참고서
---

### @규칙

* `@document` (en-US)
* `@media`
* `@supports`
명세서
---

| Specification |
| --- |
| CSS Conditional Rules Module Level 5  |
| CSS Conditional Rules Module Level 4  |
| CSS Conditional Rules Module Level 3  |


<integer> - CSS: Cascading Style Sheets

<integer>
=========

**`<integer>`** CSS 자료형은 `<number>`의 종류 중 하나로 소수점이 없는 완전한 수, 즉 정수를 표현합니다. 정수는 `column-count` (en-US), `counter-increment` (en-US), `grid-column` (en-US), `grid-row` (en-US), `z-index` 등 다양한 속성에서 사용할 수 있습니다.

구문
--

`<integer>` 자료형은 하나 이상의 0부터 9까지의 10진수 숫자로 구성하며, 선택적으로 `+`, `-`로 부호를 표시할 수 있습니다. 따로 연관지어야 하는 단위는 없습니다.

**참고:** 공식적으로 정해진 `<integer>` 값의 범위는 없습니다. Opera 12.1은 최대 215-1, IE는 220-1, 그 외 브라우저는 더 큰 값도 지원합니다. CSS3 Values 논의 중 최소한의 범위를 설정하자는 말이 많아서 가장 최근인 2012년 4월 LC 단계에서는 [-227-1; 227-1]으로 결정했습니다. 224-1과 230-1처럼 다른 값도 제안됐습니다. 하지만 최신 명세는 범위를 지정하고 있지 않습니다.

보간
--

애니메이션에서 `<integer>` 자료형의 값은 이산적으로 1씩 변화합니다. 계산은 유동소수점 실수를 사용하며 최종 결과인 이산값은 버림 함수를 사용해 얻습니다. 보간의 속도는 애니메이션과 연결된 타이밍 함수 (en-US)가 결정합니다.

예제
--

### 유효한 정수
```

12          양의 정수 (부호 표시 없음)
+123        양의 정수 (+ 부호)
-456        음의 정수
0           0
+0          0, 양의 부호
-0          0, 음의 부호
```

### 유효하지 않은 정수
```

12.0        정수를 표현하지만 <interger>가 아닌 <number>
12.         소수점은 불허
+---12      하나의 +/-만 허용
ten         글자는 불허
_5          특수문자는 불허
\35         유니코드 이스케이프 문자는 정수를 표현하더라도 불허 (\35: 5)
\4E94       아라비아 숫자 외의 다른 표현은 이스케이프 후에도 불허 (\4E94: 일본어 五).
3e4         과학적 표기법 불허
```

명세
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # integers |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `<number>`


unset - CSS: Cascading Style Sheets

unset
=====

CSS **`unset`** 키워드를 적용한 속성은, 부모로부터 상속할 값이 존재하면 상속값을, 그렇지 않다면 초깃값을 사용합니다. 다르게 표현하자면, 전자일 땐 `inherit` 키워드처럼, 후자일 땐 `initial` 키워드처럼 동작합니다. `all` 단축 속성을 포함한 모든 속성에 사용할 수 있습니다.

예제
--

### 글자 색

#### HTML

```html
<p>This text is red.</p>
<div class="foo">
  <p>This text is also red.</p>
</div>
<div class="bar">
  <p>This text is green (default inherited value).</p>
</div>
```

#### CSS

```css
.foo {
  color: blue;
}
.bar {
  color: green;
}

p {
  color: red;
}
.bar p {
  color: unset;
}
```

#### 결과

### 테두리

#### HTML

```html
<p>This text has a red border.</p>
<div>
  <p>This text has a red border.</p>
</div>
<div class="bar">
  <p>This text has has a black border (initial default, not inherited).</p>
</div>
```

#### CSS

```css
div {
  border: 1px solid green;
}

p {
  border: 1px solid red;
}

.bar p {
  border-color: unset;
}
```

#### 결과

명세
--

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4 # inherit-initial |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `initial`을 사용해 속성의 초깃값을 사용하세요.
* `revert`를 사용해 사용자 에이전트가 지정한 값(또는 사용자가 수정한 값)으로 속성을 되돌리세요.
* `inherit`을 사용해 속성의 값이 부모와 같도록 지정하세요.
* `all` 속성을 사용하면 요소의 모든 속성을 한꺼번에 `initial`, `inherit`, `revert`, `unset`할 수 있습니다.


CSS Custom Properties for Cascading Variables - CSS: Cascading Style Sheets

CSS Custom Properties for Cascading Variables
=============================================

캐스케이딩 변수를 위한 CSS 사용자지정 속성은, 반복적으로 사용가능한 사용자지정 속성을 만들 수 있게 해주는 모듈입니다.

CSS 속성
------

* `--*` (en-US)
명세
--

| Specification |
| --- |
| CSS Custom Properties for Cascading Variables Module Level 1  |


box-sizing - CSS: Cascading Style Sheets

box-sizing
==========

**`box-sizing`** CSS 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다.

시도해보기
-----

CSS 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용됩니다. 요소에 테두리나 안쪽 여백이 있으면 너비와 높이에 더해서 화면에 그립니다. 따라서 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야 합니다.

`box-sizing` 속성을 사용해 이 방식을 바꿀 수 있습니다.

* `content-box`는 기본 CSS 박스 크기 결정법을 사용합니다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 100 픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해집니다.
* `border-box`는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지합니다. 대부분의 경우 이 편이 크기를 조절할 때 쉽습니다.
구문
--

`box-sizing` 속성은 다음 키워드 중 하나로 지정할 수 있습니다.

### 값

`content-box`

CSS 표준이 정의한 초기 기본값. `width`와 `height` 속성이 콘텐츠 영역만 포함하고 안팎 여백과 테두리는 포함하지 않습니다. 즉 `.box {width: 350px; border: 10px solid black;}`을 적용한 요소의 너비는 `370px`입니다.

요소의 크기는 너비 = 콘텐츠 너비, 높이 = 콘텐츠 높이로 계산하고 테두리와 안쪽 여백은 식에 넣지 않습니다.

* `border-box`
    + : `width` 와 `height` 속성이 안쪽 여백과 테두리는 포함하고, 바깥 여백은 포함하지 않습니다. 안쪽 여백과 테두리가 요소 상자 안에 위치함을 유의하세요. 즉 `.box {width: 350px; border: 10px solid black;}`을 적용한 요소의 너비는 `350px`입니다. 콘텐츠 영역의 크기는 음수일 수 없으므로 `border-box`를 사용해 요소를 사라지게 할 수는 없습니다.요소의 크기는 너비 = 테두리 + 안쪽 여백 + 콘텐츠 너비, 높이 = 테두리 + 안쪽 여백 + 콘텐츠 높이로 계산합니다.
### 형식 구문
```

box-sizing =
  content-box  |
  border-box

```

예제
--

다음 예제는 두 개의 동일한 요소의 크기가 서로 다른 `box-sizing` 값으로 어떻게 달라지는지 보입니다.

### HTML

```html
<div class="content-box">Content box</div>
<br />
<div class="border-box">Border box</div>
```

### CSS

```css
div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /\* Total width: 160px + (2 \* 20px) + (2 \* 8px) = 216px
 Total height: 80px + (2 \* 20px) + (2 \* 8px) = 136px
 Content box width: 160px
 Content box height: 80px \*/
}

.border-box {
  box-sizing: border-box;
  /\* Total width: 160px
 Total height: 80px
 Content box width: 160px - (2 \* 20px) - (2 \* 8px) = 104px
 Content box height: 80px - (2 \* 20px) - (2 \* 8px) = 24px \*/
}
```

### 결과

명세
--

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # box-sizing |

|  |  |
| --- | --- |
| 초기값 | `content-box` |
| 적용대상 | all elements that accept width or height |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | discrete |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* CSS 기본 박스 모델


<gradient> - CSS: Cascading Style Sheets

<gradient>
==========

**`<gradient>`** CSS 자료형은 `<image>`의 특별한 종류로 여러 색의 점진적인 변화를 나타냅니다.

시도해보기
-----

CSS 그레이디언트는 원본 크기가 없습니다. 즉 실제 크기나 선호 크기가 없습니다. 그레이디언트의 크기는 적용하는 요소의 크기와 동일해집니다.

구문
--

### 그레이디언트 함수

`<gradient>` 자료형은 아래 나열한 함수 중 하나를 사용해 생성합니다.

#### 선형 그레이디언트

가상의 선을 따라 여러 색 사이를 전이합니다. `linear-gradient()` (en-US) 함수를 사용해 생성합니다.
```

<div class="linear-gradient">선형 그레이디언트</div>
```

```
div {
  width: 240px;
  height: 80px;
}
```

```css
.linear-gradient {
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}
```

#### 원형 그레이디언트

중심점으로부터 바깥으로 여러 색 사이를 전이합니다. `radial-gradient()` (en-US) 함수를 사용해 생성합니다.
```

<div class="radial-gradient">원형 그레이디언트</div>
```

```
div {
  width: 240px;
  height: 80px;
}
```

```css
.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
}
```

#### 반복 그레이디언트

요소를 꽉 채울 때까지 그레이디언트를 필요한 만큼 반복합니다. `repeating-linear-gradient()` (en-US)나 `repeating-radial-gradient()` (en-US) 함수를 사용해 생성합니다.
```

<div class="linear-repeat">반복하는 선형 그레이디언트</div>
<br />
<div class="radial-repeat">반복하는 원형 그레이디언트</div>
```

```
div {
  width: 240px;
  height: 80px;
}
```

```css
.linear-repeat {
  background: repeating-linear-gradient(
    to top left,
    lightpink,
    lightpink 5px,
    white 5px,
    white 10px
  );
}

.radial-repeat {
  background: repeating-radial-gradient(
    powderblue,
    powderblue 8px,
    white 8px,
    white 16px
  );
}
```

#### 원뿔 그레이디언트

원을 따라 여러 색 사이를 전이합니다. `conic-gradient()` (en-US) 함수를 사용해 생성합니다.
```

<div class="conic-gradient">원뿔 그레이디언트</div>
```

```
div {
  width: 200px;
  height: 200px;
}
```

```css
.conic-gradient {
  background: conic-gradient(lightpink, white, powderblue);
}
```

보간
--

색과 관련한 다른 보간과 마찬가지로, 그레이디언트도 색과 투명도가 동시에 변할 때 예상하지 못한 회색이 등장하는걸 방지하기 위해 알파 채널을 미리 곱한 색 공간을 사용해 계산합니다. 오래 된 브라우저에서 `<color>` 키워드를 사용할 땐 다르게 행동할 수 있음을 주의하세요.

명세
--

| Specification |
| --- |
| CSS Images Module Level 4 # gradients |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* CSS 그레이디언트 사용하기 (en-US)
* 그레이디언트 함수: `linear-gradient()` (en-US), `radial-gradient()` (en-US), `repeating-linear-gradient()` (en-US), `repeating-radial-gradient()` (en-US)


margin - CSS: Cascading Style Sheets

margin
======

**`margin`** CSS 속성은 요소의 네 방향 바깥 여백 영역을 설정합니다. `margin-top`, `margin-right`, `margin-bottom`, `margin-left`의 단축 속성입니다.

시도해보기
-----

위와 아래 여백은 대체 요소가 아닌 `<span>`, `<code>` 등 인라인 요소에선 아무 효과도 없습니다.

**참고:** margin은 요소의 주위에 빈 공간을 추가합니다. 반면 `padding`은 요소의 **내부**에 빈 공간을 만듭니다.

구문
--
```

/* 네 면 모두 적용 */
margin: 1em;
margin: -3px;

/* 세로방향 | 가로방향 */
margin: 5% auto;

/* 위 | 가로방향 | 아래 */
margin: 1em auto 2em;

/* 위 | 오른쪽 | 아래 | 왼쪽 */
margin: 2px 1em 0 auto;

/* 전역 값 */
margin: inherit;
margin: initial;
margin: unset;
```

`margin` 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 각 값은 `<length>`, `<percentage>` 또는 키워드 `auto` 중 하나입니다. 음수 값은 요소와 이웃의 거리가 더 가까워지도록 합니다.

* **한 개의 값**은 모든 네 면의 여백을 설정합니다.
* **두 개의 값**을 지정하면 첫 번째는 **위와 아래**, 두 번째는 **왼쪽과 오른쪽** 여백을 설정합니다.
* **세 개의 값**을 지정하면 첫 번째는 **위**, 두 번째는 **왼쪽과 오른쪽,** 세 번째 값은 **아래** 여백을 설정합니다.
* **네 개의 값**을 지정하면 각각 **상, 우, 하, 좌** 순서로 여백을 지정합니다. (시계방향)
### 값

`<length>`

여백의 크기로 고정값 사용.

`<percentage>`

여백의 크기로 컨테이닝 블록 너비의 백분율 사용.

`auto`

브라우저가 적절한 여백 크기를 선택. 예를 들어 요소를 중앙 정렬하고 싶을 때 사용할 수 있습니다.

### 형식 구문
```

margin =
  <'margin-top'>{1,4}

```

예제
--

### 간단한 예제

#### HTML

```html
<div class="center">이 요소는 중앙 정렬입니다.</div>
<div class="outside">이 요소는 컨테이너 밖으로 빠져 나갔습니다.</div>
```

#### CSS

```css
.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}
```

### 더 많은 예제

```css
margin: 5%; /\* 모두 5% \*/

margin: 10px; /\* 모두 10px \*/

margin: 1.6em 20px;
/\* 상하: 1.6em \*/
/\* 좌우: 20px \*/

margin: 10px 3% -1em;
/\* 상: 10px \*/
/\* 좌우: 3% \*/
/\* 하: -1em \*/

margin: 10px 3px 30px 5px;
/\* 상: 10px \*/
/\* 우: 3px \*/
/\* 하: 30px \*/
/\* 좌: 5px \*/

margin: 2em auto;
/\* 상하: 2em \*/
/\* 수평 중앙정렬 \*/

margin: auto;
/\* 상하: 0 \*/
/\* 수평 중앙정렬 \*/
```

참고
--

### 수평 중앙정렬

현대 브라우저에서 어떤 요소를 중앙에 배치하려면 `display` (en-US)`: flex;` `justify-content``: center;`를 사용하면 됩니다.

하지만 플렉스 박스 레이아웃을 지원하지 않는 Internet Explorer 8-9 등 오래된 브라우저를 지원해야 하면 `margin: 0 auto;`를 대신 사용하세요.

### 여백 상쇄

두 개 요소의 위와 아래 여백은 종종 합쳐져 하나의 여백이 되고, 그 크기는 둘 중 더 큰 여백과 같아집니다. 더 자세한 정보는 여백 상쇄 정복을 참고하세요.

명세
--

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin |

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `margin-bottom`: `0`
* `margin-left`: `0`
* `margin-right`: `0`
* `margin-top`: `0`
 |
| 적용대상 | all elements, except elements with table `display` (en-US) types other than `table-caption`, `table` and `inline-table`. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| Percentages | refer to the width of the containing block |
| 계산 값 | as each of the properties of the shorthand:* `margin-bottom`: the percentage as specified or the absolute length
* `margin-left`: the percentage as specified or the absolute length
* `margin-right`: the percentage as specified or the absolute length
* `margin-top`: the percentage as specified or the absolute length
 |
| Animation type | a length |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* CSS 기본 박스 모델 입문
* 여백 상쇄 정복
* `margin-top`, `margin-right`, `margin-bottom`, `margin-left`


CSS Table - CSS: Cascading Style Sheets

CSS Table
=========

**CSS Table**은 표 데이터의 배치법을 정의하는 CSS 모듈입니다.

참고서
---

### 속성

* `border-collapse`
* `border-spacing`
* `caption-side` (en-US)
* `empty-cells` (en-US)
* `table-layout` (en-US)
* `vertical-align`
명세서
---

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification  |


:focus-within - CSS: Cascading Style Sheets

:focus-within
=============

CSS **`:focus-within`** 의사 클래스는 포커스를 받았거나, 포커스를 받은 요소를 포함하는 요소를 나타냅니다. 즉 스스로 `:focus` 의사 클래스와 일치하거나, 그 자손 중 하나가 `:focus`와 일치하는 요소를 나타냅니다. (섀도 트리 내부도 포함)

```css
/\* Selects a <div> when one of its descendants is focused \*/
div:focus-within {
  background: cyan;
}
```

흔히 쓸 수 있는 예시로서, `<form>`의 `<input>` (en-US) 필드 중 하나가 포커스된 경우 전체 `<form>`을 강조해야 할 때 유용하게 사용할 수 있습니다.

구문
--

Error: could not find syntax for this item예제
--

다음 예제에서는 두 텍스트 입력 칸 중 하나라도 포커스를 받은 경우 양식을 강조합니다.

### HTML

```html
<p>아래 양식의 값을 채워주세요.</p>

<form>
  <label for="given\_name">이름:</label>
  <input id="given\_name" type="text" />
  <br />
  <label for="family\_name">성:</label>
  <input id="family\_name" type="text" />
</form>
```

### CSS

```css
form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

input {
  margin: 4px;
}
```

### 결과

명세
--

| Specification |
| --- |
| Selectors Level 4 # the-focus-within-pseudo |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `:focus`
* `:focus-visible` (en-US)
Experimental


padding-bottom - CSS: Cascading Style Sheets

padding-bottom
==============

**`padding-bottom`** CSS 속성은 요소의 아래쪽에 안쪽 여백 영역을 설정합니다.

시도해보기
-----

요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다.

![The effect of the CSS padding-top property on the element box](/files/4109/padding-bottom.svg)

**참고:** `padding` 속성을 사용하면 하나의 선언으로 네 방향 여백을 모두 설정할 수 있습니다.

구문
--

```css
/\* <length> 값 \*/
padding-bottom: 0.5em;
padding-bottom: 0;
padding-bottom: 2cm;

/\* <percentage> 값 \*/
padding-bottom: 10%;

/\* 전역 값 \*/
padding-bottom: inherit;
padding-bottom: initial;
padding-bottom: unset;
```

`padding-top` 속성의 값은 아래 목록 중 하나로 지정할 수 있습니다. 바깥 여백margin과 다르게, 음수 값은 사용할 수 없습니다.

### 값

`<length>`

여백의 크기로 고정값 사용.

`<percentage>`

여백의 크기로 컨테이닝 블록 **너비**의 백분율 사용.

### 형식 구문
```

padding-bottom =
  <length-percentage [0,∞]>

<length-percentage> =
  <length>      |
  <percentage>

```

예제
--

```css
.content {
  padding-bottom: 5%;
}
.sidebox {
  padding-bottom: 10px;
}
```

명세
--

| Specification |
| --- |
| CSS Box Model Module Level 3 # padding-physical |

|  |  |
| --- | --- |
| 초기값 | `0` |
| 적용대상 | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to `::first-letter` (en-US) and `::first-line` (en-US). |
| 상속 | no |
| Percentages | refer to the width of the containing block |
| 계산 값 | the percentage as specified or the absolute length |
| Animation type | a length |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* CSS 기본 박스 모델 입문
* `padding`


CSS 자료형 - CSS: Cascading Style Sheets

CSS 자료형
=======

**CSS 자료형**은 CSS 속성과 함수가 받아들이는, 키워드와 단위를 포함한 일반적인 값을 정의합니다. 자료형은 Component value type의 특별한 종류입니다.

형식 구문에서 자료형을 나타낼 땐 부등호 "<"와 ">"로 감싸서 표기합니다.

참고서
---

* `<angle>`
* `<angle-percentage>`
* `<angular-color-hint>`
* `<angular-color-stop>`
* `<attr-fallback>`
* `<attr-name>`
* `<basic-shape>` (en-US)
* `<blend-mode>`
* `<calc-product>`
* `<calc-sum>` (en-US)
* `<calc-value>`
* `<color>`
* `<color-stop>`
* `<color-stop-angle>`
* `<counter-style>`
* `<custom-ident>` (en-US)
* `<dimension>` (en-US)
* `<filter-function>`
* `<flex>` (en-US)
* `<frequency>`
* `<frequency-percentage>` (en-US)
* `<gradient>`
* `<ident>` (en-US)
* `<image>`
* `<integer>`
* `<length>`
* `<length-percentage>`
* `<number>`
* `<number-percentage>`
* `<percentage>`
* `<position>`
* `<quote>`
* `<ratio>` (en-US)
* `<resolution>` (en-US)
* `<shape-box>` (en-US)
* `<shape-radius>`
* `<string>` (en-US)
* `<time>`
* `<time-percentage>` (en-US)
* `<timing-function>` (en-US)
* `<toggle-value>`
* `<transform-function>`
* `<type-or-unit>`
* `<url>()`
* `<url-modifier>`
* `<zero>`
명세
--

| Specification |
| --- |
| CSS Values and Units Module Level 4  |

같이 보기
-----

* CSS 단위와 값
* CSS 단위와 값 소개


order - CSS: Cascading Style Sheets

order
=====

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

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

* Learn more
* See full compatibility
* Report feedback
**`order`** CSS 속성은 플렉스 또는 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정합니다. 컨테이너 아이템의 정렬 순서는 오름차순 `order` 값이고, 같은 값일 경우 소스 코드의 순서대로 정렬됩니다.

시도해보기
-----

구문
--

```css
/\* <integer> 값 \*/
order: 5;
order: -5;

/\* 전역 값 \*/
order: inherit;
order: initial;
order: unset;
```

**참고:** `order` 속성은 논리적인 순서나 탭 순서와는 전혀 상관 없이 **화면에 보이는 순서**에만 영향을 줍니다. 따라서 비시각적 매체에 적용해선 안됩니다.

### 값

`<integer>`

아이템의 순서.

### 형식 구문
```

order =
  [ <'layout-order'> <'reading-order'>? ]  |
  [ [ reading || layout ] && <integer> ]

```

예제
--

```html
<header>...</header>
<main>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</main>
<footer>...</footer>
```

위와 같은 기본적인 HTML에서, 다음 CSS 코드는 콘텐츠 블록을 감싸는, 고전적인 양쪽 사이드바 레이아웃을 만듭니다. Flexible Box Layout 모듈이 자동으로 모든 블록의 높이를 동일하게 하며 가능한 가로축 공간을 모두 분배합니다.

```css
main {
  display: flex;
  text-align: center;
}
main > article {
  flex: 1;
  order: 2;
}
main > nav {
  width: 200px;
  order: 1;
}
main > aside {
  width: 200px;
  order: 3;
}
```

### 결과

접근성 고려사항
--------

`order` 속성을 사용하면 실제 DOM 순서와 화면에 보여지는 콘텐츠의 순서가 서로 연결되지 않습니다. 이는 낮은 시각으로 스크린 리더 등 보조 기술을 사용해 이동하는 사용자의 경험에 부정적인 영향을 줄 수 있습니다. 시각적 순서(CSS)가 중요하더라도 스크린 리더 사용자는 제대로 된 읽기 순서를 알 수 없습니다.

* Flexbox & the keyboard navigation disconnect — Tink
* Source Order Matters | Adrian Roselli
* MDN Understanding WCAG, Guideline 1.3 explanations (en-US)
* Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0
명세
--

| Specification |
| --- |
| CSS Display Module Level 3 # order-property |

|  |  |
| --- | --- |
| 초기값 | `0` |
| 적용대상 | Flex items, grid items, and absolutely-positioned flex and grid container children |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | an integer |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* CSS 플렉스박스 안내서: *플렉스박스의 기본 개념*
* CSS 플렉스박스 안내서: *플렉스 아이템의 순서 정하기 (en-US)*
* CSS 그리드 안내서: *CSS 그리드 레이아웃과 접근성 (en-US)*


padding-left - CSS: Cascading Style Sheets

padding-left
============

**`padding-left`** CSS 속성은 요소의 왼쪽에 안쪽 여백 영역을 설정합니다.

시도해보기
-----

요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다.

**참고:** `padding` 속성을 사용하면 하나의 선언으로 네 방향 여백을 모두 설정할 수 있습니다.

구문
--

```css
/\* <length> 값 \*/
padding-left: 0.5em;
padding-left: 0;
padding-left: 2cm;

/\* <percentage> 값 \*/
padding-left: 10%;

/\* 전역 값 \*/
padding-left: inherit;
padding-left: initial;
padding-left: unset;
```

`padding-left` 속성의 값은 아래 목록 중 하나로 지정할 수 있습니다. 바깥 여백margin과 다르게, 음수 값은 사용할 수 없습니다.

### 값

`<length>`

여백의 크기로 고정값 사용.

`<percentage>`

여백의 크기로 컨테이닝 블록 너비의 백분율 사용.

### 형식 구문
```

padding-left =
  <length-percentage [0,∞]>

<length-percentage> =
  <length>      |
  <percentage>

```

예제
--

```css
.content {
  padding-left: 5%;
}
.sidebox {
  padding-left: 10px;
}
```

명세
--

| Specification |
| --- |
| CSS Box Model Module Level 3 # padding-physical |

|  |  |
| --- | --- |
| 초기값 | `0` |
| 적용대상 | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to `::first-letter` (en-US) and `::first-line` (en-US). |
| 상속 | no |
| Percentages | refer to the width of the containing block |
| 계산 값 | the percentage as specified or the absolute length |
| Animation type | a length |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* CSS 기본 박스 모델 입문
* `padding`


사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets

사용자 지정 CSS 속성 사용하기 (변수)
=======================

**사용자 지정 속성**(**CSS 변수**, **종속 변수**)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. 사용자 지정 속성은 전용 표기법을 사용해 정의하고, (`--main-color: black;`) `var()` 함수를 사용해 접근할 수 있습니다. (`color: var(--main-color);`)

복잡한 웹사이트는 어마어마한 양의 CSS를 가지고 있는데, 종종 많은 값을 반복적으로 사용합니다. 예를 들어, 수 백 곳의 서로 다른 위치에서 같은 색상을 사용한다면, 그 색을 바꿔야 할 상황이 왔을 때 대규모 전역 검색 바꾸기를 피할 수 없습니다. 사용자 지정 속성을 사용하면 한 영역에 값을 저장해놓고 다른 여러 곳에서 참조해갈 수 있습니다. 추가로 오는 장점은 의미를 가지는 식별자를 사용한다는 것으로, `#00ff00`보다는 `--main-text-color`가 이해하기 쉽다는 것입니다. 특히 같은 색을 다른 맥락에서 사용할 때 이 장점이 도드라집니다.

사용자 지정 속성은 종속 대상이며 부모로부터 상속합니다.

기본 사용법
------

사용자 지정 속성은 두 개의 붙임표로 시작하는 속성의 이름과 함께, 유효한 CSS 값이라면 아무거나 그 값으로 지정해 선언합니다. 다른 일반적인 속성과 마찬가지로 사용자 지정 속성도 아래와 같이 규칙 집합 내에 작성합니다.

```css
element {
  --main-bg-color: brown;
}
```

규칙 집합의 선택자는 사용자 지정 속성을 사용할 수 있는 범위를 정의합니다. 흔히 보이는 패턴은 `:root` 의사 클래스에 선언해서 여러분의 HTML 문서 어디에서나 사용자 지정 속성에 접근할 수 있도록 구성하는 것입니다.

```css
:root {
  --main-bg-color: brown;
}
```

그러나 반드시 이렇게 선언해야 하는 것은 아닙니다. 범위를 제한해야 하는 적절한 이유가 있을 수도 있으니까요.

**참고:** 사용자 지정 속성의 이름은 대소문자를 구분합니다. 따라서 `--my-color`와 `--My-color`는 서로 다른 속성으로써 처리합니다.

위에서 언급했듯, 사용자 지정 속성의 값을 사용할 때에는 일반적인 값의 자리에 `var()` 함수를 지정하고, 그 매개변수로는 사용자 지정 속성의 이름을 제공합니다.

```css
element {
  background-color: var(--main-bg-color);
}
```

사용자 지정 속성 첫 단계
--------------

동일한 색상을 여러 클래스에 적용하는, 다음의 간단한 예제로 시작하겠습니다.

```css
.one {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 100px;
}

.five {
  background-color: brown;
}
```

HTML에 적용해보겠습니다.

```html
<div>
  <div class="one">1:</div>
  <div class="two">2: Text <span class="five">5 - more text</span></div>
  <input class="three" />
  <textarea class="four">4: Lorem Ipsum</textarea>
</div>
```

결과는 다음과 같습니다.

반복되는 CSS에 주목해보세요. 배경 색을 여러 곳에서 `brown`으로 지정하고 있습니다. 일부 CSS 선언의 경우 더 상위 단계로 반복되는 항목을 옮겨서 CSS의 상속을 통해 자연스럽게 해결할 수도 있습니다. 그러나 보다 복잡한 프로젝트의 경우 항상 이렇게 할 수 있는 것은 아닙니다. 이 때 `:root` 의사 클래스에 사용자 지정 속성을 선언하고, 필요한 곳에서 그 속성을 참조함으로써 반복 코드의 필요를 줄일 수 있습니다.

```css
:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 100px;
}

.five {
  background-color: var(--main-bg-color);
}
```

위의 코드는 이전 예제와 동일한 결과물을 낳지만, 원하는 값에 대한 단 하나의 선언만이 필요합니다. 나중에 페이지 전체에 걸쳐 해당 값을 바꿔야 할 경우 특이 유용해집니다.

사용자 지정 속성의 상속
-------------

사용자 지정 속성은 상속 대상입니다. 그러므로 특정 요소에 사용자 지정 속성 값을 설정하지 않은 경우, 그 부모의 값을 사용합니다. 다음 HTML 코드를 살펴보세요.

```html
<div class="one">
  <div class="two">
    <div class="three"></div>
    <div class="four"></div>
  </div>
</div>
```

아래의 CSS 코드를 적용할 것입니다.

```css
.two {
  --test: 10px;
}

.three {
  --test: 2em;
}
```

그러면, `var(--test)`의 결과는 다음과 같습니다.

* `class="two"` 요소: `10px`
* `class="three"` 요소: `2em`
* `class="four"` 요소: `10px` (부모로부터 상속)
* `class="one"` 요소: 유효하지 않음. 모든 사용자 지정 속성의 기본값.

이것들은 실제 CSS변수가 아니라 사용자 지정 속성이라는 것을 염두해 두자. 이 값들은 다른 규칙에서 사용하기 위해 따로 저장되는 것이 아니라, 필요할 때만 계산된다. 예를 들어, 요소의 속성을 설정하거나, 형제의 자손 규칙에서 이 요소를 검색할 수는 없다. 이 속성은 일반적인 CSS와 같이, 선택자가 일치하거나 해당 선택자의 하위 항목일 경우에만 설정된다.

사용자 지정 속성 대안 값
--------------

주어진 변수가 아직 정의되지 않았을 때, var() 를 이용하여 여러 개의 **대체 변수**를 정의할 수 있다. 이는 사용자 정의 요소(Custom Element)및 섀도우 돔(Shadow DOM)으로 작업할 때 유용하게 쓸 수 있다.

함수에 있어서의 첫번째 논쟁은 대체될 사용자 속성의 이름이다. 두번째는 아래와 같이 잘못된 사용자 속성을 참조하였을 때 대신 사용할 수 있는 대체 변수이다:

```css
.two {
  color: var(--my-var, red); /\* --my-var가 정의되지 않았을 경우 red로 표시됨 \*/
}

.three {
  background-color: var(
    --my-var,
    var(--my-background, pink)
  ); /\* my-var와 --my-background가 정의되지 않았을 경우 pink로 표시됨 \*/
}

.three {
  background-color: var(
    --my-var,
    --my-background,
    pink
  ); /\* 유효하지 않음: "--my-background, pink" \*/
}
```

**참고:** 사용자 속성같은 대체 구문은 쉼표를 허용한다. 예를 들어, var(--foo, red, blue)는 빨강, 파랑의 fallback을 정의하고 있다; 즉, 첫번째 쉼표와 함수 마지막 사이에 있는 값들은 모두 대체 변수로 간주한다.

유효성과 값
------

*각 속성과 연관된 기본 CSS 개념의 유효성은 사용자 지정 속성과 관련하여 별로 유용하지 않다. 사용자 속성 값을 분석할 때, 브라우저는 그것들이 어디서 사용되는지 모르기 때문에 거의 모든 값을 유효한 것으로 간주할 수 밖에 없다.*

불행히도, 이 유효한 값들은 `var()` 함수 표현을 통하여 이해할 수 없는 문맥 안에서도 사용될 수 있다. 속성 및 사용자 변수로 인해 유효하지 않은 CSS 선언문이 만들어지면 계산된 시간에 유효한 새로운 개념이 생기게 된다\*.\*

유효하지 않은 변수를 만날 때
----------------

만일 브라우저가 유효하지 않은 `var()` 구문을 만나게 되면, 그 속성의 초기값이나 상속된 값이 사용된다.

아래의 코드를 보자.

### HTML

```html
<p>This paragraph is initial black.</p>
```

### CSS

```css
:root {
  --text-color: 16px;
}
p {
  color: blue;
}
p {
  color: var(--text-color);
}
```

예상대로 브라우저는 `--text-color` 의 값으로 `var(--text-color)` 를 대체했지만 `16px` 는 `color`에 유효한 값이 아니다. 대체한 결과, 그 속성은 의미가 통하지 않는다. 브라우저는 이 상황을 두 단계로 처리한다:

1. color 속성이 상속되었는지를 확인한다. 확인, 그런데 `<p>` 가 color 속성과 연관된 부모 엘리먼트가 없다. 그렇다면 다음 단계로 넘어간다.
2. 값을 **default initial value**,(초기 설정 디폴트값) 즉, black 으로 처리한다.
### 결과

단락의 color 값은 blue가 되지 못한다. 유효하지 않은 값이 폴백 (fallback)이 아닌 초기설정 디포트값으로 대체되었기 때문이다. 만일 사용자가 어떠한 매개변수값 없이 `color: 16px` 를 쓴다면 에러(syntax error)를 받게 될 것이다. 대신 그 전에 지정된 선언이 사용된다.

**참고:** CSS 속성/값 쌍에서 에러(syntax error)가 나면 그 라인은 무시되지만 계단식으로 지정된 값, 유효하지 않은 대체적용(substitution) - 유효하지 않은 사용자 지정값을 사용하는 것 - 은 무시되지 않으며, 그 값은 상속된다.

JavaScript에서의 값
---------------

JavaScript로 사용자 속성값을 사용하는 것은 표준 속성을 사용하는 것과 같다.

```js
// 인라인 스타일에서 변수 얻기
element.style.getPropertyValue("--my-var");

// 어느 곳에서나 변수 얻기
getComputedStyle(element).getPropertyValue("--my-var");

// 인라인 스타일에 변수 설정하기
element.style.setProperty("--my-var", jsVar + 4);
```

같이 보기
-----

* `사용자 지정 속성` (en-US)


border-right - CSS: Cascading Style Sheets

border-right
============

**`border-right`** CSS 단축 속성은 요소의 오른쪽 테두리를 설정합니다. `border-right-width`, `border-right-style`, `border-right-color`의 값을 지정합니다.

시도해보기
-----

다른 단축 속성과 마찬가지로, `border-right`는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다.

```css
border-right-style: dotted;
border-right: thick green;
```

```css
border-right-style: dotted;
border-right: none thick green;
```

따라서 `border-right`보다 먼저 지정한 `border-right-style`의 값은 무시됩니다. `border-right-style`의 기본값은 `none`이므로, `border-style`을 명시하지 않으면 테두리를 만들지 않습니다.

구문
--

```css
border-right: 1px;
border-right: 2px dotted;
border-right: medium dashed green;
```

`border-right`은 한 개에서 세 개의 값을 사용해 지정할 수 있고, 순서는 상관하지 않습니다.

### 값

`<br-width>`

`border-right-width`.

`<br-style>`

`border-right-style`.

`<color>`

`border-right-color`.

### 형식 구문
```

border-right =
  <line-width>  ||
  <line-style>  ||
  <color>

<line-width> =
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

<line-style> =
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

```

예제
--

```html
<div>오른쪽 테두리를 가진 요소입니다.</div>
```

```css
div {
  border-right: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```

명세
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `border-right-width`: `medium`
* `border-right-style`: `none`
* `border-right-color`: `currentcolor`
 |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| 계산 값 | as each of the properties of the shorthand:* `border-right-width`: the absolute length or `0` if `border-right-style` is `none` or `hidden`
* `border-right-style`: as specified
* `border-right-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-right-color`: a color
* `border-right-style`: discrete
* `border-right-width`: a length
 |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


CSS Color - CSS: Cascading Style Sheets

CSS Color
=========

**CSS 색상**은 색상, 색상 유형, 색상 혼합, 투명도 및 이러한 색상 효과를 HTML에 적용하는 방법을 다루는 CSS 모듈입니다. `<color>` 값을 취하는 모든 CSS 속성이 이 모듈에 속하는건 아니지만 의존성은 가지고 있습니다.

참고서
---

### 속성

* `color`
* `color-adjust` (en-US)
* `opacity`
### 자료형

* `<color>`
안내서
---

CSS를 사용하여 HTML 요소에 색상 적용하기 (en-US)

CSS를 사용하여 다양한 유형의 콘텐츠에 색상을 적용하는 방법에 대한 안내서입니다. 모든 색상 관련 CSS 속성이 적용됩니다.

도구
--

색상 선택 도구

이 도구를 사용하면 맞춤 색상을 쉽게 만들고 조정하고 실험 할 수 있습니다.

명세
--

| Specification |
| --- |
| CSS Color Module Level 4  |
| CSS Color Module Level 5  |

같이 보기
-----

* 다른 사양의 일부 색상 관련 속성 : `background-color`, `border-color`, `outline-color` (en-US), `text-decoration-color` (en-US), `text-emphasis-color` (en-US), `text-shadow` (en-US), `caret-color` (en-US), and `column-rule-color` (en-US)
* CSS에서는 그레이디언트가 색상이 아니라 이미지입니다.


brightness() - CSS: Cascading Style Sheets

brightness()
============

**`brightness()`** CSS 함수는 주어진 이미지에 선형 계수를 적용해 더 밝거나 어둡게 만듭니다. 반환 값은 `<filter-function>`입니다.

시도해보기
-----

구문
--
```

brightness(amount)
```

### 매개변수

`amount`

`<number>` 또는 `<percentage>`로 지정한, 결과물의 밝기. `100%` 미만의 값은 이미지를 어둡게 만들고, `100%`를 초과하는 값은 밝게 합니다. `0%`는 이미지를 완전한 검은색으로 바꾸고 `100%`는 주어진 입력 이미지를 그대로 반환합니다. 보간 시, 누락 값은 `1`입니다.

예제
--

```css
brightness(0%)   /\* 완전한 검정 \*/
brightness(0.4)  /\* 40% 밝기 \*/
brightness(1)    /\* 변화 없음 \*/
brightness(200%) /\* 두 배 밝기 \*/
```

같이 보기
-----

* `<filter-function>`


contrast() - CSS: Cascading Style Sheets

contrast()
==========

**`contrast()`** CSS 함수는 주어진 이미지의 대비를 조절합니다. 반환 값은 `<filter-function>`입니다.

시도해보기
-----

구문
--
```

contrast(amount)
```

### 매개변수

`amount`

`<number>` 또는 `<percentage>`로 지정한, 결과물의 대비. `100%` 미만의 값은 이미지의 대비를 낮추고, `100%`를 초과하는 값은 높입니다. `0%`는 이미지를 완전히 회색으로 바꾸고 `100%`는 입력 이미지를 그대로 반환합니다. 보간 시, 누락 값은 `1`입니다.

예제
--

```css
contrast(0)     /\* 완전히 회색 \*/
contrast(65%)   /\* 대비 65% \*/
contrast(1)     /\* 변화 없음 \*/
contrast(200%)  /\* 대비 두 배 \*/
```

같이 보기
-----

* `<filter-function>`


blur() - CSS: Cascading Style Sheets

blur()
======

**`blur()`** CSS 함수는 주어진 이미지에 가우시안 블러를 적용합니다. 반환 값은 `<filter-function>`입니다.

시도해보기
-----

구문
--
```

blur(radius)
```

### 매개변수

`radius`

`<length>`로 지정한 블러 효과의 지름. 가우시안 함수의 표준 편차, 즉 화면에 보이는 픽셀의 색상이 어느 범위까지 섞일지를 지정합니다. 따라서 큰 값은 이미지를 더 흐리게 만듭니다. `0`은 주어진 입력 결과를 그대로 반환합니다. 보간 시, 누락 값은 0입니다.

예제
--

```css
blur(0)        /\* 변화 없음 \*/
blur(8px)      /\* 8px 블러 \*/
blur(1.17rem)  /\* 1.17rem 블러 \*/
```

같이 보기
-----

* `<filter-function>`


CSS로 이미지 스프라이트 구현하기 - CSS: Cascading Style Sheets

CSS로 이미지 스프라이트 구현하기
===================

**이미지 스프라이트**는 여러 개의 이미지가 필요한 아주 많은 웹앱에서 사용합니다. 이미지 각각을 별도의 파일로 추가하는 대신, 이미지를 하나의 파일로 만들어서 포함하면 HTTP 요청 수가 줄기 때문에 메모리와 네트워크 사용량 측면에서 효율적입니다.

**참고:** HTTP/2를 사용할 땐 오히려 작은 요청을 여러 번 날리는 게 네트워크 사용량에 더 좋을 수도 있습니다.

구현
--

`toolbtn` 클래스가 부여된 모든 아이템에 어떤 이미지가 부여된다고 가정해 봅시다.

```css
.toolbtn {
  background: url(myfile.png);
  display: inline-block;
  height: 20px;
  width: 20px;
}
```

배경 이미지의 위치는 속성에 지정된 `url()` 값 다음에 x, y 2개 값으로 지정할 수도 있고, `background-position` (en-US) 속성으로 지정할 수 있습니다.

```css
#btn1 {
  background-position: -20px 0px;
}

#btn2 {
  background-position: -40px 0px;
}
```

이 CSS 는 ID 가 'btn1' 인 엘리먼트를 왼쪽으로 20 pixel 이동시키고 ID 가 'btn2' 인 엘리먼트를 왼쪽으로 40 pixel 이동시킬 것입니다 (앞서 보인 이미지 룰에 의해 두 엘리먼트에 `toolbtn` 클래스가 부여됐다고 가정합시다).

비슷하게, 마우스 호버 상태를 만들 수도 있습니다.

```css
#btn:hover {
  background-position: <pixels shifted right>px <pixels shifted down>px;
}
```

같이 보기
-----

* Full working demo at CSS Tricks


linear-gradient() - CSS: Cascading Style Sheets

linear-gradient()
=================

**`linear-gradient()`** CSS 함수 (en-US)는 두 개 이상의 색상이 직선을 따라 점진적으로 변화되는 선형 그라데이션 그림을 생성합니다. 그 결과는 `<gradient>` 데이터 유형의 객체이며, 이는 `<image>`의 특별한 종류 중 하나입니다.

시도해보기
-----

구문
--

```css
/\* 45도 경사를 기준으로
 파란색에서 시작해서 빨간색으로 변화하는 그라데이션 \*/
linear-gradient(45deg, blue, red);

/\* 오른쪽 아래에서 왼쪽 위로,
 파란색에서 시작해서 빨간색으로 변화하는 그라데이션 \*/
linear-gradient(to left top, blue, red);

/\* 색이 중지되는 지점을 명시. 아래에서 위로 시작하여,
 파란색에서 시작한 뒤 총 길이의 40% 지점에서 초록색으로 변화하고,
 마지막에는 빨간색으로 변화하는 그라데이션 \*/
linear-gradient(0deg, blue, green 40%, red);

/\* 색상 힌트. 왼쪽에서 오른쪽으로,
 빨간색에서 시작한 뒤 그라데이션의 길이의 10% 지점에서 중간 색상에 도달하여
 나머지 90%의 길이는 파란색으로 변화하는 그라데이션 \*/
linear-gradient(.25turn, red, 10%, blue);

/\* 여러 색 중지 지점을 명시. 45도 경사를 기준으로
 왼쪽 아래의 절반은 빨간색, 오른쪽 위의 절반은 파란색으로
 뚜렷한 선을 기준으로 변화하는 그라데이션 \*/
linear-gradient(45deg, red 0 50%, blue 50% 100%);
```

### 값들

`<side-or-corner>`

그라데이션의 시작 지점의 위치. 이 값이 지정될 때에는 `to`라는 값과 함께 최대 2개의 키워드를 가질 수 있습니다. 한 경우는 `left`와 `right` 값을 통해 수평선을 의미하는 방식이고, 다른 경우는 `top`과 `bottom`을 이용해 수직선을 의미하는 방식입니다. 각 키워드의 순서는 중요하지 않습니다. 만약 이 값이 명시되지 않으면, 기본적으로 `to bottom`이 지정됩니다.

`to top`, `to bottom`, `to left`, 그리고 `to right`은 각각 각도 `0deg`, `180deg`, `270deg`, `90deg`과 동일합니다. 다른 값의 경우는 각도 그 자체로 해석됩니다.

`<angle>`

그라데이션 선 방향의 각도. `0deg`은 `to top`과 동일한 의미를 가지며 값이 증가할수록 시계 방향으로 회전합니다.

`<linear-color-stop>`

`<color>` 값의 색 중지점으로, 하나 혹은 두 개의 중지 위치에 대한 값이 뒤따라옵니다. 중지 위치에 대한 값은 그라데이션의 축을 따라 정해지는 `<percentage>` 혹은 `<length>` 값 입니다.

`<color-hint>`

인접한 색상 중지점 사이에서, 그라데이션이 어떻게 색을 어떻게 변화시킬지를 정의하기 위한 보간 정보. 길이는 두 색상 중지점 사이의 어떤 지점에서 중간 색상에 도달해야 하는지를 명시합니다. 만약 이 값이 명시되지 않으면, 색상 변화의 중간지점은 두 색상 중지점의 중간이 됩니다.

**참고:** CSS 그라데이션의 색 중지점의 렌더링 방식은 SVG 그라데이션 (en-US)과 동일한 규칙을 따릅니다.

Mozilla Firefox, 특히 80.0b3 버전에서는 위의 첫 예제가 동일하게 렌더링되지 않음에 유의하세요. 동일하게 렌더링되기 위해서는 HTML의 height 특성을 100% 혹은 100vh로 설정해야 합니다.

설명
--

다른 그라데이션 방식처럼, 선형 그라데이션은 자체적인 크기 정보가 없습니다. 즉, 선호되는 크기나 비율에 대한 정보가 없습니다. 그라데이션의 구체적인 크기는 해당 그라데이션이 적용되는 요소의 크기에 맞추어집니다.

컨테이너를 반복하면서 채우는 선형 그라데이션을 생성하기 위해서는 `repeating-linear-gradient()` (en-US) 함수를 사용하세요.

`<gradient>`는 `<image>` 데이터 유형에 속하기 때문에, `<image>`가 사용되는 곳에만 쓰일 수 있습니다. 이러한 이유로, `linear-gradient()`는 `background-color` 속성이나 `<color>` 데이터 유형을 사용하는 다른 속성에는 적용할 수 없습니다.

### 선형 그라데이션의 구성

선형 그라데이션은 하나의 축(그라데이션 선)과 2개 혹은 그 이상의 색 중지점 들로 구성됩니다. 축의 각 점은 구별되는 색상에 대응됩니다. 부드러운 그라데이션을 표현하기 위해, `linear-gradient()` 함수는 그라데이션 선에 수직이 되도록 일련의 색상 선들을 그립니다. 각각의 선이 지나가는 부분의 색상은 그라데이션 선과 수직선이 교차하는 부분의 색상과 동일합니다.

![linear-gradient.png](/ko/docs/Web/CSS/gradient/linear-gradient/linear-gradient.png)

그라데이션 선은 그라데이션 이미지를 포함하는 컨테이너 박스의 중심과 각도에 의해서 결정됩니다. 그라데이션의 색상들은 두 개 혹은 그 이상의 점에 의해 결정되며, 이 점은 시작점과 끝점 그리고 그 사이의 추가적인 색 중지점들로 구성됩니다.

시작점은 그라데이션 선에서 첫 색상이 시작되는 위치입니다. 끝점은 마지막 색상이 끝나는 위치입니다. 이 각각의 두 지점들은 같은 사분면에 존재하는 박스 모서리로부터 시작되는 수직선과 그라데이션 선의 교차점으로 정의됩니다. 끝점은 시작점과 대칭 관계라고 이해할 수 있습니다. 조금은 복잡해보이는 이 정의는 매직 코너라는 흥미로운 효과를 만들게 됩니다. 즉, 시작점과 끝점에 가장 가까운 모서리는 대응되는 점과 동일한 색상을 갖게 됩니다.

#### 그라데이션 재구성하기

그라데이션 선에 더 많은 색 중지점을 추가함으로써, 더 많은 색상 간의 변화를 표현하도록 재구성할 수 있습니다. 색 중지점의 위치는 `<length>`과 `<percentage>`을 사용해서 명시할 수 있습니다. 만약 색상의 위치를 지정하지 않으면 이전과 이후에 정의된 색상의 중간 지점에 위치하게 됩니다. 아래의 두 그라데이션은 동일한 그라데이션을 의미합니다.

```css
linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
```

기본적으로 색상의 변화는 하나의 색 중지점으로부터 그 다음 색 중지점으로 부드럽게 표현되며, 색상 사이의 중간 지점에 중간 색상이 표현됩니다. 중간 색상이 표현되는 지점은 두 색 중지점 사이에 % 색상 힌트를 추가함으로써 이동시킬 수 있습니다. 아래의 예제는 시작점으로부터 10% 지점까지는 빨간색으로 표현하고 90% 지점부터 마지막까지는 파란색으로 표현하면서 그 사이의 중간 색상이 표현될 위치를 30%로 지정합니다. 만약 30%가 지정되지 않았다면 50% 위치에 중간 색상이 표현됩니다.

```css
linear-gradient(red 10%, 30%, blue 90%);
```

만약 두 개 이상의 색 중지점이 같은 위치로 지정되면 색상의 변화는 처음과 마지막 색상 사이에 해당 위치의 뚜렷한 선을 기준으로 표현됩니다.

색 중지점은 오름차순으로 정의되어야 합니다. 뒤따르는 색 중지점이 더 낮은 값을 가지고 있는 경우 이전 색 중지점의 값을 덮어쓰게 되면서 뚜렷한 선이 생기게 됩니다. 아래의 예제는 40% 지점부터는 빨간색이 노란색으로 바뀌면서 이후 25% 지점을 지나면서 파란색으로 변화가 표현됩니다.

```css
linear-gradient(red 40%, yellow 30%, blue 65%);
```

다중 위치 색 중지점을 사용하는 것도 가능합니다. 색상은 두 이접한 색 중지점으로 정의될 수 있으며 CSS 정의에서 두 위치를 포함할 수 있습니다. 아래의 세 가지 그라데이션은 동일하게 표현됩니다.

```css
linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);
```

기본적으로 0% 색 중지점을 갖는 색상이 없으면 가장 첫번째로 정의된 색상이 그 지점에 표현됩니다. 비슷하게 마지막 색 중지점을 갖는 색상이 없으면 가장 마지막에 정의된 색상이 100%까지 표현됩니다.

형식 구문
-----
```

<linear-gradient()> =
  linear-gradient( [ <linear-gradient-syntax> ] )

<linear-gradient-syntax> =
  [ <angle> | to <side-or-corner> ]? , <color-stop-list>

<side-or-corner> =
  [ left | right ]  ||
  [ top | bottom ]

<color-stop-list> =
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

<linear-color-stop> =
  <color> <length-percentage>?

<linear-color-hint> =
  <length-percentage>

<length-percentage> =
  <length>      |
  <percentage>

```

예제
--

### 45도 각도를 가지는 그라데이션
```

body {
  width: 100vw;
  height: 100vh;
}
```

```css
body {
  background: linear-gradient(45deg, red, blue);
}
```

### 그라데이션 선의 60% 지점부터 시작되는 그라데이션
```

body {
  width: 100vw;
  height: 100vh;
}
```

```css
body {
  background: linear-gradient(135deg, orange 60%, cyan);
}
```

### 다중 위치 색 중지점을 갖는 그라데이션

This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.
```

body {
  width: 100vw;
  height: 100vh;
}
```

```css
body {
  background: linear-gradient(
    to right,
    red 20%,
    orange 20% 40%,
    yellow 40% 60%,
    green 60% 80%,
    blue 80%
  );
}
```

### 더 많은 선형 그라데이션 예제

더 많은 예제를 보기 위해서는 CSS 그라데이션 사용하기 (en-US)를 참조하세요.

명세서
---

| Specification |
| --- |
| CSS Images Module Level 4 # linear-gradients |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* CSS 그라데이션 사용하기 (en-US)
* 다른 그라데이션 함수들: `repeating-linear-gradient()` (en-US), `radial-gradient()` (en-US), `repeating-radial-gradient()` (en-US), `conic-gradient()` (en-US), `repeating-conic-gradient()` (en-US)
* `<image>`
* `element()` (en-US)
* `image()` (en-US)
* `image-set()` (en-US)
* `cross-fade()` (en-US)


여백 상쇄 정복 - CSS: Cascading Style Sheets

여백 상쇄 정복
========

여러 블록의 위쪽 및 아래쪽 바깥 여백(마진)은 경우에 따라 제일 큰 여백의 크기를 가진 단일 여백으로 결합(상쇄)되곤 합니다. 이런 동작을 **여백 상쇄**라고 부릅니다. 단, 플로팅 요소와 절대 위치를 지정한 요소의 여백은 절대 상쇄되지 않습니다.

여백 상쇄는 다음과 같은 세 가지 기본 상황에 발생합니다.

인접 형제

인접 형제 요소간의 바깥 여백은 서로 상쇄됩니다. (단, 뒤쪽 형제가 플로팅을 해제해야 하는 경우는 예외)

부모와 자손을 분리하는 콘텐츠 없음

부모 블록에 테두리, 안쪽 여백, 인라인 부분이 없고 블록 서식 맥락이 생성되지 않았으며 부모의 `margin-top`을 자손의 `margin-top`과 분리할 권한이 없는 경우, 또는, 부모 블록에 테두리, 안쪽 여백, 인라인 콘텐츠가 없으며 부모의 `margin-bottom`과 자손의 `margin-bottom`을 분리할 `height`, `min-height`, `max-height`가 존재하지 않는 경우 부모와 자손의 여백이 상쇄됩니다. 상쇄된 여백은 부모 블록 바깥에 위치합니다.

빈 블록

테두리, 안쪽 여백, 인라인 콘텐츠, `height`, `min-height`, `max-height`가 없으면 블록의 `margin-top`과 `margin-bottom`이 서로 상쇄됩니다.

다음은 참고할만한 사항입니다.

* (세 개 이상의 여백 사이의) 더 복잡한 여백 상쇄는 위의 기본 상황이 서로 결합되어 발생합니다.
* 위의 규칙은 바깥 여백이 0이어도 적용되므로, 두 번째 규칙을 만족하는 경우 부모의 바깥 여백이 0이건 아니건 자손의 바깥 여백은 부모 밖으로 나오게 됩니다.
* 음수 값을 가진 바깥 여백을 포함할 경우, 상쇄된 여백의 크기는 제일 큰 양수 여백과 제일 작은(음의 방향으로, 절댓값이 제일 큰) 여백의 합이 됩니다.
* 모든 바깥 여백이 음수 값을 가질 경우, 상쇄된 여백의 크기는 제일 작은(음의 방향으로, 절댓값이 제일 큰) 여백의 크기가 됩니다. 인접 요소와 중첩 요소 모두에 적용됩니다.
예제
--

### HTML

```html
<p>The bottom margin of this paragraph is collapsed …</p>
<p>
  … with the top margin of this paragraph, yielding a margin of
  <code>1.2rem</code> in between.
</p>

<div>
  This parent element contains two paragraphs!
  <p>
    This paragraph has a <code>.4rem</code> margin between it and the text
    above.
  </p>
  <p>
    My bottom margin collapses with my parent, yielding a bottom margin of
    <code>2rem</code>.
  </p>
</div>

<p>I am <code>2rem</code> below the element above.</p>
```

### CSS

```css
div {
  margin: 2rem 0;
  background: lavender;
}

p {
  margin: 0.4rem 0 1.2rem 0;
  background: yellow;
}
```

### 결과


CSS 기본 박스 모델 입문 - CSS: Cascading Style Sheets

CSS 기본 박스 모델 입문
===============

문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 **CSS 기본 박스 모델**에 따라 각각의 요소를 사각형 박스로 표현합니다. CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정합니다.

하나의 박스는 네 부분(영역)으로 이루어집니다. 각 영역을 콘텐츠 영역, 안쪽 여백(패딩) 영역, 테두리 영역, 그리고 바깥 여백(마진) 영역이라고 부릅니다.

![CSS Box model](/ko/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model/boxmodel.png)

콘텐츠 영역
------

**콘텐츠 영역**(content area)은 콘텐츠 경계(content edge)가 감싼 영역으로, 글이나 이미지, 비디오 등 요소의 실제 내용을 포함합니다. 콘텐츠 영역의 크기는 콘텐츠 너비(콘텐츠 박스 너비)와 콘텐츠 높이(콘텐츠 박스 높이)입니다. 배경색과 배경 이미지를 가지고 있기도 합니다.

`box-sizing` 속성의 값이 기본 값인 `content-box`이며 요소가 블록 레벨 요소인 경우, 콘텐츠 영역의 크기를 `width`, `min-width`, `max-width`, `height`, `min-height`, `max-height` 속성을 사용해 사용해 명시적으로 설정할 수 있습니다.

안쪽 여백(패딩) 영역
------------

**안쪽 여백 영역**(패딩 영역, padding area)은 안쪽 여백 경계(padding edge)가 감싼 영역으로, 콘텐츠 영역을 요소의 안쪽 여백까지 포함하는 크기로 확장합니다. 영역의 크기는 안쪽 여백 박스 너비와 안쪽 여백 박스 높이입니다.

안쪽 여백의 두께는 `padding-top`, `padding-right`, `padding-bottom`, `padding-left`와 단축 속성인 `padding`이 결정합니다.

테두리 영역
------

**테두리 영역**(border area)은 테두리 경계(border edge)가 감싼 영역으로, 안쪽 여백 영역을 요소의 테두리까지 포함하는 크기로 확장합니다. 영역의 크기는 테두리 박스 너비와 테두리 박스 높이입니다.

테두리의 두께는 `border-width`와 단축 속성인 `border`가 결정합니다. `box-sizing` 속성의 값이 `border-box`라면 테두리 영역의 크기를 `width`, `min-width`, `max-width`, `height`, `min-height`, `max-height` 속성을 사용해 명시적으로 설정할 수 있습니다. 박스의 배경(`background-color` 또는 `background-image`)은 테두리의 바깥 경계까지 늘어나고, 그릴 땐 테두리에 가려집니다. 이 기본동작 방식은 `background-clip` 속성으로 바꿀 수 있습니다.

바깥 여백(마진) 영역
------------

**바깥 여백 영역**(마진 영역, margin area)은 바깥 여백 경계(margin edge)가 감싼 영역으로, 테두리 요소를 확장해 요소와 인근 요소 사이의 빈 공간까지 포함하도록 만듭니다. 영역의 크기는 바깥 여백 박스 너비와 바깥 여백 박스 높이입니다.

바깥 여백 영역의 크기는 `margin-top`, `margin-right`, `margin-bottom`, `margin-left`와 단축 속성인 `margin`이 결정합니다. 여백 상쇄가 발생할 때는 요소 간에 바깥 여백이 공유되므로 여백 영역이 명확하게 결정되지 않습니다.

끝으로, 비대체 인라인 요소가 차지하는 공간의 크기(줄 높이에 기여하는 양)는 요소 주위에 테두리와 안쪽 여백이 표시되더라도 `line-height` (en-US) 속성으로 결정한다는 점을 주의하세요.

같이 보기
-----

* 컨테이닝 블록의 모든 것
* 종속 (en-US)
* 계단식 및 상속
* CSS 주요 개념:
    + CSS 문법
    + @규칙
    + 주석
    + 명시도
    + 상속
    + 레이아웃 모드
    + 시각적 서식 모델
    + 마진 중첩
    + 값
        - 초기 값
        - 계산 값
        - 사용 값
        - 실제 값 (en-US)
    + 값 정의 구문
    + 단축 속성
    + 대체 요소


Layout using named grid lines - CSS: Cascading Style Sheets

Layout using named grid lines
=============================

이전 가이드에선 그리드 트랙을 정의하면 생성되는 라인을 사용해서 아이템을 배치하는 법을 살펴보았으며, 또한 이름이 명명된 템플릿 영역을 가지고 어떻게 아이템들을 배치하는지도 알아보았습니다. 이번 가이드에선 이름이 주어진 라인을 쓰는 상황에서 이 두 가지 방법이 서로 어떻게 작용하는지 알아보겠습니다. 라인에 이름을 지어 주는 것이 매우 유용할 때도 있지만, 이름과 트랙 크기가 혼합돼서 사용되는 그리드 용법을 보고 있으면 매우 헷갈릴 수도 있습니다. 하지만 몇 가지 예제를 가지고 작업해 보시면 점점 명확해지면서 나중엔 작업하기도 훨씬 수월해지실 겁니다.

그리드를 정의할 때 라인의 이름 짓는 법
----------------------

`grid-template-rows` 그리고 `grid-template-columns` 프로퍼티로 그리드를 정의할 때 그리드에 있는 모든 라인 혹은 일부 라인들에 이름을 지어 줄 수 있습니다. 본보기로 라인을 기준으로 아이템을 배치하는 방법을 설명한 가이드에서 만들었던 간단한 레이아웃을 예로 들어 보겠습니다. 이번엔 이름이 주어진 라인을 써서 그리드를 만들 겁니다.
```

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

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

그리드를 정의할 때, 그리드 라인의 이름은 대괄호 안에 적어줍니다. 여기서 라인 이름은 원하시는 것 아무거나 다 괜찮습니다. 여기선 컨테이너를 감싸는 행과 열 방향의 시작과 끝 라인 모두의 이름을 정의해 주었습니다. 그리드에 있는 모든 라인의 이름을 다 붙여줄 필요는 없습니다만, 그리드 가운데에 있는 블록의 행과 열 방향의 라인 이름을 `content-start` 그리고 `content-end`라는 이름을 정의해 주었습니다. 이런 식으로 레이아웃의 몇몇 주요 라인들에만 이름을 붙여주시면 됩니다.

```css
.wrapper {
  display: grid;
  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
}
```

이렇게 라인들에 이름을 짓고 나면, 라인 번호 대신에 이름을 써서 아이템을 배치할 수 있게 됩니다.

```css
.box1 {
  grid-column-start: main-start;
  grid-row-start: main-start;
  grid-row-end: main-end;
}

.box2 {
  grid-column-start: content-end;
  grid-row-start: main-start;
  grid-row-end: content-end;
}

.box3 {
  grid-column-start: content-start;
  grid-row-start: main-start;
}

.box4 {
  grid-column-start: content-start;
  grid-column-end: main-end;
  grid-row-start: content-end;
}
```

```html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>
```

라인을 기준으로 배치할 때 적용할 수 있는 다른 모든 사항은 여기서도 똑같은 방식으로 작동하며 이름이 주어진 라인과 라인 번호를 섞어서 사용하실 수도 있습니다. 이름이 주어진 라인의 사용은 그리드를 재정의하는 반응형 디자인을 만들고자 할 때, 미디어 쿼리에서 라인 번호를 바꿔가면서 일일이 콘텐츠의 위치를 다시 정의해 줄 필요가 없다는 장점이 있습니다. 다만, 그리드를 정의할 때 라인의 이름은 항상 같은 것을 사용하도록 주의해야 합니다.

### 라인에 여러 개의 이름 지어주기

라인의 이름을 정할 때 하나 이상의 이름을 붙여주고 싶을 때가 있는데, 예를 들어 sidebar-end 그리고 main-start를 함께 표기하고자 할 때가 있습니다. 이럴 땐 `[sidebar-end main-start]`처럼 대괄호 안에서 공백을 사이에 두고 이름을 추가해 주면 됩니다. 그러면 해당 라인은 둘 중 아무 이름을 써도 같은 것을 가리키게 됩니다.

이름이 주어진 라인으로 만들어지는 잠재적 그리드 영역
-----------------------------

라인의 이름을 지어줄 때는 원하시는 이름 아무거나 붙여주셔도 된다고 말씀드린 바 있습니다. 여기에 붙이는 이름은 custom ident로서, 저자가 정의해 준 이름이 됩니다. 이름을 지을 때 명세서에 나타날 수 있는 단어는 피하시는 게 좋으며 `span`과 같이 혼동을 줄 수 있는 것도 사용하지 말아야 합니다. 그리고 이름에 따옴표가 포함되면 안 됩니다.

이름은 아무거나 선택하실 수 있지만, 위 예제에 나와 있는 것처럼 만약에 영역 주변에 있는 라인의 이름 끝에 `-start` 혹은 `-end`를 붙이면, 그리드는 전체 이름 중 꼬리 부분을 뗀 주요 이름만으로 명명된 영역을 생성하게 됩니다. 위 예제에선, 열과 행의 라인 모두 `content-start`와 `content-end`라는 이름이 주어져 있습니다. 이 말은 `content`라는 이름의 영역이 자동으로 만들어 지면서, 원하시면 어떠한 요소든 해당 영역에 이 이름을 써서 배치할 수 있게 된다는 뜻입니다.
```

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

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

다음 예제에선 위에서와 똑 같은 그리드를 정의해 주었지만, 이번엔 `content`라는 이름을 가진 영역에 하나의 아이템을 배치하였습니다.

```css
.wrapper {
  display: grid;
  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
}
.thing {
  grid-area: content;
}
```

```html
<div class="wrapper">
  <div class="thing">I am placed in an area named content.</div>
</div>
```

여기선 라인의 이름을 지어 주면서 해당 라인이 감싸는 영역이 자동으로 만들어졌기 때문에, `grid-template-areas`를 써서 영역의 위치를 일일이 정의해 줄 필요가 없습니다.

이름이 주어진 영역으로 만들어지는 잠재적 그리드 라인
-----------------------------

지금까지 라인에 이름을 지어 주면 어떻게 해당 이름으로 된 영역도 함께 만들어지는지 살펴보았으며, 이는 역으로도 작용합니다. 이름이 주어진 템플릿 영역은 그에 어울리는 이름이 붙여진 라인을 생성하면서, 이를 이용해서 아이템을 배치할 수 있게 됩니다. 이전 그리드 템플릿 영역에 관한 가이드에서 만들었던 레이아웃을 그대로 가져와서, 여기에 영역을 지정해서 만들어진 라인을 써서 레이아웃에 적용해 본다면 이것이 어떻게 작동하는지 쉽게 이해하실 수 있을 겁니다.

다음 예제에선 `overlay`라는 이름의 클래스를 지정한 추가 div 요소를 더하였습니다. `grid-area` 프로퍼티를 써서 이름이 주어진 영역을 생성하였고, `grid-template-areas` 프로퍼티에서 레이아웃을 정의해 주었습니다. 영역의 이름은 다음과 같습니다:

* `hd`
* `ft`
* `main`
* `sd`

이렇게 해서 만들어진 열과 행 라인의 이름은 다음과 같습니다:

* `hd-start`
* `hd-end`
* `sd-start`
* `sd-end`
* `main-start`
* `main-end`
* `ft-start`
* `ft-end`

이름이 주어진 라인의 모습은 아래 그림에서 확인할 수 있는데, 몇몇 라인들은 두 개의 이름을 가지고 있는 것을 확인하실 수 있습니다. 예를 들면, `sd-end`와 `main-start`는 같은 열 방향의 라인을 가리키고 있습니다.

![An image showing the implicit line names created by our grid areas.](/ko/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines/5_multiple_lines_from_areas.png)

여기서 잠재적으로 이름이 주어진 라인을 써서 `overlay` 요소를 배치하는 방법은 이름을 직접 지정한 라인을 써서 아이템을 배치하는 방법과 똑같습니다.
```

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

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "hd hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main main"
    "ft ft ft ft ft ft ft ft ft";
}

.header {
  grid-area: hd;
}

.footer {
  grid-area: ft;
}

.content {
  grid-area: main;
}

.sidebar {
  grid-area: sd;
}

.wrapper > div.overlay {
  z-index: 10;
  grid-column: main-start / main-end;
  grid-row: hd-start / ft-end;
  border: 4px solid rgb(92, 148, 13);
  background-color: rgba(92, 148, 13, 0.4);
  color: rgb(92, 148, 13);
  font-size: 150%;
}
```

```html
<div class="wrapper">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
  <div class="overlay">Overlay</div>
</div>
```

이름이 주어진 영역으로부터 라인이 생성되고 또 라인에 이름을 정해주면 거기에 맞는 영역이 만들어지면서, 이를 이용해 아이템을 배치할 수 있다는 점을 고려한다면, 그리드 레이아웃을 만들기 시작할 때 미리 계획해서 이름을 정하는 데 약간의 시간을 할애할 가치가 있음을 알 수 있습니다. 이름을 선택할 때 자신과 자기 팀원들 모두가 쉽게 이해할 수 있는 것으로 정한다면 모두에게 여러분이 만든 레이아웃을 쉽게 이용하는 데 도움을 줄 수 있을 것입니다.

repeat()을 써서 같은 이름을 가진 여러 개의 라인 만들기
-----------------------------------

만약에 그리드에 있는 모든 라인에 독자적인 이름을 지어 주길 원하신다면, 트랙을 정의할 때 반복 용법을 사용하는 대신 대괄호 안에다 이름을 일일이 추가해줘야 해서 약간 장황하게 트랙의 정의를 작성하셔야 합니다. 반복 용법을 사용하게 되면 여러 라인이 같은 이름을 갖게 되는데, 이 또한 매우 유용할 수도 있습니다.

다음 예제에서는 같은 너비를 가진 열두 개의 열로 구성된 그리드를 생성합니다. 여기선 1fr 너비의 열 트랙을 정의하기 전에 `[col-start]`라는 라인 이름을 함께 정의해 주었습니다. 이렇게 하면 `1fr` 너비의 세로 열 전면에 똑같이 `col-start`라는 이름이 주어진 12개의 열 방향의 라인으로 구성된 그리드를 만들게 됩니다.
```

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

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
}
```

이렇게 그리드를 생성하고 나면 여기에다 아이템을 배치할 수 있게 됩니다. 여러 개의 라인 이름을 `col-start`라는 이름으로 지어 주었기 때문에 `col-start` 라인을 기준 시작 지점으로 아이템을 배치하게 되면 그리드는 첫 번째에 있는 `col-start`라는 이름의 라인을 사용하게 되는데, 여기선 맨 왼쪽에 있는 라인이 여기에 해당합니다. 또 다른 라인을 가리키려면 이름과 함께 해당 라인의 번호를 더해주면 됩니다. 아이템을 `col-start`라는 이름의 첫 번째 라인으로부터 다섯 번째 라인까지 걸치도록 배치하려면 다음과 같이 정의해 줍니다:

```css
.item1 {
  grid-column: col-start / col-start 5;
}
```

또한, 여기선 `span` 키워드를 쓰실 수도 있습니다. 다음 아이템은 `col-start` 이름을 가진 일곱 번째 라인부터 세 개의 라인에 걸치도록 배치하였습니다.

```css
.item2 {
  grid-column: col-start 7 / span 3;
}
```

```html
<div class="wrapper">
  <div class="item1">I am placed from col-start line 1 to col-start 5</div>
  <div class="item2">I am placed from col-start line 7 spanning 3 lines</div>
</div>
```

이 레이아웃을 Firefox Grid Highlighter에서 살펴보면 세로 열 라인이 어떻게 구성되어 있는지 그리고 또 아이템들이 이 라인들에 따라 어떻게 배치되었는지 확인하실 수 있습니다.

![The 12 column grid with items placed. The Grid Highlighter shows the position of the lines.](/ko/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines/5_named_lines1.png)

반복 용법은 또한 트랙의 목록을 나열해서 사용할 수 있으며, 오직 하나의 트랙 크기만 반복하도록 쓰실 필요는 없습니다. 아래의 코드는 여덟 개의 트랙으로 구성된 그리드를 만드는데, 상대적으로 더 좁은 `1fr` 너비의 `col1-start`라는 라인 이름이 지정된 세로 열 트랙 다음으로 `3fr` 너비의 `col2-start`라는 라인 이름이 지정된 세로 열 트랙으로 구성되어 있습니다.

```css
.wrapper {
  grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr);
}
```

만약에 반복 용법에 사용된 두 개의 라인이 서로 겹치게 된다면 그 둘은 나중에 하나로 합쳐지는데, 이는 반복 용법을 쓰지 않고 트랙을 정의할 때 하나의 라인에 여러 개의 이름을 지정해 주는 것과 똑같은 결과를 만들어 냅니다. 다음 정의에선 `1fr` 너비의 트랙 네 개를 생성하는데, 각 트랙은 서로 시작과 마지막을 지점에 있는 라인을 갖게 됩니다.

```css
.wrapper {
  grid-template-columns: repeat(4, [col-start] 1fr [col-end]);
}
```

반복 표기법을 쓰지 않고 이번에 정의한 것과 같도록 작성해 준다면 다음과 같이 써줄 수 있습니다.

```css
.wrapper {
  grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end];
}
```

트랙 목록을 사용했다면 `span` 키워드를 써서, 단지 몇 개의 라인들을 걸치게 할지 정해줄 뿐만 아니라, 특정 이름의 라인 몇 개를 걸쳐서 자리를 잡게 할지도 정해 줄 수 있습니다.
```

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

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr);
}

.item1 {
  grid-column: col1-start / col2-start 2;
}

.item2 {
  grid-row: 2;
  grid-column: col1-start 2 / span 2 col1-start;
}
```

```html
<div class="wrapper">
  <div class="item1">
    I am placed from col1-start line 1 to col2-start line 2
  </div>
  <div class="item2">
    I am placed from col1-start line 2 spanning 2 lines named col1-start
  </div>
</div>
```

최근 세 개의 가이드를 통해서 여러분은 그리드를 이용해 아이템을 배치하는 방법이 아주 다양하다는 것을 발견하셨을 겁니다. 처음엔 이것이 너무 복잡하다고 느끼실 수도 있겠지만, 이 모든 것을 다 이해하고 사용하실 필요는 없다는 점을 기억하시기 바랍니다. 실상황에서 간단하고 명확한 레이아웃을 구현할 경우에는 이름이 지명된 템플릿 영역을 쓰는 것이 적당할 것입니다. 이것은 레이아웃이 어떤 모습을 보여줄지 시각적으로 좋은 묘사를 제공하며, 또한 그리드에 있는 아이템을 이리저리 쉽게 옮길 수도 있습니다.

또한, 예를 들어 만약에 다중 칼럼에 꼭 들어맞는 레이아웃을 가지고 작업할 때는 이 가이드 마지막 부분에서 설명한 이름이 지정된 라인들을 사용했던 그리드가 제격입니다. 만약에 Foundation 혹은 Boostrap과 같은 프레임워크에서 채용한 그리드 시스템을 고려하신다면, 이들은 12개의 세로 열 그리드를 기준으로 하고 있습니다. 프레임워크에서는 세로 열을 모두 합쳐 최대 100%를 차지하도록 하는 모든 계산이 코드 속에 포함되어 있습니다. 하지만, 그리드 레이아웃에서 이 그리드 "프레임워크"를 구현하는데 필요한 코드는 아래처럼 아주 간단하게 작성할 수 있습니다:

```css
.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(12, [col-start] 1fr);
}
```

그러면 페이지 레이아웃에 이 프레임워크를 그대로 가져다 쓰실 수 있습니다. 예를 들어, 헤더와 푸터가 있는 세 개의 세로 열 레이아웃을 구현한다면 아래와 같은 마크업을 작성할 수 있습니다.

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

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > \* {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```html
<div class="wrapper">
  <header class="main-header">I am the header</header>
  <aside class="side1">I am sidebar 1</aside>
  <article class="content">I am the main article</article>
  <aside class="side2">I am sidebar 2</aside>
  <footer class="main-footer">I am the footer</footer>
</div>
```

그러면 이것을 이번에 작성한 그리드 레이아웃 프레임워크를 써서 다음과 같이 배치할 수 있습니다.

```css
.main-header,
.main-footer {
  grid-column: col-start / span 12;
}

.side1 {
  grid-column: col-start / span 3;
  grid-row: 2;
}

.content {
  grid-column: col-start 4 / span 6;
  grid-row: 2;
}

.side2 {
  grid-column: col-start 10 / span 3;
  grid-row: 2;
}
```

다시 한번 말씀드리지만, Firefox Grid Highlighter는 지금까지 우리가 배치했던 아이템들이 그리드 위에 어떻게 놓였는지 확인할 때 아주 유용하답니다.

![The layout with the grid highlighted.](/ko/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines/5_named_lines2.png)
필요한 건 이게 전부 다입니다. 복잡한 계산 작업도 필요하지 않고, 그리드가 1fr 크기의 세로 열 트랙에 공간을 할당하기 전에, 자동으로 10픽셀 크기의 경계 여백 트랙이 차지하는 공간을 알아서 제거해 줍니다. 차차 여러분만의 레이아웃을 만들다 보면, 용법에 점점 더 익숙해 지면서 자기에게 맞는 작업 방식을 터득하게 되고, 나중에 만들고자 하는 프로젝트의 유형에 따라 적당한 것을 고를 수 있는 요령이 생기게 되실 겁니다. 우선은 지금까지 소개된 여러 방법들을 가지고 몇몇 자주 쓰이는 레이아웃의 형태들을 만들어 보신다면, 아마도 곧 가장 효율적인 자기만의 작업 방식을 찾으실 수 있을 겁니다. 그러면, 다음 가이드에선 배치 관련 프로퍼티를 전혀 쓰지 않고도 아이템들이 그리드 위에 알아서 배치되도록 만드는 방법을 알아보겠습니다.

1. **CSS**
2. **CSS Reference**
3. CSS 그리드 레이아웃
4. **가이드**
    1. 그리드 레이아웃의 기본 개념
    2. 다른 레이아웃 방법과의 관계
    3. 라인을 기준으로 한 아이템 배치
    4. 그리드 템플릿 영역
    5. 이름이 주어진 그리드 라인을 이용한 레이아웃
    6. Auto-placement in grid layout (en-US)
    7. Box alignment in grid layout (en-US)
    8. Grids, logical values and writing modes (en-US)
    9. CSS Grid Layout and Accessibility (en-US)
    10. CSS Grid Layout and Progressive Enhancement (en-US)
    11. Realizing common layouts using grids (en-US)
5. **프로퍼티**
    1. grid (en-US)
    2. grid-area (en-US)
    3. grid-auto-columns (en-US)
    4. grid-auto-flow (en-US)
    5. grid-auto-rows (en-US)
    6. grid-column (en-US)
    7. grid-column-end (en-US)
    8. grid-column-gap (en-US)
    9. grid-column-start (en-US)
    10. grid-gap (en-US)
    11. grid-row (en-US)
    12. grid-row-end (en-US)
    13. grid-row-gap (en-US)
    14. grid-row-start (en-US)
    15. grid-template (en-US)
    16. grid-template-areas (en-US)
    17. grid-template-columns
    18. grid-template-rows (en-US)
6. **용어집**
    1. Grid
    2. Grid lines
    3. Grid tracks
    4. Grid cell
    5. Grid areas
    6. Gutters
    7. Grid Axis
    8. Grid row (en-US)
    9. Grid column


Grid template areas - CSS: Cascading Style Sheets

Grid template areas
===================

이전 가이드에서 우리는 그리드 라인에 대해서 살펴보았으며, 이 라인을 기준으로 어떻게 아이템들을 배치하는지 알아보았습니다. CSS 그리드 레이아웃으로 작업할 땐 거기엔 항상 라인이 있을 것이고, 이것은 아이템들을 그리드에 배치할 때 사용할 수 있는 아주 직관적인 방법이 될 수 있습니다. 그렇지만, 아이템을 그리드에 배치할 때 사용할 수 있는 또 다른 방법이 있는데, 이것은 독자적으로 혹은 라인 기준 배치 방법과 함께 혼용해서 사용할 수 있습니다. 이 방법은 이름이 지명된 템플릿 영역을 사용하여 아이템을 배치하는 작업과 연관돼 있으며, 이 방법이 정확히 어떻게 작동하는지 알아보겠습니다. 이것이 때때로 왜 그리드 레이아웃의 ascii-art 방식이라고 일컬어지는지 쉽게 눈치채실 수 있을 겁니다!

그리드 영역의 이름 짓기
-------------

여러분은 이미 `grid-area` (en-US) 프로퍼티와 마주친 적이 있을 겁니다. 이 프로퍼티는 그리드 영역의 위치를 잡는데 사용되는 모두 네 개의 라인 값을 취합니다.

```css
.box1 {
  grid-area: 1 / 1 / 4 / 2;
}
```

이렇게 모두 네 개의 라인을 정의하는 작업은, 영역을 둘러싸는 라인을 지정해서 해당 영역이 차지하게 될 자리를 정의해 주는 것이라 할 수 있습니다.

![라인으로 정의된 그리드 영역](/ko/docs/Web/CSS/CSS_grid_layout/Grid_template_areas/4_area.png)

이와 더불어서, 각 영역에 이름을 붙여서 정의할 수도 있으며, 각 영역의 위치는 `grid-template-areas` (en-US) 프로퍼티의 값을 지정해서 정의할 수 있습니다. 영역의 이름은 원하시는 것 아무거나 선택해서 사용하실 수 있습니다. 예를 들어, 아래에 보이는 레이아웃을 만들고자 할 때, 다음과 같이 네 개의 주요 영역으로 구분할 수 있습니다.

* a header
* a footer
* a sidebar
* the main content

![단순하게 헤더와 푸터가 있는 두 개의 열로 구성된 레이아웃을 보여주는 그림](/ko/docs/Web/CSS/CSS_grid_layout/Grid_template_areas/4_layout.png)

여기서 각 영역의 이름은 `grid-area` (en-US) 프로퍼티로 지정할 수 있습니다. 이것은 아직 아무런 레이아웃도 생성하지 않지만, 이렇게 해서 레이아웃에 사용될 영역의 이름을 갖게 됩니다.

```css
.header {
  grid-area: hd;
}
.footer {
  grid-area: ft;
}
.content {
  grid-area: main;
}
.sidebar {
  grid-area: sd;
}
```

이제 영역의 이름들을 정의하였으니 다음엔 원하는 레이아웃을 생성할 차례입니다. 이번엔, 아이템에 직접 지정된 라인 번호를 써서 아이템을 배치하는 대신에, 전체 레이아웃을 그리드 컨테이너에서 정의해 줍니다.

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "hd hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main main"
    "ft ft ft ft ft ft ft ft ft";
}
```

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

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 940px;
  margin: 0 auto;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```html
<div class="wrapper">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>
```

이 방법을 쓰면 각각의 그리드 아이템들에 아무것도 지정해 줄 필요가 없으며, 그리드 컨테이너에서 모든 작업이 이루어집니다. 보셨다시피, 레이아웃은 `grid-template-areas` (en-US) 프로퍼티의 값으로 기술됩니다.

그리드 셀 비워두기
----------

먼젓번 예제에서는, 그리드의 모든 곳이 빈 곳 없이 영역들로 채워져 있습니다. 하지만, 다음에 소개될 레이아웃 방법을 써서 특정 그리드 셀이 공간으로 채워지도록 만들 수도 있습니다. 셀을 공간으로 남겨두려면 마침표 글자(`.`)를 사용하시면 됩니다. 예제 중 footer 부분을 main으로 표시된 콘텐츠 바로 아래에만 표시되도록 하려면, sidebar 밑에 있는 세 개의 셀을 비워두면 됩니다.

```css
.header {
  grid-area: hd;
}
.footer {
  grid-area: ft;
}
.content {
  grid-area: main;
}
.sidebar {
  grid-area: sd;
}
```

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

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 940px;
  margin: 0 auto;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "hd hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main main"
    ". . . ft ft ft ft ft ft";
}
```

```html
<div class="wrapper">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>
```

위 예제에서 레이아웃 정의 부분을 더 깔끔하게 보이도록 하려면 여러 개의 `.` 글자를 사용할 수도 있습니다. 여기서 마침표 사이가 하얀 공간으로 서로 띄워져 있지 않은 한 오직 하나의 셀로 계산됩니다. 아주 복잡한 레이아웃의 경우, 행과 열이 깔끔하게 정렬돼 있다면 훨씬 이해하기 쉬운 장점이 있을 겁니다. 이렇게 하면, CSS를 작업하면서 실제 레이아웃이 어떤 모습으로 보일지 쉽게 눈으로 확인하실 수도 있다는 뜻입니다.

다중 셀에 걸쳐 확장하기
-------------

앞선 예제에선 영역들이 다중 셀에 걸쳐서 확장되었는데, 이것은 그리드 영역의 이름을 빈 여백을 사이에 두고 여러 번 반복해서 이루었습니다. 여기서 `grid-template-areas` 값으로 지정한 부분은 깔끔하게 위아래로 줄이 맞아 떨어지도록 여분의 공백을 추가할 수도 있습니다. 위 예제에선, `main` 부분과 정렬되도록 `hd`와 `ft` 영역 이름에 공백이 추가된 것을 확인하실 수 있습니다.

영역 이름을 연달아 늘어놓아서 만들어진 영역은 직사각형이어야 하며, 이 시점에서 L 모양의 영역을 만들 수는 없습니다. 표준 명세서에선 아마도 다음번 레벨에서 이 기능이 추가될 수도 있음을 명시하고 있습니다. 그렇지만, 영역을 열 방향과 마찬가지로 행 방향으로도 쉽게 확장할 수 있습니다. 예를 들어, 사이드바 영역에 있는 비어있는 셀을 뜻하는 `.` 대신에 그 자리를 `sd`로 대치해서 footer 밑부분까지 확장하도록 정의해 줄 수 있습니다.

```css
.header {
  grid-area: hd;
}
.footer {
  grid-area: ft;
}
.content {
  grid-area: main;
}
.sidebar {
  grid-area: sd;
}
```

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

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 940px;
  margin: 0 auto;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "hd hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main main"
    "sd sd sd ft ft ft ft ft ft";
}
```

```
<div class="wrapper">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>
```

`grid-template-areas` (en-US) 값은 그리드 전체를 나타내야 하며, 그렇지 않으면 틀린 것으로 간주하여 결국 프로퍼티는 무시됩니다. 이 얘기는 각 줄의 셀 숫자가 모두 같아야 한다는 뜻이며, 비어있는 경우는 마침표 문자를 써서 셀이 비어있음을 표시해 주어야 합니다. 또한, 영역이 직사각형이 아니라면 유효하지 않은 그리드를 생성하게 됩니다.

미디어 큐어리(media queries)를 이용한 그리드 재정의
-----------------------------------

이제는 레이아웃이 CSS의 한 부분으로 들어오면서, 서로 다른 브레이크포인트에 대응해서 변하게 만드는 것이 훨씬 쉬워졌습니다. 이 작업은 그리드를 재정의하거나, 그리드에 있는 아이템의 위치를 바꿔줄 수도 있으며, 혹은 한꺼번에 두 가지 모두를 진행할 수도 있습니다.

이 작업을 할 때 주의할 점은, 미디어 큐어리 밖에서 영역의 이름을 정의해야 한다는 것입니다. 이렇게 해야 가령 콘텐츠 영역의 경우, 그리드 위 어느 곳에 배치되든 상관없이 항상 해당 영역을 `main`으로 지칭할 수 있게 됩니다.

위 예제에 있는 레이아웃을 가지고, 만약 너비가 좁을 때는 아주 단순한 레이아웃을 형성하도록 단일 열 형태의 그리드를 정의해서 아이템들이 서로 중첩되도록 하였습니다.
```

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

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 940px;
  margin: 0 auto;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```css
.header {
  grid-area: hd;
}
.footer {
  grid-area: ft;
}
.content {
  grid-area: main;
}
.sidebar {
  grid-area: sd;
}

.wrapper {
  display: grid;
  grid-auto-rows: minmax(100px, auto);
  grid-template-columns: 1fr;
  grid-template-areas:
    "hd"
    "main"
    "sd"
    "ft";
}
```

그러고 나서, 미디어 큐어리 안에서 남아있는 공간이 넓다면 두 개의 열로 된 레이아웃을 구성하도록 다시 정의해 주었으며, 공간이 더 넓으면 세 개의 열로 된 형태의 레이아웃 띠도록 하였습니다. 넓은 형태의 레이아웃의 경우, 아홉 개의 열 트랙 그리드는 그대로 놔두었으며, `grid-template-areas`를 써서 아이템들이 어디에 배치될지를 다시 정의해 준 점을 주목해 주십시오.

```css
@media (min-width: 500px) {
  .wrapper {
    grid-template-columns: repeat(9, 1fr);
    grid-template-areas:
      "hd hd hd hd hd hd hd hd hd"
      "sd sd sd main main main main main main"
      "sd sd sd ft ft ft ft ft ft";
  }
}
@media (min-width: 700px) {
  .wrapper {
    grid-template-areas:
      "hd hd hd hd hd hd hd hd hd"
      "sd sd main main main main main ft ft";
  }
}
```

```
<div class="wrapper">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>
```

UI 요소를 위한 `grid-tempate-areas` 사용
---------------------------------

온라인에서 찾을 수 있는 많은 그리드 예제들을 보면 주로 주요 페이지 레이아웃에만 그리드를 사용한다고 느끼실 수 있습니다만, 그리드는 큰 요소만큼이나 작은 요소에서도 유용하게 사용될 수 있습니다. 특히나 `grid-template-areas` (en-US)를 쓰면 요소가 어떻게 보일지 코드를 보면 쉽게 이해할 수 있어서 아주 유용합니다.

아주 간단한 예로 "미디어 오브젝트"를 만들어 보겠습니다. 이 컴포넌트의 한쪽은 그림이나 다른 미디어를 위한 공간이 차지하고 다른 쪽은 주 내용이 위치하게 됩니다. 그림은 박스의 오른쪽 혹은 왼쪽에 표시될 수 있습니다.

![미디어 오브젝트 디자인의 한 예를 보여주는 그림](/ko/docs/Web/CSS/CSS_grid_layout/Grid_template_areas/4_media_objects.png)

여기서 그리드는 두 개의 열 트랙으로 구성되어 있으며, 그림이 들어가는 공간의 열 트랙의 크기는 `1fr`이며 글자 내용이 들어가는 공간의 크기는 `3fr`입니다. 만약에 고정된 너비의 그림 영역을 원하시면, 그림이 들어가는 열의 너비는 픽셀값으로 설정하고, 글자 영역에는 `1fr`을 지정하실 수 있습니다. 그러면 `1fr` 크기의 단일 열 트랙이 남은 공간을 모두 차지하게 됩니다.

그림이 위치하는 영역의 그리드 이름으로 `img`를 지정하고 글자 영역은 `content`라 부르기로 하고, `grid-template-areas` 프로퍼티를 써서 다음과 같이 배치하게 됩니다.

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

.media {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 400px;
}
.media {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas: "img content";
  margin-bottom: 1em;
}

.media .image {
  grid-area: img;
  background-color: #ffd8a8;
}

.media .text {
  grid-area: content;
  padding: 10px;
}
```

```html
<div class="media">
  <div class="image"></div>
  <div class="text">
    This is a media object example. We can use grid-template-areas to switch
    around the image and text part of the media object.
  </div>
</div>
```

### 박스의 반대편에 그림 표시하기

반대로 그림이 박스의 맞은편에 표시되기를 원하실 때도 있을 겁니다. 이렇게 하려면, `1fr` 크기의 트랙을 마지막에 위치하도록 하고, 단순하게 `grid-template-areas` (en-US)의 값을 뒤집어서 그리드를 다시 정의해주면 됩니다.

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

.media {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 400px;
}
.media {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas: "img content";
  margin-bottom: 1em;
}

.media.flipped {
  grid-template-columns: 3fr 1fr;
  grid-template-areas: "content img";
}

.media .image {
  grid-area: img;
  background-color: #ffd8a8;
}

.media .text {
  grid-area: content;
  padding: 10px;
}
```

```html
<div class="media flipped">
  <div class="image"></div>
  <div class="text">
    This is a media object example. We can use grid-template-areas to switch
    around the image and text part of the media object.
  </div>
</div>
```

그리드 정의 단축용법
-----------

지금까지 그리드 위에 아이템을 배치하는 여러 가지 방법과 또 그리드를 정의하는 다양한 프로퍼티들을 살펴보았습니다. 이번에는 그리드를 정의하는 데 사용할 수 있는 몇 가지 단축용법을 살펴보고 또 이 모든 것을 CSS 한 줄로 정의하는 법을 알아볼 차례입니다.

이것은 분명 다른 개발자나 심지어 미래의 나 자신도 금방 이해하기 어려울 수도 있습니다. 하지만, 표준 명세서에 기술된 용법 중 하나로서, 개별적으로 사용하진 않더라도, 공개된 예제나 다른 개발자가 사용하는 것을 목격할 수 있을 겁니다.

단축용법을 쓰기 전에 꼭 명심해야 할 것은 단축용법은 단번에 많은 프로퍼티의 설정이 가능할 뿐만 아니라, 정의하지 않은, 혹은 정의할 수 없는 것들도 그들의 **초깃값으로 재설정되도록 작용**한다는 점입니다. 그러므로 단축용법을 사용할 땐 다른 곳에서 적용했던 것들이 재설정될 수도 있다는 점을 주의하십시오.

그리드 컨테이너에서 사용할 수 있는 단축용법에는 두 가지가 있는데, 하나는 명시적 그리드 단축용법으로 `grid-template`이 있고, 나머지는 그리드 정의 단축용법으로 `grid`가 있습니다.

### `grid-template`

`grid-template` (en-US) 프로퍼티는 다음과 같은 프로퍼티들을 설정합니다:

* `grid-template-rows` (en-US)
* `grid-template-columns`
* `grid-template-areas` (en-US)

이 프로퍼티는, 잠재적으로 생성되는 열과 행 트랙에 영향을 끼치는 것이 아닌, 명시적 그리드를 정의할 때 조정할 수 있는 것들을 설정하는 것이어서 명시적 그리드 단축용법이라 불립니다.

다음에 있는 코드는 `grid-template` (en-US)를 써서 이 가이드 앞부분에서 만들었던 레이아웃과 똑같은 레이아웃을 만들었습니다.

```css
.wrapper {
  display: grid;
  grid-template:
    "hd hd hd hd hd hd hd hd hd" minmax(100px, auto)
    "sd sd sd main main main main main main" minmax(100px, auto)
    "ft ft ft ft ft ft ft ft ft" minmax(100px, auto)
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
```

첫 번째 값은 `grid-template-areas` 값에 해당합니다. 하지만 각 행의 마지막에 해당 행의 크기도 함께 선언해 주었습니다. 여기에 있는 `minmax(100px, auto)`가 이 역할을 합니다.

그리고 `grid-template-areas` 뒤에 옆으로 누운 슬래시(/)가 있고, 바로 그 뒤에 세로 행 트랙들을 위한 명시적 트랙 목록이 정의되어 있습니다.

### `grid`

`grid` (en-US) 단축용법은 한 발 더 나가 잠재적 그리드를 정의하는 데 사용되는 프로퍼티들도 같이 설정합니다. 그래서 여기서 설정하는 프로퍼티들은 다음과 같습니다:

* `grid-template-rows` (en-US)
* `grid-template-columns`
* `grid-template-areas` (en-US)
* `grid-auto-rows` (en-US)
* `grid-auto-columns` (en-US)
* `grid-auto-flow` (en-US)

이 프로퍼티는 또 `grid-gap` (en-US) 프로퍼티를 `0`으로 재설정합니다만, 이 단축용법에서는 이 간격을 지정해줄 수는 *없습니다*.

이 용법은 `grid-template` (en-US) 단축용법과 똑같은 방법으로 사용할 수 있습니다만, 이렇게 하면 설정했던 다른 프로퍼티 값들을 재설정하게 된다는 점을 주의하셔야 합니다.

```css
.wrapper {
  display: grid;
  grid:
    "hd hd hd hd hd hd hd hd hd" minmax(100px, auto)
    "sd sd sd main main main main main main" minmax(100px, auto)
    "ft ft ft ft ft ft ft ft ft" minmax(100px, auto)
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
```

이 단축용법이 제공하는 다른 기능은 나중에 자동 배치와 `grid-auto-flow` 프로퍼티를 알아보는 가이드에서 다시 살펴보겠습니다.

만약 지금까지의 초반 가이드들을 쭉 훑어보셨다면, 이제 라인을 기준으로 한 배치나 이름이 지명된 영역을 사용해서 그리드 레이아웃을 만드실 수 있는 위치까지 도달하셨습니다. 다음엔 충분한 시간을 가지고 그리드를 사용해서 몇몇 일반적인 레이아웃 패턴을 만들어 보시도록 하십시오. 앞으로 더 배워야 할 많은 새로운 기술 용어들이 있지만, 이들의 문법은 비교적 이해하기 쉬울 겁니다. 여러 예제를 다루시면서, 지금까지 다루지 않았던 것들에 대한 여러 의문점과 복잡한 사용 사례들을 마주칠 수 있을 겁니다. 이번 가이드의 나머지 부분에서는 표준 명세서에 있는 좀 더 자세한 사항들을 알아 볼 예정입니다. 그래서 앞으로 소개될 기술을 가지고 좀 더 복잡한 고급 레이아웃을 만들 수 있게 되시길 바랍니다.

1. **CSS**
2. **CSS Reference**
3. CSS 그리드 레이아웃
4. **가이드**
    1. 그리드 레이아웃의 기본 개념
    2. 다른 레이아웃 방법과의 관계
    3. 라인을 기준으로 한 아이템 배치
    4. 그리드 템플릿 영역
    5. 이름이 주어진 그리드 라인을 이용한 레이아웃
    6. Auto-placement in grid layout (en-US)
    7. Box alignment in grid layout (en-US)
    8. Grids, logical values and writing modes (en-US)
    9. CSS Grid Layout and Accessibility (en-US)
    10. CSS Grid Layout and Progressive Enhancement (en-US)
    11. Realizing common layouts using grids (en-US)
5. **프로퍼티**
    1. grid (en-US)
    2. grid-area (en-US)
    3. grid-auto-columns (en-US)
    4. grid-auto-flow (en-US)
    5. grid-auto-rows (en-US)
    6. grid-column (en-US)
    7. grid-column-end (en-US)
    8. grid-column-gap (en-US)
    9. grid-column-start (en-US)
    10. grid-gap (en-US)
    11. grid-row (en-US)
    12. grid-row-end (en-US)
    13. grid-row-gap (en-US)
    14. grid-row-start (en-US)
    15. grid-template (en-US)
    16. grid-template-areas (en-US)
    17. grid-template-columns
    18. grid-template-rows (en-US)
6. **용어집**
    1. Grid
    2. Grid lines
    3. Grid tracks
    4. Grid cell
    5. Grid areas
    6. Gutters
    7. Grid Axis
    8. Grid row (en-US)
    9. Grid column