recursal/MDN huggingface dataset:
border-bottom-width
===================

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

시도해보기
-----

구문
--


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

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

/\* 전역 값 \*/
border-bottom-width: inherit;
border-bottom-width: initial;
border-bottom-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-bottom-style` is `none` or `hidden` |
| Animation type | a length |

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

border-bottom-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-bottom-width: thick;
}
div:nth-child(2) {
  border-bottom-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-top-width`, and `border-width`.
* 아래 테두리 관련 CSS 속성: `border`, `border-bottom`, `border-bottom-style`, and `border-bottom-color`.
:focus
======

CSS **`:focus`** 의사 클래스는 양식의 입력 칸 등 포커스를 받은 요소를 나타냅니다. 보통 사용자가 요소를 클릭 또는 탭하거나, 키보드 `Tab` 키로 선택했을 때 발동합니다.


```css
/\* Selects any <input> when focused \*/
input:focus {
  color: red;
}
```


**참고:** `:focus`는 포커스를 받은 요소 자체에만 해당합니다. 자손이 포커스를 받았을 때의 요소를 선택해야 하면 `:focus-within`을 사용하세요.

구문
--

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

### HTML


```html
<input class="red-input" value="저는 포커스를 받으면 빨갛게 됩니다." /><br />
<input class="blue-input" value="저는 포커스를 받으면 파랗게 됩니다." />
```

### CSS


```css
.red-input:focus {
  background: yellow;
  color: red;
}

.blue-input:focus {
  background: yellow;
  color: blue;
}
```
### 결과

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

낮은 시력을 가진 사용자도 시각적 포커스 지시자를 볼 수 있어야 합니다. 이는 또한 맑은 날의 외부처럼 밝은 공간에서의 스크린 사용자처럼 다른 사람에게도 도움이 될 수 있습니다. WCAG 2.1 SC 1.4.11 Non-Text Contrast는 시각적 포커스 지시자의 대비를 최소한 3:1로 요구하고 있습니다.

* Accessible Visual Focus Indicators: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators
### `:focus { outline: none; }`

절대 포커스의 기본 외곽선(시각적 포커스 지시자)을 대체 외곽선 없이 제거하지 마세요. 대체 외곽선은 WCAG 2.1 SC 1.4.11 Non-Text Contrast 기준을 통과해야 합니다.

* Quick Tip: Never remove CSS outlines
명세
--

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

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

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

같이 보기
-----

* `:focus-visible` (en-US) 
Experimental
* `:focus-within`
background-color
================

CSS **`background-color`** 속성은 요소의 배경 색을 지정합니다.

시도해보기
-----

구문
--


```css
/\* 키워드 값 \*/
background-color: red;
background-color: indigo;

/\* 16진수 값 \*/
background-color: #bbff00; /\* 완전 불투명 \*/
background-color: #bf0; /\* 완전 불투명 단축 \*/
background-color: #11ffee00; /\* 완전 투명 \*/
background-color: #1fe0; /\* 완전 투명 단축 \*/
background-color: #11ffeeff; /\* 완전 불투명 \*/
background-color: #1fef; /\* 완전 불투명 단축 \*/

/\* RGB 값 \*/
background-color: rgb(255, 255, 128); /\* 완전 불투명 \*/
background-color: rgba(117, 190, 218, 0.5); /\* 50% 불투명도 \*/

/\* HSL 값 \*/
background-color: hsl(50, 33%, 25%); /\* 완전 불투명 \*/
background-color: hsla(50, 33%, 25%, 0.75); /\* 75% 불투명도 \*/

/\* 특별 키워드 값 \*/
background-color: currentcolor;
background-color: transparent;

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


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

### 값

`color`

요소의 배경으로 사용할 단일 색상입니다. `background-image` 뒤에 렌더링 되므로, 이미지가 투명한 부분을 가지고 있으면 그 곳을 통해 볼 수 있습니다.

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

낮은 시력을 가진 사용자도 페이지의 콘텐츠를 읽을 수 있도록 글자 색과 배경색의 대비를 높게 유지하는 것이 중요합니다.

색상 대비율은 배경색과 투명도를 적용한 글자 색의 밝기를 비교해서 얻어낼 수 있습니다. 현재 웹 콘텐츠 접근성 가이드라인(WCAG)을 만족하려면, 텍스트 콘텐츠는 4.5:1, 제목 등 큰 텍스트는 3:1의 대비율이 필요합니다. 큰 텍스트란 18.66px 이상의 굵은 글씨 혹은 24px 이상의 텍스트로 정의하고 있습니다.

* WebAIM: Color Contrast Checker
* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
형식 정의
-----

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

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

background-color =   
  <color>    
  
```

예제
--

### HTML


```html
<div class="exampleone">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="exampletwo">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="examplethree">Lorem ipsum dolor sit amet, consectetuer</div>
```

### CSS


```css
.exampleone {
  background-color: teal;
  color: white;
}

.exampletwo {
  background-color: rgb(153, 102, 153);
  color: rgb(255, 255, 204);
}

.examplethree {
  background-color: #777799;
  color: #ffffff;
}
```

### 결과

명세서
---

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

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

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

더 보기
----

* 한 번에 여러 배경 사용하기
* `<color>` 자료형
* 색상 관련 다른 속성: `color`, `border-color`, `outline-color` (en-US), `text-decoration-color` (en-US), `text-emphasis-color` (en-US), `text-shadow` (en-US), `caret-color` (en-US), and `column-rule-color` (en-US)
* CSS로 HTML 요소에 색입히기 (en-US)
border-image-slice
==================

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

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

* Learn more
* See full compatibility
* Report feedback
**`border-image-slice`** CSS 속성은 `border-image-source`로 설정한 이미지를 여러 개의 영역으로 나눕니다. 이렇게 나눠진 영역이 요소의 테두리 이미지를 이룹니다.

시도해보기
-----

이미지는 네 개의 꼭지점, 네 개의 모서리, 한 개의 중앙 총 9개의 영역으로 나눠집니다. 상하좌우 각각의 모서리에서 주어진 거리만큼 떨어진 네 개의 분할선이 영역의 크기를 결정합니다.

![The nine regions defined by the border-image or border-image-slice properties](/files/3814/border-image-slice.png)

위의 도표로 구역이 어떻게 나뉘는지 확인할 수 있습니다.

* 1-4번 구역은
 꼭지점 영역
 입니다. 코너 영역은 최종 테두리 이미지에서도 코너를 이루며 한 번씩만 그려집니다.
* 5-8번 구역은
 모서리 영역
 입니다. 모서리 영역은 최종 테두리 이미지의 크기에 맞도록 반복하여 그리거나 크기를 조정하는 등 변형됩니다.
* 9번 구역은
 중앙 영역
 입니다. 기본값으로는 쓰이지 않지만, `fill` 키워드를 지정한 경우 배경 이미지처럼 사용합니다.

`border-image-repeat`, `border-image-width`, `border-image-outset` 속성이 최종 테두리 이미지에서 각 영역의 사용 방법을 지정합니다.

구문
--


```css
/\* 모든 방향 \*/
border-image-slice: 30%;

/\* 세로방향 | 가로방향 \*/
border-image-slice: 10% 30%;

/\* 위 | 가로방향 | 아래 \*/
border-image-slice: 30 30% 45;

/\* 위 | 오른쪽 | 아래 | 왼쪽 \*/
border-image-slice: 7 12 14 5;

/\* `fill` 키워드 \*/
border-image-slice: 10% fill 7 12;

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


`border-image-slice` 속성은 한 개에서 네 개의 `<number>` 또는 `<percentage>` 값을 사용해 지정할 수 있습니다. 각각의 숫자는 네 방향 분할선의 위치를 나타냅니다. 음수 값은 유효하지 않고, 최대 크기보다 큰 값은 `100%`로 잘립니다.

* **한 개의 값**을 지정하면, 모든 분할선의 위치가 각각의 기준 모서리에서 동일한 거리만큼 떨어진 곳으로 설정됩니다.
* **두 개의 값**을 지정하면, 첫 번째 값은 **위와 아래** 분할선, 두 번째 값은 **왼쪽과 오른쪽** 분할선의 위치를 설정합니다.
* **세 개의 값**을 지정하면, 첫 번째 값은 **위**, 두 번째 값은 **왼쪽과 오른쪽**, 세 번째 값은 **아래** 분할선의 위치를 설정합니다.
* **네 개의 값**을 지정하면 각각 **상, 우, 하, 좌** 분할선의 거리를 순서대로 지정합니다. (시계방향)

선택적으로 아무데나 `fill` 키워드를 추가할 수 있습니다.

### 값

`<number>`

모서리에서 분할선까지의 픽셀 거리(래스터 이미지), 또는 좌표 거리(벡터 이미지). 벡터 이미지에서 숫자는 원본 이미지가 아닌 요소의 크기에 상대적이므로 보통 백분율을 선호합니다.

`<percentage>`

모서리에서 분할선까지의 백분율 거리. 가로축은 원본 이미지의 너비에, 세로축은 이미지의 높이에 상대적입니다.

`fill`

중앙 영역을 보존하여 배경 이미지처럼 사용. 실제 `background` 속성보다 위에 그려집니다. 중앙 영역 이미지는 위와 왼쪽 모서리 영역의 크기에 맞도록 늘어납니다.

### 형식 구문
```

border-image-slice =   
  [ <number [0,∞]> | <percentage [0,∞]> ]{1,4}  &&  
  fill?                                           
  
```

명세
--

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

|  |  |
| --- | --- |
| 초기값 | `100%` |
| 적용대상 | all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| Percentages | refer to the size of the border image |
| 계산 값 | one to four percentage(s) (as specified) or absolute length(s), plus the keyword `fill` if specified |
| Animation type | by computed value type |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
var()
=====

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

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

* Learn more
* See full compatibility
* Report feedback
CSS **`var()`** 함수는 사용자 지정 속성 (en-US), 또는 "CSS 변수"의 값을 다른 속성의 값으로 지정할 때 사용합니다.


```css
var(--header-color, blue);
```


`var()` 함수는 값이 아닌 속성 이름, 선택자 등 다른 곳에 사용할 수 없습니다. 시도할 경우 유효하지 않은 구문이 되거나, 변수와 관계없는 값이 됩니다.

구문
--

첫 번째 인수는 값을 가져올 사용자 지정 속성의 이름입니다. 선택적으로 제공할 수 있는 두 번째 인수는 대체값으로, 대상 사용자 지정 속성이 유효하지 않은 경우 대신 사용합니다.
```

<var()> =   
  var( <custom-property-name> , <declaration-value>? )    
  
```


**참고:** 대체값 구문은 사용자 지정 속성 구문과 동일하게 쉼표를 허용합니다. 그러므로 `var(--foo, red, blue)`의 대체값은 쉼표까지 포함한 `red, blue`입니다. 말하자면 첫 번째 쉼표의 뒤쪽은 모두 대체값이 되는 것입니다.

### 값

`<custom-property-name>`

두 개의 대시로 시작하는, 사용자 지정 속성의 이름을 나타내는 식별자.

`<declaration-value>`

현재 맥락에서, 주어진 사용자 지정 속성이 유효하지 않으면 대신 사용할 대체값. 새 줄, 짝 없이 닫는 괄호(`)`, `]`, `}`) 세미콜론, 느낌표 등 특별한 의미를 가진 문자를 제외한 모든 문자를 사용할 수 있습니다.

예제
--


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

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



```css
/\* Fallback \*/
/\* In the component’s style: \*/
.component .header {
  color: var(
    --header-color,
    blue
  ); /\* header-color isn’t set, and so remains blue, the fallback value \*/
}

.component .text {
  color: var(--text-color, black);
}

/\* In the larger application’s style: \*/
.component {
  --text-color: #080;
}
```

명세
--

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

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

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

같이 보기
-----

* `env(…)` (en-US) – 사용자 에이전트가 통제하는 읽기 전용 환경 변수.
* CSS 변수 사용하기
<time>
======

**`<time>`** CSS 자료형은 시간 값을 초나 밀리초 단위로 나타냅니다. `animation`, `transition`과 관련 속성에서 사용합니다.

구문
--

`<time>` 자료형은 `<number>`와, 그 뒤에 붙는 아래 단위 중 하나로 이루어져 있습니다. 선택 사항으로 하나의 `+` 또는 `-` 기호를 맨 앞에 붙일 수 있습니다. 다른 모든 수치와 마찬가지로 단위와 숫자 사이에는 공백이 없습니다.

**참고:** `0`은 단위와 상관 없이 언제나 동일하지만 시간 단위를 생략할 수 없습니다. 즉 `0`은 유효하지 않은 구문이며 `0s`나 `0ms`를 나타내지 않습니다.

### 단위

**`s`**

시간을 초 단위로 나타냅니다. 예시: `0s`, `1.5s`, `-60s`.

**`ms`**

시간을 밀리초 단위로 나타냅니다. 예시: `0ms`, `150.25ms`, `-60000ms`.


**참고:** `s`와 `ms`의 변환은 `1s` = `1000ms`를 따릅니다.

예제
--

### 유효한 시간
```

12s         양의 정수
-456ms      음의 정수
4.3ms       정수 아닌 실수
14mS        단위는 대소문자 구분을 하지 않지만, 대문자는 추천하지 않음
+0s         + 뒤의 0과 단위
-0ms        - 뒤의 0과 단위
```

### 유효하지 않은 시간
```

0           <length>는 단위 없는 0을 받을 수 있지만, <time>은 불가능
12.0        단위가 없으므로 <number>지만 <time>이 아님
7 ms        수와 단위 사이에 공백은 불허
```

명세
--

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
tab-size
========

CSS **`tab-size`** 속성은 탭 문자(U+0009)의 너비를 조절합니다.

구문
--


```css
/\* <integer> 값 \*/
tab-size: 4;
tab-size: 0;

/\* <length> 값 \*/
tab-size: 10px;
tab-size: 2em;

/\* 전역 값 \*/
tab-size: inherit;
tab-size: initial;
tab-size: unset;
```

### 값

`<integer>`

공백 문자(U+0020)에 대한 탭 문자의 상대적인 너비. 0 이상의 정수여야 합니다.

`<length>`

탭 문자의 너비. 양의 값이어야 합니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `8` |
| 적용대상 | block containers |
| 상속 | yes |
| 계산 값 | the specified integer or an absolute length |
| Animation type | a length |

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

tab-size =   
  <number [0,∞]>  |  
  <length [0,∞]>    
  
```

예제
--

### 글자 수로 정의


```css
pre {
  tab-size: 4; /\* Set tab size to 4 characters wide \*/
}
```

### 탭 제거


```css
pre {
  tab-size: 0; /\* Remove indentation \*/
}
```

### 기본 크기와 비교

다음 예제는 기본 탭 크기를 사용자 지정 탭 크기와 비교합니다. `white-space` 속성을 `pre`로 설정해서 탭 문자가 접히지 않도록 했습니다.

#### HTML


```html
<p>no tab</p>
<p>&#0009;default tab size of 8 characters wide</p>
<p class="custom">&#0009;custom tab size of 3 characters wide</p>
<p>&nbsp;&nbsp;&nbsp;3 spaces, equivalent to the custom tab size</p>
```


#### CSS


```css
p {
  white-space: pre;
}

.custom {
  tab-size: 3;
  -moz-tab-size: 3;
}
```


#### 결과

명세
--

| Specification |
| --- |
| CSS Text Module Level 3 # tab-size-property |

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

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

같이 보기
-----

* Controlling size of a tab character (U+0009), Anne van Kesteren이 CSSWG에 보낸 이메일.
CSS Scroll Snap Points
======================

**지원이 중단되었습니다:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**CSS Scroll Snap Points**는 물리보다는 논리상 방향과 차원 맵핑을 통해 레이아웃을 제어하는 능력을 제공하는 속성 및 값을 정의하는 CSS 모듈입니다.

**참고:** 같은 기능을 정의하는 최신 명세는 CSS Scroll Snap입니다.

참고
--

### CSS 속성

* `scroll-snap-coordinate`
* `scroll-snap-destination`
* `scroll-snap-points-x`
* `scroll-snap-points-y`
* `scroll-snap-type` (en-US)
명세
--

| Specification |
| --- |
| CSS Scroll Snap Module Level 1  |
padding-top
===========

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

시도해보기
-----

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

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

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

구문
--


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

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

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


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

### 값

`<length>`

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

`<percentage>`

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

### 형식 구문
```

padding-top =   
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

예제
--


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

**`revert`** 는 현재 엘리먼트에 선언 된 캐스캐이딩된 속성으로부터 **style origin** 으로 되돌립니다. 부모 속성 또는 user agent에 따라 default로 선언 된 속성으로 되돌리는 것입니다. 이 속성은 css 단축속성`all`을 포함한 어떤 프로퍼티에도 적용할 수 있습니다.

* 만약 그 사이트만의 css 속성이 지정되어있다면 `revert` 속성은 유저가 지정한 커스텀 스타일로 롤백합니다. 만약 하나만 존재한다면 user agent의 default 스타일로 돌아가는 것입니다.
* 만약 사용자의 커스텀 스타일을 사용하거나 사용자에 의해서 스타일이 적용되어 있다면, `revert` 는 user agent의 default 스타일로 되돌립니다.
* 만약 user agent default 스타일만 지정되어있다면, `unset`과 마찬가지의 의미입니다.

`revert` 키워드는 많은 경우에서 `unset` 과 같은 성질을 가집니다. 한가지 차이점은 user agent에 의한 스타일이냐 유저가 지정한 스타일이냐의 차이입니다.

Revert 는 자식 요소까지 변경하지는 않습니다. (하지만 자식 요소에 특별히 rule이 지정되어 있지 않다면 적용됩니다.). 그래서 만약에 모든 섹션에 `color: green` 속성을 지정하고 `all: revert` 를 사용하면 모든 섹션의 컬러값은 black으로 돌아갈 것입니다. 하지만 만약, 당신이 section 내의 모든 p에 red를 지정했다면 그것들은 red로 유지될 것입니다.

**참고:** Revert는 단순히 값입니다. 그러므로 `revert` 또한 다른 specificity값으로 덮어 쓸 수 있습니다.

**참고:** `revert` 는 `initial` 키워드와는 다른데, initial value 는 프로퍼티 단위의 css 특성화입니다. user-agent의 스타일 시트도 default value로 되돌립니다..

예를 들어, `display` (en-US) 속성에 대한 initial value 는 `inline` 입니다. 반면에 `<div>` (en-US) 에 대한 `display` (en-US) user agent 속성은 `block` 이고, `<table>` (en-US) 에 대한 속성은 `table` 입니다.

예시
--

### Revert vs unset

비록 `revert` 와 `unset` 은 비슷하지만 몇몇 엘리먼트와 몇몇 속성에서는 다릅니다.

그래서 아래 예시를 보면, 우리는 `font-weight` 를 커스텀으로 글로벌 스타일로 지정하였습니다. 그러나 revert와 unset을 시도해보면 다른 결과를 볼 수 있습니다. Unset text를 default로 설정된 normal로 유지합니다. Revert는 user-agent 상에 font-weight인 bold로 돌아갈 것입니다.


```css
h3 {
  font-weight: normal;
  color: blue;
}
```



```html
<h3 style="font-weight: unset; color: unset;">
  This will still have font-weight: normal, but color: black
</h3>
<p>Just some text</p>
<h3 style="font-weight: revert; color: revert;">
  This should have its original font-weight (bold) and color: black
</h3>
<p>Just some text</p>
```

### Revert all

모든 요소를 revert 하는 것은 당신이 많은 캐스캐이딩에 따른 수정이 있었을 때 default로 돌아가기에 매우 유용합니다. 그래서 font-weight를 리버트 하고 color를 리버트하는 것을 각각 하기보다는 한꺼번에 돌릴 수 있습니다.


```css
h3 {
  font-weight: normal;
  color: blue;
  border-bottom: 1px solid grey;
}
```



```html
<h3>This will have custom styles</h3>
<p>Just some text</p>
<h3 style="all: revert">This should be reverted to browser/user defaults</h3>
<p>Just some text</p>
```

### 부모요소에서의 Revert

효율적으로 revert 하는 것은 당신이 선택한 속성에 대해서만 해당 속성을 제거하는 것입니다. 우리는 paragraph에 한해서는 red 속성을 지정하고 section에는 darkgreen 을 따로 각각 지정할 수 있습니다.


```css
section {
  color: darkgreen;
}
p {
  color: red;
}
section.with-revert {
  color: revert;
}
```



```html
<section>
  <h3>따로 지정되지 않은 h3는 다크 그린</h3>
  <p>paragraph의 텍스트는 빨강</p>
  섹션 안의 요소니까 다크 그린.
</section>
<section class="with-revert">
  <h3>revert로 따로 지정되어있지 않았던 h3는 검정</h3>
  <p>특성화되어있는 paragraph는 그대로 빨강</p>
  섹션 안의 요소가 revert 되면서 검정
</section>
```


section 요소가 돌아갔음에도 paragraph는 여전히 빨강인 것에 주목하세요.

명세서
---

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4 # default |

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

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

요약
--

* initial value를 지정할 때는 `initial` 를 사용하세요 .
* 초기 속성을 없애거나, 부모 요소에 대한 상속 된 속성을 지정할 때는 `unset` 를 사용하세요.
* 부모 속성을 지정할 때는 `inherit` 를 사용하세요.
* `all` 속성은 unset, initial, revert, inherit 속성을 한꺼번에 지정할 것입니다.
<frequency>
===========

CSS **`<frequency>`** 자료형은 목소리의 높낮이 등 주파수를 나타냅니다. 현재 어떤 CSS 속성도 `<frequency>`를 사용하지 않습니다.

구문
--

`<frequency>` 자료형은 `<number>` 다음에 아래 나열한 단위 중 하나를 붙여 구성핳합니다. 다른 CSS 단위와 마찬가지로 숫자와 단위 문자 사이에 공백은 존재하지 않습니다.

### 단위

`Hz`

헤르츠로 주파수를 나타냅니다. 예시: `0Hz`, `1500Hz`, `10000Hz`.

`kHz`

킬로헤르츠로 주파수를 나타냅니다. 예시: `0kHz`, `1.5kHz`, `10kHz`.


**참고:** `0`은 단위와 상관없이 언제나 같은 값을 나타내지만, 주파수에서는 단위를 생략할 수 없습니다. 즉 `0`은 유효한 주파수가 아니며 `0Hz`나 `0kHz`를 나타내지 않습니다. 단위 문자가 대소문자를 구분하지 않기는 하지만, SI에서 명시한 대로 "H"는 대문자로 표기하는 게 좋습니다.

예제
--

### 유효한 주파수
```

12Hz     양의 정수
4.3Hz    실수
14KhZ    단위가 대소문자를 구분하지 않지만, SI 표준에서 벗어난 표기는 비추천
+0Hz     0, 양의 부호와 단위
-0kHz    0, 음의 부호와 단위
```

### 유효하지 않은 주파수
```

12.0     단위가 없으므로 <number>지만 <frequency>가 아님
7 Hz     수와 단위 사이에 공백은 불허
0        <length>는 단위 없는 0을 받을 수 있지만, <frequency>는 불가능
```

명세
--

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

**참고:** `<frequency>`는 CSS Level 2의, 지금은 사용하지 않는 청각적 미디어 특성에서 음성의 높낮이를 설정할 때 사용했습니다. 이후 CSS3에서 다시 추가됐지만, 지금으로써는 어떤 CSS 속성에서도 사용하지 않습니다.

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

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

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

시도해보기
-----

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

구문
--


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

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

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

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

### 값

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

#### 키워드 값

`none`

최대 너비를 정하지 않음.

`max-content` 
Experimental

본질적인 선호 높이.

`min-content` 
Experimental

본질적인 최소 높이.

`fill-available` 
Experimental

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

`fit-content` 
Experimental

`max-content`와 동일.

### 형식 구문
```

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

예제
--

다음 예제에서, 자식(`child`) 요소의 너비는 150픽셀과 부모(`parent`) 요소의 너비 중 더 작은 값이 됩니다.


```html
<div id="parent">
  <div id="child">
    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
  </div>
</div>
```



```css
#parent {
  background: lightblue;
  width: 300px;
}

#child {
  background: gold;
  width: 100%;
  max-width: 150px;
}
```


`fit-content` 값을 사용하여 해당 요소의 내용이 필요로 하는 너비만 차지하도록 설정할 수 있습니다.


```html
<div id="parent">
  <div id="child">Child Text</div>
</div>
```



```css
#parent {
  background: lightblue;
  width: 300px;
}

#child {
  background: gold;
  width: 100%;
  max-width: -moz-fit-content;
  max-width: -webkit-fit-content;
}
```

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

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

* 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 rows, and row groups |
| 상속 | no |
| Percentages | refer to the width of the containing block |
| 계산 값 | 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`, `width`, `min-width`