recursal/MDN huggingface dataset:
animation-direction
===================

**`animation-direction`** CSS 속성은 애니메이션이 앞으로, 뒤로 또는 앞뒤로 번갈아 재생되어야하는지 여부를 지정합니다.


```css
/\* Single animation \*/
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

/\* Multiple animations \*/
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

/\* Global values \*/
animation-direction: inherit;
animation-direction: initial;
animation-direction: unset;
```


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

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

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

### 값(Values)

`normal`

애니메이션은 매 사이클마다 정방향으로 재생됩니다. 즉, 순환 할 때마다 애니메이션이 시작 상태로 재설정되고 다시 시작됩니다. 이것은 기본값입니다.

`reverse`

애니메이션은 매 사이클마다 역방향으로 재생됩니다. 즉, 순환 할 때마다 애니메이션이 종료 상태로 재설정되고 다시 시작됩니다. 애니메이션 단계가 거꾸로 수행되고 타이밍 기능 또한 반대로됩니다. 예를 들어, ease-in 타이밍 기능은 ease-out형태로 변경됩니다.

`alternate`

애니메이션은 매 사이클마다 각 주기의 방향을 뒤집으며, 첫 번째 반복은 정방향으로 진행됩니다. 사이클이 짝수인지 홀수인지를 결정하는 카운트가 하나에서 시작됩니다.

`alternate-reverse`

애니메이션은 매 사이클마다 각 주기의 방향을 뒤집으며, 첫 번째 반복은 역방향으로 진행됩니다. 사이클이 짝수인지 홀수인지를 결정하는 카운트가 하나에서 시작됩니다.


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

### Formal syntax
```

animation-direction =   
  <single-animation-direction>#    
  
<single-animation-direction> =   
  normal             |  
  reverse            |  
  alternate          |  
  alternate-reverse    
  
```

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

CSS animations를 보십시오.

명세
--

| Specification |
| --- |
| CSS Animations Level 1 # animation-direction |

브라우저 호환성(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
:not()
======

부정(**negation**) CSS 가상 클래스 `:not(X)`는 인수로 간단한 선택자(selector) *X*를 취하는 기능 표기법입니다. 인수로 표시되지 않은 요소와 일치합니다. *X*는 다른 부정 선택자를 포함해서는 안 됩니다.

**참고:** **주의:**- 쓸모없는 선택자는 이 가상 클래스를 사용하여 작성될 수 있습니다. 예를 들어, `:not(*)`은 임의 요소가 아닌 모든 요소와 일치합니다. 그래서 규칙이 결코 적용되지 않습니다.

* 다른 규칙을 다시 작성할 수 있습니다. 가령 `foo:not(bar)`는 간단한 `foo`와 같은 요소와 일치합니다. 그럼에도 불구하고 첫 요소의 명시도가 더 높습니다.
* `:not(foo){}`는 **`<html>` 및 `<body>` 포함** 뭐든지 `foo`가 아닌 것과 일치합니다.
* 이 선택자는 한 요소에만 적용됩니다. 따라서 모든 조상(ancestor)을 제외하는 데 사용할 수 없습니다. 예를 들어, `body :not(table) a`는 `<tr>` (en-US) 요소가 선택자의 `:not()` 부분과 일치하기 때문에, 여전히 표 내부 링크에 적용됩니다.

구문
--
```

:not(selector) { style properties }
```

예제
--


```css
p:not(.classy) {
  color: red;
}
body :not(p) {
  color: green;
}
```


위의 CSS 및 아래 HTML이 주어진다면...


```html
<p>Some text.</p>
<p class="classy">Some other text.</p>
<span>One more text<span></span></span>
```


이 같은 출력을 얻습니다:

명세
--

| Specification |
| --- |
| Selectors Level 4 # negation |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSS Basic Box Model
===================

**CSS Basic Box Model**은 각 요소에 대해 시각적 서식 모델에 따라 생성하고 배치하는 사각형 박스(안팎 여백 포함)를 위한 CSS 모듈입니다.

참고서
---

### 속성

#### 박스 내 콘텐츠 흐름을 제어하는 속성

* `overflow`
* `overflow-x` (en-US)
* `overflow-y` (en-US)

#### 박스 크기를 제어하는 속성

* `height`
* `width`
* `max-height`
* `max-width`
* `min-height`
* `min-width`

#### 박스의 바깥 여백을 제어하는 속성

* `margin`
* `margin-bottom`
* `margin-left`
* `margin-right`
* `margin-top`
* `margin-trim` (en-US) 
Experimental

#### 박스의 안쪽 여백을 제어하는 속성

* `padding`
* `padding-bottom`
* `padding-left`
* `padding-right`
* `padding-top`

#### 기타 속성

* `visibility`
안내서
---

CSS 박스 모델 입문

CSS의 기초 개념 중 하나인 박스 모델을 설명합니다. 박스 모델은 CSS가 요소와 요소의 콘텐츠, 안쪽 여백, 테두리, 바깥 여백 영역을 배치하는 법을 정의합니다.

여백 상쇄 정복

어떤 경우, 두 개의 인접한 바깥 여백은 하나로 상쇄됩니다. 이 글은 상쇄가 언제 어떻게 일어나고 이를 어떻게 제어하는지 설명합니다.

시각적 서식 모델

시각적 서식 모델을 설명합니다.

명세
--

| Specification |
| --- |
| CSS Box Model Module Level 3  |
background-clip
===============

CSS **`background-clip`** 속성은 요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할 지 지정합니다.

시도해보기
-----

요소가 `background-image` 또는 `background-color`를 가지지 않으면, `background-clip`은 (`border-style` 또는 `border-image` 등으로 인해) 테두리에 투명하거나 반투명한 부분이 존재하는 경우에만 시각적 차이가 발생합니다. 그렇지 않은 경우 테두리가 차이점을 가립니다.

구문
--


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

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

### 값

`border-box`

배경이 테두리의 바깥 경계까지 차지합니다. (Z축 순서 상 테두리 아래 위치)

`padding-box`

배경이 안쪽 여백의 바깥 경계까지 차지합니다. 테두리 밑에는 배경을 그리지 않습니다.

`content-box`

배경을 콘텐츠 상자에 맞춰 그립니다.

`text` 
Experimental

배경을 전경 텍스트 위에만 그립니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `border-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-clip =   
  <visual-box>#    
  
<visual-box> =   
  content-box  |  
  padding-box  |  
  border-box     
  
```

예제
--

### HTML


```html
<p class="border-box">The background extends behind the border.</p>
<p class="padding-box">
  The background extends to the inside edge of the border.
</p>
<p class="content-box">
  The background extends only to the edge of the content box.
</p>
<p class="text">The background is clipped to the foreground text.</p>
```

### CSS


```css
p {
  border: 0.8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
}

.border-box {
  background-clip: border-box;
}
.padding-box {
  background-clip: padding-box;
}
.content-box {
  background-clip: content-box;
}

.text {
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0.2);
}
```

### 결과

명세
--

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

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

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

같이 보기
-----

* `clip-path` 속성은 배경 뿐 아니라 하나의 **요소 전체**에서 표시할 부분을 지정하는 클리핑 영역을 생성합니다.
* 배경 속성: `background`, `background-color`, `background-image`, `background-origin`
* CSS 기본 박스 모델 입문
z-index
=======

CSS **`z-index`** 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 `z-index` 값을 가진 요소가 작은 값의 요소 위를 덮습니다.

시도해보기
-----

위치 지정 요소(`position`이 `static` 외의 다른 값인 요소)의 박스에 대해, `z-index` 속성은 다음 항목을 지정합니다.

1. 현재 쌓임 맥락에서 자신의 위치.
2. 자신만의 쌓임 맥락 생성 여부.
구문
--


```css
/\* 키워드 값 \*/
z-index: auto;

/\* <integer> 값 \*/
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /\* 음수 값으로 우선순위를 낮출 수 있음 \*/

/\* 전역 값 \*/
z-index: inherit;
z-index: initial;
z-index: unset;
```


z-index 속성은 `auto` 키워드 또는 `<integer>` 값을 사용해 지정할 수 있습니다.

### 값

`auto`

박스가 새로운 쌓임 맥락을 생성하지 않습니다. 현재 쌓임 맥락에서의 위치는 부모 요소와 동일합니다.

`<integer>`

현재 쌓임 맥락에서의 위치로 이 값을 사용합니다. 또한 자신만의 쌓임 맥락을 생성하고, 해당 맥락에서 자신의 위치를 `0`으로 설정합니다. 이로 인해 자손의 `z-index`를 자기 외의 바깥 요소와 비교하지 않습니다.

### 형식 구문
```

z-index =   
  auto       |  
  <integer>  |  
  inherit      
  
```

예제
--

### HTML


```html
<div class="dashed-box">
  Dashed box
  <span class="gold-box">Gold box</span>
  <span class="green-box">Green box</span>
</div>
```

### CSS


```css
.dashed-box {
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box {
  position: absolute;
  z-index: 3; /\* put .gold-box above .green-box and .dashed-box \*/
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box {
  position: absolute;
  z-index: 2; /\* put .green-box above .dashed-box \*/
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}
```

### 결과

명세
--

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

|  |  |
| --- | --- |
| 초기값 | `auto` |
| 적용대상 | positioned elements |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | an integer |
| Creates stacking context | yes |

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

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

같이 보기
-----

* CSS `position` 속성
* CSS z-index 이해하기
Compositing and Blending
========================

**Compositing and Blending**은 서로 다른 요소의 모양을 단일 이미지로 결합하는 방법을 정의하는 CSS 모듈입니다.

참고
--

### 속성

* `background-blend-mode` (en-US)
* `isolation`
* `mix-blend-mode`
### 데이터 타입

* `<blend-mode>`
명세서
---

| Specification |
| --- |
| Compositing and Blending Level 2  |
| Compositing and Blending Level 1  |
:enabled
========

CSS **`:enabled`** 의사 클래스는 모든 활성 요소를 나타냅니다. 활성 요소란 활성(선택, 클릭, 입력 등등)하거나 포커스를 받을 수 있는 요소를 말합니다. 반대 상태인 비활성 요소도 존재합니다.


```css
/\* 모든 활성 <input> 선택 \*/
input:enabled {
  color: blue;
}
```

구문
--

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

다음 예제는 모든 활성 텍스트 및 버튼 `<input>` (en-US)의 글자 색을 초록색으로 만들고, 비활성 상태는 회색으로 만듭니다. 이런 구분을 통해 사용자는 상호작용 가능한 요소를 쉽게 구별할 수 있습니다.

### HTML


```html
<form action="url\_of\_form">
  <label for="FirstField">First field (enabled):</label>
  <input type="text" id="FirstField" value="Lorem" /><br />

  <label for="SecondField">Second field (disabled):</label>
  <input type="text" id="SecondField" value="Ipsum" disabled="disabled" /><br />

  <input type="button" value="Submit" />
</form>
```

### CSS


```css
input:enabled {
  color: #2b2;
}

input:disabled {
  color: #aaa;
}
```

### 결과

명세
--

| Specification |
| --- |
| HTML Standard # selector-enabled |
| Selectors Level 4 # enableddisabled |

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

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

같이 보기
-----

* `:disabled`
border-image-source
===================

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-source`** CSS 속성은 요소의 테두리 이미지로 사용할 원본 이미지를 지정합니다.

시도해보기
-----

`border-image-slice` 속성으로 나뉜 구역을 사용해 최종 테두리 이미지를 생성합니다.

구문
--


```css
/\* 키워드 값 \*/
border-image-source: none;

/\* <image> 값 \*/
border-image-source: url(image.jpg);
border-image-source: linear-gradient(to top, red, yellow);

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

### 값

`none`

테두리 이미지를 사용하지 않습니다. `border-style`이 대신 표시됩니다.

`<image>`

테두리에 사용할 이미지 참조입니다.

### 형식 구문
```

border-image-source =   
  none     |  
  <image>    
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> (en-US) <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> (en-US) <url-modifier>\* )    
  
```

예제
--

`border-image`에서 확인할 수 있습니다.

명세
--

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

|  |  |
| --- | --- |
| 초기값 | `none` |
| 적용대상 | all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| 계산 값 | `none` or the image with its URI made absolute |
| Animation type | discrete |

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

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

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

시도해보기
-----

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

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

구문
--


```css
/\* 네 면 모두 적용 \*/
padding: 1em;

/\* 세로방향 | 가로방향 \*/
padding: 5% 10%;

/\* 위 | 가로방향 | 아래 \*/
padding: 1em 2em 2em;

/\* 위 | 오른쪽 | 아래 | 왼쪽 \*/
padding: 5px 1em 0 2em;

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


padding 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 각 값은 `<length>`, `<percentage>` 중 하나로, 음수 값은 유효하지 않습니다.

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

**`<length>`**

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

`<percentage>`

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

### 형식 구문
```

padding =   
  <'padding-top'>{1,4}    
  
```

예제
--

### 간단한 예제

#### HTML


```html
<h4>평범한 안쪽 여백을 가진 요소.</h4>
<h3>엄청난 안쪽 여백을 가진 요소!</h3>
```


#### CSS


```css
h4 {
  background-color: lime;
  padding: 20px 50px;
}

h3 {
  background-color: cyan;
  padding: 110px 50px 50px 110px;
}
```

### 더 많은 예제


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

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

padding: 10px 20px;
/\* 상하: 10px \*/
/\* 좌우: 20px \*/

padding: 10px 3% 20px;
/\* 상: 10px \*/
/\* 좌우: 3% \*/
/\* 하: 20px \*/

padding: 1em 3px 30px 5px;
/\* 상: 1em \*/
/\* 우: 3px \*/
/\* 하: 30px \*/
/\* 좌: 5px \*/
```

명세
--

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

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `padding-bottom`: `0`
* `padding-left`: `0`
* `padding-right`: `0`
* `padding-top`: `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 |
| 계산 값 | as each of the properties of the shorthand:* `padding-bottom`: the percentage as specified or the absolute length
* `padding-left`: the percentage as specified or the absolute length
* `padding-right`: the percentage as specified or the absolute length
* `padding-top`: the percentage as specified or the absolute length
 |
| Animation type | a length |

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

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

같이 보기
-----

* CSS 기본 박스 모델 입문
* `padding-top`, `padding-right`, `padding-bottom`, `padding-left`.
선택자 목록
======

CSS **선택자 목록**(`,`)은 일치하는 모든 요소를 선택합니다.


```css
/\* 모든 span과 div 요소 선택 \*/
span,
div {
  border: red 2px solid;
}
```


다수의 선택자를 쉼표 구분 목록에 넣어 스타일 시트 크기를 줄일 수 있습니다.

구문
--
```

element, element, element { style properties }
```

예제
--

### 한 줄 묶기

쉼표로 구분한 목록을 한 줄에 배치할 수 있습니다.


```css
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: helvetica;
}
```

### 여러 줄 묶기

쉼표로 구분한 목록을 여러 줄에 배치할 수도 있습니다.


```css
#main,
.content,
article {
  font-size: 1.1em;
}
```

### 선택자 목록 무효화

선택자 목록의 단점은, 다음의 두 경우가 서로 같지 않다는 점입니다.


```css
h1 {
  font-family: sans-serif;
}
h2:maybe-unsupported {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}
```



```css
h1,
h2:maybe-unsupported,
h3 {
  font-family: sans-serif;
}
```


왜냐하면 목록 내의 하나의 선택자라도 브라우저가 지원하지 않으면 전체 목록을 무효화하기 때문입니다.

대응 방법은 `:is()` (en-US) 선택자를 사용하는 것을 통해, 유효하지 않은 선택자를 무시하는 것입니다. 그러나 `:is()`가 명시도를 계산하는 방법으로 인해, 모든 선택자가 동일한 명시도를 갖게 되는 부작용이 있습니다.


```css
h1 {
  font-family: sans-serif;
}
h2:maybe-unsupported {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}
```



```css
:is(h1, h2:maybe-unsupported, h3) {
  font-family: sans-serif;
}
```

명세
--

| Specification |
| --- |
| Selectors Level 4 # grouping |

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

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

같이 보기
-----

* 선택자 목록 무효화라는 과거의 실수를 가지지 않는 `:is()` (en-US) 
Experimental
, `:where()` (en-US) 
Experimental
 의사 클래스.
<length-percentage>
===================

**`<length-percentage>`** CSS 자료형은 `<length>` 또는 `<percentage>`인 값을 나타냅니다.

구문
--

`<length>`와 `<percentage>` 문서에서 각 자료형의 구문을 살펴보세요.

`calc()`에서 사용하기
---------------

`<length-percentage>`를 허용한다면 백분율이 길이로 이행한다는 뜻이므로 `calc()`와 함께 사용할 수 있습니다. 따라서 아래의 `width` 값 모두 유효합니다.


```css
width: 200px
width: 20%
width: calc(100% - 200px)
```

명세
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # mixed-percentages |

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

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

**`color`** CSS 속성은 요소의 글씨 및 글씨 장식의 전경색과 `<currentcolor>`의 값을 설정합니다. `currentcolor`는 다른 속성에서 사용할 수 있는 간접적인 값이며, `border-color` 등 일부 속성의 기본값입니다.

시도해보기
-----

HTML에서 색을 사용하는 법은 CSS로 HTML 요소에 색입히기 (en-US) 문서에서 정리한 내용으로 읽을 수 있습니다.

구문
--


```css
/\* 키워드 값 \*/
color: currentcolor;

/\* <named-color> 값 \*/
color: red;
color: orange;
color: tan;
color: rebeccapurple;

/\* <hex-color> 값 \*/
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/\* <rgb()> 값 \*/
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

/\* <hsl()> 값 \*/
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

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


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

값이 단일 색상이어야 함에 주의하세요. `<gradient>`는 사실 `<image>` 자료형이기 때문에 사용할 수 없습니다.

### 값

`<color>`

요소의 글씨와 장식 부분의 색.

### 형식 구문
```

color =   
  <color>    
  
```

예제
--

아래 예제 모두 글씨를 빨갛게 만듭니다.


```css
p {
  color: red;
}
p {
  color: #f00;
}
p {
  color: #ff0000;
}
p {
  color: rgb(255, 0, 0);
}
p {
  color: rgb(100%, 0%, 0%);
}
p {
  color: hsl(0, 100%, 50%);
}

/\* 50% 투명 \*/
p {
  color: rgba(255, 0, 0, 0.5);
}
p {
  color: hsla(0, 100%, 50%, 0.5);
}
```

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

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

색 대비율은 배경색과 투명도를 적용한 글자 색의 밝기를 비교해서 얻어낼 수 있습니다. 현재 웹 콘텐츠 접근성 가이드라인(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
명세
--

| Specification |
| --- |
| CSS Color Module Level 4 # the-color-property |

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

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

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

같이 보기
-----

* `<color>` 자료형
* 다른 색상 관련 속성: `background-color`, `border-color`, `outline-color` (en-US), `text-decoration-color` (en-US), `text-emphasis-color` (en-US), `text-shadow` (en-US), `caret-color` (en-US), `column-rule-color` (en-US), `color-adjust` (en-US)
* CSS로 HTML 요소에 색입히기 (en-US)
background-image
================

CSS **`background-image`** 속성은 요소의 배경 이미지를 한 개나 여러 개 지정합니다.

시도해보기
-----

여러 개의 배경 이미지는 쌓임 맥락에 따라 서로의 위에 놓입니다. 맨 처음 지정한 이미지가 제일 위에(사용자에게 제일 가까운 것 처럼) 위치합니다.

테두리는 배경 이미지 위에, `background-color`는 밑에 그려집니다. 요소 박스와 테두리에 관련하여 배경 이미지를 어떻게 그릴지는 `background-clip`과 `background-origin` CSS 속성이 정의합니다.

브라우저는 값에 유효하지 않은 URI를 지정하는 등 주어진 이미지를 그릴 수 없을 때 `none` 키워드를 사용한 것처럼 처리합니다.

**참고:** 지정한 이미지가 불투명해서 아래의 배경색을 볼 수 없더라도 `background-color`는 지정해야 합니다. 네트워크가 내려가는 등 이미지를 불러올 수 없는 상황에서 배경 색이 대체할 수 있기 때문입니다,

구문
--

각각의 배경 이미지는 `none` 키워드나 `<image>` 값으로 지정할 수 있습니다.

여러 개의 배경 이미지를 지정하려면 쉼표로 구분한 다수의 값을 지정하세요.


```css
background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 0, 0.5),
    rgba(0, 0, 255, 0.5)
  ), url("catfront.png");
```

### 값

`none`

배경 이미지의 부재를 나타내는 키워드입니다.

`<image>`

배경으로 사용할 이미지입니다. 여러 개의 배경 이미지를 사용할 땐 쉼표로 구분한 다수의 값을 지정하세요.

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

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

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

|  |  |
| --- | --- |
| 초기값 | `none` |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US) and `::first-line` (en-US). |
| 상속 | no |
| 계산 값 | as specified, but with `url` values made absolute |
| Animation type | discrete |

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

background-image =   
  <bg-image>#    
  
<bg-image> =   
  <image>  |  
  none       
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> (en-US) <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> (en-US) <url-modifier>\* )    
  
```

예제
--

### 배경 이미지 레이어링

별 모양 이미지는 배경이 투명하고, 고양이 이미지 위에 위치합니다.

#### HTML


```html
<div>
  <p class="catsandstars">This paragraph is full of cats<br />and stars.</p>
  <p>This paragraph is not.</p>
  <p class="catsandstars">Here are more cats for you.<br />Look at them!</p>
  <p>And no more.</p>
</div>
```


#### CSS


```css
p {
  font-size: 1.5em;
  color: #fe7f88;
  background-image: none;
  background-color: transparent;
}

div {
  background-image: url("mdn\_logo\_only\_color.png");
}

.catsandstars {
  background-image: url("startransparent.gif"), url("catfront.png");
  background-color: transparent;
}
```


#### 결과

명세
--

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

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

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

같이 보기
-----

* CSS로 이미지 스프라이트 구현하기
* `<img>`
* 이미지 관련 자료형: `<image>`, `<gradient>`
* 이미지 관련 함수: `linear-gradient()` (en-US), `radial-gradient()` (en-US), `repeating-linear-gradient()` (en-US), `repeating-radial-gradient()` (en-US), `element()` (en-US), `image()` (en-US), `image-set()` (en-US), `url()`
<number>
========

**`<number>`** CSS 자료형은 숫자, 즉 정수 또는 실수를 표현합니다.

구문
--

`<number>` 구문은 `<integer>` 구문을 확장합니다. 소수점 이하 값은 `.` 뒤로 한 개 이상의 10진수 숫자를 붙여 표현하며, 정수 뒤에 이어 붙일 수 있습니다. 따로 연관지어야 하는 단위는 없습니다.

보간
--

애니메이션에서 `<number>` 자료형의 값은 유동소수점 실수를 사용해 보간합니다. 보간의 속도는 애니메이션과 연결된 timing function (en-US)이 결정합니다.

예제
--

### 유효한 숫자
```

12          <integer>는 <number>
4.01        양의 실수
-456.8      음의 실수
0.0         0
+0.0        0, 양의 부호
-0.0        0, 음의 부호
.60         앞의 0 없는 소수점 이하 값
10e3        과학적 표기법
-3.4e-2     복잡한 과학적 표기법
```

### 유효하지 않은 숫자
```

12.         소수점 뒤에 최소 하나의 숫자가 존재해야 함
+-12.2      하나의 +/-만 허용
12.1.1      하나의 소수점만 허용
```

명세
--

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

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

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

같이 보기
-----

* `<integer>`
Comments
========

CSS **주석**은 코드에 설명을 넣거나, 브라우저가 스타일 시트의 특정 부분을 읽지 못하도록 방지할 때 사용합니다. 주석은 문서의 레이아웃에 영향을 주지 않습니다.

구문
--

주석은 스타일 시트에서 공백이 위치할 수 있는 곳 어디에나 넣을 수 있습니다. 한 줄로도, 여러 줄로도 사용할 수 있습니다.
```

/* Comment */
```

예제
--


```css
/\* 한 줄 주석 \*/

/\*
여러
줄을
차지하는
주석
\*/

/\* 아래와 같이 사용하면
 스타일을 숨길 수 있음 \*/
/\*
span {
 color: blue;
 font-size: 1.5em;
}
\*/
```

참고
--

한 줄과 여러 줄 주석 모두 `/* */` 구문을 사용하며 다른 방법은 없습니다. 그러나 `<style>` 요소를 사용하는 경우 `<!-- -->`를 이용해 구형 브라우저에게서 CSS를 숨길 수 있지만, 추천하는 방법은 아닙니다. `/* */` 주석 구문을 사용하는 대부분의 언어와 마찬가지로 주석을 중첩할 수는 없습니다. 즉 `/*`을 뒤따르는 첫 번째 `*/`이 주석을 끝냅니다.

명세
--

* CSS 2.1 구문과 기본 데이터 형식 #comments
같이 보기
-----

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