mask - CSS: Cascading Style Sheets

mask
====

**`mask`** CSS 속성은 아이템이 부분적으로만 보여지게 하거나 혹은 완전히 가려서 보여지지 않게 할 수 있는 기능을 가지고 있습니다. 이 속성은 마스킹 혹은 특정한 점을 기준으로 이미지를 잘라내는 기능을 함께 제공합니다.

**참고:** `mask` 는 `mask-border` (en-US)를 초기값으로 재정의합니다. 그러므로 캐스캐이드 이전 단계에 어떠한 마스크 설정을 덮어씌우는 개별 속성아니 여타 다른 속성보다는 `mask` 를 사용하는 것을 추천합니다. This will ensure that `mask-border` has also been reset to allow the new styles to take effect.

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `mask-image` (en-US): `none`
* `mask-mode` (en-US): `match-source`
* `mask-repeat` (en-US): `repeat`
* `mask-position` (en-US): `center`
* `mask-clip` (en-US): `border-box`
* `mask-origin` (en-US): `border-box`
* `mask-size` (en-US): `auto`
* `mask-composite` (en-US): `add`
 |
| 적용대상 | all elements; In SVG, it applies to container elements excluding the `defs` (en-US) element and all graphics elements |
| 상속 | no |
| Percentages | as each of the properties of the shorthand:* `mask-position` (en-US): refer to size of mask painting area minus size of mask layer image (see the text for `background-position` (en-US))
 |
| 계산 값 | as each of the properties of the shorthand:* `mask-image` (en-US): as specified, but with `url` values made absolute
* `mask-mode` (en-US): as specified
* `mask-repeat` (en-US): Consists of two keywords, one per dimension
* `mask-position` (en-US): Consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.
* `mask-clip` (en-US): as specified
* `mask-origin` (en-US): as specified
* `mask-size` (en-US): as specified, but with relative lengths converted into absolute lengths
* `mask-composite` (en-US): as specified
 |
| Animation type | as each of the properties of the shorthand:* `mask-image` (en-US): discrete
* `mask-mode` (en-US): discrete
* `mask-repeat` (en-US): discrete
* `mask-position` (en-US): a repeatable list
* `mask-clip` (en-US): discrete
* `mask-origin` (en-US): discrete
* `mask-size` (en-US): a repeatable list
* `mask-composite` (en-US): discrete
 |
| Creates stacking context | yes |

구문
--

```css
/\* 키워드 값 \*/
mask: none;

/\* 이미지 값 \*/
mask: url(mask.png); /\* 마스크로 사용되는 이미지 \*/
mask: url(masks.svg#star); /\* 마스크로 사용되는 SVG 그래픽 내 요소 \*/

/\* 조합형 값 \*/
mask: url(masks.svg#star) luminance; /\* 밝기 조절용 마스크로 사용되는 SVG 그래픽 내 요소 \*/
mask: url(masks.svg#star) 40px 20px; /\* 위로부터 40px, 아래부터 20px에 위치하는 마스크로 사용되는 SVG 그래픽 내 요소 \*/
mask: url(masks.svg#star) 0 0/50px 50px; /\* 가로, 세로 각각 50px 사이즈의 마스크로 사용되는 SVG 그래픽 내 요소 \*/
mask: url(masks.svg#star) repeat-x; /\* 수평으로 반복되는 마스크로 사용되는 SVG 그래픽 내 요소 \*/
mask: url(masks.svg#star) stroke-box; /\* Element within SVG graphic used as mask extending to the box enclosed by the stroke \*/
mask: url(masks.svg#star) exclude; /\* Element within SVG graphic used as mask and combined with background using non-overlapping parts \*/

/\* 글로벌 값 \*/
mask: inherit;
mask: initial;
mask: unset;
```

### 값

`<mask-reference>`

마스크 이미지 파일 설정하기. `mask-image` (en-US)를 확인하세요.

`<masking-mode>`

마스크 이미지의 마스킹 모드 설정하기. `mask-mode` (en-US)를 확인하세요.

`<position>`

마스크 이미지의 위치 설정하기. `mask-position` (en-US)를 확인하세요.

`<bg-size>`

마스크 이미지의 크기 설정하기. `mask-size` (en-US)를 확인하세요.

`<repeat-style>`

마스크 이미지의 반복 설정하기. See `mask-repeat` (en-US)를 확인하세요.

`<geometry-box>`

단 하나의 <geometry-box> 값만 주어진다면 `mask-origin` (en-US)와(과)( `mask-clip` (en-US) 모두 같은 값으로 설정하는 것을 의미합니다. 두개의<geometry-box> 값이 주어진다면 첫번째 값은 `mask-origin` (en-US)을(를), 두번쨰 값은 `mask-clip` (en-US)를 설정하는 것을 의미합니다.

`<geometry-box> | no-clip`

마스크 이미지에 영향을 받는 구역을 설정하기. `mask-clip` (en-US)를 확인하세요.

`<compositing-operator>`

현재 마스크 레이어 위의 합성 설정하기. `mask-composite` (en-US)를 확인하세요.

### 형식 구문
```

mask =
  <mask-layer>#

<mask-layer> =
  <mask-reference>              ||
  <position> [ / <bg-size> ]?   ||
  <repeat-style>                ||
  <geometry-box>                ||
  [ <geometry-box> | no-clip ]  ||
  <compositing-operator>        ||
  <masking-mode>

<mask-reference> =
  none           |
  <image>        |
  <mask-source>

<position> =
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

<bg-size> =
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain

<repeat-style> =
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}

<geometry-box> =
  <shape-box>  |
  fill-box     |
  stroke-box   |
  view-box

<compositing-operator> =
  add        |
  subtract   |
  intersect  |
  exclude

<masking-mode> =
  alpha         |
  luminance     |
  match-source

<image> =
  <url>       |
  <gradient>

<mask-source> =
  <url>

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

<shape-box> =
  <visual-box>  |
  margin-box

<url> =
  <url()>  |
  <src()>

<visual-box> =
  content-box  |
  padding-box  |
  border-box

<url()> =
  url( <string> (en-US) <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> (en-US) <url-modifier>\* )

```

예제
--

```css
.target {
  mask: url(#c1) luminance;
}

.anothertarget {
  mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude;
}
```

명세
--

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask |

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

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

같이 보기
-----

* `clip-path`, `filter`
* HTML에 SVG 효과 적용하기 (en-US)
* SVG


max-height - CSS: Cascading Style Sheets

max-height
==========

**`max-height`** CSS 속성은 요소의 최대 높이를 설정합니다. `max-height`는 `height` 속성의 사용값이 자신의 값보다 커지는걸 방지합니다.

시도해보기
-----

`max-height`가 `height`를 재설정하고, `min-height`가 `max-height`를 재설정합니다.

구문
--

```css
/\* <length> 값 \*/
max-height: 3.5em;

/\* <percentage> 값 \*/
max-height: 75%;

/\* 키워드 값 \*/
max-height: none;
max-height: max-content;
max-height: min-content;
max-height: fit-content;
max-height: fill-available;

/\* 전역 값 \*/
max-height: inherit;
max-height: initial;
max-height: unset;
```

### 값

* `<length>`
    + : 고정 길이로 나타낸 최대 높이.
* `<percentage>`
    + : 컨테이닝 블록 높이에 대한 백분율로 나타낸 최대 높이.

#### 키워드 값

`none`

최대 높이를 정하지 않음.

`max-content`
Experimental

본질적인 선호 높이.

`min-content`
Experimental

본질적인 최소 높이.

`fill-available`
Experimental

컨테이닝 블록의 높이에서 세로축 안쪽 및 바깥 여백과 테두리의 공간을 제외한 높이. (일부 브라우저는 매우 오래 된 이름인 `available`로 구현함을 참고하세요.)

`fit-content`
Experimental

`max-content`와 동일.

### 형식 구문
```

max-height =
  none                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )

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

```

예제
--

```css
table {
  max-height: 75%;
}

form {
  max-height: none;
}
```

접근성 참고사항
--------

페이지의 확대 또는 글씨 크기를 키운 후에도 `max-height`를 설정한 요소의 내용이 잘리거나, 다른 요소를 가리지 않도록 주의하세요.

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
명세
--

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # width-height-keywords |
| CSS Box Sizing Module Level 4 # sizing-values |

|  |  |
| --- | --- |
| 초기값 | `none` |
| 적용대상 | all elements but non-replaced inline elements, table columns, and column groups |
| 상속 | no |
| Percentages | The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as `none`. |
| 계산 값 | the percentage as specified or the absolute length or `none` |
| Animation type | a length, percentage or calc(); |

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

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

같이 보기
-----

* 박스 모델 입문, `box-sizing`
* `height`, `min-height`


border-spacing - CSS: Cascading Style Sheets

border-spacing
==============

CSS **`border-spacing`** 속성은 인접한 표 칸의 테두리 간격을 지정합니다. `border-collapse`가 `separate`여야 적용됩니다.

시도해보기
-----

`border-spacing` 값은 표 전체의 테두리에도 적용되므로, 표 테두리와 첫 번째 및 마지막 행/열에 속하는 칸 사이 거리는 (가로/세로) `border-spacing` 값과 표에 적용한 (상/우/하/좌) `padding` 값의 합이 됩니다.

**참고:** `border-spacing` 속성은 `<table>` (en-US)에서 이제 사용하지 않는 `cellspacing` 특성에 대응하지만, 추가로 두 번째 값을 지정해 가로와 세로 값을 각각 설정할 수 있다는 차이점이 있습니다.

구문
--
```

/* <length> */
border-spacing: 2px;

/* 가로 <length> | 세로 <length> */
border-spacing: 1cm 2em;

/* 전역 값 */
border-spacing: inherit;
border-spacing: initial;
border-spacing: unset;
```

`border-spacing` 값은 하나 또는 두 개의 값을 사용해 지정합니다.

* **한 개**의 `<length>` 값을 지정하면 칸 사이의 가로와 세로 두 간격 모두 설정합니다.
* 두 개의 `<length>` 값을 지정하면, 첫 번째 값은 칸 사이의 가로 간격(각 열의 간격), 두 번째 값은 칸 사이의 세로 간격(각 행의 간격)을 설정합니다.
### 값

`<length>`

간격의 크기로 지정할 길이입니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `0` |
| 적용대상 | `table` and `inline-table` elements |
| 상속 | yes |
| 계산 값 | two absolute lengths |
| Animation type | discrete |

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

border-spacing =
  <length>{1,2}

```

예제
--

### 칸 간격과 안쪽 여백

다음 예제는 칸 사이에 세로 간격 `0.5em`과 가로 간격 `1em`을 배치합니다. 표의 테두리를 따라가면서, `padding` 값이 `border-spacing`과 어떻게 작용하는지 살펴보세요.

#### HTML

```html
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>
```

#### CSS

```css
table {
  border-spacing: 1em 0.5em;
  padding: 0 2em 1em 0;
  border: 1px solid orange;
}

td {
  width: 1.5em;
  height: 1.5em;
  background: #d2d2d2;
  text-align: center;
  vertical-align: middle;
}
```

#### 결과

명세
--

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

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

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

같이 보기
-----

* `border-collapse`, `border-style`
* `border-spacing` 속성은 `<table>` (en-US) HTML 요소의 외관을 수정합니다.


:first-child - CSS: Cascading Style Sheets

:first-child
============

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

```css
/\* Selects any <p> that is the first element
 among its siblings \*/
p:first-child {
  color: lime;
}
```

**참고:** 초기 정의에서는 부모가 있는 요소만 선택할 수 있었습니다. Selectors Level 4부터는 이 제한이 사라졌습니다.

구문
--

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

### 기본 예제

#### HTML

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

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

#### CSS

```css
p:first-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:first-child {
  color: red;
  font-weight: bold;
}
```

#### 결과

명세
--

| Specification |
| --- |
| Selectors Level 4 # first-child-pseudo |

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

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

같이 보기
-----

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


margin-right - CSS: Cascading Style Sheets

margin-right
============

**`margin-right`** CSS 속성은 요소의 오른쪽에 바깥 여백 영역margin area을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다.

시도해보기
-----

구문
--

```css
/\* <length> 값 \*/
margin-right: 20px; /\* 절대 길이 \*/
margin-right: 1em; /\* 글씨 크기에 상대적 \*/
margin-right: 5%; /\* 가장 가까운 블록 컨테이너의 너비에 상대적 \*/

/\* 키워드 값 \*/
margin-right: auto;

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

`margin-right` 속성은 키워드 `auto`, `<length>`, `<percentage>`를 사용해 설정할 수 있습니다. 값은 양수, 0, 음수가 가능합니다.

### 값

`<length>`

바깥 여백 크기의 고정 값.

`<percentage>`

바깥 여백 크기와 블록 컨테이너 너비의 비율.

`auto`

사용한 레이아웃 모드에 따라 가로축 미사용 공간 너비의 일부를 바깥 여백에 할당. `margin-left`와 `margin-right`의 값이 모두 `auto`라면 너비를 양 여백에 동일하게 배정합니다. 아래 표가 가능한 여러 경우를 보입니다.

| `display` (en-US) 값 | `float` 값 | `position` 값 | `auto`의 계산 값 | 설명 |
| --- | --- | --- | --- | --- |
| `inline`, `inline-block`, `inline-table` | *any* | `static` or `relative` | `0` | 인라인 레이아웃 모드 |
| `block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption` | *any* | `static` or `relative` | `0`, except if both `margin-left` and `margin-right` are set to `auto`. In this case, it is set to the value centering the element inside its parent. | 블록 레이아웃 모드 |
| `block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption` | `left` or `right` | `static` or `relative` | `0` | 블록 레이아웃 모드 (플로팅 요소) |
| *any* `table-*`*, except* `table-caption` | *any* | *any* | `0` | 내부 `table-*` 요소는 바깥 여백을 가지지 않습니다. 대신 `border-spacing`을 사용하세요. |
| *any, except `flex`,* `inline-flex`*, or* `table-*` | *any* | *`fixed`* or `absolute` | `0`, except if both `margin-left` and `margin-right` are set to `auto`. In this case, it is set to the value centering the border area inside the available `width`, if fixed. | 절대위치 레이아웃 모드 |
| `flex`, `inline-flex` | *any* | *any* | `0`, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal `auto` margins. | 플렉스박스 레이아웃 모드 |

### 형식 구문
```

margin-right =
  <length-percentage>  |
  auto

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

```

예제
--

```css
.content {
  margin-right: 5%;
}
.sidebox {
  margin-right: 10px;
}
.logo {
  margin-right: -5px;
}
```

명세
--

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

|  |  |
| --- | --- |
| 초기값 | `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 |
| 계산 값 | 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.


ID 선택자 - CSS: Cascading Style Sheets

ID 선택자
======

CSS **ID 선택자**는 요소의 `id` 특성 값을 비교하여, 완전히 동일한 `id`를 가진 요소를 선택합니다.

```css
/\* id="demo" 요소 선택 \*/
#demo {
  border: red 2px solid;
}
```

구문
--
```

#id_value { style properties }
```

위의 구문은 특성 선택자를 사용한 다음 구문과 동일합니다.
```

[id=id_value] { style properties }
```

예제
--

### CSS

```css
#identified {
  background-color: skyblue;
}
```

### HTML

```html
<div id="identified">특별한 ID를 가진 요소에요!</div>
<div>이건 그냥 div에요.</div>
```

### 결과

명세
--

| Specification |
| --- |
| Selectors Level 4 # id-selectors |

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

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


flex - CSS: Cascading Style Sheets

flex
====

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
**`flex`** CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. `flex`는 `flex-grow`, `flex-shrink`, `flex-basis`의 단축 속성입니다.

시도해보기
-----

대부분의 경우, `flex`의 값에는 `auto`, `initial`, `none`이나 단위 없는 양의 수를 사용해야 합니다. 각 값의 적용 효과를 보려면 아래 플렉스 컨테이너의 크기를 조절해보세요.

기본적으로 플렉스 아이템은 콘텐츠의 최소 너비 미만으로 줄어들지 않습니다. `min-width`나 `min-height` 값을 지정해 바꿀 수 있습니다.

구문
--

```css
/\* Keyword values \*/
flex: auto;
flex: initial;
flex: none;

/\* One value, unitless number: flex-grow \*/
flex: 2;

/\* One value, length or percentage: flex-basis \*/
flex: 10em;
flex: 30%;

/\* Two values: flex-grow | flex-basis \*/
flex: 1 30px;

/\* Two values: flex-grow | flex-shrink \*/
flex: 2 2;

/\* Three values: flex-grow | flex-shrink | flex-basis \*/
flex: 2 2 10%;

/\* Global values \*/
flex: inherit;
flex: initial;
flex: unset;
```

`flex` 속성은 한 개에서 세 개의 값을 사용해 지정할 수 있습니다.

* **값이 한 개일 때**, 그 값은 다음 중 하나여야 합니다.
    + `<number>`를 지정하면 `<flex-grow>`입니다.
    + `<length>` 또는 `<percentage>`를 지정하면 `<flex-basis>`입니다.
    + `none`, `auto`, `initial` 중 하나를 지정할 수 있습니다.
* **값이 두 개일때**, 첫 번째 값은 `<number>`여야 하며 `<flex-grow>`가 됩니다. 두 번째 값은 다음 중 하나여야 합니다.
    + `<number>`를 지정하면 `<flex-shrink>`입니다.
    + `<length>`, `<percentage>`, 또는 `auto`를 지정하면 `<flex-basis>`입니다.
* **값이 세 개일 때**는 다음 순서를 따라야 합니다.
    1. `<flex-grow>` 에 사용할 `<number>`
    2. `<flex-shrink>` 에 사용할 `<number>`
    3. `<flex-basis>` 에 사용할 `<length>`, `<percentage>`, 또는 `auto`
### 값

`initial`

아이템 크기가 각각의 `width`와 `height` 속성에 따라 정해집니다. 플렉스 컨테이너의 크기를 넘지 않기 위해 최소 크기로 줄어들 수는 있지만, 남은 공간을 채우려 늘어나지는 않습니다. `flex: 0 1 auto`와 동일합니다.

`auto`

아이템 크기가 각각의 `width`와 `height` 속성에 따라 정해집니다. 플렉스 컨테이너의 크기를 넘지 않기 위해 최소 크기로 줄어들 수 있으며, 남은 공간을 채우기 위해 늘어날 수도 있습니다. `flex: 1 1 auto`와 동일합니다.

`none`

아이템 크기가 각각의 `width`와 `height` 속성에 따라 정해지며, 컨테이너의 크기에 관계 없이 변하지 않습니다. `flex: 0 0 auto`와 동일합니다.

`<'flex-grow'>`

플렉스 아이템의 `flex-grow`를 지정합니다. 음수 값은 유효하지 않습니다. 생략 시 기본값은 `0`입니다.

`<'flex-shrink'>`

플렉스 아이템의 `flex-shrink`를 지정합니다. 음수 값은 유효하지 않습니다. 생략 시 기본값은 `1`입니다.

`<'flex-basis'>`

플렉스 아이템의 `flex-basis`를 지정합니다. `0`을 지정하려면 `<flex-grow>` 또는 `<flex-shrink>`로 읽히지 않도록 단위를 붙여야 합니다. 생략 시 기본값은 `auto`입니다.

**참고:** 한 개 또는 두 개의 단위 없는 숫자 값을 사용할 때, `<flex-basis>`의 값은 `auto`가 아니라 `0`이 됩니다. 더 자세한 정보는 플렉시블 박스 레이아웃 모듈 초안에서 확인할 수 있습니다.

### 형식 구문
```

flex =
  none                                                |
  [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

```

예제
--

```css
#flex-container {
  display: flex;
  flex-direction: row;
}

#flex-container > .flex-item {
  flex: auto;
}

#flex-container > .raw-item {
  width: 5rem;
}
```

```html
<div id="flex-container">
  <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
  <div class="raw-item" id="raw">Raw box</div>
</div>
```

```
var flex = document.getElementById("flex");
var raw = document.getElementById("raw");
flex.addEventListener("click", function () {
  raw.style.display = raw.style.display == "none" ? "block" : "none";
});
```

```
#flex-container {
  width: 100%;
  font-family: Consolas, Arial, sans-serif;
}

#flex-container > div {
  border: 1px solid #f00;
  padding: 1rem;
}

#flex-container > .raw-item {
  border: 1px solid #000;
}
```

### 결과

명세
--

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-property |

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `flex-grow`: `0`
* `flex-shrink`: `1`
* `flex-basis`: `auto`
 |
| 적용대상 | flex items, including in-flow pseudo-elements |
| 상속 | no |
| 계산 값 | as each of the properties of the shorthand:* `flex-grow`: as specified
* `flex-shrink`: as specified
* `flex-basis`: as specified, but with relative lengths converted into absolute lengths
 |
| Animation type | as each of the properties of the shorthand:* `flex-grow`: a number
* `flex-shrink`: a number
* `flex-basis`: a length, percentage or calc();
 |

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

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

같이 보기
-----

* CSS 플렉스박스 안내서: *Basic Concepts of Flexbox*
* CSS 플렉스박스 안내서: *Controlling Ratios of flex items along the main axis (en-US)*


CSS 참고서 - CSS: Cascading Style Sheets

CSS 참고서
=======

**CSS 참고서**를 이용해 알파벳 순서로 정리한 모든 표준 CSS 속성, 의사 클래스, 의사 요소, CSS 자료형과 @규칙을 찾아보세요. 또한 유형별로 정리한 CSS 선택자와 주요 CSS 개념도 찾아볼 수 있습니다. 추가로 간단한 DOM-CSS / CSSOM 참조도 들어 있습니다.

기본 규칙 구문
--------

### 스타일 규칙 구문
```

style-rule ::=
    selectors-list {
      properties-list
    }
```

... where :
```

selectors-list ::=
    selector[:pseudo-class] [::pseudo-element]
    [, selectors-list]

properties-list ::=
    [property : value] [; properties-list]
```

아래 선택자, 의사 클래스, 의사 요소 목록을 참고하세요. 각 \*`value`\*의 구문은 지정한 \*`property`\*가 정의하는 자료형에 따라 다릅니다.

#### 스타일 규칙 예제

```css
strong {
  color: red;
}

div.menu-bar li:hover > ul {
  display: block;
}
```

CSS 선택자 구문을 설명하는 입문자 단계의 소개 부분은 이 자습서에서 찾아볼 수 있습니다. 규칙 정의에서 구문 오류가 하나라도 발생하면 규칙 전체가 유효하지 않다는 점을 명심하세요. 유효하지 않은 규칙은 브라우저가 무시합니다. CSS 규칙 정의는 모두 (ASCII) 텍스트에 기반하지만, DOM-CSS / CSSOM (규칙 관리 시스템)은 객체에 기반합니다.

### @규칙 구문

@규칙 체계는 매우 다양하므로 필요한 구체적인 구문을 찾으려면 @규칙을 봐주세요.

키워드 색인
------

**참고:** 이 색인에 있는 속성 이름에는 CSS 표준 이름과 다른 JavaScript 이름 (en-US)이 들어가지 않습니다.

### -

* `--*` (en-US)
* `-webkit-line-clamp`

### A

* `abs()` (en-US)
* `accent-color` (en-US)
* `acos()` (en-US)
* `:active`
* `additive-symbols (@counter-style)` (en-US)
* `::after (:after)`
* `align-content`
* `align-items` (en-US)
* `align-self` (en-US)
* `align-tracks` (en-US)
* `all`
* `<an-plus-b>`
* `<angle>`
* `<angle-percentage>`
* `animation`
* `animation-composition` (en-US)
* `animation-delay`
* `animation-direction`
* `animation-duration`
* `animation-fill-mode`
* `animation-iteration-count` (en-US)
* `animation-name` (en-US)
* `animation-play-state` (en-US)
* `animation-range` (en-US)
* `animation-range-end` (en-US)
* `animation-range-start` (en-US)
* `animation-timeline` (en-US)
* `animation-timing-function` (en-US)
* `@annotation` (en-US)
* `:any-link` (en-US)
* `appearance` (en-US)
* `ascent-override (@font-face)` (en-US)
* `asin()` (en-US)
* `aspect-ratio` (en-US)
* `atan()` (en-US)
* `atan2()` (en-US)
* `attr()` (en-US)

### B

* `::backdrop` (en-US)
* `backdrop-filter`
* `backface-visibility`
* `background`
* `background-attachment`
* `background-blend-mode` (en-US)
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position` (en-US)
* `background-position-x` (en-US)
* `background-position-y` (en-US)
* `background-repeat`
* `background-size` (en-US)
* `base-palette (@font-palette-values)` (en-US)
* `<basic-shape>` (en-US)
* `::before (:before)` (en-US)
* `:blank` (en-US)
* `bleed (@page)`
* `<blend-mode>`
* `block-size` (en-US)
* `blur()`
* `border`
* `border-block` (en-US)
* `border-block-color` (en-US)
* `border-block-end` (en-US)
* `border-block-end-color` (en-US)
* `border-block-end-style` (en-US)
* `border-block-end-width` (en-US)
* `border-block-start` (en-US)
* `border-block-start-color` (en-US)
* `border-block-start-style` (en-US)
* `border-block-start-width` (en-US)
* `border-block-style` (en-US)
* `border-block-width` (en-US)
* `border-bottom`
* `border-bottom-color`
* `border-bottom-left-radius` (en-US)
* `border-bottom-right-radius` (en-US)
* `border-bottom-style`
* `border-bottom-width`
* `border-collapse`
* `border-color`
* `border-end-end-radius` (en-US)
* `border-end-start-radius` (en-US)
* `border-image`
* `border-image-outset`
* `border-image-repeat`
* `border-image-slice`
* `border-image-source`
* `border-image-width`
* `border-inline` (en-US)
* `border-inline-color` (en-US)
* `border-inline-end` (en-US)
* `border-inline-end-color` (en-US)
* `border-inline-end-style` (en-US)
* `border-inline-end-width` (en-US)
* `border-inline-start` (en-US)
* `border-inline-start-color` (en-US)
* `border-inline-start-style` (en-US)
* `border-inline-start-width` (en-US)
* `border-inline-style` (en-US)
* `border-inline-width` (en-US)
* `border-left`
* `border-left-color`
* `border-left-style`
* `border-left-width`
* `border-radius`
* `border-right`
* `border-right-color`
* `border-right-style`
* `border-right-width`
* `border-spacing`
* `border-start-end-radius` (en-US)
* `border-start-start-radius` (en-US)
* `border-style`
* `border-top`
* `border-top-color`
* `border-top-left-radius` (en-US)
* `border-top-right-radius` (en-US)
* `border-top-style`
* `border-top-width`
* `border-width`
* `bottom` (en-US)
* `@bottom-center`
* `box-decoration-break` (en-US)
* `box-shadow` (en-US)
* `box-sizing`
* `break-after` (en-US)
* `break-before` (en-US)
* `break-inside` (en-US)
* `brightness()`

### C

* `calc()`
* `caption-side` (en-US)
* `caret`
* `caret-color` (en-US)
* `caret-shape`
* `@character-variant` (en-US)
* `@charset`
* `:checked`
* `circle()` (en-US)
* `clamp()` (en-US)
* `clear`
* `clip` (en-US)
* `clip-path`
* `<color>`
* `color`
* `color-scheme` (en-US)
* `column-count` (en-US)
* `column-fill` (en-US)
* `column-gap` (en-US)
* `column-rule` (en-US)
* `column-rule-color` (en-US)
* `column-rule-style` (en-US)
* `column-rule-width` (en-US)
* `column-span` (en-US)
* `column-width` (en-US)
* `columns` (en-US)
* `conic-gradient()` (en-US)
* `contain`
* `contain-intrinsic-block-size` (en-US)
* `contain-intrinsic-height` (en-US)
* `contain-intrinsic-inline-size` (en-US)
* `contain-intrinsic-size` (en-US)
* `contain-intrinsic-width` (en-US)
* `container` (en-US)
* `container-name` (en-US)
* `container-type` (en-US)
* `content`
* `content-visibility` (en-US)
* `contrast()`
* `cos()` (en-US)
* `<counter>` (en-US)
* `counter-increment` (en-US)
* `counter-reset` (en-US)
* `counter-set` (en-US)
* `@counter-style` (en-US)
* `counters()` (en-US)
* `cross-fade()` (en-US)
* `cubic-bezier()` (en-US)
* `::cue` (en-US)
* `::cue-region` (en-US)
* `:current` (en-US)
* `cursor`
* `<custom-ident>` (en-US)
* `length#cap`
* `length#ch`
* `length#cm`

### D

* `angle#deg`
* `<dashed-ident>` (en-US)
* `:default`
* `:defined`
* `descent-override (@font-face)` (en-US)
* `<dimension>` (en-US)
* `:dir` (en-US)
* `direction` (en-US)
* `:disabled`
* `display` (en-US)
* `<display-box>` (en-US)
* `<display-inside>` (en-US)
* `<display-internal>`
* `<display-legacy>` (en-US)
* `<display-listitem>` (en-US)
* `<display-outside>` (en-US)
* `drop-shadow()` (en-US)
* `resolution#dpcm` (en-US)
* `resolution#dpi` (en-US)
* `resolution#dppx` (en-US)

### E

* `<easing-function>` (en-US)
* `element()` (en-US)
* `ellipse()` (en-US)
* `:empty` (en-US)
* `empty-cells` (en-US)
* `:enabled`
* `env()` (en-US)
* `exp()` (en-US)
* `length#em`
* `length#ex`

### F

* `fallback (@counter-style)` (en-US)
* `filter`
* `<filter-function>`
* `:first`
* `:first-child`
* `::first-letter (:first-letter)` (en-US)
* `::first-line (:first-line)` (en-US)
* `:first-of-type`
* `fit-content()` (en-US)
* `<flex>` (en-US)
* `flex`
* `flex-basis`
* `flex-direction`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `flex-wrap`
* `flex_value#fr` (en-US)
* `float`
* `:focus`
* `:focus-visible` (en-US)
* `:focus-within`
* `font`
* `font-display (@font-face)`
* `@font-face`
* `font-family` (en-US)
* `font-family (@font-face)` (en-US)
* `font-family (@font-palette-values)` (en-US)
* `font-feature-settings`
* `font-feature-settings (@font-face)` (en-US)
* `@font-feature-values` (en-US)
* `font-kerning` (en-US)
* `font-language-override` (en-US)
* `font-optical-sizing` (en-US)
* `font-palette` (en-US)
* `@font-palette-values` (en-US)
* `font-size`
* `font-size-adjust` (en-US)
* `font-stretch` (en-US)
* `font-stretch (@font-face)` (en-US)
* `font-style` (en-US)
* `font-style (@font-face)` (en-US)
* `font-synthesis`
* `font-synthesis-position` (en-US)
* `font-synthesis-small-caps` (en-US)
* `font-synthesis-style` (en-US)
* `font-synthesis-weight` (en-US)
* `font-variant` (en-US)
* `font-variant-alternates` (en-US)
* `font-variant-caps` (en-US)
* `font-variant-east-asian` (en-US)
* `font-variant-emoji` (en-US)
* `font-variant-ligatures` (en-US)
* `font-variant-numeric` (en-US)
* `font-variant-position` (en-US)
* `font-variation-settings` (en-US)
* `font-variation-settings (@font-face)` (en-US)
* `font-weight`
* `font-weight (@font-face)` (en-US)
* `forced-color-adjust` (en-US)
* `format()` (en-US)
* `<frequency>`
* `<frequency-percentage>` (en-US)
* `:fullscreen`
* `:future` (en-US)

### G

* `angle#grad`
* `gap`
* `<gradient>`
* `::grammar-error` (en-US)
* `grayscale()` (en-US)
* `grid` (en-US)
* `grid-area` (en-US)
* `grid-auto-columns` (en-US)
* `grid-auto-flow` (en-US)
* `grid-auto-rows` (en-US)
* `grid-column` (en-US)
* `grid-column-end` (en-US)
* `grid-column-start` (en-US)
* `grid-row` (en-US)
* `grid-row-end` (en-US)
* `grid-row-start` (en-US)
* `grid-template` (en-US)
* `grid-template-areas` (en-US)
* `grid-template-columns`
* `grid-template-rows` (en-US)

### H

* `frequency#Hz`
* `hanging-punctuation` (en-US)
* `:has` (en-US)
* `height`
* `@historical-forms`
* `:host()` (en-US)
* `:host-context()`
* `:hover`
* `hsl()`
* `hsla()`
* `hue-rotate()` (en-US)
* `hwb()`
* `hyphenate-character` (en-US)
* `hyphenate-limit-chars` (en-US)
* `hyphens`
* `hypot()` (en-US)

### I

* `<ident>` (en-US)
* `<image>`
* `image()`
* `image-orientation` (en-US)
* `image-rendering`
* `image-resolution` (en-US)
* `image-set()` (en-US)
* `@import`
* `:in-range` (en-US)
* `:indeterminate` (en-US)
* `inherit`
* `inherits (@property)` (en-US)
* `initial`
* `initial-letter` (en-US)
* `initial-letter-align` (en-US)
* `initial-value (@property)` (en-US)
* `inline-size` (en-US)
* `input-security`
* `inset` (en-US)
* `inset()` (en-US)
* `inset-block` (en-US)
* `inset-block-end` (en-US)
* `inset-block-start` (en-US)
* `inset-inline` (en-US)
* `inset-inline-end` (en-US)
* `inset-inline-start` (en-US)
* `<integer>`
* `:invalid` (en-US)
* `invert()` (en-US)
* `:is` (en-US)
* `isolation`
* `length#ic`
* `length#in`

### J

* `justify-content`
* `justify-items` (en-US)
* `justify-self` (en-US)
* `justify-tracks` (en-US)

### K

* `frequency#kHz`
* `@keyframes`

### L

* `lab()`
* `:lang` (en-US)
* `:last-child`
* `:last-of-type` (en-US)
* `@layer` (en-US)
* `layer()`
* `layer() (@import)`
* `lch()`
* `leader()`
* `:left` (en-US)
* `left` (en-US)
* `@left-bottom`
* `<length>`
* `<length-percentage>`
* `letter-spacing`
* `light-dark()`
* `line-break`
* `line-clamp`
* `line-gap-override (@font-face)` (en-US)
* `line-height` (en-US)
* `line-height-step` (en-US)
* `<line-style>` (en-US)
* `linear-gradient()` (en-US)
* `:link`
* `list-style` (en-US)
* `list-style-image` (en-US)
* `list-style-position` (en-US)
* `list-style-type` (en-US)
* `local()` (en-US)
* `:local-link` (en-US)
* `log()` (en-US)

### M

* `length#mm`
* `margin`
* `margin-block` (en-US)
* `margin-block-end` (en-US)
* `margin-block-start` (en-US)
* `margin-bottom`
* `margin-inline` (en-US)
* `margin-inline-end` (en-US)
* `margin-inline-start` (en-US)
* `margin-left`
* `margin-right`
* `margin-top`
* `margin-trim` (en-US)
* `::marker` (en-US)
* `marks (@page)`
* `mask`
* `mask-border` (en-US)
* `mask-border-mode` (en-US)
* `mask-border-outset` (en-US)
* `mask-border-repeat` (en-US)
* `mask-border-slice` (en-US)
* `mask-border-source` (en-US)
* `mask-border-width` (en-US)
* `mask-clip` (en-US)
* `mask-composite` (en-US)
* `mask-image` (en-US)
* `mask-mode` (en-US)
* `mask-origin` (en-US)
* `mask-position` (en-US)
* `mask-repeat` (en-US)
* `mask-size` (en-US)
* `mask-type` (en-US)
* `masonry-auto-flow` (en-US)
* `math-depth` (en-US)
* `math-shift` (en-US)
* `math-style` (en-US)
* `matrix()`
* `matrix3d()` (en-US)
* `max()` (en-US)
* `max-block-size` (en-US)
* `max-height`
* `max-inline-size` (en-US)
* `max-lines`
* `max-width`
* `@media`
* `min()` (en-US)
* `min-block-size` (en-US)
* `min-height`
* `min-inline-size` (en-US)
* `min-width`
* `minmax()` (en-US)
* `mix-blend-mode`
* `mod()` (en-US)
* `time#ms`

### N

* `@namespace`
* `negative (@counter-style)` (en-US)
* `:not`
* `:nth-child`
* `:nth-last-child` (en-US)
* `:nth-last-of-type` (en-US)
* `:nth-of-type` (en-US)
* `<number>`

### O

* `object-fit`
* `object-position`
* `offset` (en-US)
* `offset-anchor` (en-US)
* `offset-distance` (en-US)
* `offset-path` (en-US)
* `offset-position` (en-US)
* `offset-rotate` (en-US)
* `:only-child` (en-US)
* `:only-of-type` (en-US)
* `opacity`
* `opacity()` (en-US)
* `:optional` (en-US)
* `order`
* `@ornaments` (en-US)
* `orphans` (en-US)
* `:out-of-range` (en-US)
* `outline`
* `outline-color` (en-US)
* `outline-offset` (en-US)
* `outline-style`
* `outline-width`
* `<overflow>`
* `overflow-anchor` (en-US)
* `overflow-block` (en-US)
* `overflow-clip-margin` (en-US)
* `overflow-inline`
* `overflow-wrap`
* `overflow-x` (en-US)
* `overflow-y` (en-US)
* `overlay` (en-US)
* `override-colors (@font-palette-values)` (en-US)
* `overscroll-behavior` (en-US)
* `overscroll-behavior-block` (en-US)
* `overscroll-behavior-inline` (en-US)
* `overscroll-behavior-x` (en-US)
* `overscroll-behavior-y` (en-US)

### P

* `Pseudo-classes`
* `Pseudo-elements`
* `length#pc`
* `length#pt`
* `length#px`
* `pad (@counter-style)` (en-US)
* `padding`
* `padding-block` (en-US)
* `padding-block-end` (en-US)
* `padding-block-start` (en-US)
* `padding-bottom`
* `padding-inline` (en-US)
* `padding-inline-end` (en-US)
* `padding-inline-start` (en-US)
* `padding-left`
* `padding-right`
* `padding-top`
* `@page`
* `page` (en-US)
* `page-break-after` (en-US)
* `page-break-before` (en-US)
* `page-break-inside` (en-US)
* `page-orientation (@page)` (en-US)
* `paint()` (en-US)
* `paint-order`
* `::part` (en-US)
* `:past` (en-US)
* `path()` (en-US)
* `:paused` (en-US)
* `<percentage>`
* `perspective` (en-US)
* `perspective()` (en-US)
* `perspective-origin` (en-US)
* `:picture-in-picture` (en-US)
* `place-content` (en-US)
* `place-items` (en-US)
* `place-self` (en-US)
* `::placeholder` (en-US)
* `:placeholder-shown` (en-US)
* `:playing` (en-US)
* `pointer-events` (en-US)
* `polygon()` (en-US)
* `<position>`
* `position`
* `pow()` (en-US)
* `prefix (@counter-style)` (en-US)
* `print-color-adjust` (en-US)
* `@property` (en-US)

### Q

* `length#Q`
* `quotes` (en-US)

### R

* `angle#rad`
* `length#rem`
* `radial-gradient()` (en-US)
* `range (@counter-style)` (en-US)
* `<ratio>` (en-US)
* `ray()` (en-US)
* `:read-only` (en-US)
* `:read-write` (en-US)
* `rect()` (en-US)
* `rem()` (en-US)
* `repeat()` (en-US)
* `repeating-conic-gradient()` (en-US)
* `repeating-linear-gradient()` (en-US)
* `repeating-radial-gradient()` (en-US)
* `:required` (en-US)
* `resize` (en-US)
* `<resolution>` (en-US)
* `reversed()`
* `revert`
* `rgb()`
* `rgba()`
* `:right` (en-US)
* `right` (en-US)
* `@right-bottom`
* `:root`
* `rotate` (en-US)
* `rotate()` (en-US)
* `rotate3d()` (en-US)
* `rotateX()` (en-US)
* `rotateY()` (en-US)
* `rotateZ()` (en-US)
* `round()` (en-US)
* `row-gap` (en-US)
* `ruby-align` (en-US)
* `ruby-merge`
* `ruby-position` (en-US)

### S

* `saturate()` (en-US)
* `scale` (en-US)
* `scale()` (en-US)
* `scale3d()` (en-US)
* `scaleX()`
* `scaleY()` (en-US)
* `scaleZ()` (en-US)
* `:scope` (en-US)
* `@scope` (en-US)
* `scroll()` (en-US)
* `scroll-behavior` (en-US)
* `scroll-margin` (en-US)
* `scroll-margin-block` (en-US)
* `scroll-margin-block-end` (en-US)
* `scroll-margin-block-start` (en-US)
* `scroll-margin-bottom` (en-US)
* `scroll-margin-inline` (en-US)
* `scroll-margin-inline-end` (en-US)
* `scroll-margin-inline-start` (en-US)
* `scroll-margin-left` (en-US)
* `scroll-margin-right` (en-US)
* `scroll-margin-top` (en-US)
* `scroll-padding` (en-US)
* `scroll-padding-block` (en-US)
* `scroll-padding-block-end` (en-US)
* `scroll-padding-block-start` (en-US)
* `scroll-padding-bottom` (en-US)
* `scroll-padding-inline` (en-US)
* `scroll-padding-inline-end` (en-US)
* `scroll-padding-inline-start` (en-US)
* `scroll-padding-left` (en-US)
* `scroll-padding-right` (en-US)
* `scroll-padding-top` (en-US)
* `scroll-snap-align` (en-US)
* `scroll-snap-stop` (en-US)
* `scroll-snap-type` (en-US)
* `scroll-timeline` (en-US)
* `scroll-timeline-axis` (en-US)
* `scroll-timeline-name` (en-US)
* `scrollbar-color` (en-US)
* `scrollbar-gutter` (en-US)
* `scrollbar-width` (en-US)
* `::selection` (en-US)
* `selector()`
* `sepia()` (en-US)
* `<shape>` (en-US)
* `shape-image-threshold` (en-US)
* `shape-margin` (en-US)
* `shape-outside` (en-US)
* `sign()` (en-US)
* `sin()` (en-US)
* `size (@page)` (en-US)
* `size-adjust (@font-face)` (en-US)
* `skew()` (en-US)
* `skewX()` (en-US)
* `skewY()` (en-US)
* `::slotted` (en-US)
* `speak-as (@counter-style)` (en-US)
* `::spelling-error` (en-US)
* `sqrt()` (en-US)
* `src (@font-face)` (en-US)
* `@starting-style` (en-US)
* `steps()` (en-US)
* `<string>` (en-US)
* `@styleset` (en-US)
* `@stylistic` (en-US)
* `suffix (@counter-style)` (en-US)
* `@supports`
* `supports() (@import)`
* `@swash` (en-US)
* `symbols (@counter-style)` (en-US)
* `symbols()` (en-US)
* `syntax (@property)` (en-US)
* `system (@counter-style)` (en-US)
* `time#s`

### T

* `angle#turn`
* `tab-size`
* `table-layout` (en-US)
* `tan()` (en-US)
* `:target` (en-US)
* `target-counter()`
* `target-counters()`
* `::target-text` (en-US)
* `target-text()`
* `:target-within` (en-US)
* `text-align`
* `text-align-last` (en-US)
* `text-combine-upright` (en-US)
* `text-decoration`
* `text-decoration-color` (en-US)
* `text-decoration-line` (en-US)
* `text-decoration-skip` (en-US)
* `text-decoration-skip-ink` (en-US)
* `text-decoration-style` (en-US)
* `text-decoration-thickness` (en-US)
* `text-emphasis` (en-US)
* `text-emphasis-color` (en-US)
* `text-emphasis-position` (en-US)
* `text-emphasis-style` (en-US)
* `text-indent` (en-US)
* `text-justify` (en-US)
* `text-orientation` (en-US)
* `text-overflow` (en-US)
* `text-rendering` (en-US)
* `text-shadow` (en-US)
* `text-size-adjust` (en-US)
* `text-transform` (en-US)
* `text-underline-offset` (en-US)
* `text-underline-position` (en-US)
* `text-wrap` (en-US)
* `<time>`
* `<time-percentage>` (en-US)
* `timeline-scope` (en-US)
* `top` (en-US)
* `@top-center`
* `touch-action` (en-US)
* `transform`
* `transform-box` (en-US)
* `<transform-function>`
* `transform-origin` (en-US)
* `transform-style` (en-US)
* `transition`
* `transition-behavior` (en-US)
* `transition-delay` (en-US)
* `transition-duration` (en-US)
* `transition-property` (en-US)
* `transition-timing-function` (en-US)
* `translate` (en-US)
* `translate()`
* `translate3d()` (en-US)
* `translateX()` (en-US)
* `translateY()` (en-US)
* `translateZ()` (en-US)
* `type()`

### U

* `unicode-bidi` (en-US)
* `unicode-range (@font-face)` (en-US)
* `unset`
* `<url>`
* `url()`
* `:user-invalid` (en-US)
* `user-select`
* `:user-valid` (en-US)

### V

* `length#vh`
* `length#vmax`
* `length#vmin`
* `length#vw`
* `:valid` (en-US)
* `var()`
* `vertical-align`
* `view()`
* `view-timeline` (en-US)
* `view-timeline-axis` (en-US)
* `view-timeline-inset` (en-US)
* `view-timeline-name` (en-US)
* `::view-transition` (en-US)
* `::view-transition-group` (en-US)
* `::view-transition-image-pair` (en-US)
* `view-transition-name` (en-US)
* `::view-transition-new` (en-US)
* `::view-transition-old` (en-US)
* `visibility`
* `:visited`

### W

* `:where` (en-US)
* `white-space`
* `white-space-collapse` (en-US)
* `widows` (en-US)
* `width`
* `will-change`
* `word-break`
* `word-spacing`
* `word-wrap` (en-US)
* `writing-mode` (en-US)

### X

* `resolution#x` (en-US)

### Z

* `z-index`

### Others

* `--*` (en-US)

선택자
---

다음은 선택자 목록입니다. 선택자를 사용하면 DOM 요소의 다양한 기능에 기반한 조건을 통해 스타일을 입힐 수 있습니다.

### 기본 선택자

**기본 선택자**는 선택자의 기초를 이루며, 조합을 통해 더 복잡한 선택자를 생성합니다.

* 전체 선택자 `*`, `ns|*`, `*|*`, `|*`
* 태그 선택자 *`elementname`*
* 클래스 선택자 `.classname`
* ID 선택자 `#idname`
* 속성 선택자 `[attr=value]`
### 그룹 선택자

선택자 목록 `A, B`

A와 B 요소를 모두 선택합니다. 일치하는 여러가지 요소를 선택할 때 사용합니다.

### 결합자

결합자는 "\*`A`\*는 \*`B`*의 자식", "*`A`\*는 \*`B`\*와 인접 요소"처럼, 두 개 이상의 선택자끼리 관계를 형성합니다.

인접 형제 결합자 `A + B`

요소 \*`A`\*와 \*`B`\*가 같은 부모를 가지며 \*`B`\*가 \*`A`\*를 바로 뒤따라야 하도록 지정합니다.

일반 형제 결합자 `A ~ B`

요소 \*`A`\*와 \*`B`\*가 같은 부모를 가지며 \*`B`\*가 \*`A`\*를 뒤따라야 하도록 지정합니다. 그러나 \*`B`\*가 \*`A`\*의 바로 옆에 위치해야 할 필요는 없습니다.

자식 결합자 `A > B`

요소 \*`B`\*가 \*`A`\*의 바로 밑에 위치해야 하도록 지정합니다.

자손 결합자 `A B`

요소 \*`B`\*가 \*`A`\*의 밑에 위치해야 하도록 지정합니다. 그러나 \*`B`\*가 \*`A`\*의 바로 아래에 있을 필요는 없습니다.

열 결합자 (en-US) `A || B`
Experimental

요소 \*`B`\*가 표의 열 *`A`* 안에 위치해야 하도록 지정합니다. 여러 열에 걸친 요소는, 각각의 열 모두에 대해 안쪽에 위치한 것으로 간주합니다.

### 의사 클래스/요소

의사 클래스 `:`

요소의 특정 상태를 선택합니다.

의사 요소 `::`

HTML이 포함하지 않은 객체를 나타냅니다.

**참고:** **같이 보기:** Selectors Level 4 명세의 선택자 목록.

개념
--

### 구문과 의미

* CSS 구문
* @-규칙
* 종속 (en-US)
* 주석
* 서술자
* 상속
* 단축 속성
* 명시도
* 값 정의 구문
### 값

* 실제값 (en-US)
* 계산값
* 초깃값
* 결정값
* 지정값
* 사용값
### 레이아웃

* 블록 서식 맥락 (en-US)
* 박스 모델
* 컨테이닝 블록
* 레이아웃 모드
* 여백 상쇄
* 대체 요소
* 쌓임 맥락
* 시각적 서식 맥락
DOM-CSS / CSSOM
---------------

### 주요 객체 유형

* `DocumentOrShadowRoot.styleSheets`
* `styleSheets (en-US)[i].cssRules (en-US)`
* `cssRules[i].cssText (en-US)` (selector & style)
* `cssRules[i].selectorText (en-US)`
* `HTMLElement.style` (en-US)
* `HTMLElement.style.cssText (en-US)` (just style)
* `Element.className`
* `Element.classList`
### 중요 메서드

* `CSSStyleSheet.insertRule()` (en-US)
* `CSSStyleSheet.deleteRule()` (en-US)
같이 보기
-----

* Mozilla CSS 확장 (en-US) (`-moz-` 접두사 사용)
* WebKit CSS 확장 (en-US) (대다수 `-webkit-` 접두사 사용)
* Microsoft CSS 확장 (`-ms-` 접두사 사용)
외부 링크
-----

* CSS 색인 (w3.org)


background-origin - CSS: Cascading Style Sheets

background-origin
=================

CSS **`background-origin`** 속성은 배경의 원점을 테두리 시작점, 테두리 내부, 안쪽 여백 내부 중 하나로 지정합니다.

시도해보기
-----

`background-attachment`가 `fixed`인 경우 `background-origin`은 무시됩니다.

구문
--

```css
/\* 키워드 값 \*/
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/\* 전역 값 \*/
background-origin: inherit;
background-origin: initial;
background-origin: unset;
```

`background-origin` 속성은 다음 목록의 키워드 중 하나를 선택해 지정할 수 있습니다.

### 값

`border-box`

배경을 테두리 박스에 상대적으로 배치합니다.

`padding-box`

배경을 안쪽 여백 박스에 상대적으로 배치합니다.

`content-box`

배경을 콘텐츠 박스에 상대적으로 배치합니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `padding-box` |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US) and `::first-line` (en-US). |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | a repeatable list |

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

background-origin =
  <visual-box>#

<visual-box> =
  content-box  |
  padding-box  |
  border-box

```

예제
--

### 배경 원점 설정하기

```css
.example {
  border: 10px double;
  padding: 10px;
  background: url("image.jpg");
  background-position: center left;
  background-origin: content-box;
}
```

```css
#example2 {
  border: 4px solid black;
  padding: 10px;
  background: url("image.gif");
  background-repeat: no-repeat;
  background-origin: border-box;
}
```

```css
div {
  background-image: url("logo.jpg"), url("mainback.png"); /\* Applies two images to the background \*/
  background-position:
    top right,
    0px 0px;
  background-origin: content-box, padding-box;
}
```

명세
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-origin |

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

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

같이 보기
-----

* `background-clip`


:checked - CSS: Cascading Style Sheets

:checked
========

**`:checked`** CSS 의사 클래스 선택자는 선택했거나 `on` 상태인 **라디오**(`<input type="radio">` (en-US)), **체크박스**(`<input type="checkbox">`), **옵션**(`<option>` 요소를 나타냅니다.

```css
/\* Matches any checked/selected radio, checkbox, or option \*/
:checked {
  margin-left: 25px;
  border: 1px solid blue;
}
```

사용자가 요소를 체크했거나 선택한 경우 활성화되고, 체크나 선택을 해제하는 경우 비활성화됩니다.

**참고:** 많은 경우 브라우저는 `<option>` 요소를 대체 요소로 취급하므로, `:checked` 의사 클래스를 사용한 스타일을 적용할 수 있는 범위도 브라우저마다 다릅니다.

구문
--

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

### 기본 예제

#### HTML

```html
<div>
  <input type="radio" name="my-input" id="yes" />
  <label for="yes">Yes</label>

  <input type="radio" name="my-input" id="no" />
  <label for="no">No</label>
</div>

<div>
  <input type="checkbox" name="my-checkbox" id="opt-in" />
  <label for="opt-in">Check me!</label>
</div>

<select name="my-select" id="fruit">
  <option value="opt1">Apples</option>
  <option value="opt2">Grapes</option>
  <option value="opt3">Pears</option>
</select>
```

#### CSS

```css
div,
select {
  margin: 8px;
}

/\* Labels for checked inputs \*/
input:checked + label {
  color: red;
}

/\* Radio element, when checked \*/
input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;
}

/\* Checkbox element, when checked \*/
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px hotpink;
}

/\* Option elements, when selected \*/
option:checked {
  box-shadow: 0 0 0 3px lime;
  color: red;
}
```

#### 결과

### 숨겨진 체크박스를 사용해 요소 켜고 끄기

다음 예제 코드는 `:checked` 의사 클래스와 체크박스를 사용해, JavaScript 없이도 사용자가 켜거나 끌 수 있는 콘텐츠를 구현합니다.

#### HTML

```html
<input type="checkbox" id="expand-toggle" />

<table>
  <thead>
    <tr>
      <th>Column #1</th>
      <th>Column #2</th>
      <th>Column #3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="expandable">
      <td>[more text]</td>
      <td>[more text]</td>
      <td>[more text]</td>
    </tr>
    <tr>
      <td>[cell text]</td>
      <td>[cell text]</td>
      <td>[cell text]</td>
    </tr>
    <tr>
      <td>[cell text]</td>
      <td>[cell text]</td>
      <td>[cell text]</td>
    </tr>
    <tr class="expandable">
      <td>[more text]</td>
      <td>[more text]</td>
      <td>[more text]</td>
    </tr>
    <tr class="expandable">
      <td>[more text]</td>
      <td>[more text]</td>
      <td>[more text]</td>
    </tr>
  </tbody>
</table>

<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>
```

#### CSS

```css
/\* Hide the toggle checkbox \*/
#expand-toggle {
  display: none;
}

/\* Hide expandable content by default \*/
.expandable {
  visibility: collapse;
  background: #ddd;
}

/\* Style the button \*/
#expand-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 11px;
  background-color: #ff7;
  border: 1px solid;
  border-radius: 3px;
}

/\* Show hidden content when the checkbox is checked \*/
#expand-toggle:checked ~ \* .expandable {
  visibility: visible;
}

/\* Style the button when the checkbox is checked \*/
#expand-toggle:checked ~ #expand-btn {
  background-color: #ccc;
}
```

#### 결과

명세
--

| Specification |
| --- |
| HTML Standard # selector-checked |
| Selectors Level 4 # checked |

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

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


-moz-image-region - CSS: Cascading Style Sheets

-moz-image-region
=================

**비표준:** 이 기능은 비표준이므로 실제 프로덕션에서 사용하지 마세요. 모든 사용자 환경에서 작동하지 않을 수 도 있으며, 미래에 호환성 문제가 생길 수 있습니다.

XUL 요소와 가상요소들에 대하여 `list-style-image` (en-US) 속성을 사용할때 이 속성은 전체이미지에서 사용되는 부분의 령역을 지정합니다. 이것은 요소들이 성능을 향상시키기 위해 같은 이미지의 서로다른 부분을 사용할수 있게 합니다.

```css
/\* Keyword value \*/
-moz-image-region: auto;

/\* <shape> value \*/
-moz-image-region: rect(0, 8px, 4px, 4px);

/\* Global values \*/
-moz-image-region: inherit;
-moz-image-region: initial;
-moz-image-region: unset;
```

문법은 `clip` (en-US)속성과 류사합니다. 4개의 값은 모두 이미지의 외쪽 웃모서리로부터 상대적입니다.

|  |  |
| --- | --- |
| 초기값 | `auto` |
| 적용대상 | XUL `image` elements and `:-moz-tree-image`, `:-moz-tree-twisty`, and `:-moz-tree-checkbox` pseudo-elements. **Note:** `-moz-image-region` only works with `image` elements where the icon is specified using `list-style-image` (en-US). It will not work with XUL `<image src="url" />`. |
| 상속 | yes |
| 계산 값 | as specified |
| Animation type | discrete |

구문
--
```

-moz-image-region: rect(top, right, bottom, left);
```

### 형식 구문

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

#example-button {
  /* display only the 4x4 area from the top left of this image */
  list-style-image: url("chrome://example/skin/example.png");
  -moz-image-region: rect(0px, 4px, 4px, 0px);
}
#example-button:hover {
  /* use the 4x4 area to the right of the first for the hovered button */
  -moz-image-region: rect(0px, 8px, 4px, 4px);
}
```

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

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


<color> - CSS: Cascading Style Sheets

<color>
=======

CSS **`<color>`** 자료형은 색을 나타냅니다. `<color>`는 이 색이 배경과 어떻게 합성되어야 하는지 나타내는 알파 채널 투명도 값도 가질 수 있습니다.

`<color>`는 다음 방법으로 정의할 수 있습니다.

* 키워드 사용 (`blue`, `transparent` 등)
* RGB 3차원 좌표계 사용 (# + 16진수 표기법 또는 `rgb()`, `rgba()`의 함수형 표기법)
* HSL 실린더형 좌표계 사용 (`hsl()`, `hsla()`의 함수형 표기법)

**참고:** 이 글은 `<color>` 자료형에 대해 상세히 기술합니다. HTML에서 실제로 색을 쓰는 법이 더 알고 싶으시면 CSS로 HTML 요소에 색 입히기 (en-US)를 참고하세요.

구문
--

`<color>` 자료형은 아래 나열된 선택지 중 하나를 사용해 지정합니다.

**참고:** `<color>` 값은 정확하게 정의할 수 있지만 실제로 화면에 표시될 때는 기기별로 차이가 있을 수도 있습니다. 대부분의 화면 색이 제대로 조정되지 않았으며 일부 브라우저는 기기의 색상 프로필을 지원하지 않기 때문입니다.

### 색상 키워드

색상 키워드는 대소문자를 구분하지 않는 식별자로, `red`, `blue`, `black`, `lightseagreen`처럼 특정 색을 나타냅니다. 이름이 표현하는 색을 그럭저럭 가리키고 있긴 하지만 모든 키워드의 본질은 인위적이며 어떤 특정한 규칙을 따르거나 하지 않습니다.

색상 키워드를 사용할 땐 몇 가지 고려할 점이 있습니다.

* HTML은 CSS1에서 찾을 수 있는 16가지 기본 색상만 인식합니다. 알 수 없는 값은 특정 알고리즘을 사용해 변환하는데 그 결과는 대개 완전히 다른 색입니다. 나머지 색상 키워드는 CSS와 SVG에서만 사용해야 합니다.
* HTML과 달리 CSS는 알 수 없는 키워드를 완전히 무시합니다.
* 모든 색상 키워드는 투명도 없는 단일 색상을 표현합니다.
* 어떤 키워드는 다른 키워드의 다른 이름입니다.
    + `aqua` / `cyan`
    + `fuchsia` / `magenta`
    + `darkgray` / `darkgrey`
    + `darkslategray` / `darkslategrey`
    + `dimgray` / `dimgrey`
    + `lightgray` / `lightgrey`
    + `lightslategray` / `lightslategrey`
    + `gray` / `grey`
    + `slategray` / `slategrey`
* 많은 키워드를 X11에서 가져오긴 했지만, 제조사들이 X11 색상을 특정 하드웨어에 맞춰 조절한 경우도 있었기에 RGB값은 차이가 존재할 수 있습니다.

**참고:** CSS의 진화와 함께 색상 키워드도 많은 변화를 겪었습니다.

* CSS Level 1은 16개의 기본 색상만 지니고 있었습니다. VGA 그래픽 카드가 표현할 수 있는 색에서 가져온 것이기에 VGA 색상이라고 칭했습니다.
* CSS Level 2에서는 `orange` 키워드를 추가했습니다.
* 초기 브라우저들은 명세에 없음에도 불구하고 주로 X11 색상표에서 가져온 다양한 색상을 지원했습니다. 그러나 SVG 1.0과 CSS Colors Level 3 이전까지 그 목록이 정식으로 정해진 적은 없었습니다. 추가한 색상 키워드는 확장 색상 키워드, X11 색상, 또는 SVG 색상이라고 부릅니다.
* CSS Colors Level 4에선 웹 개척자 에릭 메이어를 기리기 위해 `rebeccapurple` 키워드를 추가했습니다.

| 명세 | 키워드 | RGB 16진수값 | 미리보기 |
| --- | --- | --- | --- |
| CSS1 | `black` | `#000000` |  |
| `silver` | `#c0c0c0` |  |
| `gray` | `#808080` |  |
| `white` | `#ffffff` |  |
| `maroon` | `#800000` |  |
| `red` | `#ff0000` |  |
| `purple` | `#800080` |  |
| `fuchsia` | `#ff00ff` |  |
| `green` | `#008000` |  |
| `lime` | `#00ff00` |  |
| `olive` | `#808000` |  |
| `yellow` | `#ffff00` |  |
| `navy` | `#000080` |  |
| `blue` | `#0000ff` |  |
| `teal` | `#008080` |  |
| `aqua` | `#00ffff` |  |
| CSS2.1 | `orange` | `#ffa500` |  |
| CSS3 Colors | `aliceblue` | `#f0f8ff` |  |
| `antiquewhite` | `#faebd7` |  |
| `aquamarine` | `#7fffd4` |  |
| `azure` | `#f0ffff` |  |
| `beige` | `#f5f5dc` |  |
| `bisque` | `#ffe4c4` |  |
| `blanchedalmond` | `#ffebcd` |  |
| `blueviolet` | `#8a2be2` |  |
| `brown` | `#a52a2a` |  |
| `burlywood` | `#deb887` |  |
| `cadetblue` | `#5f9ea0` |  |
| `chartreuse` | `#7fff00` |  |
| `chocolate` | `#d2691e` |  |
| `coral` | `#ff7f50` |  |
| `cornflowerblue` | `#6495ed` |  |
| `cornsilk` | `#fff8dc` |  |
| `crimson` | `#dc143c` |  |
| `cyan`(`aqua`의 다른 이름) | `#00ffff` |  |
| `darkblue` | `#00008b` |  |
| `darkcyan` | `#008b8b` |  |
| `darkgoldenrod` | `#b8860b` |  |
| `darkgray` | `#a9a9a9` |  |
| `darkgreen` | `#006400` |  |
| `darkgrey` | `#a9a9a9` |  |
| `darkkhaki` | `#bdb76b` |  |
| `darkmagenta` | `#8b008b` |  |
| `darkolivegreen` | `#556b2f` |  |
| `darkorange` | `#ff8c00` |  |
| `darkorchid` | `#9932cc` |  |
| `darkred` | `#8b0000` |  |
| `darksalmon` | `#e9967a` |  |
| `darkseagreen` | `#8fbc8f` |  |
| `darkslateblue` | `#483d8b` |  |
| `darkslategray` | `#2f4f4f` |  |
| `darkslategrey` | `#2f4f4f` |  |
| `darkturquoise` | `#00ced1` |  |
| `darkviolet` | `#9400d3` |  |
| `deeppink` | `#ff1493` |  |
| `deepskyblue` | `#00bfff` |  |
| `dimgray` | `#696969` |  |
| `dimgrey` | `#696969` |  |
| `dodgerblue` | `#1e90ff` |  |
| `firebrick` | `#b22222` |  |
| `floralwhite` | `#fffaf0` |  |
| `forestgreen` | `#228b22` |  |
| `gainsboro` | `#dcdcdc` |  |
| `ghostwhite` | `#f8f8ff` |  |
| `gold` | `#ffd700` |  |
| `goldenrod` | `#daa520` |  |
| `greenyellow` | `#adff2f` |  |
| `grey` | `#808080` |  |
| `honeydew` | `#f0fff0` |  |
| `hotpink` | `#ff69b4` |  |
| `indianred` | `#cd5c5c` |  |
| `indigo` | `#4b0082` |  |
| `ivory` | `#fffff0` |  |
| `khaki` | `#f0e68c` |  |
| `lavender` | `#e6e6fa` |  |
| `lavenderblush` | `#fff0f5` |  |
| `lawngreen` | `#7cfc00` |  |
| `lemonchiffon` | `#fffacd` |  |
| `lightblue` | `#add8e6` |  |
| `lightcoral` | `#f08080` |  |
| `lightcyan` | `#e0ffff` |  |
| `lightgoldenrodyellow` | `#fafad2` |  |
| `lightgray` | `#d3d3d3` |  |
| `lightgreen` | `#90ee90` |  |
| `lightgrey` | `#d3d3d3` |  |
| `lightpink` | `#ffb6c1` |  |
| `lightsalmon` | `#ffa07a` |  |
| `lightseagreen` | `#20b2aa` |  |
| `lightskyblue` | `#87cefa` |  |
| `lightslategray` | `#778899` |  |
| `lightslategrey` | `#778899` |  |
| `lightsteelblue` | `#b0c4de` |  |
| `lightyellow` | `#ffffe0` |  |
| `limegreen` | `#32cd32` |  |
| `linen` | `#faf0e6` |  |
| `magenta`(`fuchsia`의 다른 이름) | `#ff00ff` |  |
| `mediumaquamarine` | `#66cdaa` |  |
| `mediumblue` | `#0000cd` |  |
| `mediumorchid` | `#ba55d3` |  |
| `mediumpurple` | `#9370db` |  |
| `mediumseagreen` | `#3cb371` |  |
| `mediumslateblue` | `#7b68ee` |  |
| `mediumspringgreen` | `#00fa9a` |  |
| `mediumturquoise` | `#48d1cc` |  |
| `mediumvioletred` | `#c71585` |  |
| `midnightblue` | `#191970` |  |
| `mintcream` | `#f5fffa` |  |
| `mistyrose` | `#ffe4e1` |  |
| `moccasin` | `#ffe4b5` |  |
| `navajowhite` | `#ffdead` |  |
| `oldlace` | `#fdf5e6` |  |
| `olivedrab` | `#6b8e23` |  |
| `orangered` | `#ff4500` |  |
| `orchid` | `#da70d6` |  |
| `palegoldenrod` | `#eee8aa` |  |
| `palegreen` | `#98fb98` |  |
| `paleturquoise` | `#afeeee` |  |
| `palevioletred` | `#db7093` |  |
| `papayawhip` | `#ffefd5` |  |
| `peachpuff` | `#ffdab9` |  |
| `peru` | `#cd853f` |  |
| `pink` | `#ffc0cb` |  |
| `plum` | `#dda0dd` |  |
| `powderblue` | `#b0e0e6` |  |
| `rosybrown` | `#bc8f8f` |  |
| `royalblue` | `#4169e1` |  |
| `saddlebrown` | `#8b4513` |  |
| `salmon` | `#fa8072` |  |
| `sandybrown` | `#f4a460` |  |
| `seagreen` | `#2e8b57` |  |
| `seashell` | `#fff5ee` |  |
| `sienna` | `#a0522d` |  |
| `skyblue` | `#87ceeb` |  |
| `slateblue` | `#6a5acd` |  |
| `slategray` | `#708090` |  |
| `slategrey` | `#708090` |  |
| `snow` | `#fffafa` |  |
| `springgreen` | `#00ff7f` |  |
| `steelblue` | `#4682b4` |  |
| `tan` | `#d2b48c` |  |
| `thistle` | `#d8bfd8` |  |
| `tomato` | `#ff6347` |  |
| `turquoise` | `#40e0d0` |  |
| `violet` | `#ee82ee` |  |
| `wheat` | `#f5deb3` |  |
| `whitesmoke` | `#f5f5f5` |  |
| `yellowgreen` | `#9acd32` |  |
| CSS4 Colors | `rebeccapurple` | `#663399` |  |

### transparent 키워드

`transparent` 키워드는 완전히 투명한 색으로, "색"을 입힌 항목의 뒷편이 모두 보입니다. 기술적으로 `transparent`는 `rgba(0,0,0,0)`의 짧은 이름입니다.

**참고:** `<gradient>` 등 특정 상황에서 의도하지 않은 결과를 피하기 위해, 현재 CSS 명세에선 `transparent`를 투명도를 미리 곱한 색 공간에서 계산하도록 명시하고 있습니다. 그러나 오래된 브라우저에서는 투명도 0의 검정으로 취급할 수 있다는 점을 주의하세요.

**참고:** `transparent`는 CSS Level 2 (Revision 1) 전까지 실제 색상이 아니었습니다. 대신 `background`와 `border`의 `<color>` 자리에 사용하는 특별한 키워드로, 상속받은 단색을 덮어 쓸 수 있도록 추가됐었습니다. CSS Colors Level 3에서 알파 채널이 추가되면서 `transparent`도 실제 색상으로 재정의되었습니다. 덕분에 `<color>` 값 어디에나 사용할 수 있습니다.

### currentColor 키워드

`currentColor` 키워드는 요소의 `color` 속성값을 나타냅니다. 이를 통해 다른 속성이 `color` 속성값을 따라가도록 설정할 수 있습니다.

`color` 속성의 값으로 `currentColor` 키워드를 사용하면, 값을 상속받은 `color` 속성에서 대신 가져옵니다.

#### currentColor 예제

```html
<div style="color: blue; border: 1px dashed currentColor;">
  이 글의 색은 파랑입니다.
  <div style="background: currentColor; height:9px;"></div>
  이 블록은 파란 테두리로 둘러쌓여 있습니다.
</div>
```

### RGB 색상

RGB 색상 모델은 빨강, 초록, 파랑을 통해 특정 색을 표현합니다. 선택사항으로 색의 투명도를 알파 채널로 표현할 수 있습니다.

#### 구문

RGB 색상은 # 뒤의 16진수 표기법이나 함수형 표기법(`rgb()`, `rgba()`)으로 표현할 수 있습니다.

**참고:** CSS Colors Level 4부터 `rgba()`는 `rgb()`의 다른 이름입니다. Level 4 표준을 구현한 브라우저에서는 같은 매개변수를 받고 동일하게 행동합니다.

16진수 표기법: `#RRGGBB[AA]`

`R`(빨강), `G`(초록), `B`(파랑), `A`(알파)는 16진수 문자(0-9, A-F)입니다. `A`는 선택사항입니다. 예를 들어 `#ff0000`은 `#ff0000ff`와 같습니다.

16진수 표기법: `#RGB[A]`

`R`(빨강), `G`(초록), `B`(파랑), `A`(알파)는 16진수 문자(0-9, A-F)입니다. `A`는 선택사항입니다. 세 글자 표기법(`#RGB`)은 여섯 글자 표기법(`#RRGGBB`)의 단축 표현입니다. 예를 들어 `#f09`는 `#ff0099`와 같습니다. 비슷하게 네 글자 표기법(`#RGBA`)은 여덟 글자 표기법(`#RRGGBBAA`)의 단축 표기법이다. 예를 들어 `#0f38`은 `#00ff3388`과 같습니다.

함수형 표기법: `rgb(R, G, B[, A])` 또는 `rgba(R, G, B, A)`

`R`(빨강), `G`(초록), `B`(파랑)은 `<integer>`나 `<percentage>`이며 숫자 `255`가 `100%`와 동일합니다. `A`(알파)는 0과 1 사이의 `<number>`거나 `<percentage>`이며 숫자 `1`이 `100%`(불투명)와 동일합니다.

함수형 표기법: `rgb(R G B[ A])` 또는 `rgba(R G B A)`

CSS Colors Level 4부터 공백으로 구분한 값을 함수형 표기법과 사용할 수 있습니다.

#### 예제

##### 다양한 RGB 구문

다음 예제는 한 가지 색상을 만들 때 쓸 수 있는 다양한 RGB 색상 구문을 보입니다.

```css
/\* 아래 모든 구문은 불투명한 핫핑크를 표현합니다. \*/

/\* 16진수 구문 \*/
#f09
#F09
#ff0099
#FF0099

/\* 함수형 구문 \*/
rgb(255,0,153)
rgb(255, 0, 153)
rgb(255, 0, 153.0) /\* 오류! 소수점 금지 \*/
rgb(100%,0%,60%)
rgb(100%, 0%, 60%)
rgb(100%, 0, 60%) /\* 오류! 정수와 백분율 혼용 금지 \*/
rgb(255 0 153)

/\* 16진수와 알파 값 \*/
#f09f
#F09F
#ff0099ff
#FF0099FF

/\* 함수형 구문과 알파 값 \*/
rgb(255, 0, 153, 1)
rgb(255, 0, 153, 100%)

/\* 공백 구분 구문 \*/
rgb(255 0 153 / 1)
rgb(255 0 153 / 100%)

/\* 정숫값을 사용한 함수형 구문 \*/
rgb(255, 0, 153.6, 1)
rgb(1e2, .5e1, .5e0, +.25e2%)
```

##### 다양한 RGB 투명도 구문

```css
/\* 16진수 구문 \*/
#3a30                    /\* 0% opaque green \*/
/\* 0% opaque green \*/
#3A3F                    /\* full opaque green \*/
#33aa3300                /\* 0% opaque green \*/
#33AA3388                /\* 50% opaque green \*/

/\* 함수형 구문 \*/
rgba(51, 170, 51, .1)    /\* 10% opaque green \*/
rgba(51, 170, 51, .4)    /\* 40% opaque green \*/
rgba(51, 170, 51, .7)    /\* 70% opaque green \*/
rgba(51, 170, 51,  1)    /\* full opaque green \*/

/\* 공백 구분 구문 \*/
rgba(51 170 51 / 0.4)    /\* 40% opaque green \*/
rgba(51 170 51 / 40%)    /\* 40% opaque green \*/

/\* 정숫값을 사용한 함수형 구문 \*/
rgba(255, 0, 153.6, 1)
rgba(1e2, .5e1, .5e0, +.25e2%)    /\* 40% opaque green \*/

/\* 정숫값을 사용한 함수형 구문 \*/
rgba(255, 0, 153.6, 1)
rgba(1e2, .5e1, .5e0, +.25e2%);
```

### HSL 색상

HSL 색상 모델은 색상, 채도, 명도를 통해 특정 색상을 표현합니다. 선택사항으로 색의 투명도를 알파 채널로 표현할 수 있습니다.

많은 디자이너들은 색상, 채도, 명도를 따로 조절할 수 있는 HSL이 RGB보다 더 직관적임을 발견합니다. 또한 HSL을 사용하면 짝이 맞는 색(예컨대 한 가지 색의 여러 밝기) 여러 종류를 더 쉽게 만들 수 있습니다.

#### 구문

HSL 색상은 함수형 `hsl()`과 `hsla()` 표기법을 사용합니다.

**참고:** CSS Colors Level 4부터 `hsla()`는 `hsl()`의 다른 이름입니다. Level 4 표준을 구현한 브라우저에서는 같은 매개변수를 받고 동일하게 행동합니다.

함수형 포기법: `hsl(H, S, L[, A])` 또는 `hsla(H, S, L, A)`

`H`(색상)는 색상원에서의 `<angle>`로 #the-hsl-notation 기준 `deg`, `rad`, `grad`, `turn`을 사용할 수 있습니다. 단위 없이 `<number>`로 표현할 경우 hsl-color에 명시된 것과 같이 각도로 해석합니다. 정의에 따르면 빨강=`0deg`=`360deg`이며 다른 색은 (초록=`120deg`, 파랑=`240deg` 등) 원을 따라 분포하고 있습니다. `<angle>`이라면 암묵적으로 원의 주위를 한 바퀴 돕니다. 예컨대 `-120deg`=`240deg`, `480deg`=`120deg`, `-1turn`=`1turn` 입니다.

`S`(채도)와 `L`(명도)은 `<percentage>`입니다. `100%` 채도는 제일 진한 색이며 `0%`는 회색입니다. `100%` 명도는 흰색, `0%` 명도는 검은색, `50%` 명도는 "보통" 색입니다.

`A`(알파)는 0과 1 사이의 `<number>`거나 `<percentage>`이며 숫자 `1`이 `100%`(불투명)와 동일합니다.

함수형 표기법: `hsl(H S L[ A])` 또는 `hsla(H S L A)`

CSS Colors Level 4부터 공백으로 구분한 값을 함수형 표기법과 사용할 수 있습니다.

#### 예제

##### 다양한 HSL 구문

```css
/\* 아래 모든 구문은 라벤더를 표현합니다. \*/
hsl(270,60%,70%)
hsl(270, 60%, 70%)
hsl(270 60% 70%)
hsl(270deg, 60%, 70%)
hsl(4.71239rad, 60%, 70%)
hsl(.75turn, 60%, 70%)

/\* 아래 모든 구문은 85% 투명한 라벤더를 표현합니다. \*/
hsl(270, 60%, 50%, .15)
hsl(270, 60%, 50%, 15%)
hsl(270 60% 50% / .15)
hsl(270 60% 50% / 15%)
```

##### 제일 진한 색상

| 표현 | 설명 | 미리보기 |
| --- | --- | --- |
| `hsl(0, 100%, 50%)` | red |  |
| `hsl(30, 100%, 50%)` | orange |  |
| `hsl(60, 100%, 50%)` | yellow |  |
| `hsl(90, 100%, 50%)` | lime green |  |
| `hsl(120, 100%, 50%)` | green |  |
| `hsl(150, 100%, 50%)` | blue-green |  |
| `hsl(180, 100%, 50%)` | cyan |  |
| `hsl(210, 100%, 50%)` | sky blue |  |
| `hsl(240, 100%, 50%)` | blue |  |
| `hsl(270, 100%, 50%)` | purple |  |
| `hsl(300, 100%, 50%)` | magenta |  |
| `hsl(330, 100%, 50%)` | pink |  |
| `hsl(360, 100%, 50%)` | red |  |

##### 밝고 어두운 초록

| Notation | Description | Live |
| --- | --- | --- |
| `hsl(120, 100%, 0%)` | black |  |
| `hsl(120, 100%, 20%)` |  |  |
| `hsl(120, 100%, 40%)` |  |  |
| `hsl(120, 100%, 60%)` |  |  |
| `hsl(120, 100%, 80%)` |  |  |
| `hsl(120, 100%, 100%)` | white |  |

##### 진하고 옅은 초록

| Notation | Description | Live |
| --- | --- | --- |
| `hsl(120, 100%, 50%)` | green |  |
| `hsl(120, 80%, 50%)` |  |  |
| `hsl(120, 60%, 50%)` |  |  |
| `hsl(120, 40%, 50%)` |  |  |
| `hsl(120, 20%, 50%)` |  |  |
| `hsl(120, 0%, 50%)` | gray |  |

##### 다양한 HSL 투명도 구문

```css
hsla(240, 100%, 50%, .05) /\* 5% opaque blue \*/
hsla(240, 100%, 50%, .4)  /\* 40% opaque blue \*/
hsla(240, 100%, 50%, .7)  /\* 70% opaque blue \*/
hsla(240, 100%, 50%, 1)   /\* full opaque blue \*/

/\* Whitespace syntax \*/
hsla(240 100% 50% / .05)  /\* 5% opaque blue \*/

/\* Percentage value for alpha \*/
hsla(240 100% 50% / 5%)   /\* 5% opaque blue \*/
```

### 시스템 색상

모든 시스템에서 모든 시스템 색상을 지원하는건 아닙니다. 공개 웹 페이지에서 사용하는건 좋지 않습니다.

ActiveText

Text of active links

ButtonBorder

Base border color of controls

ButtonFace

Background color of controls

ButtonText

Foreground color of controls

Canvas

Background of application content or documents

CanvasText

Foreground color in application content or documents

Field

Background of input fields

FieldText

Text in input fields

GrayText

Foreground color for disabled items (e.g. a disabled control)

Highlight

Background of selected items

HighlightText

Foreground color of selected items

LinkText

Text of non-active, non-visited links

Mark

Background of text that has been specially marked (such as by the HTML `mark` element)

MarkText

Text that has been specially marked (such as by the HTML `mark` element)

VisitedText

Text of visited links

보간
--

애니메이션과 그레이디언트 (en-US)는 `<color>` 값의 빨강, 초록, 파랑 각 구성 성분을 부동소수점 실수를 사용해 보간합니다. 보간 중 예상하지 못한 무채색이 등장하는걸 방지하기 위해 계산은 알파 채널을 미리 곱한 sRGBA 색 공간에서 수행합니다. 애니메이션에서 보간의 속도는 타이밍 함수 (en-US)가 결정합니다.

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

색을 구별하기 어려운 사람도 있으므로, WCAG 2.0 권고안은 특정 메시지, 행동, 또는 결과를 나타내는 방법으로 오직 색만 사용하는걸 강력히 반대하고 있습니다. 색과 색상 대비 (en-US)를 참고하세요.

명세
--

| Specification |
| --- |
| CSS Color Module Level 4 # color-syntax |

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

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

같이 보기
-----

* `opacity` 속성으로 요소 자체의 투명도를 바꿀 수 있습니다.
* `<color>`를 지정할 수 있는 흔히 쓰이는 속성: `color`, `background-color`, `border-color`, `box-shadow` (en-US), `outline-color` (en-US), `text-shadow` (en-US)
* CSS로 HTML 요소에 색 입히기 (en-US)


:link - CSS: Cascading Style Sheets

:link
=====

**`:link`** CSS 의사 클래스는 아직 방문하지 않은 요소를 나타냅니다. `href` 속성을 가진 `<a>`, `<area>`, `<link>` 중 방문하지 않은 모든 요소를 선택합니다.

```css
/\* 아직 방문하지 않은 <a> 요소를 선택 \*/
a:link {
  color: red;
}
```

`:link` 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스(`:active`, `:hover`, `:visited`)가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(`:link` — `:visited` — `:hover` — `:active`)를 따라, `:active` 규칙을 다른 모든 링크 규칙들보다 앞에 배치하세요.

**참고:** 방문 여부에 상관하지 않고 요소를 선택하려면 `:any-link` (en-US)를 사용하세요.

구문
--

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

대부분의 브라우저는 방문한 링크에 기본값으로 특별한 `color` 값을 지정합니다. 따라서 다음 예제의 링크를 방문한 적이 없을 때만 글자 색이 적용된 모습을 볼 수 있고, 방문한 적이 있으면 브라우저 기록을 지워서 확인할 수 있습니다. 그러나 방문한 링크의 배경색은 보통 브라우저가 지정하지 않으므로 `background-color`는 계속 확인할 수 있습니다.

### HTML

```html
<a href="#ordinary-target">평범한 링크입니다.</a><br />
<a href="">이 링크는 이미 방문했습니다.</a><br />
<a>플레이스홀더 링크 (스타일 적용 안됨)</a>
```

### CSS

```css
a:link {
  background-color: gold;
  color: green;
}
```

### 결과

명세
--

| Specification |
| --- |
| HTML Standard # selector-link |
| Selectors Level 4 # link |

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

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

같이 보기
-----

* 링크 관련 의사 클래스: `:visited`, `:hover`, `:active`


padding-right - CSS: Cascading Style Sheets

padding-right
=============

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

시도해보기
-----

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

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

구문
--

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

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

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

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

### 값

`<length>`

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

`<percentage>`

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

### 형식 구문
```

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

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

```

예제
--

```css
.content {
  padding-right: 5%;
}
.sidebox {
  padding-right: 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`


Filter Effects - CSS: Cascading Style Sheets

Filter Effects
==============

**Filter Effects**는 요소의 렌더링을 문서에 표시하기 전에 전처리하는 방법을 정의하는 CSS 모듈입니다.

참고서
---

### 속성

* `backdrop-filter`
* `filter`
### 자료형

* `<filter-function>`
명세
--

| Specification |
| --- |
| Filter Effects Module Level 2  |
| Filter Effects Module Level 1  |


CSS Multi-column Layout - CSS: Cascading Style Sheets

CSS Multi-column Layout
=======================

**CSS Multi-column Layout**은 다단 레이아웃을 정의하는 CSS 모듈입니다. 레이아웃에서 단의 숫자와 콘텐츠가 하나의 단에서 다른 단으로 흐르는 방식, 단 사이의 간격, 구분선과 구분선의 모양 등의 지원을 포함하고 있습니다.

참고
--

### CSS 속성

* `break-after` (en-US)
* `break-before` (en-US)
* `break-inside` (en-US)
* `column-count` (en-US)
* `column-fill` (en-US)
* `column-gap` (en-US)
* `column-rule` (en-US)
* `column-rule-color` (en-US)
* `column-rule-style` (en-US)
* `column-rule-width` (en-US)
* `column-span` (en-US)
* `column-width` (en-US)
* `columns` (en-US)
### 관련 CSS Fragmentation 속성

* `break-after` (en-US)
* `break-before` (en-US)
* `break-inside` (en-US)
* `orphans` (en-US)
* `widows` (en-US)
안내서
---

다단 레이아웃 기초 개념 (en-US)

다단 레이아웃 명세를 훑어봅니다.

단 꾸미기 (en-US)

구분선과 단 사이 간격을 조절합니다.

폭과 균형 (en-US)

요소가 모든 단에 걸쳐있도록 만들고, 한 단이 채워지는 방식을 조정합니다.

다단에서 오버플로 다루기 (en-US)

어떤 요소가 자신의 단을 넘쳤을 때 일어나는 일과, 컨테이너 너비에 맞추기에는 너무 많은 단이 들어있을 때 발생하는 일을 배웁니다.

다단에서 콘텐츠 끊기 (en-US)

CSS Fragmentation 명세의 소개와 함께 단 콘텐츠를 끊는 법을 배웁니다.

명세
--

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1  |

같이 보기
-----

* CSS Flexible Box Layout (CSS 플렉스박스)
* CSS Grid Layout


calc() - CSS: Cascading Style Sheets

calc()
======

**`calc()`** CSS 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다. `<length>`, `<frequency>`, `<angle>`, `<time>`, `<percentage>`, `<number>`, 또는 `<integer>`를 받는 속성의 값으로 사용할 수 있습니다.

구문
--

```css
/\* property: calc(expression) \*/
width: calc(100% - 80px);
```

`calc()` 함수는 매개변수로 표현식 하나를 받고, 표현식의 결과가 최종 값이 됩니다. 표현식은 단순 계산식은 무엇이든 가능하며, 표준 연산자 우선순위를 따릅니다.

`+`

덧셈.

`-`

뺄셈.

`*`

곱셈. 하나 이상의 피연산자가 `<number>`여야 합니다.

`/`

나눗셈. 오른쪽 피연산자는 `<number>`여야 합니다.

피연산자로는 `<length>` 구문의 아무 값이나 사용할 수 있고, 원한다면 서로 다른 단위끼리도 계산할 수 있습니다. 괄호를 사용해서 연산 순서를 바꿀 수도 있습니다.

### 참고

* 0으로 나누면 HTML 구문분석기에서 오류가 발생합니다.
* `+`와 `-` 연산자는 좌우에 공백이 있어야 합니다. `calc(50% -8px)`은 백분율 값과 음수 길로 해석하여 유효하지 않지만, `calc(50% - 8px)`은 백분율과 길이의 뺄셈으로 해석합니다. 마찬가지로, `calc(8px + -50%)`는 길이와 음의 백분율간의 덧셈으로 처리합니다.
* `*`와 `/` 연산자는 좌우 공백을 요구하지 않지만, 그래도 추가하는 편이 일관성을 유지하기에 좋습니다.
* 표의 행, 열, 행/열 그룹, 자동이나 고정 레이아웃 칸에서 백분율을 포함한 수학식을 너비나 높이로 사용하면 `auto` 키워드를 사용한 것과 동일하게 처리합니다.
* `calc()` 함수를 중첩해서 사용하면 내부의 `calc()`는 단순한 괄호로 간주합니다.
### 형식 구문
```

<calc()> =
  calc( <calc-sum> )

<calc-sum> =
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*

<calc-product> =
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*

<calc-value> =
  <number>        |
  <dimension> (en-US)     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )

<calc-keyword> =
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

```

예제
--

### 요소를 화면에 여백과 함께 배치하기

`calc()`를 이용하면 고정된 너비의 여백을 가진 요소를 쉽게 배치할 수 있습니다. 다음 예제에서는 화면을 가로지르면서 창의 좌우 모서리와 간격이 40픽셀인 배너를 생성합니다.

```css
.banner {
  position: absolute;
  left: 40px;
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}
```

```html
<div class="banner">이건 현수막입니다!</div>
```

### 입력 양식 요소를 컨테이너 크기에 자동으로 맞추기

`calc()`의 다른 용도는 입력 양식의 필드가 적절한 여백을 갖추면서도 컨테이너 모서리 바깥으로 빠져나가지 않도록 설정하는 것입니다.

다음 CSS 코드를 살펴보세요.

```css
input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

#form-box {
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}
```

위 코드에서, 폼 스스로는 창에서 사용 가능한 공간의 1/6을 차지합니다. 그 후, 입력 필드가 적절한 크기를 가질 수 컨테이너 너비에서 1em 뺀 만큼을 calc()로 지정했습니다. 이제 HTML에 CSS를 적용해보겠습니다.

```html
<form>
  <div id="form-box">
    <label>뭔가 입력해 보세요.</label>
    <input type="text" />
  </div>
</form>
```

### CSS 변수와 중첩 `calc()`

CSS 변수도 `calc()`와 같이 사용할 수 있습니다. 다음 코드를 살펴보세요.

```css
.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}
```

모든 변수를 펼치면 `widthC`의 값은 `calc( calc( 100px / 2) / 2)`가 됩니다. 그 후 `.foo`의 너비 속성으로 지정될 때, 모든 중첩 `calc()`는 깊이에 관계 없이 단순한 괄호로 바뀌므로 `width` 속성의 값은 `calc( ( 100px / 2) / 2)`, 즉 `25px`이 됩니다. 요약하자면 `calc()` 안의 `calc()`는 그냥 괄호와 같습니다.

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

`calc()`를 사용해 글씨 크기를 조절할땐 아래 코드처럼 피연산자 중 하나로 꼭 상대길이 단위를 사용해주세요.

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

이제 페이지를 확대해도 글씨 크기의 비율이 적절히 유지됩니다.

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
명세
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # calc-func |

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

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

같이 보기
-----

* Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog


background - CSS: Cascading Style Sheets

background
==========

CSS **`background`** 단축 속성은 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정합니다.

시도해보기
-----

구성 속성
-----

`background`는 단축 속성으로서 다음의 하위 속성을 포함합니다.

* `background-attachment`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position` (en-US)
* `background-repeat`
* `background-size` (en-US)
구문
--

```css
/\* <background-color> 사용 \*/
background: green;

/\* <bg-image>와 <repeat-style> 사용 \*/
background: url("test.jpg") repeat-y;

/\* <box>와 <background-color> 사용 \*/
background: border-box red;

/\* 단일 이미지, 중앙 배치 및 크기 조절 \*/
background: no-repeat center/80% url("../img/image.png");
```

`background` 속성을 쉼표로 구분해서 배경 레이어를 여러 개 지정할 수 있습니다.

각 레이어의 구문은 다음과 같습니다.

* 각 레이어는 다음 값을 가지거나 가지지 않을 수 있습니다.
    + `<attachment>`
    + `<bg-image>`
    + `<position>`
    + `<bg-size>`
    + `<repeat-style>`
* `<bg-size>` 값은 `<position>` 바로 뒤에만 위치할 수 있으며 '/' 문자로 구분해야 합니다. 예를 들면 "`center/80%`" 처럼 사용합니다.
* `<box>` 값은 2개까지 가지거나 가지지 않을 수 있습니다. 1개 가진다면 `background-origin`과 `background-clip`을 모두 설정합니다. 2개 가진다면 처음 값은 `background-origin`, 두 번째 값은 `background-clip`을 설정합니다.
* `<background-color>` 값은 마지막 레이어만 가질 수 있습니다.
### 값

`<attachment>`
`background-attachment`
`<box>`
`background-clip`, `background-origin`
`<background-color>`
`background-color`
`<bg-image>`
`background-image`
`<position>`
`background-position` (en-US)
`<repeat-style>`
`background-repeat`
`<bg-size>`
`background-size` (en-US)
접근성 고려사항
--------

브라우저는 배경 이미지에 대한 어떠한 추가 정보도 접근성 보조 기술에 제공하지 않습니다. 특히 스크린 리더의 경우 배경 이미지의 존재 유무조차 알려주지 않습니다. 이미지가 페이지 목적의 이해에 필수적인 정보를 갖고 있다면 문서에서 구조적으로 설명하는 편이 좋습니다.

* MDN Understanding WCAG, Guideline 1.1 explanations (en-US)
* Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `background-image`: `none`
* `background-position` (en-US): `0% 0%`
* `background-size` (en-US): `auto auto`
* `background-repeat`: `repeat`
* `background-origin`: `padding-box`
* `background-clip`: `border-box`
* `background-attachment`: `scroll`
* `background-color`: `transparent`
 |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US) and `::first-line` (en-US). |
| 상속 | no |
| Percentages | as each of the properties of the shorthand:* `background-position` (en-US): refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets
* `background-size` (en-US): relative to the background positioning area
 |
| 계산 값 | as each of the properties of the shorthand:* `background-image`: as specified, but with `url` values made absolute
* `background-position` (en-US): as each of the properties of the shorthand:
    + `background-position-x` (en-US): A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
    + `background-position-y` (en-US): A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
* `background-size` (en-US): as specified, but with relative lengths converted into absolute lengths
* `background-repeat`: a list, each item consisting of two keywords, one per dimension
* `background-origin`: as specified
* `background-clip`: as specified
* `background-attachment`: as specified
* `background-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `background-color`: a color
* `background-image`: discrete
* `background-clip`: a repeatable list
* `background-position` (en-US): a repeatable list
* `background-size` (en-US): a repeatable list
* `background-repeat`: discrete
* `background-attachment`: discrete
 |

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

background =
  <bg-layer>#? , <final-bg-layer>

<bg-layer> =
  <bg-image>                      ||
  <bg-position> [ / <bg-size> ]?  ||
  <repeat-style>                  ||
  <attachment>                    ||
  <visual-box>                    ||
  <visual-box>

<final-bg-layer> =
  <bg-image>                      ||
  <bg-position> [ / <bg-size> ]?  ||
  <repeat-style>                  ||
  <attachment>                    ||
  <visual-box>                    ||
  <visual-box>                    ||
  <'background-color'>

<bg-image> =
  <image>  |
  none

<bg-position> =
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]

<bg-size> =
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain

<repeat-style> =
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}

<attachment> =
  scroll  |
  fixed   |
  local

<visual-box> =
  content-box  |
  padding-box  |
  border-box

<image> =
  <url>       |
  <gradient>

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

<url> =
  <url()>  |
  <src()>

<url()> =
  url( <string> (en-US) <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> (en-US) <url-modifier>\* )

```

예제
--

### 색상 키워드와 이미지를 사용한 배경

#### HTML

```html
<p class="topbanner">
  작은 별<br />
  반짝 반짝<br />
  작은 별
</p>
<p class="warning">문단 하나</p>
<p></p>
```

#### CSS

```css
.warning {
  background: pink;
}

.topbanner {
  background: url("starsolid.gif") #99f repeat-y fixed;
}
```

#### 결과

명세
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background |

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

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

같이 보기
-----

* `box-decoration-break` (en-US)
* CSS 그레이디언트 사용하기 (en-US)
* 한 번에 여러 배경 사용하기


결정값 - CSS: Cascading Style Sheets

결정값
===

CSS 속성의 **결정값**은 `getComputedStyle()`이 반환하는 값입니다.

속성 대부분은 결정값이 계산값이지만, `width`와 `height`를 포함한 기존 속성은 사용값입니다. 속성 별 자세한 사항은 아래의 명세를 참고하세요.

명세
--

| Specification |
| --- |
| CSS Object Model (CSSOM) # resolved-values |

같이 보기
-----

* `window.getComputedStyle`
* CSS 주요 개념
    + CSS 문법
    + @규칙
    + 주석
    + 명시도
    + 상속
    + 박스 모델
    + 레이아웃 모드
    + 시각적 서식 모델
    + 마진 중첩
    + 값
        - 초깃값
        - 계산값
        - 결정값
        - 지정값
        - 사용값
        - 실제값 (en-US)
    + 값 정의 구문
    + 단축 속성
    + 대체 요소


:nth-child - CSS: Cascading Style Sheets

:nth-child
==========

CSS **`:nth-child()`** 의사 클래스는 형제 사이에서의 순서에 따라 요소를 선택합니다.

```css
/\* 목록의 두 번째 <li> 선택 \*/
li:nth-child(2) {
  color: lime;
}

/\* 임의의 그룹에서 네 번째에 위치하는 모든 요소 선택 \*/
:nth-child(4n) {
  color: lime;
}
```

구문
--

`nth-child` 의사 클래스는 형제의 목록에서, 선택하려는 요소의 인덱스 패턴을 나타내는 하나의 매개변수를 사용해 지정합니다. 인덱스는 1부터 시작합니다.

### 키워드 값

`odd`

형제 요소에서 홀수번째(1, 3, 5, ...)인 요소를 나타냅니다.

`even`

형제 요소에서 짝수번째(2, 4, 6, ...)인 요소를 나타냅니다.

### 함수형 표기법

* `<An+B>`
    + : 사용자 지정 패턴을 만족한 인덱스를 가지는 요소를 나타냅니다. An+B의 형태로 나타내며,
        - `A`는 정수 인덱스 증감량,
        - `B`는 정수 오프셋,
        - `n`은 0부터 시작하는 모든 양의 정수를 나타냅니다.목록의 **An+B**번째 요소라고 해석할 수 있습니다.
### 형식 구문

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

### 선택자

* `tr:nth-child(odd)` 또는 `tr:nth-child(2n+1)`
    + : HTML 표의 홀수번째 행을 나타냅니다.
* `tr:nth-child(even)` 또는 `tr:nth-child(2n)`
    + : HTML 표의 짝수번째 행을 나타냅니다.
* `:nth-child(7)`
    + : 임의의 7번째 요소를 나타냅니다.
* `:nth-child(5n)`
    + **: 5** [=5×1], **10** [=5×2], **15** [=5×3], **...** 번째의 요소를 나타냅니다. 패턴 공식을 만족하는 첫 번째 값은 **0** [=5x0]으로서 아무 요소도 선택하지 않는데, 요소의 인덱스는 1부터 시작하지만 `n`은 0부터 증가하기 때문입니다. 다소 의아할 수 있으나, 바로 아래 예제처럼 공식의 B 부분이 >0인 경우 보다 납득하기 쉬워집니다.
* `:nth-child(n+7)`
    + : 7번째와 그 이후의 모든 요소, 즉 **7** [=0+7], **8** [=1+7], **9** [=2+7], **...** 를 나타냅니다.
* `:nth-child(3n+4)`
    + **: 4** [=(3×0)+4], **7** [=(3×1)+4], **10** [=(3×2)+4], **13** [=(3×3)+4], **...** 번째의 요소를 나타냅니다.
* `:nth-child(-n+3)`
    + : 앞에서 세 개의 요소를 나타냅니다. [=-0+3, -1+3, -2+3]
* `p:nth-child(n)`
    + : 형제 그룹 내의 모든 `<p>` 요소를 나타냅니다. 단순한 `p` 선택자와 동일하지만 더 높은 명시도를 가집니다.
* `p:nth-child(1)` 또는 `p:nth-child(0n+1)`
    + : 형제 그룹 내의 모든 첫 번째 `<p>` 요소를 나타냅니다. `:first-child` 선택자와 동일하며 같은 명시도를 가집니다.
* `p:nth-child(n+8):nth-child(-n+15)`
    + : 형제 그룹 내에서 8번째부터 15번째 까지의 `<p>` 요소를 나타냅니다.
### 자세한 예제

#### HTML

```html
<h3>
  <code>span:nth-child(2n+1)</code>, WITHOUT an <code><em></code> among
  the child elements.
</h3>
<p>Children 1, 3, 5, and 7 are selected.</p>
<div class="first">
  <span>Span 1!</span>
  <span>Span 2</span>
  <span>Span 3!</span>
  <span>Span 4</span>
  <span>Span 5!</span>
  <span>Span 6</span>
  <span>Span 7!</span>
</div>

<br />

<h3>
  <code>span:nth-child(2n+1)</code>, WITH an <code><em></code> among the
  child elements.
</h3>
<p>
  Children 1, 5, and 7 are selected.<br />
  3 is used in the counting because it is a child, but it isn't selected because
  it isn't a <code><span></code>.
</p>
<div class="second">
  <span>Span!</span>
  <span>Span</span>
  <em>This is an `em`.</em>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>

<br />

<h3>
  <code>span:nth-of-type(2n+1)</code>, WITH an <code><em></code> among the
  child elements.
</h3>
<p>
  Children 1, 4, 6, and 8 are selected.<br />
  3 isn't used in the counting or selected because it is an
  <code><em></code>, not a <code><span></code>, and
  <code>nth-of-type</code> only selects children of that type. The
  <code><em></code> is completely skipped over and ignored.
</p>
<div class="third">
  <span>Span!</span>
  <span>Span</span>
  <em>This is an `em`.</em>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
</div>
```

#### CSS

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

span,
div em {
  padding: 5px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}

.first span:nth-child(2n + 1),
.second span:nth-child(2n + 1),
.third span:nth-of-type(2n + 1) {
  background-color: lime;
}
```

#### 결과

명세
--

| Specification |
| --- |
| Selectors Level 4 # nth-child-pseudo |

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

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

같이 보기
-----

* `:nth-of-type` (en-US), `:nth-last-child` (en-US)


border-radius - CSS: Cascading Style Sheets

border-radius
=============

CSS **`border-radius`** 속성은 요소 테두리 경계의 꼭짓점을 둥글게 만듭니다. 하나의 값을 사용해 원형 꼭짓점을, 두 개의 값을 사용해 타원형 꼭짓점을 적용할 수 있습니다.

시도해보기
-----

꼭짓점 반경은 요소의 테두리 존재 여부와는 별개로 전체 `background`에 적용됩니다. 원형 꼭짓점으로 인해 배경이 잘리는 지점은 `background-clip` 속성이 지정합니다.

`border-collapse`의 값이 `collapse`인 표 요소는 `border-radius` 속성의 영향을 받지 않습니다.

**참고:** 다른 단축 속성과 마찬가지로, 각각의 하위 속성이 부모를 상속하도록 할 수는 없습니다. 즉, `border-radius: 0 0 inherit inherit`처럼 일부만 재정의할 수 없습니다. 대신, 원래의 본디속성을 하나씩 사용하세요.

구성 속성
-----

`border-radius`는 다음 CSS 속성의 단축 속성입니다.

* `border-bottom-left-radius` (en-US)
* `border-bottom-right-radius` (en-US)
* `border-top-left-radius` (en-US)
* `border-top-right-radius` (en-US)
구문
--

```css
/\* The syntax of the first radius allows one to four values \*/
/\* Radius is set for all 4 sides \*/
border-radius: 10px;

/\* top-left-and-bottom-right | top-right-and-bottom-left \*/
border-radius: 10px 5%;

/\* top-left | top-right-and-bottom-left | bottom-right \*/
border-radius: 2px 4px 2px;

/\* top-left | top-right | bottom-right | bottom-left \*/
border-radius: 1px 0 3px 4px;

/\* The syntax of the second radius allows one to four values \*/
/\* (first radius values) / radius \*/
border-radius: 10px 5% / 20px;

/\* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left \*/
border-radius: 10px 5% / 20px 30px;

/\* (first radius values) / top-left | top-right-and-bottom-left | bottom-right \*/
border-radius: 10px 5px 2em / 20px 25px 30%;

/\* (first radius values) / top-left | top-right | bottom-right | bottom-left \*/
border-radius: 10px 5% / 20px 25em 30px 35em;

/\* Global values \*/
border-radius: inherit;
border-radius: initial;
border-radius: unset;
```

`border-radius` 속성은 다음 방법으로 지정할 수 있습니다.

* 한 개에서 네 개의 `<length>` 또는 `<percentage>` 값은 꼭짓점의 단일 반지름을 설정합니다.
* 선택적으로 "`/`" 이후에 한 개에서 네 개의 `<length>` 또는 `<percentage>` 값을 사용해 추가 반지름을 설정해서 타원형 꼭짓점을 만들 수 있습니다.
### 값

| *radius* | all-corner.png | 테두리의 각 꼭짓점 반지름을 나타내는 `<length>` 또는 `<percentage>`. 한 개 값 구문에서만 사용합니다. |
| --- | --- | --- |
| *top-left-and-bottom-right* | top-left-bottom-right.png | 왼쪽 위와 오른쪽 아래 꼭짓점의 반지름을 나타내는 `<length>` 또는 `<percentage>`. 두 개 값 구문에서만 사용합니다. |
| *top-right-and-bottom-left* | top-right-bottom-left.png | 오른쪽 위와 왼쪽 아래 꼭짓점의 반지름을 나타내는 `<length>` 또는 `<percentage>`. 두 개 또는 세 개 값 구문에서만 사용합니다. |
| *top-left* | top-left.png | 왼쪽 위 꼭짓점의 반지름을 나타내는 `<length>` 또는 `<percentage>`. 세 개 또는 네 개 값 구문에서만 사용합니다. |
| *top-right* | top-right.png | 오른쪽 위 꼭짓점의 반지름을 나타내는 `<length>` 또는 `<percentage>`. 네 개 값 구문에서만 사용합니다. |
| *bottom-right* | bottom-right.png | 오른쪽 아래 꼭짓점의 반지름을 나타내는 `<length>` 또는 `<percentage>`. 네 개 값 구문에서만 사용합니다. |
| *bottom-left* | bottom-left.png | 왼쪽 아래 꼭짓점의 반지름을 나타내는 `<length>` 또는 `<percentage>`. 네 개 값 구문에서만 사용합니다. |

`<length>`

길이 값을 사용해 원의 반지름 또는 타원의 짧은반지름과 긴반지름을 지정합니다. 음의 값은 유효하지 않습니다.

`<percentage>`

백분율 값을 사용해 원의 반지름 또는 타원의 짧은반지름과 긴반지름을 지정합니다. 가로축 값은 요소 박스의 너비에 대한 백분율이고, 세로축 값은 박스의 높이에 대한 백분율입니다. 음의 값은 유효하지 않습니다.

예를 들어...

```css
border-radius: 1em/5em;

/\* 아래와 같음 \*/
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;
```

```css
border-radius: 4px 3px 6px / 2px 4px;

/\* 아래와 같음 \*/
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;
```

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `border-top-left-radius` (en-US): `0`
* `border-top-right-radius` (en-US): `0`
* `border-bottom-right-radius` (en-US): `0`
* `border-bottom-left-radius` (en-US): `0`
 |
| 적용대상 | all elements; but User Agents are not required to apply to `table` and `inline-table` elements when `border-collapse` is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| Percentages | refer to the corresponding dimension of the border box |
| 계산 값 | as each of the properties of the shorthand:* `border-bottom-left-radius` (en-US): two absolute `length`s or `percentage`s
* `border-bottom-right-radius` (en-US): two absolute `length`s or `percentage`s
* `border-top-left-radius` (en-US): two absolute `length`s or `percentage`s
* `border-top-right-radius` (en-US): two absolute `length`s or `percentage`s
 |
| Animation type | as each of the properties of the shorthand:* `border-top-left-radius` (en-US): a length, percentage or calc();
* `border-top-right-radius` (en-US): a length, percentage or calc();
* `border-bottom-right-radius` (en-US): a length, percentage or calc();
* `border-bottom-left-radius` (en-US): a length, percentage or calc();
 |

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

border-radius =
  <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?

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

```

예제
--
```

  border: solid 10px;
  /* 테두리가 'D'형태가 됨 */
  border-radius: 10px 40px 40px 10px;
```

```
  border: groove 1em red;
  border-radius: 2em;
```

```
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
```

```
  border: none;
  border-radius: 40px 10px;
```

```
  border: none;
  border-radius: 50%;
```

```
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
```

```
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
```

### 라이브 샘플

1. https://jsfiddle.net/Tripad/qnGKj/2/
2. https://jsfiddle.net/Tripad/qnGKj/3/
3. https://jsfiddle.net/Tripad/qnGKj/4/
4. https://jsfiddle.net/Tripad/qnGKj/5/
5. https://jsfiddle.net/Tripad/qnGKj/6/
명세
--

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

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

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

같이 보기
-----

* 꼭짓점 반경 관련 CSS 속성: `border-top-left-radius` (en-US), `border-top-right-radius` (en-US), `border-bottom-right-radius` (en-US), `border-bottom-left-radius` (en-US)


object-fit - CSS: Cascading Style Sheets

object-fit
==========

CSS **`object-fit`** 속성은 `<img>`나 `<video>` 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정합니다.

`object-position` 속성을 사용해 대체 요소 콘텐츠가 콘텐츠 박스 내에 위치할 지점을 바꿀 수 있습니다.

시도해보기
-----

구문
--

`object-fit` 속성은 다음 목록 중 하나의 키워드를 사용해 지정합니다.

### 값

`contain`

대체 콘텐츠의 가로세로비를 유지하면서, 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절합니다. 콘텐츠가 콘텐츠 박스 크기에 맞도록 하면서도 가로세로비를 유지하게 되므로, 서로의 가로세로비가 일치하지 않으면 객체가 "레터박스"처럼 됩니다.

`cover`

대체 콘텐츠의 가로세로비를 유지하면서, 요소 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 객체 일부가 잘려나갑니다.

`fill`

요소 콘텐츠 박스 크기에 맞춰 대체 콘텐츠의 크기를 조절합니다. 콘텐츠가 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 콘텐츠가 늘어납니다.

`none`

대체 콘텐츠의 크기를 조절하지 않습니다.

`scale-down`

`none`과 `contain` 중 대체 콘텐츠의 크기가 더 작아지는 값을 선택합니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `fill` |
| 적용대상 | replaced elements |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | discrete |

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

object-fit =
  fill        |
  contain     |
  cover       |
  none        |
  scale-down

```

예제
--

### 이미지에 `object-fit` 지정

#### HTML

```html
<section>
  <h2>object-fit: fill</h2>
  <img class="fill" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="fill narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: contain</h2>
  <img class="contain" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="contain narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: cover</h2>
  <img class="cover" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="cover narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: none</h2>
  <img class="none" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="none narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: scale-down</h2>
  <img class="scale-down" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="scale-down narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />
</section>
```

#### CSS

```css
h2 {
  font-family:
    Courier New,
    monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 940px;
}

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
}

.narrow {
  width: 100px;
  height: 150px;
  margin-top: 10px;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}
```

#### 결과

명세
--

| Specification |
| --- |
| CSS Images Module Level 3 # the-object-fit |

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

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

같이 보기
-----

* 이미지 관련 다른 CSS 속성: `object-position`, `image-orientation` (en-US), `image-rendering`, `image-resolution` (en-US).
* `background-size` (en-US)


line-break - CSS: Cascading Style Sheets

line-break
==========

CSS **`line-break`** 속성은 한중일(CJK) 3개국어의 텍스트 줄을 어디서 바꿀지 지정합니다.

```css
/\* 키워드 값 \*/
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/\* 전역 값 \*/
line-break: inherit;
line-break: initial;
line-break: unset;
```

구문
--

### 값

`auto`

기본 줄 바꿈 규칙을 사용합니다.

`loose`

가장 자유로운 줄 바꿈 규칙을 사용합니다. 보통 신문 등 짧은 줄에서 사용합니다.

`normal`

가장 흔한 줄 바꿈 규칙을 사용합니다.

`strict`

가장 엄격한 줄 바꿈 규칙을 사용합니다.

`anywhere`

모든 타이포그래피 글자 단위 주위에서 줄을 바꿀 수 있습니다. 줄 바꿈 위치는 모든 문장 부호, 공백, 단어 중간을 포함하며 GL, WJ, ZWJ 문자 클래스가 나타내는 줄 바꿈 제한 및 `word-break`가 요구하는 규칙 모두 무시할 수 있습니다. 붙임표는 사용하지 않습니다.

형식 정의
-----

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

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

line-break =
  auto      |
  loose     |
  normal    |
  strict    |
  anywhere

```

예제
--

### 줄 바꿈 지정하기

줄 바꿈이 "々", "ぁ", "。"의 주위에서 어떻게 발생하는지 살펴보세요.

#### HTML

```html
<div lang="ja">
  <p class="wrapbox auto">
    auto:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox loose">
    loose:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox normal">
    normal:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox strict">
    strict:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox anywhere">
    anywhere:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
</div>
```

#### CSS

```css
.wrapbox {
  width: 10em;
  margin: 0.5em;
  white-space: normal;
  vertical-align: top;
  display: inline-block;
}
.auto {
  line-break: auto;
}
.loose {
  line-break: loose;
}
.normal {
  line-break: normal;
}
.strict {
  line-break: strict;
}
.anywhere {
  line-break: anywhere;
}
```

#### 결과

명세
--

| Specification |
| --- |
| CSS Text Module Level 3 # line-break-property |

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

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


CSS Shapes - CSS: Cascading Style Sheets

CSS Shapes
==========

**CSS Shapes**는 CSS에서 사용하기 위한 기하학적 도형을 설명한다. 레벌1 명세에 의하면 떠있는 요소에 CSS Shapes를 적용할 수 있다. 명세의 정의에 의하면 떠있는 요소의 모양을 정의 하거나 요소 상자의 사각형을 따르는 대신 테두리 선을 따라 감싸지도록 하는 방법 등 다양한 방법을 정의하고 있다.

기본 예제
-----

아래 예제는 왼쪽에 떠있는 이미지에 shape-outside속성에 circle(50%) 값이 적용된 모습을 볼수 있다. 이런식으로 원모양을 만들면 도옇의 둘래를 따라 주변 텍스트가 흘러내리는것을 볼수 있다. 둘러싼 텍스트가 도형의 모양을 따라 길이가 변하게 되었다.

참고서
---

### 속성

* `shape-outside` (en-US)
* `shape-margin` (en-US)
* `shape-image-threshold` (en-US)
### 자료형

* `<basic-shape>` (en-US)
안내서
---

* Overview of CSS Shapes (en-US)
* Shapes from Box Values (en-US)
* Basic Shapes (en-US)
* Shapes from Images (en-US)
* Edit Shape Paths in CSS — Firefox Developer Tools (en-US)
외부 자료
-----

* A list of CSS Shapes resources
* CSS Shapes 101
* Creating non-rectangular layouts with CSS Shapes
* How To Use CSS Shapes In Your Web Design
* How To Get Started With CSS Shapes
* What I Learned In One Weekend With CSS Shapes
* CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components
명세
--

| Specification |
| --- |
| CSS Shapes Module Level 1  |


:first - CSS: Cascading Style Sheets

:first
======

CSS **`:first`** 의사 클래스는 `@page` @-규칙과 함께 사용되며, 출력 시의 첫 페이지를 나타냅니다.

```css
/\* Selects the first page when printing \*/
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}
```

**참고:** first 의사 클래스 안에서는 CSS 속성의 사용이 제한됩니다. 바깥 여백, `orphans` (en-US), `widows` (en-US)와 페이지 넘김만 바꿀 수 있으며, 여백 지정 시 절대길이 단위만 사용할 수 있습니다. 다른 모든 속성은 무시합니다.

구문
--

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

### HTML

```html
<p>First Page.</p>
<p>Second Page.</p>
<button>출력!</button>
```

### CSS

```css
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

p {
  page-break-after: always;
}
```

### JavaScript

```js
document.querySelector("button").addEventListener("click", () => {
  window.print();
});
```

### 결과

"출력!" 버튼을 눌러 페이지 출력 화면을 확인해보세요. 첫 번째 페이지의 콘텐츠는 중앙 어딘가에 위치하고, 두 번째 페이지의 콘텐츠는 기본 위치에 존재해야 합니다.

명세
--

| Specification |
| --- |
| CSS Paged Media Module Level 3 # left-right-first |

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

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

같이 보기
-----

* `@page`
* 페이지 관련 다른 의사 클래스: `:left` (en-US), `:right` (en-US)