recursal/MDN huggingface dataset:
사용값
===

CSS 속성의 **사용값**은 계산값에 모든 계산을 수행한 후의 결과 값입니다.

모든 CSS 속성은 사용자 에이전트가 계산을 끝낸 후 사용값을 가집니다. 크기(`width`, `line-height` (en-US) 등)는 픽셀 단위로 정해집니다. 단축 속성(`background` 등)의 값은 그 구성요소(`background-color`, `background-size` (en-US) 등)와 `position`, `float`이 가질 값과 일치합니다.

**참고:** `getComputedStyle()` DOM API는 결정값을 반환합니다. 결정값은 속성에 따라 계산값일 수도, 사용값일 수도 있습니다.

예제
--

다음 예제는 요소 세 개 `width` 속성의 사용값을 계산하고 보여줍니다. (창 크기 조절 시 업데이트)

### HTML


```html
<div id="no-width">
  <p>No explicit width.</p>
  <p class="show-used-width">..</p>

  <div id="width-50">
    <p>Explicit width: 50%.</p>
    <p class="show-used-width">..</p>

    <div id="width-inherit">
      <p>Explicit width: inherit.</p>
      <p class="show-used-width">..</p>
    </div>
  </div>
</div>
```

### CSS


```css
#no-width {
  width: auto;
}

#width-50 {
  width: 50%;
}

#width-inherit {
  width: inherit;
}

/\* Make results easier to see \*/
div {
  border: 1px solid red;
  padding: 8px;
}
```

### JavaScript


```js
function updateUsedWidth(id) {
  var div = document.querySelector(`#${id}`);
  var par = div.querySelector(".show-used-width");
  var wid = window.getComputedStyle(div)["width"];
  par.textContent = `Used width: ${wid}.`;
}

function updateAllUsedWidths() {
  updateUsedWidth("no-width");
  updateUsedWidth("width-50");
  updateUsedWidth("width-inherit");
}

updateAllUsedWidths();
window.addEventListener("resize", updateAllUsedWidths);
```

### 결과

계산값과의 차이
--------

CSS 2.0은 속성의 계산에서 마지막 단계로 계산값만 정의했고, 그 다음 CSS 2.1에서 사용값의 분명한 정의를 도입했습니다. 덕분에, 부모의 너비/높이 계산값이 백분율이더라도 상속받을 수 있게 됐습니다. 레이아웃에 의존하지 않는 CSS 속성(가령, `display`, `font-size`, `line-height`)의 경우, 계산값과 사용값은 같습니다. 다음은 레이아웃에 의존하는 CSS 2.1 속성으로, 계산값과 사용값이 다릅니다. (CSS 2.1 Changes: Specified, computed, and actual values에서 가져옴)

* `background-position`
* `bottom`, `left`, `right`, `top`
* `height`, `width`
* `margin-bottom`, `margin-left`, `margin-right`, `margin-top`
* `min-height`, `min-width`
* `padding-bottom`, `padding-left`, `padding-right`, `padding-top`
* `text-indent`
명세
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # used-value |

같이 보기
-----

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

CSS **`inherit`** 키워드를 사용한 속성은 부모 요소로부터 해당 속성의 계산값을 받아 사용합니다. CSS `all` 단축 속성을 포함한 모든 속성에 사용할 수 있습니다.

상속되는 속성(inherited properties)의 경우, 이는 기본 동작(behavior)을 강화하고 오직 다른 규칙을 재정의(override)해야 합니다. 상속되지 않는 속성(non-inherited properties)은, 이는 보통 비교적 거의 의미가 없는 동작을 지정하고 당신은 대신 `initial` 혹은 `all` 속성에 `unset` 사용을 고려할 지도 모릅니다.

상속(Inheritance)은 심지어 부모 요소가 포함(containing) 블록이 아니더라도, 항상 문서 트리 내 부모 요소로부터입니다.

예제
--


```css
/\* h2를 green으로 만듦 \*/
h2 {
  color: green;
}

/\* 부모 요소의 color를 사용하도록 sidebar 내의 h2를 홀로 남김 \*/
#sidebar h2 {
  color: inherit;
}
```


이 예제에서 sidebar 내부의 `h2` 요소는 다른 색일지도 모릅니다. 예를 들어, 그 중 하나는 규칙과 일치하는 div의 자식이라면


```css
div#current {
  color: blue;
}
```


파란색이 됩니다.

명세
--

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

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

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

같이 보기
-----

* 상속
* `initial`을 사용해 속성의 초깃값을 사용하세요.
* `unset`을 사용해 속성의 상속값 또는 초깃값을 사용하세요.
* `revert`를 사용해 사용자 에이전트가 지정한 값(또는 사용자가 수정한 값)으로 속성을 되돌리세요.
* `all` 속성을 사용하면 요소의 모든 속성을 한꺼번에 `initial`, `inherit`, `revert`, `unset`할 수 있습니다.
:disabled
=========

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


```css
/\* 모든 비활성 <input> 선택 \*/
input:disabled {
  background: #ccc;
}
```

구문
--

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

다음 예제는 사용자가 청구 주소 입력 칸을 켜거나 끌 수 있는 기능을 JavaScript `change (en-US)` 이벤트를 통해 구현한 기본적인 배송 양식입니다.

### HTML


```html
<form action="#">
  <fieldset id="shipping">
    <legend>배송지</legend>
    <input type="text" placeholder="이름" />
    <input type="text" placeholder="주소" />
    <input type="text" placeholder="우편번호" />
  </fieldset>
  <br />
  <fieldset id="billing">
    <legend>청구지</legend>
    <label for="billing-checkbox">배송지와 동일:</label>
    <input type="checkbox" id="billing-checkbox" checked />
    <br />
    <input type="text" placeholder="이름" disabled />
    <input type="text" placeholder="주소" disabled />
    <input type="text" placeholder="우편번호" disabled />
  </fieldset>
</form>
```

### CSS


```css
input[type="text"]:disabled {
  background: #ccc;
}
```

### JavaScript


```js
// 페이지 로딩이 끝날 때까지 기다림
document.addEventListener(
  "DOMContentLoaded",
  function () {
    // `change` 이벤츠 수신기를 체크박스에 부착
    document.getElementById("billing-checkbox").onchange = toggleBilling;
  },
  false,
);

function toggleBilling() {
  // 청구지 텍스트 입력 칸을 모두 선택
  var billingItems = document.querySelectorAll('#billing input[type="text"]');

  // 하나씩 토글
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;
  }
}
```

### 결과

명세
--

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

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

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

같이 보기
-----

* `:enabled`
<angle-percentage>
==================

CSS **`<angle-percentage>`** 자료형은 `<angle>`과 `<percentage>` 모두 가능한 값을 나타냅니다.

구문
--

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

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

`<angle-percentage>` 를 사용할 수 있는 곳이라면 백분율이 각도로 계산되므로, 이 자료형도 `calc()`표현식에서 사용할 수 있습니다.

명세
--

| 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.
<percentage>
============

**`<percentage>`** CSS 자료형은 백분율 값을 나타냅니다. 보통 부모 객체와의 상대적 크기를 지정할 때 사용합니다. `width`, `height`, `margin`, `padding`, `font-size` 처럼 다양한 속성에서 백분율을 쓸 수 있습니다.

**참고:** 계산된 값만 상속받을 수 있습니다. 따라서 부모 속성이 백분율 값을 사용하더라도 전달되는 값은 실제값(예컨대 너비의 `<length>` 값은 픽셀)이며 백분율 값은 접근할 수 없습니다.

구문
--

`<percentage>` 자료형은 `<number>`와 그 뒤의 백분율 기호(`%`)로 표기합니다. 선택적으로 하나의 `+` 또는 `-` 기호로 부호를 표기할 수 있지만, 음의 값은 어떤 속성에서도 유효하지 않습니다. 다른 CSS 단위와 마찬가지로 숫자와 기호 사이에 공백은 없습니다.

보간
--

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

예제
--

### `width`와 `margin-left`


```html
<div style="background-color:blue;">
  <div style="width:50%; margin-left:20%; background-color:lime;">
    width: 50%, margin-left: 20%
  </div>
  <div style="width:30%; margin-left:60%; background-color:pink;">
    width: 30%, margin-left: 60%
  </div>
</div>
```

### `font-size`


```html
<div style="font-size:18px;">
  <p>원본 텍스트 (18px)</p>
  <p><span style="font-size:50%;">50%</span></p>
  <p><span style="font-size:200%;">200%</span></p>
</div>
```

명세
--

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

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

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

CSS **`gap`** 속성은 행과 열 사이의 간격 (gutters)을 설정합니다. `row-gap` (en-US)과 `column-gap` (en-US)의 단축 속성입니다.

시도해보기
-----

`grid-gap` 은 해당 속성의 별칭입니다.

구문
--


```css
/\* 단일 <length> 값 \*/
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;

/\* 단일 <percentage> 값 \*/
gap: 16%;
gap: 100%;

/\* 이중 <length> 값 \*/
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;

/\* 이중 또는 혼합 <percentage> 값 \*/
gap: 16% 100%;
gap: 21px 82%;

/\* calc() 값 \*/
gap: calc(10% + 20px);
gap: calc(20px + 10%) calc(10% - 5px);

/\* 전역 값 \*/
gap: inherit;
gap: initial;
gap: unset;
gap: revert;
gap: revert-layer;
```


`gap`은 `<'row-gap'>` 값을 사용해 지정하며, 선택적으로 `<'column-gap'>`을 추가할 수 있습니다. `<'column-gap'>`을 생략한 경우 `<'row-gap'>`과 동일한 값을 사용합니다.

`<'row-gap'>`과 `<'column-gap'>`은 각각 `<length>` 또는 `<percentage>`를 사용해 지정합니다.

### 값

`<length>`

그리드 선을 분할하는 간격의 너비.

`<percentage>`

그리드 선을 분할하는 간격의 너비. 요소 크기에 상대적입니다.

### 형식 정의

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `row-gap` (en-US): `normal`
* `column-gap` (en-US): `normal`
 |
| 적용대상 | multi-column elements, flex containers, grid containers |
| 상속 | no |
| 계산 값 | as each of the properties of the shorthand:* `row-gap` (en-US): as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
* `column-gap` (en-US): as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
 |
| Animation type | as each of the properties of the shorthand:* `row-gap` (en-US): a length, percentage or calc();
* `column-gap` (en-US): a length, percentage or calc();
 |

### 형식 구문
```

gap =   
  <'row-gap'> <'column-gap'>?    
  
```

예제
--

### 플렉스 레이아웃

#### HTML


```html
<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```


#### CSS


```css
#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  gap: 20px 5px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  width: 100px;
  height: 50px;
}
```


#### 결과

### 그리드 레이아웃

#### HTML


```html
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```


#### CSS


```css
#grid {
  display: grid;
  height: 200px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 20px 5px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}
```


#### 결과

### 다열 레이아웃

#### HTML


```html
<p class="content-box">
  This is some multi-column text with a 40px column gap created with the CSS
  <code>gap</code> property. Don't you think that's fun and exciting? I sure do!
</p>
```


#### CSS


```css
.content-box {
  column-count: 3;
  gap: 40px;
}
```


#### 결과

명세
--

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # gap-shorthand |

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

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

같이 보기
-----

* 관련 CSS 속성: `row-gap` (en-US), `column-gap` (en-US)
* 그리드 레이아웃 안내서: *Basic concepts of grid layout - Gutters*
flex-shrink
===========

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-shrink`** CSS property는 `flex-item` 요소의 `flex-shrink` 값을 설정하는 속성입니다. 만약 `flex-item` 요소의 크기가 `flex-container` 요소의 크기보다 클 때 flex-shrink 속성을 사용하는데, 설정된 숫자값에 따라 `flex-container` 요소 내부에서 `flex-item` 요소의 크기가 **축소**됩니다.

시도해보기
-----

Syntax
------


```css
/\* <number> values \*/
flex-shrink: 2;
flex-shrink: 0.6;

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


The `flex-shrink` property is specified as a single `<number>`.

### Values

`<number>`

관련 링크를 참고하세요`<number>`. 단, 음수값은 허용되지 않습니다.

### Formal syntax
```

flex-shrink =   
  <number [0,∞]>    
  
```

Example
-------

### HTML


```html
<p>The width of content is 500px; the flex-basis of the flex items is 120px.</p>
<p>A, B, C have flex-shrink:1 set. D and E have flex-shrink:2 set</p>
<p>The width of D and E is less than the others.</p>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
</div>
```

### CSS


```css
#content {
  display: flex;
  width: 500px;
}

#content div {
  flex-basis: 120px;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

.box {
  flex-shrink: 1;
}

.box1 {
  flex-shrink: 2;
}
```

### Result

명세서
---

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

|  |  |
| --- | --- |
| 초기값 | `1` |
| 적용대상 | flex items, including in-flow pseudo-elements |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | a number |

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

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

See also
--------

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Controlling Ratios of flex items along the main axis (en-US)*
클래스 선택자
=======

CSS **클래스 선택자**는 요소의 `class` 특성에 기반해 요소를 선택합니다.


```css
/\* All elements with class="spacious" \*/
.spacious {
  margin: 2em;
}

/\* All <li> elements with class="spacious" \*/
li.spacious {
  margin: 2em;
}

/\* All <li> elements with a class list that includes both "spacious" and "elegant" \*/
/\* For example, class="elegant retro spacious" \*/
li.spacious.elegant {
  margin: 2em;
}
```

구문
--
```

.class_name { style properties }
```


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

[class~=class_name] { style properties }
```

예제
--

### CSS


```css
.red {
  color: #f33;
}

.yellow-bg {
  background: #ffa;
}

.fancy {
  font-weight: bold;
  text-shadow: 4px 4px 3px #77f;
}
```

### HTML


```html
<p class="red">빨간 글자색의 문단입니다.</p>
<p class="red yellow-bg">빨간 글자색과 노란 배경의 문단입니다.</p>
<p class="red fancy">빨간 글자색과 "멋진" 스타일을 가진 문단입니다.</p>
<p>이건 그냥 문단이에요.</p>
```

### 결과

명세
--

| Specification |
| --- |
| Selectors Level 4 # class-html |

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

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

**`@import`** CSS @규칙은 다른 스타일 시트에서 스타일 규칙을 가져올 때 쓰입니다. 이 규칙은 `@charset` 규칙을 제외하고 모든 다른 종류의 규칙보다 선행해야 합니다. `@import`는 중첩 명령문이 아니기 때문에 조건부 그룹 @규칙 내에 사용할 수 없습니다.


```css
@import url("fineprint.css") print;
@import url("bluish.css") speech;
@import "custom.css";
@import url("chrome://communicator/skin/");
@import "common.css" screen;
@import url("landscape.css") screen and (orientation: landscape);
```


사용자 에이전트는 지원되지 않는 미디어 유형에 대한 자원 검색을 피할 수 있도록, 제작자는 미디어에 의존한 `@import` 규칙을 지정할 수 있습니다. 이러한 조건부 import는 URI 뒤에 쉼표로 구분된 미디어 질의를 지정합니다. 미디어 질의가 없으면, import는 무조건(unconditional)입니다. 미디어에 `all`을 지정하면 같은 효과가 있습니다.

구문
--
```

@import url;
@import url list-of-media-queries;
```


where:

`url`

import할 자원의 위치를 나타내는 `<string>` (en-US) 또는 `<uri>()` (en-US)입니다. URL은 절대 또는 상대일 수 있습니다. URL은 실제로 파일에 지정할 필요는 없음을 주의하세요; 그냥 패키지 명 및 일부를 지정할 수 있으며 적절한 파일이 자동으로 선택됩니다(가령 **chrome://communicator/skin/**). 자세한 내용은 여기를 참조.

`list-of-media-queries`

링크된 URL 내에 정의된 CSS 규칙의 적용을 조절하는 쉼표 구분된 미디어 질의 목록입니다. 브라우저가 이러한 질의를 지원하지 않으면, 링크된 자원을 로드하지 않습니다.

### 형식 구문
```

@import =   
  @import [ <url> | <string> (en-US) ] [ layer | layer( <layer-name> ) ]? <import-conditions> ;    
  
<url> =   
  <url()>  |  
  <src()>    
  
<layer-name> =   
  <ident> (en-US) [ '.' <ident> (en-US) ]\*    
  
<import-conditions> =   
  [ supports( [ <supports-condition> | <declaration> ] ) ]? <media-query-list>?    
  
<url()> =   
  url( <string> (en-US) <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> (en-US) <url-modifier>\* )    
  
<supports-condition> =   
  not <supports-in-parens>                            |  
  <supports-in-parens> [ and <supports-in-parens> ]\*  |  
  <supports-in-parens> [ or <supports-in-parens> ]\*     
  
<supports-in-parens> =   
  ( <supports-condition> )  |  
  <supports-feature>        |  
  <general-enclosed>          
  
<supports-feature> =   
  <supports-decl>    
  
<general-enclosed> =   
  [ <function-token> <any-value>? ) ]  |  
  [ ( <any-value>? ) ]                   
  
<supports-decl> =   
  ( <declaration> )    
  
```

명세
--

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # at-import |

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

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

**CSS Namespaces**는 CSS에서 XML 네임스페이스를 지정할 수 있는 CSS 모듈입니다.

참고서
---

### @규칙

* `@namespace`
명세
--

| Specification |
| --- |
| CSS Namespaces Module Level 3 # declaration |
@page
=====

**`@page`** CSS @규칙은 문서를 인쇄할 때 일부 CSS 속성을 수정하는 데 쓰입니다. `@page`로 모든 CSS 속성을 바꿀 수는 없습니다. 문서의 margin, orphan, widow(앞단에서 넘어온 짤막한 행) 및 page break만 바꿀 수 있습니다. 다른 CSS 속성을 바꾸려는 시도는 무시됩니다.


```css
@page {
  margin: 1cm;
}

@page :first {
  margin: 2cm;
}
```


`@page` @규칙은 CSS 객체 모델 인터페이스 `CSSPageRule` (en-US)를 통해 액세스될 수 있습니다.

**참고:** **주의:** W3C은 viewport 관련 `<length>` 단위, `vh`, `vw`, `vmin` 및 `vmax` 처리법을 논의 중입니다. 그 동안에 `@page` @규칙 내에서 사용하지 마세요.

구문
--

### 서술자

`size` (en-US)

페이지 박스 내 포함 블록의 대상(target) 크기 및 방향을 지정합니다. 한 페이지 박스가 한 페이지 시트에 렌더링 되는 일반적인 경우에, 또한 대상(destination) 페이지 시트의 크기를 나타냅니다.

`marks`

문서에 crop 및/또는 registration 마크를 추가합니다.

`bleed`

페이지 렌더링이 잘리는(clip) 페이지 박스 너머 범위를 지정합니다.

### 형식 구문
```

@page =   
  @page <page-selector-list>? { <declaration-rule-list> }    
  
<page-selector-list> =   
  <page-selector>#    
  
<page-selector> =   
  [ <ident-token>? <pseudo-page>\* ]!    
  
<pseudo-page> =   
  ':' [ left | right | first | blank ]    
  
```

예제
--

예제를 위한 `@page`의 다양한 가상 클래스 참조해 주세요.

* `:blank` (en-US)
* `:first`
* `:left` (en-US)
* `:right` (en-US)
* `:recto` 
Experimental
* `:verso` 
Experimental
명세
--

| Specification |
| --- |
| CSS Paged Media Module Level 3 # at-page-rule |
| CSS Logical Properties and Values Level 1 # page |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
의사 클래스
======

CSS **의사 클래스**(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 `:hover`를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있습니다.


```css
/\* Any button over which the user's pointer is hovering \*/
button:hover {
  color: blue;
}
```


의사 클래스를 사용하면 문서 트리 콘텐츠와 관련된 경우 뿐만 아니라 탐색기 히스토리(`:visited` 등), 콘텐츠의 상태(특정 폼 요소에 적용한 `:checked` 등), 마우스의 위치(커서가 마우스 위인지 아닌지 알 수 있는 `:hover` 등)처럼 외부 인자와 관련된 경우에도 스타일을 적용할 수 있습니다.

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

구문
--
```

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


일반적인 클래스와 같이 여러 개의 의사 클래스를 조합해 복잡한 선택자를 만들 수 있습니다.

표준 의사 클래스 색인
------------

* `:active`
* `:any-link` (en-US) 
Experimental
* `:blank` (en-US) 
Experimental
* `:checked`
* `:current` (en-US) 
Experimental
* `:default`
* `:defined`
* `:dir()` (en-US) 
Experimental
* `:disabled`
* `:drop` 
Experimental
* `:empty` (en-US)
* `:enabled`
* `:first`
* `:first-child`
* `:first-of-type`
* `:fullscreen` 
Experimental
* `:future` (en-US) 
Experimental
* `:focus`
* `:focus-visible` (en-US) 
Experimental
* `:focus-within`
* `:has()` (en-US) 
Experimental
* `:host` (en-US)
* `:host()` (en-US)
* `:host-context()` 
Experimental
* `:hover`
* `:indeterminate` (en-US)
* `:in-range` (en-US)
* `:invalid` (en-US)
* `:is()` (en-US) 
Experimental
* `:lang()` (en-US)
* `:last-child`
* `:last-of-type` (en-US)
* `:left` (en-US)
* `:link`
* `:local-link` (en-US) 
Experimental
* `:not()`
* `:nth-child()`
* `:nth-col()` (en-US) 
Experimental
* `:nth-last-child()` (en-US)
* `:nth-last-col()` (en-US) 
Experimental
* `:nth-last-of-type()` (en-US)
* `:nth-of-type()` (en-US)
* `:only-child` (en-US)
* `:only-of-type` (en-US)
* `:optional` (en-US)
* `:out-of-range` (en-US)
* `:past` (en-US) 
Experimental
* `:placeholder-shown` (en-US) 
Experimental
* `:read-only` (en-US)
* `:read-write` (en-US)
* `:required` (en-US)
* `:right` (en-US)
* `:root`
* `:scope` (en-US)
* `:state()` 
Experimental
* `:target` (en-US)
* `:target-within` (en-US) 
Experimental
* `:user-invalid` (en-US) 
Experimental
* `:valid` (en-US)
* `:visited`
* `:where()` (en-US) 
Experimental
명세
--

| Specification |
| --- |
| HTML Standard # pseudo-classes |
| Selectors Level 4  |
| CSS Basic User Interface Module Level 4  |

같이 보기
-----

* 의사 요소
@namespace
==========

**`@namespace`** 는 CSS 스타일 시트에서 사용되는 XML 네임스페이스를 정의하는 at-규칙입니다. 정의된 네임스페이스는 오직 그 네임스페이스 내의 요소를 선택만 하기 위해 universal, type 및 attribute 선택자 (en-US)를 제한하는 데 사용될 수 있습니다. `@namespace` 규칙은 보통 여러 네임스페이스(인라인 SVG 또는 MathML 있는 HTML5 또는 다양한 어휘를 섞는 XML 등)를 포함하는 문서를 처리하는 경우에만 유용합니다.

어떤 `@namespace` 규칙이든 모든 @charset 및 @import 규칙의 다음에 오고 스타일시트에서 모든 다른 at-규칙 및 스타일 선언 (en-US)보다 앞서야 합니다.

`@namespace`는 스타일 시트를 위한 **기본 네임스페이스**를 정의하는 데 사용될 수 있습니다. 기본 네임스페이스가 정의된 경우, 모든 universal 및 type 선택자 (attribute 선택자는 아님, 아래 주의 참조) 는 그 네임스페이스 내 요소에만 적용됩니다.

`@namespace` 규칙은 또한 네임스페이스 접두어(**namespace prefix**)를 정의하는 데도 사용될 수 있습니다. universal, type 또는 attribute 선택자가 네임스페이스 접두어로 시작되는 경우, 그때 그 선택자는 요소 또는 attribute의 네임스페이스 및 이름이 일치하는 경우에만 일치합니다.

외부 요소로 알려진 HTML5에서는, 자동으로 네임스페이스가 할당됩니다. 이는 HTML 요소는 마치 XHTML 네임스페이스 (`http://www.w3.org/1999/xhtml`) 에 있는 것처럼 행동하고, 문서 어디에든 `xmlns` attribute가 없을지라도, <svg> (en-US) 및 <math> (en-US) 요소는 그들의 적절한 네임스페이스 (`http://www.w3.org/2000/svg` 및 `http://www.w3.org/1998/Math/MathML`) 가 할당됨을 뜻합니다.

**참고:** **주의:** XML에서, 접두어가 직접 attribute (가령, `xlink:href`)에 정의되지 않는 한, 그 attribute은 네임스페이스가 없습니다. 다시 말해서, attribute은 그들이 붙은 요소의 네임스페이스를 상속받지 않습니다. 이 행동을 일치시키기 위해, CSS에서 기본 네임스페이스는 attribute 선택자에 적용되지 않습니다.

구문
--


```css
/\* 기본 네임스페이스 \*/
@namespace url(XML-namespace-URL);
@namespace "XML-namespace-URL";

/\* 접두어 붙은 네임스페이스 \*/
@namespace prefix url(XML-namespace-URL);
@namespace prefix "XML-namespace-URL";
```

### 형식 구문
```

@namespace =   
  @namespace <namespace-prefix>? [ <string> (en-US) | <url> ] ;    
  
<namespace-prefix> =   
  <ident> (en-US)    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> (en-US) <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> (en-US) <url-modifier>\* )    
  
```

예제
--


```css
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

/\* 이는 모든 XHTML <a> 요소와 일치합니다, XHTML이 접두어 붙지 않은 기본 네임스페이스이기에 \*/
a {
}

/\* 이는 모든 SVG <a> 요소와 일치합니다 \*/
svg|a {
}

/\* 이는 XHTML 및 SVG <a> 요소 둘 다와 일치합니다 \*/
\*|a {
}
```

명세
--

| Specification |
| --- |
| CSS Namespaces Module Level 3 # declaration |

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

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

**`<url>`** CSS 자료형은 이미지나 글꼴 등 리소스를 가리키는 문자열을 나타냅니다. URL은 `background-image`, `cursor`, `list-style` (en-US) 등 다양한 속성에서 사용할 수 있습니다.

**참고:** **URI와 URL** URI와 URL은 다릅니다. URI는 단순히 리소스의 식별자입니다. URL은 URI의 종류 중 하나로, 리소스의 **위치**를 표현합니다. URI는 URL일 수도 있고, 리소스의 이름(URN)일 수도 있습니다.

CSS Level 1의 `url()` 함수형 표기법은 순수 URL을 나타낼 때만 사용했고, CSS Level 2에서 범위가 늘어나 URL이나 URN 등 어떤 URI도 사용할 수 있도록 바뀌었습니다. 이로써 `url()`을 사용해 `<uri>` CSS 자료형을 표현할 수 있었는데, 이상한 방식인데다 실제 CSS에서 URN은 거의 사용하지 않았으므로 불필요하다고 생각할만한 점이었습니다. CSS3에서는 혼란을 잠재우기 위해 초기의 더 좁은 정의로 돌아갔기 때문에 이제 `url()`은 `<url>`만을 나타낼 수 있습니다.

구문
--

`<url>` 자료형은 `url()` 함수형 표기법을 사용해 설정합니다. 따옴표는 선택사항으로 작은따옴표, 큰따옴표 둘 다 사용할 수 있습니다. 상대 URL도 사용할 수 있으며, 웹페이지의 URL이 아닌 스타일시트의 URL을 기준으로 사용합니다.
```

<a_css_property>: url("http://mysite.example.com/mycursor.png")
<a_css_property>: url('http://mysite.example.com/mycursor.png')
<a_css_property>: url(http://mysite.example.com/mycursor.png)
```


**참고:** Firefox 15부터, 0x7e을 초과하는 제어 문자는 URL을 따옴표로 둘러싸야 유요합니다. 자세한 내용은 Firefox bug 752230을 참고하세요.

예제
--


```css
.topbanner {
  background: url("topbanner.png") #00d no-repeat fixed;
}
```



```css
ul {
  list-style: square url(http://www.example.com/redball.png);
}
```

명세
--

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

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

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

**CSS Transitions**는 특정 CSS 속성의 값을 점진적으로 바꿀 수 있는 CSS 모듈입니다. 타이밍 함수, 시간 등 여러 속성을 통해 값이 바뀌는 방식을 조절할 수 있습니다.

참고서
---

### 속성

* `transition`
* `transition-delay` (en-US)
* `transition-duration` (en-US)
* `transition-property` (en-US)
* `transition-timing-function` (en-US)
안내서
---

CSS 트랜지션 사용하기

CSS 트랜지션을 사용하는 법이 단계별로 적혀있습니다. 각각의 CSS 트랜지션 속성의 설명과, 서로 합치면 어떻게 동작하는지 설명합니다.

명세
--

| Specification |
| --- |
| CSS Transitions  |

같이 보기
-----

* CSS Animations (en-US)를 사용하면 값의 전환을 CSS Transitions보다 더 세밀하게 조절할 수 있습니다.