recursal/MDN huggingface dataset:
isolation
=========

**`isolation`** CSS 속성은 요소가 새로운 쌓임 맥락을 생성해야 하는지 지정합니다.

시도해보기
-----

`mix-blend-mode`와 함께 사용했을 때 특히 유용합니다.

구문
--


```css
/\* 키워드 값 \*/
isolation: auto;
isolation: isolate;

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


`isolation` 속성은 다음 키워드 값 중 하나를 사용해 지정합니다.

### 값

`auto`

요소에 적용한 속성 중 새로운 쌓임 맥락을 요구하는 속성이 있을 때만 쌓임 맥락을 생성합니다.

`isolate`

항상 새로운 쌓임 맥락을 생성합니다.

### 형식 구문
```

isolation =   
  <isolation-mode>    
  
<isolation-mode> =   
  auto     |  
  isolate    
  
```

예제
--


```html
<div id="b" class="a">
  <div id="d">
    <div class="a c">auto</div>
  </div>
  <div id="e">
    <div class="a c">isolate</div>
  </div>
</div>
```



```css
.a {
  background-color: rgb(0, 255, 0);
}
#b {
  width: 200px;
  height: 210px;
}
.c {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}
#d {
  isolation: auto;
}
#e {
  isolation: isolate;
}
```

명세
--

| Specification |
| --- |
| Compositing and Blending Level 2 # isolation |

|  |  |
| --- | --- |
| 초기값 | `auto` |
| 적용대상 | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements. |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | Not animatable |

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

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

같이 보기
-----

* `<blend-mode>`
* `mix-blend-mode`, `background-blend-mode` (en-US)
CSS Ruby
========

**CSS Ruby**는 행간 주석의 형태로 기본 텍스트와 함께 작게 실행되는 텍스트인 ruby 주석 표시와 관련된 렌더링 모델 및 서식 컨트롤을 제공하는 CSS 모듈입니다.

참고서
---

### 속성

* `ruby-align` (en-US)
* `ruby-position` (en-US)
명세
--

| Specification |
| --- |
| CSS Ruby Annotation Layout Module Level 1  |
:default
========

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

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

* Learn more
* See full compatibility
* Report feedback
CSS **`:default`** 의사 클래스는 연관 요소 내에서의 기본값인 요소를 선택합니다.

이 선택자는 HTML Standard §4.16.3 Pseudo-classes에 정의되어 있듯 `<button>`, `<input type="checkbox">`, `<input type="radio">` (en-US), `<option>` 요소를 아래와 같은 경우에 선택합니다.

* 옵션 요소의 기본값은 `selected` 특성을 가진 제일 첫 요소, 즉 DOM 순서 기준으로 제일 앞의 활성화 옵션입니다. `multiple` 특성의 `<select>` (en-US)는 둘 이상의 `selected` 옵션을 가질 수도 있으므로, 모든 옵션이 `:default`로 선택됩니다.
* `<input type="checkbox">`와 `<input type="radio">`는 `checked` 특성을 가지고 있으면 선택됩니다.
* `<button>`은 `<form>` 요소의 기본 제출 버튼, 즉 DOM 순서 기준으로 양식에 속하는 제일 첫 `<button>`이면 선택됩니다. (`image`와 `submit`처럼, 양식을 제출하는 다른 `<input>` (en-US) 유형에도 적용됩니다.)
구문
--

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

### HTML


```html
<fieldset>
  <legend>Favorite season</legend>

  <input type="radio" name="season" id="spring" />
  <label for="spring">Spring</label>

  <input type="radio" name="season" id="summer" checked />
  <label for="summer">Summer</label>

  <input type="radio" name="season" id="fall" />
  <label for="fall">Fall</label>

  <input type="radio" name="season" id="winter" />
  <label for="winter">Winter</label>
</fieldset>
```

### CSS


```css
input:default {
  box-shadow: 0 0 2px 1px coral;
}

input:default + label {
  color: coral;
}
```

### 결과

명세
--

| Specification |
| --- |
| HTML Standard # selector-default |
| Selectors Level 4 # default-pseudo |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
border-right-width
==================

CSS **`border-right-width`** 속성은 요소의 오른쪽 테두리 너비를 지정합니다.

시도해보기
-----

구문
--


```css
/\* 키워드 값\*/
border-right-width: thin;
border-right-width: medium;
border-right-width: thick;

/\* <length> 값 \*/
border-right-width: 10em;
border-right-width: 3vmax;
border-right-width: 6px;

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

### 값

`<line-width>`

테두리의 너비입니다.0 이상의 `<length>` 또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다.

| `thin` |  | 얇은 테두리 |
| --- | --- | --- |
| `medium` |  | 중간 테두리 |
| `thick` |  | 굵은 테두리 |

**참고:** 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나 `thin ≤ medium ≤ thick`이고, 하나의 문서 내에서 동일합니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `medium` |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| 계산 값 | the absolute length or `0` if `border-right-style` is `none` or `hidden` |
| Animation type | a length |

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

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

예제
--

### 테두리의 너비 비교

#### HTML


```html
<div>Element 1</div>
<div>Element 2</div>
```


#### CSS


```css
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-right-width: thick;
}
div:nth-child(2) {
  border-right-width: 2em;
}
```


#### 결과

명세
--

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

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

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

같이 보기
-----

* 테두리 너비 관련 CSS 속성: `border-bottom-width`, `border-left-width`, `border-top-width`, and `border-width`.
* 오른쪽 테두리 관련 CSS 속성: `border`, `border-right`, `border-right-style`, and `border-right-color`.
border-top-color
================

**`border-top-color`** CSS 속성은 요소의 위쪽 테두리 색상을 지정합니다. `border-color` 또는 `border-top` 단축 속성으로도 지정할 수 있습니다.

시도해보기
-----

구문
--


```css
/\* <color> 값 \*/
border-top-color: red;
border-top-color: #ffbb00;
border-top-color: rgb(255, 0, 0);
border-top-color: hsla(100%, 50%, 25%, 0.75);
border-top-color: currentColor;
border-top-color: transparent;

/\* 전역 값 \*/
border-top-color: inherit;
border-top-color: initial;
border-top-color: unset;
```


`border-top-color` 속성은 하나의 값을 사용해 지정합니다.

### 값

`<color>`

위쪽 테두리의 색상.

### 형식 구문
```

border-top-color =   
  <color>     |  
  <image-1D>    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

예제
--

### 테두리를 가진 간단한 상자

#### HTML


```html
<div class="mybox">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="redtext">red</span>.
  </p>
</div>
```


#### CSS


```css
.mybox {
  border: solid 0.3em gold;
  border-top-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```


#### 결과

명세
--

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

|  |  |
| --- | --- |
| 초기값 | `currentcolor` |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| 계산 값 | computed color |
| Animation type | a color |

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

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

같이 보기
-----

* 테두리 관련 CSS 단축 속성: `border`, `border-top`, `border-color`.
* 다른 방향 테두리의 색상 관련 CSS 단축 속성: `border-right-color`, `border-bottom-color`, `border-left-color`.
* 위쪽 테두리 관련 CSS 속성: `border-top-style`, `border-top-width`.
min-height
==========

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

시도해보기
-----

`min-height`가 `max-height` 또는 `height`보다 커지면 요소의 높이는 `min-height`의 값을 사용합니다.

구문
--


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

/\* <percentage> 값 \*/
min-height: 10%;

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

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

### 값

* `<length>`
    + : 고정 길이로 나타낸 최대 높이. 음수 값은 유효하지 않습니다.
* `<percentage>`
    + : 컨테이닝 블록 높이에 대한 백분율로 나타낸 최대 높이. 음수 값은 유효하지 않습니다.

#### 키워드 값

`auto`

최소 높이를 정하지 않음.

`max-content` 
Experimental

본질적인 선호 높이.

`min-content` 
Experimental

본질적인 최소 높이.

`fill-available` 
Experimental

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

`fit-content` 
Experimental

CSS3 Box 모듈에 따라 `min-content`의 다른 이름. CSS3 Sizing 모듈은 더 복잡한 알고리즘을 정의하지만, 모든 브라우저에서 실험 기능으로도 구현하지 않습니다.

### 형식 구문
```

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

예제
--


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

form {
  min-height: 0;
}
```

명세
--

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

|  |  |
| --- | --- |
| 초기값 | `auto` |
| 적용대상 | 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 `0`. |
| 계산 값 | the percentage as specified or the absolute length |
| 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`, `max-height`
의사 요소
=====

CSS **의사 요소**(가상 요소)는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있습니다. 예를 들어 `::first-line` (en-US)을 사용하면 문단 첫 줄의 글씨체만 바꿀 수 있습니다.


```css
/\* The first line of every <p> element. \*/
p::first-line {
  color: blue;
  text-transform: uppercase;
}
```


**참고:** 의사 클래스는 의사 요소와 달리 요소의 **특정 상태**에 스타일을 적용할 때 사용합니다.

구문
--
```

selector::pseudo-element {
  property: value;
}
```


하나의 선택자에 하나의 의사 요소만 사용할 수 있습니다. 반드시 단순 선택자 뒤에 위치해야 합니다.

**참고:** 참고: 규칙을 따라 단일 콜론(`:`) 대신 이중 콜론(`::`)을 사용하여 의사 클래스와 의사 요소를 구별해야 합니다. 그러나 과거 W3C 명세에선 이런 구별을 두지 않았으므로 대부분의 브라우저는 기존 의사 요소에 대해 두 구문 모두 지원합니다.

표준 의사 요소 색인
-----------

* `::after (:after)`
* `::backdrop` (en-US) 
Experimental
* `::before (:before)` (en-US)
* `::cue` (en-US)
* `::cue-region` (en-US)
* `::first-letter (:first-letter)` (en-US)
* `::first-line (:first-line)` (en-US)
* `::grammar-error` (en-US) 
Experimental
* `::marker` (en-US) 
Experimental
* `::part()` (en-US) 
Experimental
* `::placeholder` (en-US) 
Experimental
* `::selection` (en-US)
* `::slotted()` (en-US)
* `::spelling-error` (en-US) 
Experimental
명세
--

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4  |
| CSS Positioned Layout Module Level 4  |
| CSS Shadow Parts  |
| WebVTT: The Web Video Text Tracks Format  |

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

| 브라우저 | 최소 버전 | 지원 |
| --- | --- | --- |
| Firefox (Gecko) | 1.0 (1.0) | `:pseudo-element` |
| 1.0 (1.5) | `:pseudo-element ::pseudo-element` |
| Opera | 4.0 | `:pseudo-element` |
| 7.0 | `:pseudo-element ::pseudo-element` |
| Safari (WebKit) | 1.0 (85) | `:pseudo-element ::pseudo-element` |

같이 보기
-----

* 의사 클래스
CSS Text
========

**CSS Text**는 줄 바꿈, 정돈 및 정렬, 공백 처리 및 텍스트 변환 같은 텍스트 조작을 수행하는 법을 정의하는 CSS 모듈입니다.

참고서
---

### 속성

* `hanging-punctuation` (en-US)
* `hyphens`
* `letter-spacing`
* `line-break`
* `overflow-wrap`
* `tab-size`
* `text-align`
* `text-align-last` (en-US)
* `text-indent` (en-US)
* `text-justify` (en-US)
* `text-size-adjust` (en-US)
* `text-transform` (en-US)
* `white-space`
* `word-break`
* `word-spacing`
명세
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1  |
| CSS Text Module Level 3  |
| CSS Text Module Level 4  |
CSS Flow Layout
===============

*일반적인 흐름 Normal Flow*, 또는 흐름 레이아웃 Flow Layout 은 그 레이아웃 변화가 있기 전까지 페이지 안의 블록 요소와 인라인 요소가 보여지는 방식 입니다. 흐름이란 본질적으로 레이아웃 아래 서로 같이 동작하고 서로에게 서로가 알려지는 것들의 집합 입니다. 만약에 어느 하나가 *흐름에서 벗어나면* 그것은 독립적으로 동작하게 됩니다.

*일반적인 흐름*에서, **인라인** 요소들은 한줄러 늘어서 보여지게 되는데, 이는 문서의 Writing Mode 에 따라 문장 안의 단어들이 보여지는 방향을 따르게 됩니다. **블록** 요소들은 문서의 Writing Mode 에서의 단락이 하나씩 나눠져 보여지듯이 나타납니다. 그래서 영어에서는, 인라인 요소들은 왼쪽에서 시작하여 하나씩 보여지고, 블록 요소들은 맨 위에서부터 페이지를 따라 아래로 보여집니다.

기본적인 예
------

아래의 예는 블록과 인라인 레벨 박스들을 설명합니다. 초록 테두리를 갖은 두개의 paragraph 요소들은 블록 레벨에 있어서 하나씩 위에서 아래로 나타납니다.

첫번째 문장은 파란 바탕을 갖은 span 요소를 포함하고 있습니다. 이 요소는 인라인 레벨에 있으며 따라서 문장 내에 이어져 나타납니다.

Guides
------

* Block and Inline Layout in Normal Flow
* In Flow and Out of Flow
* Formatting Contexts Explained (en-US)
* Flow Layout and Writing Modes
* Flow Layout and Overflow
Reference
---------

### Glossary Entries

* Block (CSS)

1. **CSS**
2. **CSS Reference**
border-top-width
================

CSS **`border-top-width`** 속성은 요소의 위쪽 테두리 너비를 지정합니다.

시도해보기
-----

구문
--


```css
/\* 키워드 값\*/
border-top-width: thin;
border-top-width: medium;
border-top-width: thick;

/\* <length> 값 \*/
border-top-width: 10em;
border-top-width: 3vmax;
border-top-width: 6px;

/\* 전역 값 \*/
border-top-width: inherit;
border-top-width: initial;
border-top-width: unset;
```

### 값

`<line-width>`

테두리의 너비입니다. 0 이상의 `<length>` 또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다.

| `thin` |  | 얇은 테두리 |
| --- | --- | --- |
| `medium` |  | 중간 테두리 |
| `thick` |  | 넓은 테두리 |

**참고:** 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나 `thin ≤ medium ≤ thick`이고, 하나의 문서 내에서 동일합니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `medium` |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| 계산 값 | the absolute length or `0` if `border-top-style` is `none` or `hidden` |
| Animation type | a length |

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

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

예제
--

### HTML


```html
<div>Element 1</div>
<div>Element 2</div>
```

### CSS


```css
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-top-width: thick;
}
div:nth-child(2) {
  border-top-width: 2em;
}
```

### 결과

명세
--

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

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

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

같이 보기
-----

* 테두리 너비 관련 CSS 속성: `border-left-width`, `border-right-width`, `border-bottom-width`, and `border-width`.
* 위쪽 테두리 관련 CSS 속성: `border`, `border-top`, `border-top-style`, and `border-top-color`.
border-right-color
==================

**`border-right-color`** CSS 속성은 요소의 오른쪽 테두리 색상을 지정합니다. `border-color` 또는 `border-right` 단축 속성으로도 지정할 수 있습니다.

시도해보기
-----

구문
--


```css
/\* <color> 값 \*/
border-right-color: red;
border-right-color: #ffbb00;
border-right-color: rgb(255, 0, 0);
border-right-color: hsla(100%, 50%, 25%, 0.75);
border-right-color: currentColor;
border-right-color: transparent;

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


`border-right-color` 속성은 하나의 값을 사용해 지정합니다.

### 값

`<color>`

오른쪽 테두리의 색상.

### 형식 구문
```

border-right-color =   
  <color>     |  
  <image-1D>    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

예제
--

### 테두리를 가진 간단한 상자

#### HTML


```html
<div class="mybox">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="redtext">red</span>.
  </p>
</div>
```


#### CSS


```css
.mybox {
  border: solid 0.3em gold;
  border-right-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```


#### 결과

명세
--

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

|  |  |
| --- | --- |
| 초기값 | `currentcolor` |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| 계산 값 | computed color |
| Animation type | a color |

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

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

같이 보기
-----

* 테두리 관련 CSS 단축 속성: `border`, `border-right`, `border-color`.
* 다른 방향 테두리의 색상 관련 CSS 단축 속성: `border-top-color`, `border-bottom-color`, `border-left-color`.
* 오른쪽 테두리 관련 CSS 속성: `border-right-style`, `border-right-width`.
<angle>
=======

CSS **`<angle>`** 자료형은 각도의 값을 도, 그레이드, 라디안 또는 회전수로 표현합니다. `<gradient>`나 일부 `transform` 함수에서 사용합니다..

시도해보기
-----

구문
--

`<angle>` 자료형은 `<number>` 다음에 아래 나열한 단위 중 하나를 붙여 구성합니다. 다른 CSS 단위처럼 숫자와 단위 문자 사이에 공백은 존재하지 않습니다. 숫자 `0` 뒤에는 단위를 붙이지 않아도 됩니다.

선택적으로 `+`, `-` 부호를 표시할 수 있습니다. 양의 부호는 시계방향 회전을, 음의 부호는 시계 반대방향 회전을 나타냅니다. 정적 속성에선 하나의 각도를 다른 각도로 표현할 수 있습니다. 예컨대 `90deg`는 `-270deg`, `1turn`은 `4turn`과 동일합니다. 그러나 동적 속성, 즉 `animation`이나 `transition`에서는 결과가 달라집니다.

### 단위

`deg`

각도를 도 단위로 나타냅니다. 1회전은 `360deg`입니다. 예: `0deg`, `90deg`, `14.23deg`

`grad`

각도를 그레이드로 나타냅니다. 1회전은 `400grad`입니다. 예: `0grad`, `100grad`, `38.8grad`

`rad`

각도를 라디안으로 나타냅니다. 1회전은 2π 라디안으로 약 `6.2832rad`입니다. `1rad`는 180/π`deg`입니다. 예: `0rad`, `1.0708rad`, `6.2832rad`

`turn`

각도를 회전의 수로 나타냅니다. 1회전은 `1turn`입니다. 예: `0turn`, `0.25turn`, `1.2turn`

예제
--

### 시계 방향 우측 90도

| Angle90.png | `90deg = 100grad = 0.25turn ≈ 1.5708rad` |
| --- | --- |

### 반대로 회전

| Angle180.png | `180deg = 200grad = 0.5turn ≈ 3.1416rad` |
| --- | --- |

### 시계 반대 방향 우측 90도

| AngleMinus90.png | `-90deg = -100grad = -0.25turn ≈ -1.5708rad` |
| --- | --- |

### 회전 없음

| Angle0.png | `0 = 0deg = 0grad = 0turn = 0rad` |
| --- | --- |

명세
--

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
animation-fill-mode
===================

**`animation-fill-mode`** CSS 속성은 CSS 애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정합니다.


```css
/\* Single animation \*/
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

/\* Multiple animations \*/
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;
```


축약 속성 `animation`을 사용하여 모든 애니메이션 속성을 한꺼번에 설정하는 것이 편리합니다.

|  |  |
| --- | --- |
| 초기값 | `none` |
| 적용대상 | all elements, `::before` (en-US) and `::after` pseudo-elements |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | Not animatable |

문법(Syntax)
----------

### 값(Values)

`none`

애니메이션은 실행되지 않을 때 대상에 스타일을 적용하지 않습니다. 요소는 대신 적용된 다른 CSS 규칙을 사용하여 표시됩니다. 이것은 기본값입니다.

`forwards`

대상은 실행 된 애니메이션의 마지막 keyframe (en-US)에 의해 설정된 계산 된 값을 유지합니다. 마지막 키 프레임은 `animation-direction`및 `animation-iteration-count` (en-US)의 값에 따라 다릅니다.

| `animation-direction` | `animation-iteration-count` | last keyframe encountered |
| --- | --- | --- |
| `normal` | even or odd | `100%` or `to` |
| `reverse` | even or odd | `0%` or `from` |
| `alternate` | even | `0%` or `from` |
| `alternate` | odd | `100%` or `to` |
| `alternate-reverse` | even | `100%` or `to` |
| `alternate-reverse` | odd | `0%` or `from` |

`backwards`

애니메이션은 대상에 적용되는 즉시 첫 번째 관련 keyframe (en-US) 에 정의 된 값을 적용하고 `animation-delay` 기간 동안 이 값을 유지합니다. 첫 번째 관련 키프레임은 `animation-direction`의 값에 따라 다릅니다.

| `animation-direction` | first relevant keyframe |
| --- | --- |
| `normal` or `alternate` | `0%` or `from` |
| `reverse` or `alternate-reverse` | `100%` or `to` |

`both`

애니메이션은 앞뒤 양쪽 모두의 규칙을 따르므로 애니메이션 속성이 양방향으로 확장됩니다.


**참고:** animation- \* 속성에 여러 개의 쉼표로 구분 된 값을 지정하면 `animation-name` (en-US) 속성에 지정된 애니메이션에 할당되는 값의 수에 따라 다른 방식으로 지정됩니다. 자세한 내용은 여러 애니메이션 속성 값 설정을 참조하십시오.

### Formal syntax
```

animation-fill-mode =   
  <single-animation-fill-mode>#    
  
<single-animation-fill-mode> =   
  none       |  
  forwards   |  
  backwards  |  
  both         
  
```

예제(Examples)
------------

다음 예제에서 animation-fill-mode의 효과를 볼 수 있습니다. 무한 시간 동안 실행되는 애니메이션의 경우 원래 상태 (기본값)로 되돌리기보다는 최종 상태로 유지하는 방법을 보여줍니다.

### HTML


```html
<p>회색 박스 위에 마우스를 올려보세요!</p>
<div class="demo">
  <div class="grows">이 글씨는 커집니다.</div>
  <div class="growsandstays">이 글씨는 커지며, 커진 상태를 유지합니다.</div>
</div>
```

### CSS


```css
.demo {
  border-top: 100px solid #ccc;
  height: 300px;
}

@keyframes grow {
  0% {
    font-size: 0;
  }
  100% {
    font-size: 40px;
  }
}

.demo:hover .grows {
  animation-name: grow;
  animation-duration: 3s;
}

.demo:hover .growsandstays {
  animation-name: grow;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}
```


자세한 예제는 CSS animations를 보십시오.

명세
--

| Specification |
| --- |
| CSS Animations Level 1 # animation-fill-mode |

브라우저 호환성(Browser compatibility)
-------------------------------

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

같이 보기(See also)
---------------

* Using CSS animations
* JavaScript `AnimationEvent` API
자손 결합자
======

보통 한 칸의 공백 문자로 표현하는 **자손 결합자**(" ")는 두 개의 선택자를 조합하여, 뒤쪽 선택자 요소의 조상(부모, 부모의 부모, 부모의 부모의 부모...)에 앞쪽 선택자 요소가 존재할 경우 선택합니다. 자손 결합자를 활용하는 선택자를 자손 선택자라고 부릅니다.


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


기술적으로, 자손 결합자는 하나 이상의 CSS 공백 문자이므로 스페이스 외에도 캐리지 리턴, 폼 피드, 새 줄, 탭 문자도 해당합니다. 또한 결합자를 구성하는 공백 문자는 CSS 주석을 임의의 개수만큼 포함할 수 있습니다.

구문
--
```

selector1 selector2 {
  /* property declarations */
}
```

예제
--

### CSS


```css
li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}
```

### HTML


```html
<ul>
  <li>
    <div>Item 1</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
  <li>
    <div>Item 2</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
</ul>
```

### 결과

명세
--

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

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

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

같이 보기
-----

* 자식 결합자
<display-internal>
==================

`table`과 `ruby` 같은 몇몇 레이아웃 모델은 복잡한 내부 구조를 가지고 있으며, 자식이나 자손들로 채울 수 있는 다양한 역할을 가지고 있습니다. 이 페이지는 이러한 "내재적인" 디스플레이 값을 정의하며, 이들은 특정 레이아웃 모드 안에서만 의미를 가집니다.

문법
--

유효한 `<display-internal>` 값들:

`table-row-group`

이 요소는 `<tbody>` (en-US) HTML 요소처럼 동작합니다.

`table-header-group`

이 요소는 `<thead>` HTML 요소처럼 동작합니다.

`table-footer-group`

이 요소는 `<tfoot>` HTML 요소처럼 동작합니다.

`table-row`

이 요소는 `<tr>` (en-US) HTML 요소처럼 동작합니다.

`table-cell`

이 요소는 `<td>` (en-US) HTML 요소처럼 동작합니다.

`table-column-group`

이 요소는 `<colgroup>` (en-US) HTML 요소처럼 동작합니다.

`table-column`

이 요소는 `<col>` (en-US) HTML 요소처럼 동작합니다.

`table-caption`

이 요소는 `<caption>` HTML 요소처럼 동작합니다.

`ruby-base` 
Experimental

이 요소는 `<rb>` HTML 요소처럼 동작합니다.

`ruby-text` 
Experimental

이 요소는 `<rt>` HTML 요소처럼 동작합니다.

`ruby-base-container` 
Experimental

이 요소는 익명의 박스로 만들어지는 `<rbc>` HTML 요소처럼 동작합니다.

`ruby-text-container` 
Experimental

이 요소는 `<rtc>` HTML 요소처럼 동작합니다.

예제
--

### CSS 테이블의 예시

다음 예시에서는 CSS 테이블 레이아웃을 이용해 간단한 폼을 배치합니다.

#### HTML


```html
<main>
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" />
  </div>
  <div>
    <label for="age">Age</label>
    <input type="text" id="age" name="age" />
  </div>
</main>
```


#### CSS


```css
main {
  display: table;
}

div {
  display: table-row;
}

label,
input {
  display: table-cell;
  margin: 5px;
}
```


#### 결과

명세서
---

#### No specification found

No specification data found for `css.properties.display.table_values,css.properties.display.ruby_values`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

### css.properties.display.table\_values

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

### css.properties.display.ruby\_values

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

같이 보기
-----

* `display` (en-US)
    + `<display-outside>` (en-US)
    + `<display-inside>` (en-US)
    + `<display-listitem>` (en-US)
    + `<display-box>` (en-US)
    + `<display-legacy>` (en-US)