all
===

CSS **`all`** 단축 속성은 요소의 `unicode-bidi` (en-US), `direction` (en-US), CSS 사용자 지정 속성을 제외한 모든 속성을 초기화합니다. 초깃값, 상속값, 아니면 다른 스타일시트 출처의 값으로 설정할 수 있습니다.

시도해보기
-----

구문
--


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

/\* CSS Cascading and Inheritance Level 4 \*/
all: revert;
```


`all` 속성은 CSS 전역 키워드 값 중 하나를 사용해 지정합니다. 그러나 어느것도 `unicode-bidi` (en-US)와 `direction` (en-US) 속성에는 영향을 주지 않는 점을 주의하세요.

### 값

`initial`

요소의 모든 속성을 초깃값으로 변경합니다.

`inherit`

요소의 모든 속성을 상속값으로 변경합니다.

`unset`

요소의 모든 속성을, 속성이 값을 상속하는 경우 상속값으로, 아니면 초깃값으로 변경합니다.

`revert`

선언이 속한 스타일시트의 출처에 따라 다른 동작을 합니다.

* 사용자 에이전트 출처 (en-US)
    + : `unset`과 동일합니다.
* 사용자 출처 (en-US)
    + : 종속 (en-US)을 사용자 에이전트 단계까지 되돌려서, 지정값이 마치 저작자와 사용자 단계의 규칙이 없었던 것처럼 계산되도록 합니다.
* 저작자 출처 (en-US)
    + : 종속 (en-US)을 사용자 에이전트 단계까지 되돌려서, 지정값이 마치 저작자 단계의 규칙이 없었던 것처럼 계산되도록 합니다. `revert`만 고려했을 때, 저작자 출처는 재정의(Override) 및 애니메이션(Animation) 출처를 포함합니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | There is no practical initial value for it. |
| 적용대상 | all elements |
| 상속 | no |
| 계산 값 | as the specified value applies to each property this is a shorthand for. |
| Animation type | as each of the properties of the shorthand (all properties but `unicode-bidi` (en-US) and `direction` (en-US)) |

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

all =   
  initial       |  
  inherit       |  
  unset         |  
  revert        |  
  revert-layer    
  
```

예제
--

### HTML


```html
<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

### CSS


```css
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}

blockquote {
  background-color: skyblue;
  color: red;
}
```

### 결과

#### `all` 속성 없음
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```


```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}
```


The `<blockquote>`가 브라우저 기본 스타일과 함께, 지정한 배경 및 텍스트 색상을 사용합니다. 또한 블록 요소로 동작하여 뒤의 텍스트가 아래에 위치합니다.

#### `all:unset`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```


```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}
blockquote {
  all: unset;
}
```


`<blockquote>`가 브라우저 기본 스타일을 사용하지 않습니다. 이제 인라인 요소(초깃값)이며, `background-color`가 `transparent`(초깃값)입니다. 그러나 `font-size`는 여전히 `small`(상속값)이고 `color`도 `blue`(상속값)입니다.

#### `all:initial`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```


```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}
blockquote {
  all: initial;
}
```


`<blockquote>`가 브라우저 기본 스타일을 사용하지 않습니다. 이제 인라인 요소(초깃값)이며, `background-color`가 `transparent`(초깃값)이고, `font-size`는 `normal`(초깃값), `color`는 `black`(초깃값)입니다.

#### `all:inherit`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```


```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}
blockquote {
  all: inherit;
}
```


`<blockquote>`가 브라우저 기본 스타일을 사용하지 않습니다. 블록 요소(부모 `<body>`에서 상속)이고, `background-color`은 `#F0F0F0`(상속값), `font-size`는 `small`(상속값), `color`는 `blue`(상속값)입니다.

명세
--

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4 # all-shorthand |

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

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

같이 보기
-----

CSS 전역 키워드 값: `initial`, `inherit`, `unset`, `revert`