font-feature-settings - CSS: Cascading Style Sheets

font-feature-settings
=====================

**`font-feature-settings`** CSS 속성은 오픈타입 폰트의 다양한 오픈타입 피처를 설정합니다.

시도해보기
-----

문법
--

```css
/\* 기본값 사용 \*/
font-feature-settings: normal;

/\* 오픈타입 피처 태그에 대해 값 설정 \*/
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;
font-feature-settings:
  "smcp",
  "swsh" 2;

/\* 전역 값 사용 \*/
font-feature-settings: inherit;
font-feature-settings: initial;
font-feature-settings: unset;
```

가능하다면 단축 속성인 `font-variant` (en-US) 속성을 사용하거나, 각각의 피처와 연관된 `font-variant-ligatures` (en-US), `font-variant-caps` (en-US), `font-variant-east-asian` (en-US), `font-variant-alternates` (en-US), `font-variant-numeric` (en-US), `font-variant-position` (en-US) 등을 사용하는 것이 `font-feature-settings`를 직접 사용하는 것에 비해 더 효율적이고, 예측 가능하게 동작하며 이해하기도 쉽습니다.

이는 `font-feature-settings`는 원래 작은 대문자(Small caps)와 같이 접근할 수 있는 다른 방법이 없는 오픈타입 피처를 제어하기 위해 만들어진 저수준의 기능이기 때문입니다.

### 값

* `normal`
    + : 기본값을 이용하여 텍스트를 표시합니다.
* `<feature-tag-value>`
    + : 텍스트를 렌더링할 때, 오픈타입 피처를 활성화하거나 비활성화하기 위해 피처 태그 목록을 렌더링 엔진에 전달합니다. 피처 태그는 4개의 ASCII 문자로 이루어진 `<string>` (en-US)이어야 합니다. 만약 태그가 네 글자보다 짧거나, 유니코드 `U+20` – `U+7E` 범위 바깥에 있는 문자를 포함한다면 속성 전체가 무효처리됩니다.값은 양의 정수 값을 가집니다. 각각 `1`, `0`과 같은 의미를 가지는 키워드 `on` 과 `off`도 사용할 수 있습니다. 아무런 값이 설정되지 않았다면 기본값은 `1`입니다. stylistic alternates와 같이 Boolean 타입이 아닌 오픈타입 피처의 경우, 값은 선택되어야 하는 글리프(글자)를 의미합니다. Boolean 타입인 경우에는 스위치라고 생각하시면 됩니다.
Formal definition
-----------------

|  |  |
| --- | --- |
| 초기값 | `normal` |
| 적용대상 | all elements and text. It also applies to `::first-letter` (en-US) and `::first-line` (en-US). |
| 상속 | yes |
| 계산 값 | as specified |
| Animation type | discrete |

Formal syntax
-------------
```

font-feature-settings =
  normal                |
  <feature-tag-value>#

<feature-tag-value> =
  <opentype-tag> [ <integer [0,∞]> | on | off ]?

<opentype-tag> =
  <string> (en-US)

```

예시
--

### 다양한 오픈타입 피처 활성화

```css
/\* 작은 대문자(small-caps) 대체 글리프를 사용합니다. \*/
.smallcaps {
  font-feature-settings: "smcp" on;
}

/\* 대문자와 소문자를 모두 작은 대문자로 변환합니다.(문장부호도 영향을 받습니다.)\*/
.allsmallcaps {
  font-feature-settings: "c2sc", "smcp";
}

/\* 영문 대문자 "O"와 구분하기 위해 대각선이 그려진 숫자 0을 사용합니다. \*/
.nicezero {
  font-feature-settings: "zero";
}

/\* '역사적인' 형태를 사용하기 위해 'hist' 피처를 활성화합니다. \*/
.hist {
  font-feature-settings: "hist";
}

/\* 표준합자(common ligatures)를 비활성화 합니다. 기본값은 활성 상태입니다. \*/
.noligs {
  font-feature-settings: "liga" 0;
}

/\* 고정폭 숫자(tabular figures)를 사용합니다. \*/
td.tabular {
  font-feature-settings: "tnum";
}

/\* 자동 분수 입력을 활성화합니다. \*/
.fractions {
  font-feature-settings: "frac";
}

/\* 가능한 swash 문자 중 두번째를 사용합니다. \*/
.swash {
  font-feature-settings: "swsh" 2;
}

/\* 스타일 세트(stylistic set) 7번을 사용합니다. \*/
.fancystyle {
  font-family: Gabriola; /\* available on Windows 7, and on Mac OS \*/
  font-feature-settings: "ss07";
}
```

명세서
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-feature-settings-prop |

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

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

See also
--------

* `font-display`
* `font-family` (en-US)
* `font-stretch` (en-US)
* `font-style` (en-US)
* `font-weight` (en-US)
* `font-variant` (en-US)
* `font-variation-settings` (en-US)
* `src` (en-US)
* `unicode-range` (en-US)
* OpenType Feature Tags list
* Using the whole font
*(**Note:** The `-moz` syntax is the old one. On Gecko, use the `-ms` syntax but with `-moz`.)*


text-align - CSS: Cascading Style Sheets

text-align
==========

CSS **`text-align`** 속성은 블록 요소나 표의 칸 상자의 가로 정렬을 설정합니다. 즉 `vertical-align`과 동일하나 세로가 아닌 가로 방향으로 동작합니다.

시도해보기
-----

구문
--

```css
/\* 키워드 값 \*/
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

/\* 표 열의 문자 기반 정렬 \*/
text-align: ".";
text-align: "." center;

/\* 블록 정렬 값 (비표준 구문) \*/
text-align: -moz-center;
text-align: -webkit-center;

/\* 전역 값 \*/
text-align: inherit;
text-align: initial;
text-align: unset;
```

`text-align` 속성은 다음 방법 중 하나를 사용해 지정합니다.

* `start`, `end`, `left`, `right`, `center`, `justify`, `justify-all`, `match-parent` 키워드 중 하나.
* `<string>` 값만 사용. 다른 값은 `right`을 사용하게 됩니다.
* 키워드 값과 `<string>` 값 모두 사용.
### 값

`start`
Experimental

쓰기 방식이 좌횡서면 `left`와 같고, 우횡서면 `right`과 같습니다.

`end`
Experimental

쓰기 방식이 좌횡서면 `right`과 같고, 우횡서면 `left`와 같습니다.

`left`

인라인 콘텐츠를 줄 상자의 왼쪽 모서리로 정렬합니다.

`right`

인라인 콘텐츠를 줄 상자의 오른쪽 모서리로 정렬합니다.

`center`

인라인 콘텐츠를 줄 상자의 가운데로 정렬합니다.

`justify`

인라인 콘텐츠를 양쪽 정렬합니다. 마지막 줄을 제외하고, 줄 상자의 왼쪽과 오른쪽 끝에 텍스트를 맞추기 위해 사이 공간을 띄웁니다.

`justify-all`
Experimental

`justify`와 같지만 마지막 줄에도 적용합니다.

`match-parent`
Experimental

`inherit`과 비슷하지만, `start`와 `end` 값을 부모의 `direction` (en-US)에 맞춰 적절한 `left`와 `right` 값으로 치환합니다.

`<string>` (en-US)
Experimental

표 칸에 적용할 경우, 칸의 콘텐츠를 해당 문자에 맞춰 정렬합니다.

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

양쪽 정렬 적용 시 생기는 불규칙한 여백은 난독증 등 인지력 저하를 겪고 있는 사용자에게 문제가 될 수 있습니다.

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

|  |  |
| --- | --- |
| 초기값 | `start`, or a nameless value that acts as `left` if `direction` (en-US) is `ltr`, `right` if `direction` (en-US) is `rtl` if `start` is not supported by the browser. |
| 적용대상 | block containers |
| 상속 | yes |
| 계산 값 | as specified, except for the `match-parent` value which is calculated against its parent's `direction` value and results in a computed value of either `left` or `right` |
| Animation type | discrete |

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

text-align =
  start         |
  end           |
  left          |
  right         |
  center        |
  justify       |
  match-parent  |
  justify-all

```

예제
--

### 왼쪽 정렬

#### HTML

```html
<p class="example">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
```

#### CSS

```css
.example {
  text-align: left;
  border: solid;
}
```

#### 결과

### 가운데 정렬

#### HTML

```html
<p class="example">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
```

#### CSS

```css
.example {
  text-align: center;
  border: solid;
}
```

#### 결과

### 양쪽 정렬

#### HTML

```html
<p class="example">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
```

#### CSS

```css
.example {
  text-align: justify;
  border: solid;
}
```

#### 결과

### 참고

인라인 콘텐츠를 가운데 정렬하지 않고 자신을 정렬하는 법은 `margin`을 `auto`로 설정하는 것입니다.

```css
.something {
  margin: auto;
}
```

```css
.something {
  margin: 0 auto;
}
```

```css
.something {
  margin-left: auto;
  margin-right: auto;
}
```

명세
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # text-align |
| CSS Text Module Level 3 # text-align-property |

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

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

같이 보기
-----

* `margin: auto`, `margin-left: auto`, `vertical-align`


initial - CSS: Cascading Style Sheets

initial
=======

CSS **`initial`** 키워드는 속성의 초깃값(기본값)을 요소에 적용합니다. 초깃값은 브라우저가 지정합니다. 모든 속성에서 사용할 수 있으며, `all`에 지정할 경우 모든 CSS 속성을 초깃값으로 재설정합니다.

**참고:** 상속 속성의 초깃값은 예상치 못한 값일 수도 있습니다. 따라서, `inherit`, `unset`, `revert` 키워드의 사용을 대신 고려해보세요.

예제
--

#### HTML

```html
<p>
  <span>This text is red.</span>
  <em>This text is in the initial color (typically black).</em>
  <span>This is red again.</span>
</p>
```

#### CSS

```css
p {
  color: red;
}

em {
  color: initial;
}
```

명세
--

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

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

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

참조
--

* `inherit`, `unset`, `revert`, `all`


border-image-repeat - CSS: Cascading Style Sheets

border-image-repeat
===================

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-repeat`** CSS 속성은 원본 이미지의 모서리 영역을 요소의 테두리 이미지 크기에 맞춰 조절할 때 사용할 방법을 지정합니다.

시도해보기
-----

구문
--

```css
/\* 키워드 값 \*/
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;

/\* 세로방향 | 가로방향 \*/
border-image-repeat: round stretch;

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

`border-image-repeat` 속성은 한 개 또는 두 개의 값을 사용해 지정할 수 있습니다.

* **한 개의 값**을 지정하면 **모든 네 면**이 같은 방식을 사용합니다.
* **두 개의 값**을 지정하면, 첫 번째 값은 **위와 아래**, 두 번째 값은 **왼쪽과 오른쪽 면**의 방식을 지정합니다.
### 값

`stretch`

원본 이미지의 모서리 영역을 늘리거나 줄여 간격을 채웁니다.

`repeat`

원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 마지막 이미지는 잘릴 수 있습니다.

`round`

원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 늘어나거나 줄어들 수 있습니다.

`space`

원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 각 타일에 균등하게 공백을 배치합니다.

### 형식 구문
```

border-image-repeat =
  [ stretch | repeat | round | space ]{1,2}

```

예제
--

### CSS

```css
#bordered {
  width: 12rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 40px solid;
  border-image: url("border.png") 27;
  border-image-repeat: stretch; /\* 라이브 샘플에서 바꿀 수 있습니다 \*/
}
```

```
<div id="bordered">저한테 다양한 테두리 반복 속성을 써보세요!</div>

<select id="repetition">
  <option value="stretch">stretch</option>
  <option value="repeat">repeat</option>
  <option value="round">round</option>
  <option value="space">space</option>
  <option value="stretch repeat">stretch repeat</option>
  <option value="space round">space round</option>
</select>
```

```
var repetition = document.getElementById("repetition");
repetition.addEventListener("change", function (evt) {
  document.getElementById("bordered").style.borderImageRepeat =
    evt.target.value;
});
```

명세
--

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

|  |  |
| --- | --- |
| 초기값 | `stretch` |
| 적용대상 | all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | discrete |

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

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


계산값 - CSS: Cascading Style Sheets

계산값
===

CSS 속성의 **계산값**은 상속 과정에서 부모가 자식에게 물려주는 값을 말합니다. 계산값은 지정값으로부터 다음 방법을 통해 구합니다.

* 특수값인 `inherit`, `initial`, `unset`, `revert`를 처리하여.
* 각 속성 정의 표의 "Computed value" 항목이 가리키는 연산을 수행하여.

계산값을 구하기 위한 연산은 보통 상댓값(`em` 단위나 백분율 등)을 절댓값으로 변환하는 작업을 수반합니다. 예컨대 요소가 `font-size: 1px`과 `padding-top: 2em`을 가진다면, `padding-top`의 계산값은 글씨 크기의 두 배인 `32px`입니다.

그러나, `width`, `margin-right`, `text-index`, `top`과 같이, 백분율의 값을 알아내려면 레이아웃부터 계산해야 하는 속성의 백분율 지정값은 백분율 계산값이 됩니다. 추가로, `line-height` 속성의 단위 없는 값도 그대로 계산값이 됩니다. 이렇게 남겨진 상대적 계산값은 사용값을 구할 때 절댓값이 됩니다.

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

명세
--

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

같이 보기
-----

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


overflow - CSS: Cascading Style Sheets

overflow
========

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`overflow`** CSS 단축 속성은 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락 (en-US)에 맞출 수 없을 때의 처리법을 지정합니다. `overflow-x` (en-US), `overflow-y` (en-US)의 값을 설정합니다.

시도해보기
-----

적용 가능한 방법은 잘라내기, 스크롤바 노출, 넘친 콘텐츠 그대로 노출 등이 있습니다.

`visible`(기본값)이 아닌 다른 값으로 `overflow` 속성을 사용할 경우 새로운 블록 서식 문맥 (en-US)을 생성합니다. 이는 기술적인 요구사항으로, 만약 스크롤하는 요소와 float이 교차한다면, 각 스크롤 단계마다 내용물을 강제적으로 다시 감싸게 될 것입니다. 이는 결국 스크롤 속도를 느리게 할 것입니다.

`overflow` 속성이 효력을 갖기 위해선 반드시 블록 레벨 컨테이너의 높이(`height` 또는 `max-height`)를 설정하거나, `white-space`를 `nowrap`으로 설정해야 합니다.

**참고:** 하나의 축을 `visible`(기본값)로 하고, 다른 축에는 다른 값을 지정할 경우 `visible`이 `auto`처럼 동작합니다.

**참고:** JavaScript `Element.scrollTop` (en-US) 속성을 사용하면 요소의 `overflow`가 `hidden`일 때도 스크롤할 수 있습니다.

구문
--

```css
/\* 키워드 값 \*/
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;
overflow: hidden visible;

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

`overflow` 속성은 아래의 키워드 값을 하나 또는 두 개 사용해 지정합니다. 두 개를 사용한 경우 첫 번째 값은 `overflow-x`, 두 번째 값은 `overflow-y`를 지정합니다. 하나만 사용하면 지정한 값을 양 축 모두에 적용합니다.

### 값

`visible`

콘텐츠를 자르지 않으며 안쪽 여백 상자 밖에도 그릴 수 있습니다.

`hidden`

콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라냅니다. 스크롤바를 제공하지 않고, 스크롤할 방법(드래그, 마우스 휠 등)도 지원하지 않습니다. 코드를 사용해 스크롤할 수는 있으므로 (`offsetLeft` 속성 설정 등), 이 상태의 요소도 스크롤 컨테이너입니다.

`clip`
Experimental

`hidden`과 마찬가지로, 콘텐츠를 안쪽 여백 상자에 맞춰 자릅니다. 그러나 `clip`은 코드를 사용한 스크롤링도 방지하므로 어떠한 스크롤도 불가능합니다. 이 상태의 요소는 스크롤 컨테이너가 아니며, 새로운 블록 서식 문맥도 생성하지 않습니다. 서식 문맥이 필요하다면 `display:flow-root` (en-US)을 사용할 수 있습니다.

`scroll`

콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라냅니다. 브라우저는 콘텐츠를 실제로 잘라냈는지 여부를 따지지 않고 항상 스크롤바를 노출하므로 내용의 변화에 따라 스크롤바가 생기거나 사라지지 않습니다. 프린터는 여전히 넘친 콘텐츠를 출력할 수도 있습니다.

`auto`

사용자 에이전트가 결정합니다. 콘텐츠가 안쪽 여백 상자에 들어간다면 `visible`과 동일하게 보이나, 새로운 블록 서식 문맥을 생성합니다. 데스크톱 브라우저의 경우 콘텐츠가 넘칠 때 스크롤바를 노출합니다.

`overlay`
지원이 중단되었습니다

`auto`와 동일하게 동작하지만, 스크롤바가 공간을 차지하는 대신 콘텐츠 위에 위치합니다. Webkit(Safari 등)과 Blink(Chrome 또는 Opera 등) 기반 브라우저만 지원합니다.

### 형식 구문
```

overflow =
  <'overflow-block'>{1,2}

```

예제
--

```css
p {
  width: 12em;
  height: 6em;
  border: dotted;
  overflow: visible; /\* content is not clipped \*/
}
```

`visible` (default)
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

```css
p {
  overflow: hidden; /\* no scrollbars are provided \*/
}
```

`overflow: hidden`
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

```css
p {
  overflow: scroll; /\* always show scrollbars \*/
}
```

`overflow: scroll`
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

```css
p {
  overflow: auto; /\* append scrollbars if necessary \*/
}
```

`overflow: auto`
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

명세
--

| Specification |
| --- |
| CSS Overflow Module Level 3 # propdef-overflow |

|  |  |
| --- | --- |
| 초기값 | `visible` |
| 적용대상 | Block-containers, flex containers, and grid containers |
| 상속 | no |
| 계산 값 | as each of the properties of the shorthand:* `overflow-x` (en-US): as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` (en-US) or `overflow-y` (en-US) is neither `visible` nor clip
* `overflow-y` (en-US): as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` (en-US) or `overflow-y` (en-US) is neither `visible` nor clip
 |
| Animation type | discrete |

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

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

같이 보기
-----

* 관련 CSS 속성: `text-overflow` (en-US), `white-space`, `overflow-x` (en-US), `overflow-y` (en-US), `clip` (en-US), `display` (en-US)


사용값 - CSS: Cascading Style Sheets

사용값
===

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)
    + 값 정의 구문
    + 단축 속성
    + 대체 요소


position - CSS: Cascading Style Sheets

position
========

CSS **`position`** 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. `top` (en-US), `right` (en-US), `bottom` (en-US), `left` (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다.

시도해보기
-----

구문
--

`position` 속성은 아래의 목록에서 하나의 키워드 값을 선택해 지정할 수 있습니다.

### 값

`static`

요소를 일반적인 문서 흐름에 따라 배치합니다. `top` (en-US), `right` (en-US), `bottom` (en-US), `left` (en-US), `z-index` 속성이 아무런 영향도 주지 않습니다. 기본값입니다.

`relative`

요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 `top`, `right`, `bottom`, `left`의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 `static`일 때와 같습니다.

`z-index`의 값이 `auto`가 아니라면 새로운 쌓임 맥락을 생성합니다. `table-*-group`, `table-row`, `table-column`, `table-cell`, `table-caption` 요소에 적용했을 때의 작동 방식은 정의되지 않았습니다.

`absolute`

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼습니다. 최종 위치는 `top`, `right`, `bottom`, `left` 값이 지정합니다.

`z-index`의 값이 `auto`가 아니라면 새로운 쌓임 맥락을 생성합니다. 절대 위치 지정 요소의 바깥 여백은 서로 상쇄되지 않습니다.

`fixed`

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치합니다. 단, 요소의 조상 중 하나가 `transform`, `perspective`, `filter` 속성 중 어느 하나라도 `none`이 아니라면 (CSS Transforms 명세 참조) 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼습니다. (`perspective`와 `filter`의 경우 브라우저별로 결과가 다름에 유의) 최종 위치는 `top`, `right`, `bottom`, `left` 값이 지정합니다.

이 값은 항상 새로운 쌓임 맥락을 생성합니다. 문서를 인쇄할 때는 해당 요소가 모든 페이지의 같은 위치에 출력됩니다.

`sticky`

요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상) 을 기준으로 `top`, `right`, `bottom`, `left`의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다.

이 값은 항상 새로운 쌓임 맥락을 생성합니다. 끈끈한 요소는 "스크롤 동작"(`overflow`가 `hidden`, `scroll`, `auto` 혹은 `overlay`)이 존재하는 가장 가까운 조상에 달라붙으며, 사실 그 조상은 스크롤 불가하며 실제로 스크롤 가능한 조상이 따로 존재할 경우 "끈끈한" 동작을 보이지 않는 점에 주의하세요. (W3C CSSWG의 Github 이슈 참조)

설명
--

### 배치 유형

* **위치 지정 요소**란 `position`의 계산값이 `relative`, `absolute`, `fixed`, `sticky` 중 하나인 요소입니다. 즉, 값이 `static`이 아닌 모든 요소를 말합니다.
* **상대 위치 지정 요소**는`position`의 계산값이 `relative`인 요소입니다. `top` (en-US)과 `bottom` (en-US)은 원래 위치에서의 세로축 거리를, `left` (en-US)와 `right` (en-US)은 원래 위치에서의 가로축 거리를 지정합니다.
* **절대 위치 지정 요소**는`position`의 계산값이 `absolute` 또는 `fixed`인 요소입니다.`top` (en-US), `right` (en-US), `bottom` (en-US), `left` (en-US)는 요소의 컨테이닝 블록(위치의 기준점이 되는 조상 요소) 모서리로부터의 거리를 지정합니다. 요소가 바깥 여백을 가진다면 거리에 더합니다. 절대 위치 지정 요소는 새로운 블록 서식 맥락 (en-US)을 생성합니다.
* **끈끈한 위치 지정 요소**는 `position`의 계산값이 `sticky`인 요소입니다. 평소에는 상대 위치 지정 요소로 처리하지만, 컨테이닝 블록이 자신의 플로우 루트(또는, 스크롤 컨테이너)에서 지정한 임계값(`top` (en-US) 등으로 지정)을 넘으면 마치 `fixed`처럼 화면에 고정합니다. 고정 상태는 컨테이닝 블록의 반대편 모서리를 만나면 해제됩니다.

대부분의 경우, `height`와 `width`가 `auto`로 지정된 절대 위치 지정 요소는 자신의 콘텐츠에 맞춰 크기가 바뀝니다. 반면 비대체 절대 위치 지정 요소는 `top` (en-US)과 `bottom` (en-US)을 지정하고 `height`는 지정하지 않으면 (즉, `auto`로 두면) 사용 가능한 수직 공간을 가득 채웁니다. 마찬가지로 `left` (en-US)와 `right` (en-US)을 지정하고, `width`는 `auto`로 두면 사용 가능한 수평 공간을 가득 채웁니다.

위에서 설명한 경우(공간을 꽉 채우는 경우)가 아니라면 다음 규칙을 따릅니다.

* `top`과 `bottom`을 지정한 경우(`auto`가 아닌 경우), `top`이 우선 적용됩니다.
* `left`와 `right`를 지정한 경우, `direction` (en-US)이 `ltr`(영어, 한국어 등)이면 `left`를 우선 적용하고, `direction` (en-US)이 `rtl`(페르시아어, 아랍어, 히브리어 등)이면 `right`를 우선 적용합니다.
접근성 고려사항
--------

화면을 확대해서 텍스트가 크게 보이게 했을 때 `absolute`나 `fixed`로 배치된 요소가 내용을 가리지 않도록 주의해야 합니다.

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0
### 성능 및 접근성 문제

`fixed`나 `sticky`를 포함하는 스크롤 요소가 성능 및 접근성 문제를 유발할 수 있습니다. 브라우저는 사용자가 스크롤을 할 때마다 끈끈하거나 고정인 요소를 새로운 위치에 페인트 해야 하는데, 표시해야 되는 내용의 양, 브라우저 및 기기의 성능에 따라 60 fps를 유지하지 못해 일부 민감한 사용자에게는 접근성 문제가, 다른 모두에게는 사용자 경험 악화가 생깁니다. 이 문제의 해결책 중 하나는 `will-change: transform`을 추가하여 요소를 자신만의 레이어에서 렌더링 하여 페인트 속도를 향상하고, 나아가 성능과 접근성을 높일 수 있습니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `static` |
| 적용대상 | all elements |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | discrete |
| Creates stacking context | yes |

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

position =
  static       |
  relative     |
  absolute     |
  sticky       |
  fixed        |
  <running()>

<running()> =
  running( <custom-ident> (en-US) )

```

예제
--

### 상대 위치 지정

상대적으로 배치된 요소는 문서 내에서 정상적인(normal) 위치에서 주어진 오프셋만큼 떨어지지만, 다른 요소에는 영향을 주지 않습니다. 아래 예제에서는 다른 요소들이 "Two"가 원래 위치에 있는 것처럼 배치되는 것을 확인할 수 있습니다.

#### HTML

```html
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
```

#### CSS

```css
.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}
```

### 절대 위치 지정

상대적으로 배치된 요소가 일반적인 문서 흐름에 따르는 것과 달리, 절대적으로 배치된 요소는 흐름에서 제거됩니다. 따라서 다른 요소는 그 요소가 존재하지 않는 것처럼 배치됩니다. 절대적으로 배치된 요소는 *가장 가까운 위치 지정 조상*(즉, `static`이 아닌 가장 가까운 조상)을 기준으로 배치됩니다. 그런 요소가 존재하지 않는다면, 초기 컨테이닝 블록이 기준이 됩니다.

#### HTML

```html
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
```

#### CSS

```css
.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: absolute;
  top: 20px;
  left: 20px;
  background: blue;
}
```

### 고정 위치 지정

고정 위치 지정은 절대 위치 지정과 비슷하지만, `fixed`는 요소의 컨테이닝 블록이 *뷰포트*의 초기 컨테이닝 블록이라는 점에서 다릅니다(`transform`, `perspective`, `filter` 속성이 `none`이 아닌 조상이 있다면 그 조상이 컨테이닝 블록이 됩니다. CSS Transforms Spec 참조). 따라서 스크롤에 관계 없이 화면의 특정 지점에 고정되는, "떠다니는"(floating) 요소를 생성할 수 있습니다. 아래 예제에서, "One" 상자는 페이지 위에서 80픽셀, 왼쪽에서 10픽셀 떨어진 위치에 고정됩니다. 스크롤을 하더라도, 뷰포트를 기준으로 같은 위치에 고정된 채로 유지됩니다.

#### HTML

```html
<div class="outer">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  </p>
  <div class="box" id="one">One</div>
</div>
```

#### CSS

```css
.box {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#one {
  position: fixed;
  top: 80px;
  left: 10px;
  background: blue;
}

.outer {
  width: 500px;
  height: 300px;
  overflow: scroll;
  padding-left: 150px;
}
```

### 끈끈한 위치 지정

끈끈한 위치 지정은 상대와 고정 위치 지정을 합친 것으로 생각할 수 있습니다. 끈끈하게 배치된 요소는 상대적으로 배치된 요소로 취급하지만, 주어진 경계선을 지나면 고정 위치를 갖게 됩니다. 예를 들어,

```css
#one {
  position: sticky;
  top: 10px;
}
```

이때 id가 one인 요소는 그 위치가 위에서 10픽셀 떨어진 위치까지는 상대적으로 배치되지만, 그 경계를 넘어가면 위에서 10픽셀 떨어진 위치에 고정됩니다.

끈끈한 위치 지정은 흔히 사전순 리스트의 레이블에 사용할 수 있습니다. 예를 들어, "ㄴ" 레이블은 "ㄱ"으로 시작하는 목록이 화면 밖으로 나갈 때까지는 그 바로 밑에 표시되고, 그 다음에는 "ㄱ"을 따라 화면 밖으로 나가는 대신 화면 위에 고정시킬 수 있습니다. 그러다가 "ㄴ" 목록이 화면 바깥으로 나가면 그 자리에 "ㄷ" 레이블을 고정시킬 수 있습니다.

끈끈한 위치 지정이 의도한 대로 동작하게 하려면 `top`, `right`, `bottom`, `left` 중 적어도 하나의 임계값을 설정해야 합니다. 임계값을 설정하지 않으면 상대 위치 지정과 다를 바가 없습니다.

#### HTML

```html
<dl>
  <div>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </div>
  <div>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </div>
  <div>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </div>
  <div>
    <dt>T</dt>
    <dd>Ted Leo & The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </div>
</dl>
```

#### CSS

```css
\* {
  box-sizing: border-box;
}

dl > div {
  background: #fff;
  padding: 24px 0 0 0;
}

dt {
  background: #b8c1c8;
  border-bottom: 1px solid #989ea4;
  border-top: 1px solid #717d85;
  color: #fff;
  font:
    bold 18px/21px Helvetica,
    Arial,
    sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font:
    bold 20px/45px Helvetica,
    Arial,
    sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #ccc;
}
```

명세
--

| Specification |
| --- |
| CSS Positioned Layout Module Level 3 # position-property |

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

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


inherit - CSS: Cascading Style Sheets

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: Cascading Style Sheets

: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: Cascading Style Sheets

<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> - CSS: Cascading Style Sheets

<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: Cascading Style Sheets

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*


<filter-function> - CSS: Cascading Style Sheets

<filter-function>
=================

CSS **`<filter-function>`** 자료형은 입력 이미지의 모습을 변형할 수 있는 그래픽 효과를 나타냅니다. `filter`와 `backdrop-filter` 속성에서 사용합니다.

구문
--

`<filter-function>` 자료형은 다음 목록의 필터 중 하나를 사용해 지정할 수 있습니다. 각 함수는 매개변수를 받아야 하며, 유효하지 않은 값을 전달하면 필터를 적용하지 않습니다.

`blur()`

이미지를 흐리게 만듭니다.

`brightness()`

이미지의 밝기를 조절합니다.

`contrast()`

이미지의 대비를 조절합니다.

`drop-shadow()` (en-US)

이미지의 뒤에 그림자를 적용합니다.

`grayscale()` (en-US)

이미지를 흑백으로 변환합니다.

`hue-rotate()` (en-US)

이미지의 전체 색조를 조절합니다.

`invert()` (en-US)

이미지의 색을 반전합니다.

`opacity()` (en-US)

이미지의 투명도를 조절합니다.

`saturate()` (en-US)

이미지의 채도를 조절합니다.

`sepia()` (en-US)

이미지에 세피아 톤을 적용합니다.

예제
--

### 필터 함수 비교

이 예제는 간단한 그래픽과 함께 여러 가지 필터를 선택할 수 있는 선택 메뉴와, 필터의 값을 조절할 수 있는 슬라이더를 제공합니다. 컨트롤을 조절하면 필터가 실시간으로 변화하므로 각 필터의 효과를 편리하게 알아볼 수 있습니다.

#### HTML

```html
<div></div>
<ul>
  <li>
    <label for="filter-select">필터 함수 선택:</label>
    <select id="filter-select">
      <option selected>blur</option>
      <option>brightness</option>
      <option>contrast</option>
      <option>drop-shadow</option>
      <option>grayscale</option>
      <option>hue-rotate</option>
      <option>invert</option>
      <option>opacity</option>
      <option>saturate</option>
      <option>sepia</option>
    </select>
  </li>
  <li><input type="range" /><output></output></li>
  <li>
    <p>Current value: <code></code></p>
  </li>
</ul>
```

#### CSS

```css
div {
  width: 300px;
  height: 300px;
  background: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png)
    no-repeat center;
}

li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

input {
  width: 60%;
}

output {
  width: 5%;
  text-align: center;
}

select {
  width: 40%;
  margin-left: 2px;
}
```

#### JavaScript

```js
const selectElem = document.querySelector("select");
const divElem = document.querySelector("div");
const slider = document.querySelector("input");
const output = document.querySelector("output");
const curValue = document.querySelector("p code");

selectElem.addEventListener("change", () => {
  setSlider(selectElem.value);
  setDiv(selectElem.value);
});

slider.addEventListener("input", () => {
  setDiv(selectElem.value);
});

function setSlider(filter) {
  if (filter === "blur") {
    slider.value = 0;
    slider.min = 0;
    slider.max = 30;
    slider.step = 1;
    slider.setAttribute("data-unit", "px");
  } else if (
    filter === "brightness" ||
    filter === "contrast" ||
    filter === "saturate"
  ) {
    slider.value = 1;
    slider.min = 0;
    slider.max = 4;
    slider.step = 0.05;
    slider.setAttribute("data-unit", "");
  } else if (filter === "drop-shadow") {
    slider.value = 0;
    slider.min = -20;
    slider.max = 40;
    slider.step = 1;
    slider.setAttribute("data-unit", "px");
  } else if (filter === "opacity") {
    slider.value = 1;
    slider.min = 0;
    slider.max = 1;
    slider.step = 0.01;
    slider.setAttribute("data-unit", "");
  } else if (
    filter === "grayscale" ||
    filter === "invert" ||
    filter === "sepia"
  ) {
    slider.value = 0;
    slider.min = 0;
    slider.max = 1;
    slider.step = 0.01;
    slider.setAttribute("data-unit", "");
  } else if (filter === "hue-rotate") {
    slider.value = 0;
    slider.min = 0;
    slider.max = 360;
    slider.step = 1;
    slider.setAttribute("data-unit", "deg");
  }
}

function setDiv(filter) {
  if (filter === "drop-shadow") {
    divElem.style.filter = `${selectElem.value}(${Math.round(
 slider.value,
 )}${slider.getAttribute("data-unit")} ${Math.round(
 slider.value,
 )}${slider.getAttribute("data-unit")} ${Math.round(
 Math.abs(slider.value / 2),
 )}${slider.getAttribute("data-unit")})`;
  } else {
    divElem.style.filter = `${selectElem.value}(${
 slider.value
 }${slider.getAttribute("data-unit")}`;
  }

  updateOutput();
  updateCurValue();
}

function updateOutput() {
  output.textContent = slider.value;
}

function updateCurValue() {
  curValue.textContent = `필터: ${divElem.style.filter}`;
}

setSlider(selectElem.value);
setDiv(selectElem.value);
```

#### 결과

명세서
---

| Specification |
| --- |
| Filter Effects Module Level 1 # typedef-filter-function |

같이 보기
-----

* 자료형을 사용하는 속성: `filter`, `backdrop-filter`


contain - CSS: Cascading Style Sheets

contain
=======

Baseline 2023
-------------

Newly availableSince February 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
CSS **`contain`** 속성은 특정 요소와 콘텐츠가 문서 트리의 다른 부위와 독립되어있음을 나타낼 때 사용합니다. 브라우저는 이 정보를 사용해 레이아웃, 스타일, 페인트, 크기, 또는 그 조합의 계산을 전체 페이지 DOM 대신 일부에서만 수행할 수 있으므로 뚜렷한 성능 상 이점을 얻을 수 있습니다.

`contain` 속성은 위젯 내부 콘텐츠가 외부에 부작용을 끼치는 것을 방지할 수 있으므로 서로 독립된 많은 양의 위젯이 존재하는 페이지에서 유용합니다.

**참고:** `paint`, `strict`, `content` 값을 설정할 경우 다음을 생성합니다.

1. 새로운 컨테이닝 블록 (`position` 속성이 `absolute` 또는 `fixed`인 자손을 위함).
2. 새로운 쌓임 맥락.
3. 새로운 블록 서식 맥락 (en-US).

구문
--

```css
/\* 키워드 값 \*/
contain: none;
contain: strict;
contain: content;
contain: size;
contain: layout;
contain: style;
contain: paint;

/\* 다중 값 \*/
contain: size paint;
contain: size layout paint;

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

`contain` 속성은 다음 방법 중 하나를 사용해 지정합니다.

* `none`, `strict`, `content` 키워드 중 하나를 사용.
* `size`, `layout`, `style`, `paint` 키워드를 임의 순서로 하나 이상 사용.
### 값

`none`

아무것도 격리하지 않고 요소를 평범하게 렌더링합니다.

`strict`

`style`을 제외한 모든 격리 규칙을 적용합니다. `contain: size layout paint`와 같습니다.

`content`

`size`와 `style`을 제외한 모든 격리 규칙을 적용합니다. `contain: layout paint`와 같습니다.

`size`

요소의 크기를 계산할 때 자손의 크기는 고려하지 않아도 됨을 나타냅니다.

`layout`

요소 외부의 어느 것도 내부 레이아웃에 영향을 주지 않고, 그 반대도 성립함을 나타냅니다.

`style`

요소 자신과 자손 외에도 영향을 주는 속성이라도 그 영향 범위가 자신을 벗어나지 않음을 나타냅니다. 이 값은 명세에서 "제외 고려" 대상이므로 모든 브라우저가 지원하지 않을 수도 있음을 참고하세요.

`paint`

요소의 자손이 자신의 범위 바깥에 그려지지 않음을 나타냅니다. 이 값을 지정한 요소의 경우, 요소가 화면 밖에 위치할 경우 당연히 그 안의 자손도 화면 안에 들어오지 않을 것이므로 브라우저는 그 안의 요소를 고려하지 않아도 됩니다. 그러나 만약 자손이 범위 밖으로 넘칠 경우에는 요소의 테두리 상자에서 잘라냅니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `none` |
| 적용대상 | all elements |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | Not animatable |

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

contain =
  none                                  |
  strict                                |
  content                               |
  [ size || layout || style || paint ]

```

예제
--

### 간단한 레이아웃

다음 마크업은 각각의 콘텐츠를 가진 여러 개의 글을 가정합니다.

```html
<h1>My blog</h1>
<article>
  <h2>Heading of a nice article</h2>
  <p>Content here.</p>
</article>
<article>
  <h2>Another heading of another article</h2>
  <img src="graphic.jpg" alt="photo" />
  <p>More content here.</p>
</article>
```

각 `<article>`과 `<img>`엔 테두리를 부여하고, 이미지는 모두 좌측으로 플로팅합니다.

```css
img {
  float: left;
  border: 3px solid black;
}

article {
  border: 1px solid black;
}
```

### 플로팅 간섭

첫 번째 글의 마지막에 다른 이미지를 넣게 되면 많은 양의 DOM 트리가 다시 레이아웃이나 페인트 과정을 거쳐야 하며, 두 번째 글의 레이아웃에도 간섭하게 됩니다.

```html
<h1>My blog</h1>
<article>
  <h2>Heading of a nice article</h2>
  <p>Content here.</p>
  <img src="i-just-showed-up.jpg" alt="social" />
</article>
<article>
  <h2>Another heading of another article</h2>
  <img src="graphic.jpg" alt="photo" />
  <p>More content here.</p>
</article>
```

```
img {
  float: left;
  border: 3px solid black;
}

article {
  border: 1px solid black;
}
```

아래의 라이브 샘플에서, 플로팅 작동 방식으로 인해 첫 번째 이미지가 두 번째 글 안으로 들어가버린 모습을 볼 수 있습니다.

### `contain`으로 수정하기

각각의 `article`에 `contain: content`를 지정해주면, 새로운 요소를 추가할 때 그 하위 트리만 계산하고 바깥은 고려하지 않아도 된다는 것을 브라우저가 인식합니다.
```

<h1>My blog</h1>
<article>
  <h2>Heading of a nice article</h2>
  <p>Content here.</p>
  <img src="i-just-showed-up.jpg" alt="social" />
</article>
<article>
  <h2>Another heading of another article</h2>
  <img src="graphic.jpg" alt="photo" />
  <p>More content here.</p>
</article>
```

```css
img {
  float: left;
  border: 3px solid black;
}

article {
  border: 1px solid black;
  contain: content;
}
```

또한 첫 번째 이미지가 플로팅으로 인해 아래로 넘어가지 않고, 컨테이너 요소의 범위 안에 머무르는 것도 확인할 수 있습니다.

명세
--

| Specification |
| --- |
| CSS Containment Module Level 2 # contain-property |

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

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

같이 보기
-----

* CSS Containment
* CSS `position` 속성


flex-shrink - CSS: Cascading Style Sheets

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: Cascading Style Sheets

클래스 선택자
=======

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 - CSS: Cascading Style Sheets

@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: Cascading Style Sheets

CSS Namespaces
==============

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

참고서
---

### @규칙

* `@namespace`
명세
--

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


justify-content - CSS: Cascading Style Sheets

justify-content
===============

CSS의 **`justify-content`** 속성은 브라우저가 콘텐츠 항목 사이와 주변의 공간을 플렉스 컨테이너에서는 main-axis, 그리고 그리드 컨테이너에서는 인라인 축을 기준으로 어떻게 정렬할 것인지를 정의합니다.

아래의 상호작용하는 예제는 그리드 레이아웃을 사용할 때의 일부 값들을 설명합니다.

시도해보기
-----

자동 바깥 여백과 길이가 적용된 이후에 정렬이 적용됩니다. 즉, Flexbox layout 안에서 최소 하나의 플렉스 요소가 `0`이 아닌 `flex-grow` 값을 갖는다면, 더 이상 사용할 수 있는 공간이 없기 때문에 아무 효과가 없습니다.

구문
--

```css
/\* 위치 기준 정렬 \*/
justify-content: center; /\* 항목들을 축의 중심 부분에 정렬합니다. \*/
justify-content: start; /\* 항목들을 축의 시작 부분에 정렬합니다.. \*/
justify-content: end; /\* 항목들을 축의 끝 부분에 정렬합니다. \*/
justify-content: flex-start; /\* 플렉스 항목들을 축의 시작 부분에 정렬합니다. \*/
justify-content: flex-end; /\* 플렉스 항목들을 축의 끝 부분에 정렬합니다. \*/
justify-content: left; /\* 항목들을 축의 왼쪽 부분에 정렬합니다. \*/
justify-content: right; /\* 항목들을 축의 오른쪽 부분에 정렬합니다. \*/

/\* 기준선 정렬 \*/
/\* justify-content은 기준선에 대한 값은 갖지 않습니다. \*/

/\* 기본 정렬 \*/
justify-content: normal;

/\* 분산 정렬 \*/
justify-content: space-between; /\* 항목들을 고르게 정렬합니다.
 첫 항목은 시작 부분에 밀착되어 정렬됩니다.
 마지막 항목은 끝 부분에 밀착되어 정렬됩니다. \*/
justify-content: space-around; /\* 항목들을 고르게 정렬합니다.
 각 항목들은 양쪽 여백의 절반만큼 나누어 갖습니다. \*/
justify-content: space-evenly; /\* 항목들을 고르게 정렬합니다.
 각 항목들은 서로 간에 동일한 여백을 갖습니다. \*/
justify-content: stretch; /\* 항목들을 고르게 정렬합니다.
 'auto' 크기로 설정된 항목들을 컨테이너에 맞게 늘립니다. \*/

/\* 오버플로우 정렬 \*/
justify-content: safe center;
justify-content: unsafe center;

/\* 전역 값들 \*/
justify-content: inherit;
justify-content: initial;
justify-content: revert;
justify-content: revert-layer;
justify-content: unset;
```

### 값

`start`

항목들은 정렬 컨테이너의 메인 축을 따라 시작 부분의 가장자리에 밀착되어 정렬됩니다.

`end`

항목들은 정렬 컨테이너의 메인 축을 따라 끝 부분의 가장자리에 밀착되어 정렬됩니다.

`flex-start`

 항목들은 플렉스 컨테이너의 메인 축을 따라 시작 부분의 가장자리에 밀착되어 정렬됩니다.
 이 값은 플렉스 레이아웃 항목에만 적용됩니다. 플렉스 컨테이너의 자식이 아닌 항목들에 대해서 이 값은 `start`와 같이 처리됩니다.

`flex-end`

 항목들은 플렉스 컨테이너의 메인 축을 따라 끝 부분의 가장자리에 밀착되어 정렬됩니다.
 이 값은 플렉스 레이아웃 항목에만 적용됩니다. 플렉스 컨테이너의 자식이 아닌 항목들에 대해서 이 값은 `end`와 같이 처리됩니다.

`center`

항목들은 정렬 컨테이너의 메인 축을 따라 중앙 부분에 밀착되어 정렬됩니다.

`left`

항목들은 정렬 컨테이너의 왼쪽 가장자리에 밀착되어 정렬됩니다. 만약 속성의 축이 인라인 축과 평행이 아닐 경우, 이 값은 `start`와 동일하게 동작합니다.

`right`

항목들은 정렬 컨테이너의 적절한 축을 따라 오른쪽 가장자리에 밀착되어 정렬됩니다. 만약 속성의 축이 인라인 축과 평행이 아닐 경우, 이 값은 `start`와 동일하게 동작합니다.

`normal`

항목들은 마치 `justify-content` 값이 설정되지 않은 것처럼 자신들의 기본 위치에 정렬됩니다. 이 값은 그리드, 플렉스 컨테이너 안에서 `stretch`와 동일하게 동작합니다.

`baseline` `first baseline`
`last baseline`

 첫번째 혹은 마지막 베이스라인 정렬에 참여하는 방식을 명시합니다. 박스의 첫번째 혹은 마지막 기준선 집합의 정렬 기준선을 그룹 내 다른 모든 박스와 공유하는 첫번째 또는 마지막 베이스라인 집합의 선과 일치하여 정렬합니다.
 `first baseline`을 사용하는 것이 불가능 할 때 대체되는 정렬 방식은 `start`이며, `last baseline`에 대한 대체 정렬 방식은 `end`입니다.

`space-between`

항목들은 정렬 컨테이너의 메인 축을 따라 고르게 분포됩니다. 인접한 항목 사이 공간의 크기는 동일하게 유지됩니다. 첫번째 항목은 메인 축을 따르는 시작 부분의 가장자리에 밀착됩니다. 마지막 항목은 메인 축을 따르는 마지막 부분의 가장자리에 밀착됩니다.

`space-around`

항목들은 정렬 컨테이너의 메인 축을 따라 고르게 분포됩니다. 인접한 항목 사이 공간의 크기는 동일하게 유지됩니다. 첫번째 항목의 이전과 마지막 항목의 이후에 존재하는 공간은 인접한 항목 간 공간 크기의 절반을 차지합니다.

`space-evenly`

항목들은 정렬 컨테이너의 메인 축을 따라 고르게 분포됩니다. 인접항 항목간의 공간, 첫번째 항목 이전 그리고 마지막 항목의 이후 공간은 모두 동일하게 유지됩니다.

`stretch`

만약 메인 축을 따라 존재하는 항목들의 크기 합이 정렬 컨테이너의 크기보다 작다면, `auto` 크기가 지정된 아이템은 크기를 동등하게 증가시킵니다. (비례적으로 증가하지는 않습니다.) 이 때, `max-height`/`max-width` 나 기능적으로 동일한 제약 조건을 준수하여, 메인 축을 따라 전체 크기의 합이 정렬 컨테이너를 정확히 채우도록 맞춰집니다.

**참고:** `stretch` 는 플렉스 박스에서는 지원하지 않습니다.

`safe`

정렬 키워드와 함께 사용됩니다. 만약 선택된 키워드로 인해 항목들이 정렬 컨테이너를 넘치게 되어서 데이터 손실이 발생하는 경우, 항목은 정렬 모드가 `start`인 것처럼 대체되어 정렬됩니다.

`unsafe`

정렬 키워드와 함께 사용됩니다. 항목과 정렬 컨테이너 간의 상대적 크기, 그리고 데이터 손실이 일어났는지 유무와는 무관하게 주어진 정렬 값이 우선됩니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `normal` |
| 적용대상 | flex containers |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | discrete |

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

justify-content =
  normal                                              |
  <content-distribution>                              |
  <overflow-position>? [ <content-position> | left | right ]

<content-distribution> =
  space-between  |
  space-around   |
  space-evenly   |
  stretch

<overflow-position> =
  unsafe  |
  safe

<content-position> =
  center      |
  start       |
  end         |
  flex-start  |
  flex-end

```

예제
--

### 플렉스 항목 정렬하기

#### CSS

```css
#container {
  display: flex;
  justify-content: space-between; /\* 라이브 샘플에서 변경할 수 있습니다. \*/
}

#container > div {
  width: 100px;
  height: 100px;
  background: linear-gradient(-45deg, #788cff, #b4c8ff);
}
```

```
<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>
<select id="justifyContent">
  <option value="start">start</option>
  <option value="end">end</option>
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="center">center</option>
  <option value="left">left</option>
  <option value="right">right</option>
  <option value="baseline">baseline</option>
  <option value="first baseline">first baseline</option>
  <option value="last baseline">last baseline</option>
  <option value="space-between" selected>space-between</option>
  <option value="space-around">space-around</option>
  <option value="space-evenly">space-evenly</option>
  <option value="stretch">stretch</option>
</select>
```

```
const justifyContent = document.getElementById("justifyContent");
justifyContent.addEventListener("change", (evt) => {
  document.getElementById("container").style.justifyContent = evt.target.value;
});
```

#### 결과

명세서
---

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # align-justify-content |
| CSS Flexible Box Layout Module Level 1 # justify-content-property |

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

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

같이 보기
-----

* CSS Flexbox Guide: *플렉스박스의 기본 개념*
* CSS Flexbox Guide: *플렉스 컨테이너에서 항목 정렬하기*
* CSS Grid Guide: *CSS 그리드 레이아웃에서의 박스 정렬 (en-US)*
* CSS 박스 정렬 (en-US)


@page - CSS: Cascading Style Sheets

@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: Cascading Style Sheets

의사 클래스
======

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 - CSS: Cascading Style Sheets

@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.


content - CSS: Cascading Style Sheets

content
=======

CSS **`content`** 속성은 생성한 값으로 요소를 대체합니다. `content` 속성으로 추가한 요소는 "익명 대체 요소"입니다.

```css
/\* 다른 값과 조합할 수 없는 키워드 \*/
content: normal;
content: none;

/\* <image> 값 \*/
content: url("http://www.example.com/test.png");
content: linear-gradient(#e66465, #9198e5);

/\* 생성한 값의 대체 텍스트, Level 3 명세에서 추가 \*/
content: url("http://www.example.com/test.png") / "This is the alt text";

/\* 앞선 값은 모두 ::before와 ::after에만 적용 가능 \*/

/\* <string> 값 \*/
content: "prefix";

/\* <counter> 값 \*/
content: counter(chapter_counter);
content: counters(section_counter, ".");

/\* HTML 속성값으로 연결하는 attr() \*/
content: attr(value string);

/\* 언어와 요소 위치 기반 키워드 \*/
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;

/\* normal과 none을 제외하면 여러 키워드를 함께 사용할 수 있음 \*/
content: open-quote chapter_counter;

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

|  |  |
| --- | --- |
| 초기값 | `normal` |
| 적용대상 | All elements, tree-abiding pseudo-elements, and page margin boxes |
| 상속 | no |
| 계산 값 | On elements, always computes to `normal`. On `::before` (en-US) and `::after`, if `normal` is specified, computes to `none`. Otherwise, for URI values, the absolute URI; for `attr()` values, the resulting string; for other keywords, as specified. |
| Animation type | discrete |

구문
--

### 값

`none`

의사 요소를 생성하지 않음.

`normal`

`::before`와 `::after` 의사 요소인 경우 `none`.

`<string>` (en-US)

요소의 "대체 텍스트". 모든 숫자와 문자가 가능합니다. 단, 라틴계 문자가 아닌 경우 유니코드 이스케이프 시퀀스를 사용해 인코딩해야 합니다. 예를 들어, `\000A9`는 저작권 기호입니다.

`<image>`

`<url>()`이나 `<gradient>` 자료형을 사용한 `<image>`, 또는 `element()` (en-US) 함수를 사용해 가리킨, 보여줄 웹페이지의 일부.

`<counter>()` (en-US)

보통 숫자인 CSS 카운터 값.`counter()` (en-US)나 `counters()` (en-US) 함수를 사용해 지정할 수 있습니다.

`counter()` (en-US) 함수는 `counter(<var>name</var>)`과 `counter(<var>name</var>, <var>style</var>)`의 두 형태를 가지고 있습니다. 생성하는 값은 주어진 의사 요소의 현재 범위에서, 해당하는 이름을 가진 가장 안쪽 카운터의 값입니다. 지정한 스타일(기본 `decimal`)에 맞춰 서식을 적용합니다.

`counters()` (en-US) 함수 역시 `counters(<var>name</var>, <var>string</var>)'과 'counters(<var>name</var>, <var>string</var>, <var>style</var>)`의 두 형태를 가집니다. 생성하는 값은 주어진 의사 요소의 현재 범위에서, 해당하는 이름을 가진 카운터 값의 목록으로 바깥쪽부터 시작하며 주어진 문자열을 사용해 구분합니다. 지정한 스타일(기본 `decimal`)에 맞춰 서식을 적용합니다..

`attr(x)`

문자열로 변환한, 요소 속성 `x`의 값. `x` 속성이 존재하지 않으면 빈 문자열을 반환합니다. 속성명의 대소문자 구분 여부는 문서 언어에 따릅니다.

`open-quote` | `close-quote`

`quotes` (en-US) 속성에서 가져온 적절한 문자열을 사용해 대체.

`no-open-quote` | `no-close-quote`

콘텐츠는 추가하지 않고, 대신 따옴표의 중첩 단계를 증감.

### 형식 구문
```

content =
  normal                                              |
  none                                                |
  [ <content-replacement> | <content-list> ] [ / [ <string> (en-US) | <counter> ]+ ]?  |
  <element()>

<content-replacement> =
  <image>

<content-list> =
  [ <string> (en-US) | <counter()> | <counters()> | <content()> | <attr()> ]+

<counter> =
  <counter()>   |
  <counters()>

<element()> =
  element( <id-selector> )

<image> =
  <url>       |
  <gradient>

<counter()> =
  counter( <counter-name> , <counter-style>? )

<counters()> =
  counters( <counter-name> , <string> (en-US) , <counter-style>? )

<content()> =
  content( [ text | before | after | first-letter | marker ]? )

<attr()> =
  attr( <attr-name> <attr-type>? , <declaration-value>? )

<id-selector> =
  <hash-token>

<url> =
  <url()>  |
  <src()>

<counter-style> =
  <counter-style-name>  |
  <symbols()>

<attr-name> =
  [ <ident-token> '|' ]? <ident-token>

<attr-type> =
  string            |
  url               |
  ident             |
  color             |
  number            |
  percentage        |
  length            |
  angle             |
  time              |
  frequency         |
  flex              |
  <dimension-unit>

<url()> =
  url( <string> (en-US) <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> (en-US) <url-modifier>\* )

<symbols()> =
  symbols( <symbols-type>? [ <string> (en-US) | <image> ]+ )

<symbols-type> =
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed

```

예제
--

### 헤딩과 따옴표

다음 예제는 인용구 주변에 따옴표를 추가하고, 헤딩 앞에 단어 "Chapter"를 추가합니다.

#### HTML

```html
<h1>5</h1>
<p>
  According to Sir Tim Berners-Lee,
  <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet"
 >I was lucky enough to invent the Web at the time when the Internet already
    existed - and had for a decade and a half.</q
 >
  We must understand that there is nothing fundamentally wrong with building on
  the contributions of others.
</p>

<h1>6</h1>
<p>
  According to the Mozilla Manifesto,
  <q cite="http://www.mozilla.org/en-US/about/manifesto/"
 >Individuals must have the ability to shape the Internet and their own
    experiences on the Internet.</q
 >
  Therefore, we can infer that contributing to the open web can protect our own
  individual experiences on it.
</p>
```

#### CSS

```css
q {
  color: blue;
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

h1::before {
  content: "Chapter "; /\* The trailing space creates separation
 between the added content and the
 rest of the content \*/
}
```

#### 결과

### 이미지와 텍스트

다음 예제는 링크 앞에 이미지를 추가합니다. 이미지를 가져오지 못한 경우 텍스트를 대신 추가합니다.

#### HTML

```html
<a href="http://www.mozilla.org/en-US/">Mozilla Home Page</a>
```

#### CSS

```css
a::before {
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico")
    " MOZILLA: ";
  font:
    x-small Arial,
    sans-serif;
  color: gray;
}
```

#### 결과

### 클래스 사용

다음 예제는 목록의 특별한 항목 뒤에 추가 텍스트를 삽입합니다.

#### HTML

```html
<h2>Paperback Best Sellers</h2>
<ol>
  <li>Political Thriller</li>
  <li class="new-entry">Halloween Stories</li>
  <li>My Biography</li>
  <li class="new-entry">Vampire Romance</li>
</ol>
```

#### CSS

```css
.new-entry::after {
  content: " New!"; /\* The leading space creates separation
 between the added content and the
 rest of the content \*/
  color: red;
}
```

#### 결과

### 이미지와 요소 속성

다음 예제는 링크 앞에 이미지를 추가하고, 뒤에 `id` 속성의 값을 붙입니다.

#### HTML

```html
<ul>
  <li><a id="moz" href="http://www.mozilla.org/"> Mozilla Home Page</a></li>
  <li>
    <a id="mdn" href="https://developer.mozilla.org/">
      Mozilla Developer Network</a
 >
  </li>
</ul>
```

#### CSS

```css
a {
  text-decoration: none;
  border-bottom: 3px dotted navy;
}

a::after {
  content: " (" attr(id) ")";
}

#moz::before {
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico");
}

#mdn::before {
  content: url("mdn-favicon16.png");
}

li {
  margin: 1em;
}
```

#### 결과

### 요소 대체

다음 예제는 요소의 콘텐츠를 이미지로 대체합니다. `<url>()` 또는 `<image>` 사용하면 콘텐츠를 대체합니다. 요소를 대체했으므로 `::before`나 `::after`는 생성하지 않습니다.

#### HTML

```html
<div id="replaced">Mozilla</div>
```

#### CSS

```css
#replaced {
  content: url("mdn.svg");
}

#replaced::after {
  /\* will not show if element replacement is supported \*/
  content: " (" attr(id) ")";
}
```

#### 결과

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

CSS로 생성한 콘텐츠는 DOM이 포함하지 않고, 접근성 트리에도 들어가지 않습니다. 따라서 특정 접근성 기술/브라우저 조합이 내용을 표현하지 않을 수 있습니다. 콘텐츠가 포함한 정보가 페이지의 목적을 이해하는 것에 중요하다면 주 문서로 포함하는 것이 좋습니다.

* Accessibility support for CSS generated content – Tink
* Explanation of WCAG, Guideline 1.3 – MDN (en-US)
* Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
명세
--

| Specification |
| --- |
| CSS Generated Content Module Level 3 # content-property |

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

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

같이 보기
-----

* `::after`
* `::before` (en-US)
* `::marker` (en-US)
* `quotes` (en-US)
* `url()` 함수


@supports - CSS: Cascading Style Sheets

@supports
=========

**`@supports`** CSS @규칙은 주어진 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 할 수 있는 방법을 제공합니다. 이를 기능 쿼리(feature query)라고 부릅니다. `@supports`는 스타일의 최상위 단계, 또는 다른 조건부 그룹 규칙에 중첩해 위치할 수 있습니다.

```css
@supports (display: grid) {
  div {
    display: grid;
  }
}
```

```css
@supports not (display: grid) {
  div {
    float: right;
  }
}
```

JavaScript에서, `@supports`는 CSS 객체 모델 인터페이스 `CSSSupportsRule` (en-US)로 접근할 수 있습니다.

구문
--

`@supports` @규칙은 하나의 선언 블록을 특정 기능의 브라우저 지원 조건과 연결할 수 있습니다. *지원 조건은 하나 이상의 키-값 쌍을 논리곱(`and`), 논리합(`or`), 부정(`not`으로 연결해 구성합니다. 괄호로 묶어 우선순위를* 지정할 수도 있습니다.

### 선언 구문

가장 기본적인 지원 조건은 단순한 선언(속성 이름과 그 값)입니다. 선언은 괄호로 묶여야 합니다. 다음 예제는 브라우저가 `transform-origin` (en-US) 속성의 값으로 `5% 5%`가 유효하다고 여길 때 통과합니다.

```css
@supports (transform-origin: 5% 5%) {
}
```

### 함수 구문

두 번째 기본적인 지원 조건은 지원 함수로, 모든 브라우저가 함수 구문을 지원하지만 지원 함수 자체는 아직 표준화 중입니다.

#### `selector()`
Experimental

브라우저가 주어진 선택자를 지원하는지 판별합니다. 다음 예제는 브라우저가 자식 결합자를 지원할 때 통과합니다.

```css
@supports selector(A > B) {
}
```

### `not` 연산자

`not` 연산자를 어떤 표현식 앞에 붙이면 그 반대 결과를 낳는 새로운 표현식을 생성합니다. 다음 예제는 브라우저가 `transform-origin` (en-US) 속성의 값으로 `10em 10em 10em`이 **유효하지 않다**고 여길 때 통과합니다.

```css
@supports not (transform-origin: 10em 10em 10em) {
}
```

다른 연산자와 마찬가지로, 선언의 복잡도와 관계 없이 `not` 연산자를 적용할 수 있습니다. 다음 두 예시는 모두 유효한 구문입니다.

```css
@supports not (not (transform-origin: 2px)) {
}
@supports (display: grid) and (not (display: inline-grid)) {
}
```

**참고:** 최상위 `not` 연산자는 괄호로 감싸지 않아도 괜찮습니다. `and`, `or` 등 다른 연산자와 함께 사용할 때는 괄호가 필요합니다.

### `and` 연산자

`and` 연산자는 두 표현식의 논리곱으로부터 새로운 표현식을 생성합니다. 새로운 표현식은 두 구성 표현식이 **모두 참일 때만** 참을 반환합니다. 다음 예제는 두 개의 구성 표현식이 동시에 참이어야만 통과합니다.

```css
@supports (display: table-cell) and (display: list-item) {
}
```

다수의 논리곱은 괄호 없이 병치할 수 있습니다. 다음 두 예시는 모두 유효한 구문입니다.

```css
@supports (display: table-cell) and (display: list-item) and (display: run-in) {
}
@supports (display: table-cell) and ((display: list-item) and (display: run-in)) {
}
```

### `or` 연산자

`or` 연산자는 두 표현식의 논리합으로부터 새로운 표현식을 생성합니다. 새로운 표현식은 두 구성 표현식 중 **어느 한 쪽이라도 참이면** 참을 반환합니다. 다음 예제는 두 개의 구성 표현식 중 하나라도 참이면 통과합니다.

```css
@supports (transform-style: preserve) or (-moz-transform-style: preserve) {
}
```

다수의 논리합은 괄호 없이 병치할 수 있습니다. 다음 두 예시는 모두 유효한 구문입니다.

```css
@supports (transform-style: preserve) or (-moz-transform-style: preserve) or
 (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {
}

@supports (transform-style: preserve-3d) or
 (
 (-moz-transform-style: preserve-3d) or
 (
 (-o-transform-style: preserve-3d) or
 (-webkit-transform-style: preserve-3d)
 )
 ) {
}
```

**참고:** `and`와 `or` 연산자를 같이 사용할 때는 괄호를 사용해 연산자 적용 순서를 정의해야 합니다. 그렇지 않으면 조건이 유효하지 않으므로 @-규칙 전체를 무시합니다.

### 형식 구문
```

@supports =
  @supports <supports-condition> { <rule-list> }

<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> )

```

예제
--

### 주어진 CSS 속성의 지원 여부 판별

```css
@supports (animation-name: test) {
    … /\* 애니메이션 속성을 접두사 없이 사용할 수 있을 때 CSS 적용 \*/
    @keyframes { /\* 다른 @-규칙을 중첩 가능 \*/
      …
    }
}
```

### 주어진 CSS 속성 및 접두사 버전의 지원 여부 판별

```css
@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
 (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
    … /\* 접두사가 붙더라도 3D 변형을 지원하면 CSS 적용 \*/
}
```

### 특정 CSS 속성의 미지원 여부 판별

```css
@supports not ((text-align-last: justify) or (-moz-text-align-last: justify) ){
    … /\* text-align-last: justify를 대체할 CSS \*/
}
```

### 사용자 정의 속성 지원 여부 판별

```css
@supports (--foo: green) {
  body {
    color: var(--varName);
  }
}
```

### 선택자 지원 여부 판별 (예: `:is()` (en-US))

**실험적:** **이 기능은 실험적인 기능입니다.**
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

```css
/\* :is()를 지원하지 않는 브라우저에서는 무시함 \*/
:is(ul, ol) > li {
  … /\* :is() 선택자를 지원할 때 적용할 CSS \*/
}

@supports not selector(:is(a, b)) {
  /\* :is()를 지원하지 않을 때 대체할 CSS \*/
  ul > li,
 ol > li {
    … /\* :is()를 지원하지 않을 때 적용할 CSS \*/
  }
}

@supports selector(:nth-child(1n of a, b)) {
  /\* @supports로 먼저 묶지 않으면 :nth-child()의 of 구문을
 지원하지 않는 브라우저에서 스타일을 잘못 적용할 수 있음 \*/
  :is(:nth-child(1n of ul, ol) a,
 details > summary) {
    … /\* :is() 선택자와 :nth-child()의 of 구문을 지원할 때 적용할 CSS \*/
  }
}
```

명세
--

| Specification |
| --- |
| CSS Conditional Rules Module Level 4 # at-supports-ext |
| CSS Conditional Rules Module Level 3 # at-supports |

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

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

같이 보기
-----

* CSSOM 클래스 `CSSSupportsRule` (en-US)과, JavaScript를 통해 동일한 판별을 수행할 수 있는 `CSS.supports` (en-US) 메서드


<url> - CSS: Cascading Style Sheets

<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: Cascading Style Sheets

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보다 더 세밀하게 조절할 수 있습니다.


지정값 - CSS: Cascading Style Sheets

지정값
===

CSS 속성의 **지정값**은 세 가지 방법 중 하나로 설정됩니다.

1. 문서의 스타일시트가 속성값을 지정했다면 그러면 그 값이 사용됩니다. 예를 들어, `color` 속성이 `green` 으로 설정된 경우 대응하는 요소(element)의 텍스트 색은 녹색이 됩니다.
2. 문서의 스타일시트가 값을 지정하지 않은 경우 부모 요소로부터 상속됩니다(가능하다면). 예를 들어, `<div>` (en-US) 내부에 단락(`<p>`)이 있고 `<div>` (en-US)의 CSS `font` 속성값이 "Arial", `<p>`가 정의된 `font` 속성이 없다면 Arial font가 상속됩니다.
3. 위 중 어느 것도 이용할 수 없는 경우, CSS 스펙에 지정된 대로 요소의 초기값이 적용됩니다.
예제
--

### HTML

```html
<p>My specified color is given explicitly in the CSS.</p>

<div>
  The specified values of all my properties default to their initial values,
  because none of them are given in the CSS.
</div>

<div class="fun">
  <p>
    The specified value of my font family is not given explicitly in the CSS, so
    it is inherited from my parent. However, the border is not an inheriting
    property.
  </p>
</div>
```

### CSS

```css
.fun {
  border: 1px dotted pink;
  font-family: fantasy;
}

p {
  color: green;
}
```

### 결과

명세
--

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


flex-flow - CSS: Cascading Style Sheets

flex-flow
=========

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-flow`** CSS 속성은 `flex-direction`, `flex-wrap` 속성의 단축 속성입니다.

시도해보기
-----

구문
--

```css
/\* flex-flow: <'flex-direction'> \*/
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/\* flex-flow: <'flex-wrap'> \*/
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

/\* flex-flow: <'flex-direction'>과 <'flex-wrap'> \*/
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

/\* 전역 값 \*/
flex-flow: inherit;
flex-flow: initial;
flex-flow: unset;
```

### 값

자세한 내용은 `flex-direction`과 `flex-wrap` 속성을 참고하세요.

### 형식 구문
```

flex-flow =
  <'flex-direction'>  ||
  <'flex-wrap'>

```

예제
--

```css
element {
  /\* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines \*/
  flex-flow: column-reverse wrap;
}
```

명세
--

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `flex-direction`: `row`
* `flex-wrap`: `nowrap`
 |
| 적용대상 | flex containers |
| 상속 | no |
| 계산 값 | as each of the properties of the shorthand:* `flex-direction`: as specified
* `flex-wrap`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `flex-direction`: discrete
* `flex-wrap`: discrete
 |

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

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

같이 보기
-----

* CSS 플렉스박스 가이드: *Basic Concepts of Flexbox*
* CSS 플렉스박스 가이드: *Ordering flex items (en-US)*


CSS Paged Media - CSS: Cascading Style Sheets

CSS Paged Media
===============

**CSS Paged Media**는 페이지 전환을 처리하는 방법을 정의하는 CSS 모듈입니다.

참고서
---

### CSS 속성

* `page-break-after` (en-US)
* `page-break-before` (en-US)
* `page-break-inside` (en-US)
### @규칙

* `@page`
### 의사 클래스

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

| Specification |
| --- |
| CSS Paged Media Module Level 3  |
| CSS Fragmentation Module Level 3  |


overflow-wrap - CSS: Cascading Style Sheets

overflow-wrap
=============

**`overflow-wrap`** CSS 요소는 어떤 문자가 내용 칸 밖으로 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용됩니다.

**참고:** `word-break`와는 달리, `overflow-wrap`은 모든 단어가 넘치지 않으면 자신의 줄 안에 놓여 있을 수 없을 때 줄 바꿈을 한 번만 할 것입니다.

이 속성은 처음에 마이크로소프트에서 표준이 아니고 접두어가 없는 `word-wrap`으로 나왔고, 대부분 브라우저에서 똑같은 이름으로 구현되었습니다. 요즘은 `overflow-wrap`으로 다시 지어지고, `word-wrap`은 동의어가 되었습니다.

구문
--

```css
/\* Keyword values \*/
overflow-wrap: normal;
overflow-wrap: break-word;

/\* Global values \*/
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;
```

`overflow-wrap` 속성은 아래에 나열돼 있는 값들 중 단 하나로 정해집니다.

### 값

`normal`

줄이 오직 (두 단어 사이의 공백과 같이) 보통의 줄 바꿈 지점에서만 줄을 바꿉니다.

`break-word`

보통 안 바꿔지는 단어들을 한 줄에서 대신 줄을 바꿀 만한 지점이 없을 시 임의의 지점에서 줄을 바꿉니다.

### 기본적인 구문
```

overflow-wrap =
  normal      |
  break-word  |
  anywhere

```

예시
--

이 예시는 긴 단어를 넘길 때 `overflow-wrap`, `word-break`, 그리고 `hyphens`의 결과를 비교합니다.

### HTML

```html
<p class="normal">
  They say the fishing is excellent at Lake
  Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been there
  myself. (normal)
</p>
<p class="overflow-wrap">
  They say the fishing is excellent at Lake
  Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been there
  myself. (overflow-wrap)
</p>
<p class="word-break">
  They say the fishing is excellent at Lake
  Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been there
  myself. (word-break)
</p>
<p class="hyphens">
  They say the fishing is excellent at Lake
  Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been there
  myself. (hyphens)
</p>
```

### CSS

```css
p {
  width: 13em;
  background: gold;
}

.overflow-wrap {
  overflow-wrap: break-word;
}

.word-break {
  word-break: break-all;
}

.hyphens {
  hyphens: auto;
}
```

### Result

명세서
---

| Specification |
| --- |
| CSS Text Module Level 3 # overflow-wrap-property |

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

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

바로 보기
-----

* `word-break`


min-width - CSS: Cascading Style Sheets

min-width
=========

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

시도해보기
-----

`min-width`가 `max-width` 또는 `width`보다 커지면 요소의 너비는 `min-width`의 값을 사용합니다.

구문
--

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

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

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

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

### 값

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

#### 키워드 값

`auto`

최소 너비를 정하지 않음.

`max-content`
Experimental

본질적인 선호 높이.

`min-content`
Experimental

본질적인 최소 높이.

`fill-available`
Experimental

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

`fit-content`
Experimental

`min(max-content, max(min-content, fill-available))`과 같음.

### 형식 구문
```

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

<length-percentage> =
  <length>      |
  <percentage>

```

예제
--

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

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

명세
--

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # min-size-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

|  |  |
| --- | --- |
| 초기값 | `auto` |
| 적용대상 | 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 |
| 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`, `max-width`


outline-width - CSS: Cascading Style Sheets

outline-width
=============

CSS **`outline-width`** 속성은 요소 외곽선의 두께를 설정합니다. 외곽선은 요소의 테두리 바깥에 그려지는 선입니다.

시도해보기
-----

외곽선 외형을 설정할 땐 `outline` 단축 속성을 사용하는게 편리한 상황이 많습니다.

구문
--

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

/\* <length> 값 \*/
outline-width: 1px;
outline-width: 0.1em;

/\* 전역 값 \*/
outline-width: inherit;
```

`outline-width` 속성은 다음 값 중 하나를 사용해 지정합니다.

### 값

`<length>`

외곽선의 두께를 `<length>`로 설정합니다.

`thin`

사용자 에이전트마다 다릅니다. 데스크톱 브라우저에서는 보통 `1px`입니다.

`medium`

사용자 에이전트마다 다릅니다. 데스크톱 브라우저에서는 보통 `3px`입니다.

`thick`

사용자 에이전트마다 다릅니다. 데스크톱 브라우저에서는 보통 `5px`입니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `medium` |
| 적용대상 | all elements |
| 상속 | no |
| 계산 값 | an absolute length; if the keyword `none` is specified, the computed value is `0` |
| Animation type | a length |

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

outline-width =
  <line-width>

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

```

예제
--

### 요소의 외곽선 두께 설정하기

#### HTML

```html
<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="twopixels">2px</span>
<span id="oneex">1ex</span>
<span id="em">1.2em</span>
```

#### CSS

```css
span {
  outline-style: solid;
  display: inline-block;
  margin: 20px;
}

#thin {
  outline-width: thin;
}

#medium {
  outline-width: medium;
}

#thick {
  outline-width: thick;
}

#twopixels {
  outline-width: 2px;
}

#oneex {
  outline-width: 1ex;
}

#em {
  outline-width: 1.2em;
}
```

#### 결과

명세
--

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-width |

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

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


hyphens - CSS: Cascading Style Sheets

hyphens
=======

CSS **`hyphens`** 속성은 여러 줄에 걸치는 텍스트에서 단어에 붙임표를 추가하는 방식을 설정합니다. 붙임표를 아예 방지할 수도 있고, 수동으로 지정한 곳에서만 발생하도록 나타낼 수도 있으며, 브라우저가 자동으로 적절한 곳에 붙임표를 삽입하도록 허용할 수도 있습니다.

시도해보기
-----

붙임표 규칙은 언어별로 다릅니다. HTML의 언어는 `lang` 특성으로 알아낼 수 있으며, 브라우저는 lang 특성과 해당 언어에 적합한 붙임표 규칙이 모두 사용 가능할 때에만 붙임표를 추가합니다. XML에서는 `xml:lang` (en-US) 특성을 사용해야 합니다.

**참고:** 명세는 붙임표 규칙을 명시하지 않고 있으므로 동작 방식이 브라우저마다 다를 수 있습니다.

구문
--

```css
/\* 키워드 값 \*/
hyphens: none;
hyphens: manual;
hyphens: auto;

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

`hyphens` 속성은 아래 목록 중 하나의 키워드를 사용해 지정할 수 있습니다.

### 값

`none`

단어 내의 문자가 줄 바꿈 위치를 나타내더라도 단어를 내에서 줄을 바꾸지 않습니다. 줄 바꿈은 공백 문자에서만 발생합니다.

`manual`

단어 내의 줄 바꿈 위치를 나타내는 문자에서는 줄을 바꿀 수 있습니다. 아래의 줄 바꿈 위치 제안에서 자세한 정보를 알아보세요.

`auto`

브라우저가 단어 내의 적합한 붙임표 위치를 자유롭게 골라서 줄을 바꿀 수 있습니다. 단, 줄 바꿈 위치를 제안(아래의 줄 바꿈 위치 제안 을 보세요)한 경우에는 해당 위치를 사용합니다.

**참고:** 적합한 붙임표 규칙을 선택할 수 있도록 언어를 제대로 명시해야 `auto` 값의 동작도 정확해집니다. HTML `lang` 특성을 사용해 해당 언어의 붙임표 규칙을 사용할 것을 확실하게 지정하세요.

줄 바꿈 위치 제안
----------

아래의 두 가지 Unicode 문자를 사용해서 수동으로 줄 바꿈 위치를 제안할 수 있습니다.

U+2010 (HYPHEN)

붙임표, "하드" 하이픈 문자는 눈에 보이는 줄 바꿈 위치를 나타냅니다. 실제로 줄이 바뀌지는 않더라도 붙임표를 볼 수 있습니다.

U+00AD (SHY)

투명한 "소프트" 하이픈("**s**oft" **hy**phen)입니다. 눈에 보이지 않으며, 브라우저가 붙임표를 사용해 단어를 끊을 위치로 선택합니다. HTML에서는 ``를 사용해 입력하세요.

**참고:** HTML `<wbr>` 요소로 인한 줄 바꿈으로는 붙임표가 추가되지 않습니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `manual` |
| 적용대상 | all elements |
| 상속 | yes |
| 계산 값 | as specified |
| Animation type | discrete |

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

hyphens =
  none    |
  manual  |
  auto

```

예제
--

### 붙임표 줄 바꿈 지정하기

다음 예제는 `hyphens` 속성에 사용할 수 있는 세 개 값을 시연합니다.

#### HTML

```html
<dl>
  <dt><code>none</code>: no hyphen; overflow if needed</dt>
  <dd lang="en" class="none">An extremely long English word</dd>
  <dt>
    <code>manual</code>: hyphen only at &hyphen; or &shy; (if needed)
  </dt>
  <dd lang="en" class="manual">An extremely long English word</dd>
  <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
  <dd lang="en" class="auto">An extremely long English word</dd>
</dl>
```

#### CSS

```css
dd {
  width: 55px;
  border: 1px solid black;
}
dd.none {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
dd.manual {
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}
dd.auto {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
```

#### 결과

명세
--

| Specification |
| --- |
| CSS Text Module Level 3 # hyphens-property |

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

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

같이 보기
-----

* `content`
* `overflow-wrap` (이전 이름 `word-wrap`)
* `word-break`


단축 속성 - CSS: Cascading Style Sheets

단축 속성
=====

**단축 속성**은 서로 다른 여러 가지 CSS 속성의 값을 지정할 수 있는 CSS 속성입니다. 단축 속성을 사용하면 간결한 (그리고 읽기도 좋은) 스타일 시트를 작성해 시간과 체력을 아낄 수 있습니다.

CSS 명세는 같은 주제를 가진 여러 공통 속성을 묶기 위해 단축 속성을 정의합니다. 가령 CSS `background` 속성은 `background-color`, `background-image`, `background-repeat`, `background-position` (en-US) 값을 정의할 수 있는 단축 속성입니다. 마찬가지로, 가장 흔히 쓰이는 글꼴 관련 속성은 `font` 단축 속성으로, 박스 주위의 바깥 여백은 `margin` 단축 속성으로 지정할 수 있습니다.

까다로운 예외상황
---------

단축 속성은 사용하기 매우 편리하지만, 염두해야 할 예외상황이 몇 가지 있습니다.

1. 단축 속성에 지정하지 않은 값은 초깃값이 됩니다. 별거 아닌 듯 보일 수 있지만, 사실 이전에 정의한 값도 초깃값으로 **재정의**합니다. 따라서,

```css
background-color: red;
background: url(images/bg.gif) no-repeat top right;
```

을 적한 요소의 배경 색은 `red`가 아니라, `background-color`의 기본값인 `transparent`가 됩니다. 두 번째 규칙이 우선하기 때문입니다.
2. 개별 속성값만 상속할 수 있습니다. 빠진 값에는 초깃값을 대입하므로, 어떤 속성의 값을 상속받고자 단축 속성의 해당 부분을 비우는 것은 불가능합니다. `inherit` 키워드 역시 속성 값으로 온전히 사용해야 하며 값의 일부(`red inherit top right`처럼)로는 사용할 수 없습니다. 따라서 어떤 속성을 상속하고 싶다면 `inherit`을 지정한 본디 속성(longhand property)을 추가할 수밖에 없습니다.
3. 단축 속성은 값의 순서를 되도록 제한하지 않습니다. 특히 각 값의 자료형이 서로 다르면 순서가 중요하지 않습니다. 하지만 일부 속성이 동일한 자료형의 값을 가질 수 있을 때는 잘 동작하지 않습니다. 이런 경우의 처리는 여러 범주로 나뉩니다:
    1. `border-style`, `margin`, `padding`처럼 박스의 모서리와 관련된 속성을 다루는 단축 속성은 항상 같은 쪽의 모서리를 가리키는 1~4 값 구문을 사용합니다:

    | border1.png | 1개 값 구문: `border-width: 1em` — 유일한 값이 모든 변을 나타냅니다. |
    | --- | --- |
    | border2.png | 2개 값 구문: `border-width: 1em 2em` — 첫 번째 값은 세로(상하)변을, 두 번째는 가로(좌우)변을 나타냅니다. |
    | border3.png | 3개 값 구문: `border-width: 1em 2em 3em` — 첫 번째 값은 상변을, 두 번째는 가로변, 세 번째는 하변을 나타냅니다. |
    | border4.png | 4개 값 구문: `border-width: 1em 2em 3em 4em` — 네 값이 각각 상, 우, 하, 좌변을 나타냅니다. 상변에서 시작하여 시계 방향으로, 항상 같은 순서를 사용합니다. |
    2. 비슷하게, `border-radius` 같은 박스의 꼭짓점과 관련된 속성을 다루는 단축 속성은 항상 같은 쪽의 꼭짓점을 가리키는 1-4-값 구문을 사용합니다:

    | corner1.png | 1개 값 구문: `border-radius: 1em` — 유일한 값이 모든 귀를 나타냅니다. |
    | --- | --- |
    | corner2.png | 2개 값 구문: `border-radius: 1em 2em` — 첫 번째 값은 좌상 및 우하귀, 두 번째는 우상 및 좌하귀를 나타냅니다. |
    | corner3.png | 3개 값 구문: `border-radius: 1em 2em 3em` — 첫 번째 값은 좌상귀, 두 번째는 우상 및 좌하귀, 세 번째 값은 우하귀를 나타냅니다. |
    | corner4.png | 4개 값 구문: `border-radius: 1em 2em 3em 4em` — 네 값은 각각 좌상, 우상, 우하 및 좌하귀를 나타냅니다. 좌상귀에서 시작하여 시계 방향으로, 항상 같은 순서를 사용합니다. |
배경 속성
-----

아래와 같은 속성을 가지는 배경은...

```css
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;
```

다음과 같이 선언 단 하나를 사용해서 단축할 수 있습니다.

```css
background: #000 url(images/bg.gif) no-repeat top right;
```

(단축 형은 실제로 `background-attachment: scroll` 및 CSS3의 일부 부가 속성이 더해진 위 본디 속성과 같습니다.)

`background`에서 CSS3 속성을 포함한 더 자세한 정보를 확인할 수 있습니다.

글꼴 속성
-----

아래와 같은 속성을 가지는 글꼴은...

```css
font-style: italic;
font-weight: bold;
font-size: 0.8em;
line-height: 1.2;
font-family: Arial, sans-serif;
```

다음처럼 단축할 수 있습니다.

```css
font:
  italic bold 0.8em/1.2 Arial,
  sans-serif;
```

이 단축 선언은 실제로 `font-variant: normal` 및 `font-size-adjust: none` (CSS2.0 / CSS3), `font-stretch: normal` (CSS3)이 더해진 위 본디 속성과 같습니다.

테두리 속성
------

테두리의 너비, 색상, 스타일을 하나의 선언으로 단축할 수 있습니다. 즉 아래와 같은 CSS를...

```css
border-width: 1px;
border-style: solid;
border-color: #000;
```

다음처럼 단축할 수 있습니다.

```css
border: 1px solid #000;
```

여백 속성
-----

바깥과 안쪽 여백의 단축 속성도 똑같이 동작합니다. 바깥 여백, `margin` 속성은 한 개, 두 개, 세 개, 네 개의 값을 사용해 지정합니다. 아래 CSS 선언은...

```css
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
```

다음의 네 값 구문 단축 속성을 사용한 선언과 같습니다. 방향이 시계 방향임을 기억하세요. 각 값은 위, 오른쪽, 아래, 왼쪽을 나타냅니다.

```css
margin: 10px 5px 10px 5px;
```

바깥 여백의 한 개, 두 개, 세 개, 네 개 값 선언 규칙은 다음과 같습니다.

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

* 단축 속성: `animation`, `background`, `border`, `border-bottom`, `border-color`, `border-left`, `border-radius`, `border-right`, `border-style`, `border-top`, `border-width`, `column-rule` (en-US), `columns` (en-US), `flex`, `flex-flow`, `font`, `grid` (en-US), `grid-area` (en-US), `grid-column` (en-US), `grid-row` (en-US), `grid-template` (en-US), `list-style` (en-US), `margin`, `offset` (en-US), `outline`, `overflow`, `padding`, `place-content` (en-US), `place-items` (en-US), `place-self` (en-US), `text-decoration`, `transition`


animation-duration - CSS: Cascading Style Sheets

animation-duration
==================

**실험적:** **이 기능은 실험적인 기능입니다.**
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

**`animation-duration`** CSS 속성은 애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 지정합니다.

```css
/\* Single animation \*/
animation-duration: 6s;
animation-duration: 120ms;

/\* Multiple animations \*/
animation-duration: 1.64s, 15.22s;
animation-duration: 10s, 35s, 230ms;
```

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

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

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

### Values

``<time>``

애니메이션이 한 사이클을 완료하는 데 걸리는 지속 시간입니다. 이것은 초(s) 또는 밀리 초 (ms)로 지정 될 수 있습니다. 값은 양수 또는 0이어야하며 단위는 필수입니다. 기본값인 0의 값은 애니메이션이 작동하지 않아야 함을 나타냅니다.

**참고:** 음수 값은 유효하지 않으므로 선언이 무시됩니다. 접두사가 붙은 구현은 그것들을 0과 동일하게 간주 할 수 있습니다.

**참고:** animation- \* 속성에 여러 개의 쉼표로 구분 된 값을 지정하면 `animation-name` (en-US) 속성에 지정된 애니메이션에 얼마나 많은 값이 있는지에 따라 다른 방식으로 지정됩니다. 자세한 내용은 Setting multiple animation property values를 참조하십시오.

### Formal syntax
```

animation-duration =
  <time [0s,∞]>#

```

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

CSS 애니메이션 예제를 참조하십시오.

명세
--

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

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


:fullscreen - CSS: Cascading Style Sheets

:fullscreen
===========

CSS **`:fullscreen`** 의사 클래스는 전체 화면 모드에 진입한 모든 요소와 일치합니다. 다수의 요소가 전체 화면 중이라면 그 요소 모두 선택합니다.

구문
--

Error: could not find syntax for this item사용 참고
-----

`:fullscreen` 의사 클래스는 요소가 전체 화면과 일반적인 모습을 넘나들 때마다 크기, 스타일, 레이아웃 등을 조정하도록 스타일시트를 설정할 수 있습니다.

예제
--

이번 예제에서는 문서의 전체 화면 여부에 따라 버튼의 색을 변경합니다. 스타일 변경은 JavaScript 없이 CSS에서만 처리합니다.

### HTML

페이지의 HTML 구조는 다음과 같습니다.

```html
<h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1>

<p>
  This demo uses the <code>:fullscreen</code> pseudo-class to automatically
  change the style of a button used to toggle full-screen mode on and off,
  entirely using CSS.
</p>

<button id="fs-toggle">Toggle Fullscreen</button>
```

ID가 `"fs-toggle"`인 `<button>`은 문서가 전체 화면이면 흐릿한 빨강, 그렇지 않으면 흐릿한 초록으로 색이 바뀝니다.

### CSS

스타일 마법은 CSS에서 일어납니다. 두 가지 규칙을 사용할 것으로, 첫 번째는 전체 화면이 아닐 때 전체 화면 버튼의 배경색을 설정합니다. 중요한 것은 `:not(:fullscreen)`으로, `:fullscreen` 의사 클래스와 일치하지 않는 요소를 선택합니다.

```css
#fs-toggle:not(:fullscreen) {
  background-color: #afa;
}
```

문서가 전체 화면에 들어간 경우, 대신 아래의 CSS를 적용하여 버튼 배경을 흐릿한 빨강으로 바꿉니다.

```css
#fs-toggle:fullscreen {
  background-color: #faa;
}
```

명세
--

| Specification |
| --- |
| Fullscreen API Standard # :fullscreen-pseudo-class |

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

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

같이 보기
-----

* Fullscreen API
* Fullscreen API 안내서 (en-US)
* `:not`
* `::backdrop` (en-US)
* DOM API: `Element.requestFullscreen()` (en-US), `Document.exitFullscreen()` (en-US), `Document.fullscreenElement` (en-US)
* `allowfullscreen` (en-US) 특성