tab-size - CSS: Cascading Style Sheets

tab-size
========

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

구문
--

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

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

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

### 값

`<integer>`

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

`<length>`

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

형식 정의
-----

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

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

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

```

예제
--

### 글자 수로 정의

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

### 탭 제거

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

### 기본 크기와 비교

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

#### HTML

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

#### CSS

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

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

#### 결과

명세
--

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

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

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

같이 보기
-----

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


CSS Scroll Snap Points - CSS: Cascading Style Sheets

CSS Scroll Snap Points
======================

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

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

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

참고
--

### CSS 속성

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1  |


padding-top - CSS: Cascading Style Sheets

padding-top
===========

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

시도해보기
-----

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

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

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

구문
--

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

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

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

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

### 값

`<length>`

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

`<percentage>`

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

### 형식 구문
```

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

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

```

예제
--

```css
.content {
  padding-top: 5%;
}
.sidebox {
  padding-top: 10px;
}
```

명세
--

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

|  |  |
| --- | --- |
| 초기값 | `0` |
| 적용대상 | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to `::first-letter` (en-US) and `::first-line` (en-US). |
| 상속 | no |
| Percentages | refer to the width of the containing block |
| 계산 값 | the percentage as specified or the absolute length |
| Animation type | a length |

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

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

같이 보기
-----

* CSS 기본 박스 모델 입문
* `padding`


CSS Containment - CSS: Cascading Style Sheets

CSS Containment
===============

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 Containment 사양의 목표는 개발자가 페이지의 하위 트리(subtree)를 페이지의 나머지 부분과 분리할 수 있도록 하여 웹 페이지의 성능을 향상시키는 것입니다. 브라우저가 페이지의 일부가 독립적임을 인식하면 렌더링을 최적화 하고 성능을 개선 할 수 있습니다. 사양은 단일 CSS 속성(property) `contain`을 정의합니다. 이 문서는 사양의 기본 목표를 설명합니다.
기본 예제
-----

많은 웹 페이지에는 서로 독립적인 여러 섹션이 포함되어 있습니다. 예를들면 아래 마크업에서와 같이 아티클, 헤드라인, 콘텐츠 로 이루어진 목록입니다.

```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>
  <p>More content here.</p>
</article>
```

각 아티클에는 CSS에서 `contain` 속성의 값으로 `content` 가 적용되어 있습니다.

```css
article {
  contain: content;
}
```

각 아티클은 페이지의 다른 아티클과 독립적이므로 브라우저에 이러한 사실을 알리기 위해 `contain: content`가 포함되어 있습니다. 그러면 브라우저는 이 정보를 사용하여 컨텐츠를 렌더링하는 방법을 결정할 수 있습니다. 예를들어 볼 수 있는 영역 밖에있는 아티클은 렌더링하지 않을 수 있습니다.

각 `<article>` 에 `contain` 속성의 값을 `content` 로 제공하면, 새 요소(element)가 삽입될 때 브라우저는 containing 요소들의 하위 트리 외부 영역을 relayout(reflow)하거나 repaint 할 필요가 없음을 인식합니다. `<article>` 이 내용에 따라 크기가 달라지도록 스타일을 지정하더라도(예: `height: auto`), 브라우저는 크기 변경을 고려해야 할 수 있습니다.

우리는 `contain` 속성을 통해 각 아티클이 독립적이라고 말했습니다.

`content` 값은 `contain: layout paint`의 약어입니다. 브라주어에 요소의 내부 레이아웃이 페이지의 나머지 부분과 완전히 분리되어 있으며, 요소에 대한 모든 것이 경계 내부에 그려져 있음을 알려줍니다. overflow되어 보이는 것이 없습니다.

이 정보는 페이지를 작성하는 웹 개발자에게 일반적으로 알려져 있으며, 사실 매우 분명합니다. 그러나 브라우저는 귀하의 의도를 추측할 수 없고, 아티클이 완전히 독립적일 것이라고 가정할 수 없습니다. 따라서 이 속성은 브라우저에게 이 사실을 설명하고, 그 정보를 기반으로 성능 최적화를 수행할 수 있는 좋은 방법을 제공합니다.

주요 개념 및 용어
----------

이 사양은 오로지 `contain` 이라는 하나의 속성(property)만 정의합니다. 이 속성의 값은 해당 요소에 적용 할 포함 유형을 나타냅니다.

### Layout containment

```css
article {
  contain: layout;
}
```

Layout 은 일반적으로 전체 문서로 범위가 지정됩니다. 즉, 하나의 요소를 이동하면 전체 문서를 다른 곳으로 이동할 수 있는 것처럼 처리해야 합니다. 그러나 `contain: layout` 을 사용하면 브라우저에 이 요소만 확인하면 된다고 알려줄 수 있습니다. 요소 내부의 모든 항목은 해당 요소로 범위가 지정되고, 페이지의 나머지 부분에는 영향을 주지 않습니다. 그리고 containing box는 독립적인 formatting context를 설정합니다.

추가사항

* `float` 레이아웃은 독립적으로 수행됩니다.
* Margin 이 layout containment 경계를 가로질러 병합(collapse)되지 않습니다.
* layout 컨테이너는 position: `absolute`/`fixed` 의 하위 항목에 대한 containing block이 됩니다.
* containing box는 stacking context를 생성합니다. 따라서 `z-index` 를 사용할 수 있습니다.
### Paint containment

```css
article {
  contain: paint;
}
```

Paint containment 는 기본적으로 박스를 주요 박스(principal box)의 패딩 경계에 클립(clip - 맞춰서 채우기)합니다. overflow되어 보이는 것이 없습니다. `paint` containment 도 `layout` containment 와 마찬가지입니다. (위 참조).

또다른 장점은 containing box가 화면 밖에 있으면, 브라우저가 contained 요소를 paint 할 필요가 없다는 것입니다. 이 때 요소가 box에 포함되어 있으므로 화면에 표시되지 않아야 합니다.

### Size containment

```css
article {
  contain: size;
}
```

Size containment 는 자체적으로 사용될 때 성능 최적화 방법을 많이 제공하지 않습니다. 그러나 이는 요소의 자식 크기가 요소 자체의 크기에 영향을 줄 수 없음을 의미합니다. 요소의 크기는 자식이 존재하지 않는 것처럼 계산됩니다.

`contain: size` 를 적용하면, 이를 적용한 요소의 크기도 지정해야 합니다. 수동으로 크기를 지정하지 않으면, 대부분의 경우 크기가 0이 됩니다.

### Style containment

```css
article {
  contain: style;
}
```

style containment 는 이름에도 불구하고 Shadow DOM에서 얻을 수 있는 범위(scope) 스타일을 제공하지 않습니다. 주요 사용 사례는, 요소에서 CSS Counter 가 변경되어 나머지 트리에 영향을 미칠 수 있는 상황을 방지하는 것입니다.

`contain: style` 을 사용하면 `counter-increment` (en-US) 와 `counter-set` (en-US) 속성이 해당 하위 트리로만 범위가 지정된 새 카운터를 만들 수 있습니다.

**참고:** **주의**: `style` containment 는 사양에서 "at-risk" 이며, 모든 곳에서 지원하지 않을 수 있습니다(현재 Firefox는 지원하지 않음).

### Special values

contain 에는 두 가지 특수한 값이 있습니다.

* `content`
* `strict`

위의 예에서 첫 번째를 만났습니다. `contain: content` 는 `layout` 과 `paint` containment를 모두 활성화합니다. 사양에서는 이 값을 "광범위하게 적용하기에 합리적으로 안전" 하다고 설명합니다. `size` containment 를 적용하지 않으므로 자식의 크기에 의존하고, 때문에 박스 크기가 0이 될 위험이 없습니다.

가능한 많은 containment 를 얻으려면 `contain: strict` 를 사용할 수 있습니다. 이는 `contain: size layout paint` 와 같습니다. 또는 `style` containment 를 지원하는 브라우저에서는 다음과 같이 사용할 수 있습니다.

```css
contain: strict;
contain: strict style;
```

Reference
---------

### CSS Properties

* `contain`
External resources
------------------

* An Introduction to CSS Containment
* Everything You Need to Know About the CSS `will-change` Property


revert - CSS: Cascading Style Sheets

revert
======

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

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

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

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

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

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

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

예시
--

### Revert vs unset

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

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

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

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

### Revert all

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

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

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

### 부모요소에서의 Revert

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

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

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

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

명세서
---

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

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

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

요약
--

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


<frequency> - CSS: Cascading Style Sheets

<frequency>
===========

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

구문
--

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

### 단위

`Hz`

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

`kHz`

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

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

예제
--

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

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

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

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

명세
--

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

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

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

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


max-width - CSS: Cascading Style Sheets

max-width
=========

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

시도해보기
-----

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

구문
--

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

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

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

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

### 값

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

#### 키워드 값

`none`

최대 너비를 정하지 않음.

`max-content`
Experimental

본질적인 선호 높이.

`min-content`
Experimental

본질적인 최소 높이.

`fill-available`
Experimental

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

`fit-content`
Experimental

`max-content`와 동일.

### 형식 구문
```

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

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

```

예제
--

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

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

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

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

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

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

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

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

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

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

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
명세
--

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # width-height-keywords |
| CSS Box Sizing Module Level 4 # sizing-values |

|  |  |
| --- | --- |
| 초기값 | `none` |
| 적용대상 | all elements but non-replaced inline elements, table rows, and row groups |
| 상속 | no |
| Percentages | refer to the width of the containing block |
| 계산 값 | the percentage as specified or the absolute length or `none` |
| Animation type | a length, percentage or calc(); |

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

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

같이 보기
-----

* 박스 모델 입문
* `box-sizing`, `width`, `min-width`


vertical-align - CSS: Cascading Style Sheets

vertical-align
==============

**`vertical-align`** CSS 속성은 inline 또는 table-cell box에서의 수직 정렬을 지정합니다.

시도해보기
-----

vertical-align 속성은 두 가지 상황에서 사용할 수 있습니다.

* 인라인 요소의 상자를 선 상자를 포함해 자기 자신 안에 수직으로 정렬합니다. 예를 들어, 텍스트 줄에 이미지를 세로로 배치하는 데 사용할 수 있습니다.
* 테이블 셀 내용을 정렬합니다.

`vertical-align`은 인라인, 인라인 블록 및 테이블 셀 요소에만 적용되므로 블록 레벨 요소를 수직으로 정렬하는 데 사용할 수 없습니다.

구문
--

```css
/\* Keyword values \*/
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/\* <length> values \*/
vertical-align: 10em;
vertical-align: 4px;

/\* <percentage> values \*/
vertical-align: 20%;

/\* Global values \*/
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: revert-layer;
vertical-align: unset;
```

`vertical-align` 속성은 아래 나열된 값 중 하나로 지정됩니다.

### 인라인 요소의 값

#### 부모-상대 값

다음 값은 요소를 부모 요소에 대해 수직으로 정렬합니다.

`baseline`

부모의 baseline에 맞추어 해당 엘리먼트의 baseline 을 정렬합니다. 몇몇 replaced elements의 베이스라인은 예를들면`<textarea>` (en-US)은 HTML 명세에 정의되어 있지 않으므로, 이 키워드는 브라우저마다 다른 결과를 보여줍니다.

`sub`

해당 엘리먼트의 baseline을 부모의 subscript-baseline으로 정렬합니다.

`super`

해당 엘리먼트의 baseline을 부모의 superscript-baseline으로 정렬합니다.

`text-top`

해당 엘리먼트의 top을 부모 엘리먼트 폰트의 top으로 정렬합니다.

`text-bottom`

해당 엘리먼트의 bottom을 부모 엘리먼트 폰트의 bottom으로 정렬합니다.

`middle`

해당 엘리먼트의 middle을 부모의 baseline + x-height / 2 로 정렬합니다.

`<length>`

해당 엘리먼트의 baseline을 부모의 baseline에서 주어진 길이만큼 위로 정렬합니다.

`<percentage>`

<length> value와 마찬가지로 해당 엘리먼트의 baseline을 부모의 baseline에서 `line-height` (en-US)의 퍼센트로 주어진 퍼센트만큼 위로 정렬합니다.

#### 선-상대 값

다음 값은 요소를 전체 선을 기준으로 수직으로 정렬합니다.

`top`

해당 엘리먼트의 top과 이것의 자손들의 top을 전체 라인의 top으로 정렬합니다.

`bottom`

해당 엘리먼트의 bottom과 이것의 자손들의 bottom을 전체 라인의 bottom으로 정렬합니다.

Baseline이 없는 엘리먼트에 대해서는 bottom margin edge가 baseline을 대신하여 사용됩니다.

### 테이블 셀 값

`baseline` (`sub`, `super`, `text-top`, `text-bottom`, `<length>`, `<percentage>`)

셀의 baseline을 같은 행의 다른 cell들의 baseline과 정렬합니다.

`top`

셀의 top padding edge를 행의 top으로 정렬합니다.

`middle`

셀의 padding box의 중심을 행에서 중앙 정렬합니다.

`bottom`

셀의 bottom padding edge를 행의 bottom으로 정렬합니다.

음수 값이 허용됩니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `baseline` |
| 적용대상 | inline-level and table-cell elements. It also applies to `::first-letter` (en-US) and `::first-line` (en-US). |
| 상속 | no |
| Percentages | refer to the `line-height` (en-US) of the element itself |
| 계산 값 | for percentage and length values, the absolute length, otherwise the keyword as specified |
| Animation type | a length |

### 형식 구문
```

vertical-align =
  [ first | last ]        ||
  <'alignment-baseline'>  ||
  <'baseline-shift'>

```

예제
--

### 기본 예제

#### HTML

```html
<div>
  An <img src="frame\_image.svg" alt="link" width="32" height="32" /> image with
  a default alignment.
</div>
<div>
  An
  <img class="top" src="frame\_image.svg" alt="link" width="32" height="32" />
  image with a text-top alignment.
</div>
<div>
  An
  <img class="bottom" src="frame\_image.svg" alt="link" width="32" height="32" />
  image with a text-bottom alignment.
</div>
<div>
  An
  <img class="middle" src="frame\_image.svg" alt="link" width="32" height="32" />
  image with a middle alignment.
</div>
```

#### CSS

```css
img.top {
  vertical-align: text-top;
}
img.bottom {
  vertical-align: text-bottom;
}
img.middle {
  vertical-align: middle;
}
```

### 결과

### 선 상자의 수직 정렬

#### HTML

```html
<p>
  top: <img style="vertical-align: top" src="star.png" /><br />
  middle: <img style="vertical-align: middle" src="star.png" /><br />
  bottom: <img style="vertical-align: bottom" src="star.png" /><br />
  super: <img style="vertical-align: super" src="star.png" /><br />
  sub: <img style="vertical-align: sub" src="star.png" /><br />
</p>

<p>
  text-top: <img style="vertical-align: text-top" src="star.png" /><br />
  text-bottom: <img style="vertical-align: text-bottom" src="star.png" /><br />
  0.2em: <img style="vertical-align: 0.2em" src="star.png" /><br />
  -1em: <img style="vertical-align: -1em" src="star.png" /><br />
  20%: <img style="vertical-align: 20%" src="star.png" /><br />
  -100%: <img style="vertical-align: -100%" src="star.png" /><br />
</p>
```

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

img {
  margin-right: 0.5em;
}

p {
  height: 3em;
  padding: 0 0.5em;
  font-family: monospace;
  text-decoration: underline overline;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
```

#### 결과

### 테이블 셀의 수직 정렬

#### HTML

```html
<table>
  <tr>
    <td style="vertical-align: baseline">baseline</td>
    <td style="vertical-align: top">top</td>
    <td style="vertical-align: middle">middle</td>
    <td style="vertical-align: bottom">bottom</td>
    <td>
      <p>
        There is a theory which states that if ever anyone discovers exactly
        what the Universe is for and why it is here, it will instantly disappear
        and be replaced by something even more bizarre and inexplicable.
      </p>
      <p>
        There is another theory which states that this has already happened.
      </p>
    </td>
  </tr>
</table>
```

#### CSS

```css
table {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

table,
th,
td {
  border: 1px solid black;
}

td {
  padding: 0.5em;
  font-family: monospace;
}
```

#### 결과

명세
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-vertical-align |

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

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

같이 보기
-----

* Typical use cases of Flexbox, section "Center item"
* `line-height` (en-US), `text-align`, `margin`
* Understanding `vertical-align`, or "How (Not) To Vertically Center Content"
* Vertical-Align: All You Need To Know


animation-direction - CSS: Cascading Style Sheets

animation-direction
===================

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

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

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

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

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

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

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

### 값(Values)

`normal`

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

`reverse`

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

`alternate`

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

`alternate-reverse`

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

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

### Formal syntax
```

animation-direction =
  <single-animation-direction>#

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

```

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

CSS animations를 보십시오.

명세
--

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

브라우저 호환성(Browser compatibility)
-------------------------------

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

같이 보기(See also)
---------------

* Using CSS animations
* JavaScript `AnimationEvent` API


:not() - CSS: Cascading Style Sheets

:not()
======

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

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

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

구문
--
```

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

예제
--

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

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

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

이 같은 출력을 얻습니다:

명세
--

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

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

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


CSS Basic Box Model - CSS: Cascading Style Sheets

CSS Basic Box Model
===================

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

참고서
---

### 속성

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

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

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

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

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

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

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

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

#### 기타 속성

* `visibility`
안내서
---

CSS 박스 모델 입문

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

여백 상쇄 정복

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

시각적 서식 모델

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

명세
--

| Specification |
| --- |
| CSS Box Model Module Level 3  |


background-clip - CSS: Cascading Style Sheets

background-clip
===============

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

시도해보기
-----

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

구문
--

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

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

### 값

`border-box`

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

`padding-box`

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

`content-box`

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

`text`
Experimental

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

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `border-box` |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US) and `::first-line` (en-US). |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | a repeatable list |

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

background-clip =
  <visual-box>#

<visual-box> =
  content-box  |
  padding-box  |
  border-box

```

예제
--

### HTML

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

### CSS

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

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

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

### 결과

명세
--

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

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

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

같이 보기
-----

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


flex-basis - CSS: Cascading Style Sheets

flex-basis
==========

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-basis`** CSS 속성은 플렉스 아이템의 초기 크기를 지정합니다. `box-sizing`을 따로 지정하지 않는다면 콘텐츠 박스의 크기를 변경합니다.

시도해보기
-----

**참고:** `auto` 값을 가지지 않은 `flex-basis`와 `width`(`flex-direction``: column`인 경우 `height`) 값을 동시에 적용한 경우 `flex-basis`가 우선합니다.

구문
--

```css
/\* <'width'> 지정 \*/
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;

/\* 원본 크기 키워드 \*/
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/\* 플렉스 아이템 내용 크기에 따라 조절 \*/
flex-basis: content;

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

`flex-basis` 속성값은 `content` 키워드를 사용하거나, `<'width'>`를 나타내는 단위를 사용합니다.

### 값

`<'width'>`

`<length>`, 플렉스 컨테이너의 크기에 상대적인 `<percentage>`, `auto` 키워드 중 하나. 음수 값은 유효하지 않습니다.

`content`

플렉스 아이템의 콘텐츠 크기에 따라 자동으로 크기가 변합니다.

**참고:** `content` 키워드는 Flexible Box Layout의 첫 배포에 포함되지 않아, 일부 오래 된 구현체에서는 지원하지 않을 수 있습니다. `flex-basis`와 주 크기(`width`, `height`) 속성을 동시에 `auto`로 설정하면 동일한 효과를 볼 수 있습니다.

>
> **역사:** 원래 `flex-basis: auto`의 뜻은 자신의 `width` 또는 `height` 속성의 값을 사용하라는 것이었습니다.
>
>
>

* 그 후 `flex-basis: auto`는 자동 크기조절로 바뀌고, 기존의 `auto`는 `main-size`로 바뀌었습니다. bug 1032922에서 구현 기록을 볼 수 있습니다.bug 1093316에서 되돌려져 `auto` 가 다시 `width` / `height` 속성을 가리키게 됐고, 대신 새로운 `content` 키워드가 자동 크기조절을 맡게 됐습니다. (Firefox bug 1105111에서 볼 수 있습니다)

### 형식 구문
```

flex-basis =
  content    |
  <'width'>

```

예제
--

### HTML

```html
<ul class="container">
  <li class="flex flex1">1: flex-basis test</li>
  <li class="flex flex2">2: flex-basis test</li>
  <li class="flex flex3">3: flex-basis test</li>
  <li class="flex flex4">4: flex-basis test</li>
  <li class="flex flex5">5: flex-basis test</li>
</ul>

<ul class="container">
  <li class="flex flex6">6: flex-basis test</li>
</ul>
```

### CSS

```css
.container {
  font-family: arial, sans-serif;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

.flex {
  background: #6ab6d8;
  padding: 10px;
  margin-bottom: 50px;
  border: 3px solid #2e86bb;
  color: white;
  font-size: 20px;
  text-align: center;
  position: relative;
}

.flex:after {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  margin-top: 10px;
  width: 100%;
  color: #333;
  font-size: 18px;
}

.flex1 {
  flex-basis: auto;
}

.flex1:after {
  content: "auto";
}

.flex2 {
  flex-basis: max-content;
}

.flex2:after {
  content: "max-content";
}

.flex3 {
  flex-basis: min-content;
}

.flex3:after {
  content: "min-content";
}

.flex4 {
  flex-basis: fit-content;
}

.flex4:after {
  content: "fit-content";
}

.flex5 {
  flex-basis: content;
}

.flex5:after {
  content: "content";
}

.flex6 {
  flex-basis: fill;
}

.flex6:after {
  content: "fill";
}
```

### 결과

명세
--

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

|  |  |
| --- | --- |
| 초기값 | `auto` |
| 적용대상 | flex items, including in-flow pseudo-elements |
| 상속 | no |
| Percentages | refer to the flex container's inner main size |
| 계산 값 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a length, percentage or calc(); |

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

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

같이 보기
-----

* CSS 플렉스박스 안내서: *Basic Concepts of Flexbox*
* CSS 플렉스박스 안내서: *Controlling Ratios of flex items along the main axis (en-US)*
* `width`


z-index - CSS: Cascading Style Sheets

z-index
=======

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

시도해보기
-----

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

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

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

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

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

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

### 값

`auto`

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

`<integer>`

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

### 형식 구문
```

z-index =
  auto       |
  <integer>  |
  inherit

```

예제
--

### HTML

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

### CSS

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

### 결과

명세
--

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

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

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

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

같이 보기
-----

* CSS `position` 속성
* CSS z-index 이해하기


Compositing and Blending - CSS: Cascading Style Sheets

Compositing and Blending
========================

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

참고
--

### 속성

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

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

| Specification |
| --- |
| Compositing and Blending Level 2  |
| Compositing and Blending Level 1  |


border-style - CSS: Cascading Style Sheets

border-style
============

**`border-style`** CSS 단축 속성은 요소 테두리 네 면의 스타일을 지정합니다.

시도해보기
-----

구문
--

```css
/\* 키워드 값 \*/
border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

/\* 세로방향 | 가로방향 \*/
border-style: dotted solid;

/\* 위 | 가로방향 | 아래 \*/
border-style: hidden double dashed;

/\* 위 | 오른쪽 | 아래 | 왼쪽 \*/
border-style: none solid dotted dashed;

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

`border-style` 속성은 한 개에서 네 개의 값을 사용해 지정할 수 있습니다.

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

각각의 값은 아래 목록 중 하나로 지정합니다.

### 값

`<line-style>`

테두리의 스타일을 설명합니다. 다음 표의 값을 사용할 수 있습니다.

| `none` |  | `hidden` 키워드와 마찬가지로 테두리를 표시하지 않습니다. `background-image`를 지정하지 않았으면 해당 면의 `border-width` 계산값은 지정값을 무시하고 `0`이 됩니다. 표에서, 칸의 테두리 상쇄 시 `none`은 제일 낮은 우선순위를 가집니다. 따라서 주변 칸이 테두리를 가진다면 테두리를 그립니다. |
| --- | --- | --- |
| `hidden` |  | `none` 키워드와 마찬가지로 테두리를 표시하지 않습니다. Unless a `background-image`를 지정하지 않았으면 해당 면의 `border-width` 계산값은 지정값을 무시하고 `0`이 됩니다. 표에서, 칸의 테두리 상쇄 시 `hidden`은 제일 높은 우선순위를 가집니다. 따라서 주변 칸이 테두리를 가지더라도 그리지 않습니다. |
| `dotted` |  | 테두리를 둥근 점 여러개로 그립니다. 점 간격은 명세에서 지정하지 않으며 구현마다 다릅니다. 점의 반지름은 해당 면 `border-width`의 절반입니다. |
| `dashed` |  | 테두리를 직사각형 여러개로 그립니다. 사각형의 크기와 길이는 명세에서 지정하지 않으며 구현마다 다릅니다. |
| `solid` |  | 테두리를 하나의 직선으로 그립니다. |
| `double` |  | 테두리를 두 개의 평행한 직선으로 그립니다. |
| `groove` |  | 테두리가 파인 것처럼 그립니다.`ridge`의 반대입니다. |
| `ridge` |  | 테두리가 튀어나온 것처럼 그립니다. `groove`의 반대입니다. |
| `inset` |  | 요소가 파인 것처럼 테두리를 그립니다.`outset`의 반대입니다. `border-collapse`가 `collapsed`인 칸에서는 `groove`와 동일합니다. |
| `outset` |  | 요소가 튀어나온 것처럼 그립니다. `inset`의 반대입니다. `border-collapse`가 `collapsed`인 칸에서는 `ridge`와 동일합니다. |

### 형식 구문
```

border-style =
  <line-style>{1,4}

<line-style> =
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

```

예제
--

### 속성 값의 예시 표

가능한 모든 값을 나열한 표입니다.

#### HTML

```html
<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>
```

#### CSS

```css
/\* 테이블 스타일 \*/
table {
  border-width: 3px;
  background-color: #52e396;
}
tr,
td {
  padding: 2px;
}

/\* border-style 예제 클래스 \*/
.b1 {
  border-style: none;
}
.b2 {
  border-style: hidden;
}
.b3 {
  border-style: dotted;
}
.b4 {
  border-style: dashed;
}
.b5 {
  border-style: solid;
}
.b6 {
  border-style: double;
}
.b7 {
  border-style: groove;
}
.b8 {
  border-style: ridge;
}
.b9 {
  border-style: inset;
}
.b10 {
  border-style: outset;
}
```

#### 결과

명세
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-style |

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

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

같이 보기
-----

* 테두리 관련 CSS 단축 속성: `border`, `border-width`, `border-color`, `border-radius`


:enabled - CSS: Cascading Style Sheets

:enabled
========

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

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

구문
--

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

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

### HTML

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

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

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

### CSS

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

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

### 결과

명세
--

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

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

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

같이 보기
-----

* `:disabled`


border-image-source - CSS: Cascading Style Sheets

border-image-source
===================

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

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

* Learn more
* See full compatibility
* Report feedback
**`border-image-source`** CSS 속성은 요소의 테두리 이미지로 사용할 원본 이미지를 지정합니다.

시도해보기
-----

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

구문
--

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

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

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

### 값

`none`

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

`<image>`

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

### 형식 구문
```

border-image-source =
  none     |
  <image>

<image> =
  <url>       |
  <gradient>

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

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

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

```

예제
--

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

명세
--

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

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

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

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


width - CSS: Cascading Style Sheets

width
=====

CSS **`width`** 속성은 요소의 너비를 설정합니다. 기본값은 콘텐츠 영역의 너비이지만, `box-sizing`이 `border-box`라면 테두리 영역의 너비를 설정합니다.

시도해보기
-----

`min-width`와 `max-width` 속성은 `width`를 덮어씁니다.

구문
--

```css
/\* <length> \*/
width: 300px;
width: 25em;

/\* <percentage> \*/
width: 75%;

/\* 키워드 \*/
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content(20em);
width: auto;

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

`width` 속성은 다음과 같이 지정합니다.

* `min-content`, `max-content`, `fit-content`, `auto` 키워드 중 하나.
* 하나의 `<length>` 또는 `<percentage>` 값.
### 값

* `<length>`
    + : 너비의 절댓값.
* `<percentage>`
    + : 컨테이닝 블록 너비의 백분율. 컨테이닝 블록이 요소 너비에 영향을 받는 경우의 결과 레이아웃은 정해지지 않습니다.
* `auto`
    + : 요소의 너비를 브라우저가 계산해 지정합니다.
* `max-content`
    + : 본질적인 선호 너비.
* `min-content`
    + : 본질적인 최소 너비.
* `fit-content(`<length-percentage>``
    + : `min(max-content, max(min-content, <length-percentage>))`의 결과.
### 형식 구문
```

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

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

```

예제
--

### 기본 너비

```css
p.goldie {
  background: gold;
}
```

```html
<p class="goldie">
  Mozilla 커뮤니티는 많은 수의 대단한 소프트웨어를 제작합니다.
</p>
```

### `px`과 `em`

```css
.px\_length {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.em\_length {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}
```

```html
<div class="px\_length">픽셀 너비</div>
<div class="em\_length">em 너비</div>
```

### 백분율

```css
.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}
```

```html
<div class="percent">백분율 너비</div>
```

### `max-content`

```css
p.maxgreen {
  background: lightgreen;
  width: intrinsic; /\* Safari/WebKit uses a non-standard name \*/
  width: -moz-max-content; /\* Firefox/Gecko \*/
  width: -webkit-max-content; /\* Chrome \*/
  width: max-content;
}
```

```html
<p class="maxgreen">
  Mozilla 커뮤니티는 많은 수의 대단한 소프트웨어를 제작합니다.
</p>
```

### `min-content`

```css
p.minblue {
  background: lightblue;
  width: -moz-min-content; /\* Firefox \*/
  width: -webkit-min-content; /\* Chrome \*/
  width: min-content;
}
```

```html
<p class="minblue">
  Mozilla 커뮤니티는 많은 수의 대단한 소프트웨어를 제작합니다.
</p>
```

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

페이지를 확대하거나 글꼴 크기를 늘렸을 때 `width` 속성을 지정한 요소가 잘리거나 다른 내용을 가리지 않도록 확인하세요.

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0
명세
--

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # width-height-keywords |
| 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 |
| 계산 값 | a percentage or `auto` 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.

같이 보기
-----

* 박스 모델, `height`, `box-sizing`, `min-width`, `max-width`


값 정의 구문 - CSS: Cascading Style Sheets

값 정의 구문
=======

**CSS 값 정의 구문**은 형식 문법으로서 CSS 속성이나 함수가 받을 수 있는 유효한 값의 집합을 정의합니다. 유효한 값 집합은 정의 구문으로 인한 제한 외에도 반드시 양의 수가 와야 하는 등, 맥락에 따라 추가로 제한될 수 있습니다.

정의 구문은 허용하는 값과 그 값 사이의 상호 작용을 설명합니다. "키워드", 일부 문자 "리터럴", 주어진 CSS 자료형에 속하는 값이거나, 다른 CSS 속성이 구문의 구성 요소가 될 수 있습니다.

구성 요소 값 유형
----------

### 키워드

#### 일반 키워드

사전 정의된 의미가 있는 키워드는 따옴표 없이 문자 그대로 나타납니다. 예시로는 `auto`, `smaller`, `ease-in`이 있습니다.

#### 특별 키워드: `inherit`, `initial`, `unset`

모든 CSS 속성은 전역으로 정의한 `inherit`, `initial`, `unset` 키워드를 허용합니다. 세 키워드는 값 정의에 나타나지 않으며 암시적으로 정의됩니다.

### 리터럴

CSS에서 빗금('`/`')과 쉼표('`,`')와 같은 일부 문자는 그대로 나타날 수 있고, 속성 정의에서 값 구분을 위해 사용합니다. 쉼표는 종종 열거하는 값이나 수학형 함수의 매개변수를 구분할 때 사용합니다. 빗금은 의미가 다르지만 구문이 같은 값을 분리할 때 종종 사용합니다. 보통 빗금은 단축 속성에서 자료형이 같은 서로 다른 속성의 값을 구분할 때 쓰입니다.

두 기호 모두 값 정의에 문자 그대로 나타납니다.

### 자료형

#### 기본 자료형

어떤 종류의 데이터는 CSS의 전반에서 사용하며, 명세의 모든 값에 대해 한 번만 정의합니다. 이런 데이터의 자료형을 "기본 자료형"이라고 부르며, `<angle>`과 `<string>` (en-US)처럼 이름을 '`<`'와 '`>`' 기호로 감싸서 표현합니다.

#### 비 말단 자료형

보다 덜 흔한 자료형인 "비 말단 자료형" 역시 '`<`'와 '`>`'로 감쌉니다.

비 말단 자료형에는 두 종류가 존재합니다.

* **어떤 속성과 같은 이름을 공유하는** 자료형으로, 이름을 따옴표로 감싸는 경우. 이 자료형의 값은 해당 속성이 허용하는 값과 동일합니다. 많은 경우 단축 속성에서 사용합니다.
* **다른 속성과 이름을 공유하지 않는** 자료형. 기본 자료형과 매우 유사하며, 차이점은 이 자료형의 정의가 어디에 되어있나 정도입니다. 기본 자료형과는 달리, 보통 이 자료형을 사용하는 속성과 가까운 곳에서 정의합니다.
구성 요소 값 결합자
-----------

### 대괄호

**대괄호**는 다수의 개체, 결합자, 곱수를 감싸서 하나의 구성 요소로 변환합니다. 대괄호는 **구성 요소를 묶어서 우선순위 규칙을 우회**할 때 사용합니다.
```

bold [ thin && <length> ]
```

위의 예제는 다음의 값과 일치합니다.

* `bold thin 2vh`
* `bold 0 thin`
* `bold thin 3.5em`

하지만 다음과는 일치하지 않습니다.

* `thin bold 3em`. `bold`를 대괄호로 정의한 구성 요소와 병치했기 때문에 반드시 그 앞에 나타나야 합니다.
### 병치

여러 단어, 리터럴, 자료형을 한 개 이상의 공백으로만 구분해서 나란히 배치하는 것을 **병치**라고 합니다. 병치한 모든 구성 요소는 **필수이며 정확히 순서 그대로 나타나야 합니다**.
```

bold <length> , thin
```

위의 예제는 다음의 값과 일치합니다.

* `bold 1em, thin`
* `bold 0, thin`
* `bold 2.5cm, thin`
* `bold 3vh, thin`

하지만 다음과는 일치하지 않습니다.

* `thin 1em, bold`. 모든 개체가 정확한 순서를 따라야 합니다.
* `bold 1em thin`. 모든 개체가 필수이므로, 리터럴로 표기한 쉼표 역시 존재해야 합니다.
* `bold 0.5ms, thin`. `ms` 값은 `<length>`가 아닙니다.
### 이중 앰퍼샌드

두 개 이상의 구성 요소를 **이중 앰퍼샌드**, `&&`로 구분하면 모든 개체가 **필수지만 순서는 상관 없음**을 의미합니다.
```

bold && <length>
```

위의 예제는 다음의 값과 일치합니다.

* `bold 1em`
* `bold 0`
* `2.5cm bold`
* `3vh bold`

하지만 다음과는 일치하지 않습니다.

* `bold`. 두 구성 요소가 값에 모두 나타나야 합니다.
* `bold 1em bold`, 두 구성 요소는 한 번씩만 나타나야 합니다.

**참고:** 병치는 이중 앰퍼샌드보다 우선순위가 높습니다. 즉 `bold thin && <length>`는 `[ bold thin ] && <length>`와 같습니다. 따라서 `bold thin <length>`와 `<length> bold thin`은 일치하지만 `bold <length> thin`은 일치하지 않습니다.

### 이중 바

두 개 이상의 구성 요소를 **이중 바**, `||`로 구분하면 모든 개체 중 **적어도 하나는 나타나야 하고 순서는 상관하지 않습니다**. 보통 단축 속성의 여러 값을 정의할 때 사용합니다.
```

<'border-width'> || <'border-style'> || <'border-color'>
```

위의 예제는 다음의 값과 일치합니다.

* `1em solid blue`
* `blue 1em`
* `solid 1px yellow`

하지만 다음과는 일치하지 않습니다.

* `blue yellow`, 하나의 구성 요소는 한 번만 나타나야 합니다.
* `bold`, 이 키워드는 어느 개체에도 속하지 않는 값입니다.

**참고:** 이중 앰퍼샌드는 이중 바보다 우선순위가 높습니다. `bold || thin && <length>`는 `bold || [ thin && <length> ]`와 같으며, `bold`, `thin <length>`, `bold thin <length>`, 그리고 `thin <length> bold`와 일치합니다. 하지만 `<length> bold thin`은 일치하지 않는데, `bold`를 생략하지 않으면 `thin && <length>` 구성 요소 이전 또는 다음에 위치해야 하기 때문입니다.

### 단일 바

두 개 이상의 개체를 **단일 바**, `|`로 구분하면 모든 개체 중에서 **한 개만이 반드시 존재해야 합니다**. 보통 가능한 키워드 값의 목록을 구성할 때 사용합니다.
```

<percentage> | <length> | left | center | right | top | bottom
```

위의 예제는 다음의 값과 일치합니다.

* `3%`
* `0`
* `3.5em`
* `left`
* `center`
* `right`
* `top`
* `bottom`

하지만 다음과는 일치하지 않습니다.

* `center 3%`, 오직 하나의 구성 요소만 나타나야 합니다.
* `3em 4.5em`, 구성 요소는 한 번만 나타나야 합니다.

**참고:** 이중 바는 단일 바보다 우선순위가 높으며 `bold | thin || <length>`는 `bold | [ thin || <length> ]`와 같습니다. `bold`, `thin`, `<length>`, `<length> thin`, `thin <length>`는 일치하지만, `|` 결합자는 좌우 중 단 하나만 선택할 수 있기 때문에 `bold <length>`는 일치하지 않습니다.

구성 요소 값 배수
----------

배수는 기호로서, 앞의 개체를 몇 번이나 반복할 수 있는지 표시합니다. 배수가 없는 개체는 반드시 단 한 번만 나타나야 합니다.

배수는 거듭 표시할 수 없고, 모든 결합자보다 우선순위가 높습니다.

### 별표 (`*`)

**별표 배수**는 개체가 **0번, 한 번, 또는 여러 번 나타날 수 있음**을 표시합니다.
```

bold smaller*
```

위의 예제는 다음의 값과 일치합니다.

* `bold`
* `bold smaller`
* `bold smaller smaller`
* `bold smaller smaller smaller` 등등.

하지만 다음과는 일치하지 않습니다.

* `smaller`, `bold`는 병치이기 때문에 `smaller` 키워드 앞에 반드시 나타나야 합니다.
### 더하기 (`+`)

**더하기 배수**는 개체가 **한 번 또는 여러 번 나타날 수 있음**을 표시합니다.
```

bold smaller+
```

위의 예제는 다음의 값과 일치합니다.

* `bold smaller`
* `bold smaller smaller`
* `bold smaller smaller smaller` 등등.

하지만 다음과는 일치하지 않습니다.

* `bold`, `smaller`는 적어도 한 번 나타나야 합니다.
* `smaller`, `bold`는 병치이기 때문에 `smaller` 키워드 앞에 반드시 나타나야 합니다.
### 물음표 (`?`)

**물음표 배수**는 개체가 선택 사항이며, **반드시 0번 또는 한 번만 나타나야 함**을 표시합니다.
```

bold smaller?
```

위의 예제는 다음의 값과 일치합니다.

* `bold`
* `bold smaller`

하지만 다음과는 일치하지 않습니다.

* `bold smaller smaller`, `smaller`는 최대 한 번만 나타나야 합니다.
* `smaller`, `bold`는 병치이기 때문에 `smaller` 키워드 앞에 반드시 나타나야 합니다.
### 중괄호 (`{ }`)

**중괄호 배수**는 쉼표로 구분한 두 개의 정수, A와 B를 포함하며 개체가 **최소 A번, 최대 B번 나타나야 함**을 표시합니다.
```

bold smaller{1,3}
```

위의 예제는 다음의 값과 일치합니다.

* `bold smaller`
* `bold smaller smaller`
* `bold smaller smaller smaller`

하지만 다음과는 일치하지 않습니다.

* `bold`, `smaller`는 적어도 한 번 나타나야 합니다.
* `bold smaller smaller smaller smaller`, `smaller`는 최대 3회까지만 나타나야 합니다.
* `smaller`, `bold`는 병치이기 때문에 `smaller` 키워드 앞에 반드시 나타나야 합니다.
### 해시 (`#`)

**해시 배수**는 (더하기 배수처럼) 개체가 한 번 또는 여러 번 나타날 수 있지만, 서로 쉼표로 구분해야 함을 표시합니다.
```

bold smaller#
```

위의 예제는 다음의 값과 일치합니다.

* `bold smaller`
* `bold smaller, smaller`
* `bold smaller, smaller, smaller`, 등등.

하지만 다음과는 일치하지 않습니다.

* `bold`, `smaller`는 적어도 한 번 나타나야 합니다.
* `bold smaller smaller smaller`, 각각의 `smaller`를 쉼표로 구분해야 합니다.
* `smaller`, `bold`는 병치이기 때문에 `smaller` 키워드 앞에 반드시 나타나야 합니다.
### 느낌표 (`!`)

그룹 뒤에 표시하는 **느낌표 배수**는 그룹이 반드시 존재해야 하며, 그룹 내 항목의 문법으로 인해 전체 콘텐츠가 생략 가능한 형태더라도 최소한 하나의 값은 생성해내야 함을 나타냅니다.
```

[ bold? smaller? ]!
```

위의 예제는 다음의 값과 일치합니다.

* `bold`
* `smaller`
* `bold smaller`

하지만 다음과는 일치하지 않습니다.

* `bold`도 없고 `smaller`도 없는 경우, 적어도 하나의 값은 나타나야 합니다.
* `smaller`, `bold`는 병치이기 때문에 `smaller` 키워드 앞에 반드시 나타나야 합니다.
* `bold smaller bold`, `bold`와 `smaller`는 단 한 번만 나타나야 합니다.
요약
--

| 기호 | 이름 | 설명 | 예제 |
| --- | --- | --- | --- |
| 결합자 |
| --- |
|  | 병치 | 구성 요소가 필수이고 순서에 따라 나타나야 함 | `solid <length>` |
| `&&` | 이중 앰퍼샌드 | 구성 요소가 필수이지만 순서에 무관함 | `<length> && <string>` |
| `||` | 이중 바 | 구성 요소가 하나 이상 나타나야 하고 순서에 무관함 | `<'border-image-outset'> || <'border-image-slice'>` |
| `|` | 단일 바 | 구성 요소가 정확히 하나만 나타나야 함 | `smaller | small | normal | big | bigger` |
| `[ ]` | 대괄호 | 우선순위를 우회하기 위해 구성 요소를 묶음 | `bold [ thin && <length> ]` |
| 배수 |
|  | 배수 없음 | 정확히 한 번 | `solid` |
| `*` | 별표 | 0회 이상 | `bold smaller*` |
| `+` | 더하기 | 1회 이상 | `bold smaller+` |
| `?` | 물음표 | 0회 또는 1회 (선택 사항) | `bold smaller?` |
| `{A,B}` | 중괄호 | 최소 `A`회, 최대 `B`회 | `bold smaller{1,3}` |
| `#` | 해시 | 1회 이상, 단 쉼표로 구분 | `bold smaller#` |
| `!` | 느낌표 | 그룹이 적어도 하나의 값을 생성해야 함 | `[ bold? smaller? ]!` |

명세
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # value-defs |


padding - CSS: Cascading Style Sheets

padding
=======

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

시도해보기
-----

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

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

구문
--

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

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

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

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

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

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

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

**`<length>`**

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

`<percentage>`

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

### 형식 구문
```

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

```

예제
--

### 간단한 예제

#### HTML

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

#### CSS

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

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

### 더 많은 예제

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

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

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

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

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

명세
--

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

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `padding-bottom`: `0`
* `padding-left`: `0`
* `padding-right`: `0`
* `padding-top`: `0`
 |
| 적용대상 | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to `::first-letter` (en-US) and `::first-line` (en-US). |
| 상속 | no |
| Percentages | refer to the width of the containing block |
| 계산 값 | as each of the properties of the shorthand:* `padding-bottom`: the percentage as specified or the absolute length
* `padding-left`: the percentage as specified or the absolute length
* `padding-right`: the percentage as specified or the absolute length
* `padding-top`: the percentage as specified or the absolute length
 |
| Animation type | a length |

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

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

같이 보기
-----

* CSS 기본 박스 모델 입문
* `padding-top`, `padding-right`, `padding-bottom`, `padding-left`.


선택자 목록 - CSS: Cascading Style Sheets

선택자 목록
======

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

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

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

구문
--
```

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

예제
--

### 한 줄 묶기

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

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

### 여러 줄 묶기

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

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

### 선택자 목록 무효화

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

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

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

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

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

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

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

명세
--

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

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

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

같이 보기
-----

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


<length-percentage> - CSS: Cascading Style Sheets

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

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

구문
--

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

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

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

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

명세
--

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

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

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


시각적 서식 모델 - CSS: Cascading Style Sheets

시각적 서식 모델
=========

CSS **시각적 서식 모델** (visual formatting model)은 문서를 처리하여 그것을 시각적 매체에 표시하는 알고리즘입니다. 이 모델은 CSS의 기본 개념입니다.

시각적 서식 모델은 문서의 각 요소를 변환하여, CSS 상자 모델에 부합하는 0, 1 또는 여러 상자를 생성합니다. 각 상자의 레이아웃은 다음과 같이 정의됩니다:

* 상자의 면적: 정확히 정의하거나 제약을 받거나, 아에 정의하지 않습니다.
* 상자의 유형: 인라인, 인라인수준, 원자 인라인수준, 블록.
* 위치잡기 기법: 일반 대열 소속, 부동체, 또는 절대 위치잡기.
* 트리 구조에 속한 다른 요소 무리: 그것의 자녀와 이웃.
* viewport 크기와 위치.
* 컨테이너에 속한 이미지의 고유한 면적.
* 다른 외부 정보

동 모델은 컨테이너 블록의 모서리 기준과 비례하여 상자를 렌더링합니다. 보통, 하나의 상자는 자기 자손들을 위한 컨테이너 블록을 수립합니다. 그러나 상자는 자신의 상위 컨테이너 블록에 구속되지 않습니다. 상자 레이아웃이 상위 컨테이너 블록을 벗어나면 **대열이탈** (overflow)했다고 말합니다..

상자 생성
-----

상자 생성은 해당 문서의 요소로부터 상자를 생성하는 CSS 시각적 서식 모델의 일부입니다. 생성된 상자는 다양한 유형으로, 이 유형은 시각적 서식이 이뤄지는 방식에 영향을 미칩니다. 생성되는 상자 유형은 `display` (en-US) CSS 속성의 값 여하에 따라 달라집니다.

### 블록수준 요소와 블록 상자

어떤 요소를 *블록수준*이라고 말하려면 계산된 `display` (en-US) CSS 속성값이 `block`, `list-item`, 또는 `table`일 때입니다. 블록수준 요소는 사실상 하나의 블록으로 취급되어 시각적으로 서식되며, 수직적으로 겹겹이 포개집니다.

각각의 블록수준 상자는 블록 서식 상황 (en-US)에 참여합니다. 각 블록수준 요소는 적어도 하나의 블록수준 상자를 생성하며 이를 일컬어 **수석 블록수준 상자<** (principal block-level box) 라고 합니다. 일부 요소 무리는 목록항목 요소와 같이 목록 항목을 안내하는 글머리표와 서로 다른 타이포그래픽 요소를 처리하기 위한 상자를 추가적으로 생성하듯 더 많은 상자 무리를 생성할 수 있습니다. 대다수는 수석 블록 수준 상자만을 생성합니다.

수석 블록수준 상자는 자손이 생성한 상자 및 콘텐츠를 포함합니다. 상자는 위치잡기 기법에도 관여하고 있습니다.

블록 수준 상자는 역시 블록 콘테이너 상자도 될 수 있습니다. *블록 컨테이너 상자*는 다른 블록수준 상자만을 포함하고 인라인 서식 상황 (en-US)을 생성하므로 인라인 상자 무리만을 포함합니다.

중요한 점은 블록수준 상자와 블록 컨테이너 상자의 개념은 별개라는 점에 유의해야 한다는 것입니다. 첫째, 상자가 자기 부모와 형제자매과 함께하는 행동 방식을 설명합니다. 둘째, 상자가 자기 자손과는 어떻게 상호작용하는지 설명합니다. 테이블과 같은 블록 수준의 상자 무리는 블록 컨테이너 상자가 아닙니다. 마찬가지로 **비객원<** (non-replaced) 인라인 블록과 비객원 테이블 셀과 같은 일부 블록 컨테이너 상자는 블록 수준 상자가 아닙니다.

또한, 블록 컨테이너 상자이며 동시에 블록수준 상자를 일컬어 우리는 **블록 상자<** (block boxes) 라고 부릅니다.

#### 무명 블록 상자

경우에 따라서는 시각적 서식 알고리즘은 보충 상자를 추가할 알고리즘도 필요합니다

CSS 선택기는 해당 상자에 이름을 부여하거나 스타일링을 할 수 없기 때문에 이를 일컬어*무명 상자*라고 합니다.

선택기는 무명 상자와 협력하지 않기 때문에 스타일시트를 통해 스타일링이 적용될 수 없습니다. 즉, 상속할 수 있는 모든 CSS 속성은 `inherit` 값을 갖고 상속할 수 없는 CSS 속성은 `initial` 값을 가집니다.

상자를 포함하는 블록은 인라인수준 상자 또는 블록수준 상자만을 포함합니다. 그러나 문서는 두 가지 모두를 혼합해 포함합니다. 그 경우 무명 블록 상자는 인접 인라인수준 상자 주변에 생성됩니다.

### 예제

아래와 같은 (`<div>` (en-US)와 `<p>`에 기본값 스타일링이 적용된 HTML 코드가 `display: block` 속성을 갖고 있다면:
```

<div>약간의 인라인 텍스트 <p>뒤를 잇는 단락 하나</p> 그 뒤를 잇는 인라인 텍스트.</div>
```

두 개의 무명 블록 상자가 만들어집니다: 하나는 단락 이전 텍스트(`약간의 인라인 텍스트`) 나머지 하나는 단락 이후 텍스트(`그 뒤를 잇는 인라인 텍스트`). 이는 다음과 같은 블록 구조를 구축합니다:

결과는:
```

약간의 인라인 텍스트
뒤를 잇는 단락 하나
그 뒤를 잇는 인라인 텍스트.
```

`<p>` 요소인 상자와 달리 웹 개발자는 두 개의 무명 상자 스타일을 제어할 수 없습니다. 상속 가능한 속성은 (마치 텍스트의 색상을 정의하기 위한 `color`와 같이) `<div>` (en-US)의 속성 값에서 값을 취하고, 나머지는 초기(`initial`)값으로 설정합니다. 예를 들어, 무명 상자는 `background-color`를 갖지 않을 것이라, 항상 해당 속성의 초기(`initial`)값을 가지며 투명합니다. 따라서 `<div>`의 배경이 보여집니다. 특정 배경색은 `<p>` 상자에 적용할 수 있습니다. 마찬가지로 두 무명 상자는 항상 같은 색을 텍스트에 사용합니다.

무명 블록 상자를 만드는 또 다른 사례는 하나 또는 여러 개의 블록 상자를 포함하는 인라인 상자입니다. 이 경우 블록 상자가 들어있는 상자는 두 개의 인라인 상자로 쪼개집니다. 하나는 블록 상자 이전에, 다른 하나는 뒤에 옵니다. 블록 상자 이전의 모든 인라인 상자는 *무명 블록 상자*로 포섭되며, 블록 상자 뒤에 있는 인라인 상자도 마찬가지입니다. 따라서 블록 상자는 인라인 요소를 포함하는 두 개의 무명 블록 상자의 형제가 됩니다.

중간에 인라인 콘텐츠가 없이 여러 블록 상자가 있는 경우 무명 블록 상자가 해당 상자 집합 이전과 이후에 생성됩니다.

### 예제

아래 HTML 코드를 보면 `<p>`는 `display: inline` 속성을 갖고 있고 `<span>`는 `display:block` 속성을 갖고 있습니다:
```

<p>일부 <em>인라인</em> 텍스트 <span>그 뒤를 잇는 단락</span> 그 뒤를 잇는 추가 인라인 텍스트.</p>
```

두 개의 무명 블록 상자가 생성되었습니다. 스팬 요소 이전의 텍스트(`일부 인라인 텍스트`) 하나와 그 뒤의 텍스트(`그 뒤를 잇는 추가 인라인 텍스트`) 하나가 있는데 이로써 다음과 같은 블록 구조가 주어졌습니다:

![](/ko/docs/Web/CSS/Visual_formatting_model/anonymous_block_box_break.png)

이 것의 결과는:
```

약간의 인라인 텍스트
뒤를 잇는 단락 하나
그 뒤를 잇는 인라인 텍스트.
```

### 인라인수준 요소와 인라인 상자

어떤 요소가 *인라인수준*이라고 말하려면 자신의 계산된 `display` (en-US) CSS 속성 값이 `inline`, `inline-block` 또는 `inline-table`일 때입니다. 시각적으로는 이것은 콘텐츠로 이뤄진 블록 무리를 구성하지 않고 다른 인라인수준 콘텐츠와 함께 라인의 형태로 배포됩니다. 일반적으로 강조 또는 이미지와 같이 서로 다른 서식을 가진 단락의 콘텐츠는 인라인수준 요소로 만들어집니다.

**경고:** 이 도식은 구식 용어를 사용합니다: 아래 참조 사항을 보세요. 그것 이외에도 오른쪽의 노란색 타원은 정의에 따르면 왼쪽의 타원형과 동일하거나 그보다 크기 때문에(수학적 상위집합일 수 있어) 그림이 틀렀습니다, 왜냐하면 해당 CSS 스펙을 보면 "인라인수준 요소는 인라인 서식 상황에 참여하는 상자인 인라인수준 상자를 생성한다"라고 쓰여있기 때문입니다. CSS 2.2, 9.2.2장 참조

인라인 수준 요소는 인라인 서식 상황에 참여하는 상자로 정의되는 *인라인수준 상자*를 생성합니다. *인라인 상자*는 상자와 인라인 수준 상자 모두가 해당합니다. 다만 이들 상자의 콘텐츠는 인라인 서식 상황에 참여해야 합니다. 예를 들어, `display: inline` 속성을 가진 모든 비객원 상자의 경우가 인라인입니다. 인라인 서식 상황에 참여하지 않는 인라인수준 상자를 **원자 인라인수준 상자** (atomic inline-level boxes)라고 합니다. 객원 인라인수준 요소 또는 계산된 `display` (en-US) 값이 `inline-block`인 요소에 의해 생성된 해당 상자 무리는 인라인 상자에서 가능했던 것처럼 여러 상자로 쪼개지지 않습니다.

**참고:** 처음에는 원자 인라인수준 상자를 원자 인라인 상자라고 불렀습니다. 그 명명은 불행한 일입니다. 인라인 상자가 **아니기** 때문입니다. 이건 CSS 규격 상에 오타로 시정된 겁니다. 그렇긴 하지만, 문장 속에서 원자 인라인 상자를 마주칠 때마다 무리없이 원자 인라인 수준 상자로 읽을 수 있습니다. 그냥 이름 변경에 불과하기 때문입니다.

**참고:** 원자 일라인 상자는 인라인 서식 상황 속에서 여러 라인에 걸쳐 분할될 수 없습니다.

```html
<style>
 span {
 display: inline; /\* default value\*/
 }
</style>
<div style="width:20em;">
  스팬 요소에 포함된 택스트는
  <span> 몇 개의 라인으로 분할 될 수 있습니다. 왜냐면 </span> 그것이 인라인
  상자이기 때문입니다.
</div>
```

이 것의 결과는: The text in the span can be split into several lines as it is an inline box.

```html
<style>
 span {
 display: inline-block;
 }
</style>
<div style="width:20em;">
  스팬 요소에 포함된 텍스트는
  <span>몇 라인으로 분할 될 수 없 습니다. 왜냐면 </span> 그것이 인라인 블록이기
  때문입니다.
</div>
```

이 것의 결과는:스팬 요소에 포함된 텍스트는 분할될 수 없습니다. 왜냐면 인라인 블록 상자이기 때문입니다.

#### 무명 인라인 상자

블록상자처럼 CSS 엔진에 의해 자동적으로 인라인상자가 생성되는 경우가 몇 개 있습니다. 이들 인라인 상자는 무명으로, 선택기가 이름을 특정할 수 없습니다. 무명 인라인 상자의 속성은, 상속 가능한 것은 상속된 값을, 그 이외는 `initial` 값을 가집니다.

무명의 인라인 상자가 만들어지는 흔한 경우는 인라인 서식 상황을 만드는 블록상자의 직계 자식 요소로 파악되는 텍스트가 있는 경우입니다. 이 경우, 동 텍스트는 최대한 큰 무명 인라인 상자에 넣을 수 있습니다. 또한, CSS의 `white-space` 속성으로 지정된 동작에 의해 제거되는 공백의 콘텐츠는 결국 공백이 될 것이기 때문에 무명 인라인 상자를 생성하지 않습니다.

**참고:** 예제 TBD

### 다른 유형의 상자

#### 라인 상자

*라인 상자*는 텍스트 라인을 표현하기 위해 인라인 서식 상황에 의해 생성되는 상자입니다. 블록 상자 내부의 라인 상자는 상자의 한쪽 테두리로부터 반대측의 테두리까지 넓어집니다. 부동체 (en-US)가 있을 경우 라인 상자 구역은 왼쪽 부동체의 맨우측 테두리에서 시작해 우측 부동체의 맨좌측 테두리에서 끝납니다.

이들 상자는 기술적인 것으로, 보통 웹 저술가가 이것에 대해 고민할 필요는 없습니다.

#### 내부진행 상자

`display: run-in`을 사용하도록 정의되는 **내부진행 상자** (Run-in boxes)는 후속 상자의 유형 여하에 따라 블록 상자이거나 인라인 상자입니다. 그들은 가능할 경우 자신의 첫 단락 내부에 진행하는 글 제목을 생성하는 데 사용될 수 있습니다.

**참고:** 내부진행 상자는 CSS 2.1 규격에서 제외되었다. 상호운용 실현 가능성을 불충분하게 명시했기 때문입니다. 그들이 **CSS 3** (CSS 3)에선 다시 등장할 수도 있지만, 현재로선 *실험 상태*로 간주합니다. 그들을 완성품에선 사용하지 말아야 합니다.

#### 모델유인 상자

인라인 및 블록 서식 상황 외에도 CSS는 요소에 적용할 수 있는 몇 가지 추가 *콘텐츠 모델*을 지정할 수 있습니다. 특정 레이아웃을 설명하는 데 사용되는 이러한 추가 모델은 추가 상자 유형을 정의할 수 있습니다.

* 테이블 콘텐츠 모델 (en-US)은 *테이블 래퍼 상자*와 *테이블 상자*를 생성할 수 있을뿐만 아니라 *캡션 상자*같은 특정 상자도 생성할 수 있습니다.
* The 다단 콘텐츠 모델 (en-US) 은 컨테이너 상자와 컨텐츠 사이에
 **열 상자** (column boxes)
 를 생성할 수 있습니다.
* 실험적인 격자 또는 플렉스박스 콘텐츠 모델, 또는 추가적인 유형의 상자를 생성할 수 있습니다.

#### 위치잡기 기법

상자를 생성하고 나면 CSS 엔진은 그것들을 레이아웃에 위치시켜야 합니다. 그렇게 하려면 다음과 같은 알고리즘 중의 하나를 사용합니다.

* **일반 대열** (normal flow)
 - 하나씩 차례대로 상자를 위치시킵니다.
* **부동체** (floats)
 알고리즘 - 일반 대열에서 상자를 빼내어 상위 컨테이너 상자 옆에 놓습니다.
* *절대 위치잡기* 기법 - 자신의 상위 컨테이너 요소가 수립한 절대 좌표 시스템 내부에 상자를 위치시킵니다. 절대적으로 위치잡기한 요소는 다른 요소를 덮을 수 있습니다.
### 일반 대열

*일반 대열* 속 상자 무리는 하나씩 차례대로 배치됩니다. 블록 서식 상황 속에서 그들은 수직으로 배치됩니다. 반면에 인라인 서식 상황 속에서 그들은 수평으로 배치됩니다. 일반 대열은 CSS `position`이 `static` 또는 `relative` 값으로 설정될 경우와 `float`가 `none`으로 설정되면 발동됩니다.

### 예제

**참고:** 일반 대열 속에서는 블록 서식 상황에 포함된 상자는 수직으로 하나씩 차례대로 배치됩니다.

일반 대열 속에서는 인라인 서식 상황에 포함된 상자는 수평으로 하나씩 차례대로 배치됩니다.

**참고:** 일반 대열에는 두 가지 하위 사례가 있습니다. 정적 위치잡기와 상대 위치잡기:

* *정적 위치잡기*에서는 `position` 속성이 `static` 값일 경우에 발동됩니다. 상자 무리는 일반 대열 레이아웃에 정의된 정확한 위치에 그려집니다.
* *상대 위치잡기*에서는 `position` 속성이 `relative` 값일 경우 발동합니다. 상자는 CSS 속성 무리인 `top` (en-US), `bottom` (en-US)과 `left` (en-US), `right` (en-US)에 의해 정의된 간격띄우기 값을 기준으로 그려집니다.

### 부동체

**부동 위치잡기 기법** (float positioning scheme)에서는 특정 상자(부동 상자 또는 단순 부동체라고 일컬음)를 현재 라인의 시작 또는 끝에 위치시킵니다. 이는 텍스트(그리고 더 일반적으로 일반 대열 내의 모든 것)은 부동 상자의 가장자리를 따라 대열을 맞추는 속성으로 귀결됩니다. 다만 CSS `clear` 속성에 의해 다른 예기가 나올 경우는 예외입니다.

상자에 대해 부동 위치잡기 기법을 선택하려면 해당 상대에 대해 CSS `float` 속성을 `none` 이외의 값으로 설정하거나 `position` 속성에 `static`이나 `relative`가 아닌 값으로 설정할 때 이뤄진다. 만일 `float`가 `left`로 설정되면 부동체는 라인 상자의 시작 부분에 위치합니다. 만일 `right`으로 설정되면 동 부동체는 라인 상자의 끝에 위치합니다. 어떤 경우든 라인 상자는 부동체에 들어맞게 축소됩니다.

### 절대 위치잡기

**절대 위치잡기 기법** (absolute positioning scheme)에 포함된 상자는 대열에서 제거되어 대열과는 어떤 상호작용도 하지 않습니다. 그들은 `top` (en-US)과 `bottom` (en-US), `left` (en-US)와 `right` (en-US)를 사용해서 상위 컨테이너 블록 기준으로 비례해서 위치잡기합니다.

하나의 요소를 절대 위치잡기하려면 `position`이 `absolute` 또는 `fixed`로 설정하면 됩니다.

*고정 위치잡기한 요소*의 경우 상위 컨테이너 블록이 뷰포트입니다. 동 요소의 위치는 뷰포트 내부에서 절대적 위치가 됩니다. 스크롤링은 동 요소의 위치를 변경시키지 않습니다.

참조 항목
-----

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


color - CSS: Cascading Style Sheets

color
=====

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

시도해보기
-----

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

구문
--

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

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

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

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

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

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

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

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

### 값

`<color>`

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

### 형식 구문
```

color =
  <color>

```

예제
--

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

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

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

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

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

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

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

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

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

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

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

같이 보기
-----

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


background-image - CSS: Cascading Style Sheets

background-image
================

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

시도해보기
-----

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

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

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

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

구문
--

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

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

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

### 값

`none`

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

`<image>`

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

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

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

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

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

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

background-image =
  <bg-image>#

<bg-image> =
  <image>  |
  none

<image> =
  <url>       |
  <gradient>

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

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

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

```

예제
--

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

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

#### HTML

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

#### CSS

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

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

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

#### 결과

명세
--

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

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

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

같이 보기
-----

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


<number> - CSS: Cascading Style Sheets

<number>
========

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

구문
--

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

보간
--

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

예제
--

### 유효한 숫자
```

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

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

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

명세
--

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

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

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

같이 보기
-----

* `<integer>`


Comments - CSS: Cascading Style Sheets

Comments
========

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

구문
--

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

/* Comment */
```

예제
--

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

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

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

참고
--

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

명세
--

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

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


:defined - CSS: Cascading Style Sheets

:defined
========

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
CSS **`:defined`** 의사 클래스는 정의된 요소를 선택합니다. 정의된 요소란 브라우저에 내장된 표준 요소와, 성공적으로 정의(`CustomElementRegistry.define()` (en-US) 메서드 등)한 사용자 지정 요소를 의미합니다.

```css
/\* Selects any defined element \*/
:defined {
  font-style: italic;
}

/\* Selects any instance of a specific custom element \*/
simple-custom:defined {
  display: block;
}
```

구문
--

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

### 정의되기 전까지 요소 숨기기

다음 코드는 저희의 defined-pseudo-class 데모에서 발췌한 것입니다. (동작 모습 보기)

이 데모에서는 아주 간단한 사용자 지정 요소를 정의합니다.

```js
customElements.define(
  "simple-custom",
  class extends HTMLElement {
    constructor() {
      super();

      let divElem = document.createElement("div");
      divElem.textContent = this.getAttribute("text");

      let shadowRoot = this.attachShadow({ mode: "open" }).appendChild(divElem);
    }
  },
);
```

그 후, 위의 요소를 표준 `<p>`와 함께 문서에 넣습니다.

```html
<simple-custom text="Custom element example text"></simple-custom>

<p>Standard paragraph example text</p>
```

CSS에는 다음의 스타일을 작성합니다.

```css
// Give the two elements distinctive backgrounds
p {
  background: yellow;
}

simple-custom {
  background: cyan;
}

// Both the custom and the built-in element are given italic text
:defined {
  font-style: italic;
}
```

그리고 아래의 두 규칙을 통해, 정의되지 않은 사용자 지정 요소는 숨기고, 정의가 성공적으로 된 경우에는 블록 레벨 요소로 표시합니다.

```css
simple-custom:not(:defined) {
  display: none;
}

simple-custom:defined {
  display: block;
}
```

위의 데모는 페이지에 불러올 때 꽤 시간이 걸릴 수 있는 복잡한 사용자 지정 요소 스타일링에 유용하게 쓸 수 있습니다. 로딩이 아직 진행 중일 때, 스타일을 입히지 않은는 못생긴 요소가 페이지에 노출되는 것을 막을 수 있으니까요.

명세
--

| Specification |
| --- |
| HTML Standard # selector-defined |

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

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

같이 보기
-----

* 웹 컴포넌트


paint-order - CSS: Cascading Style Sheets

paint-order
===========

CSS **`paint-order`** 속성은 텍스트 및 모양의 채움 색과 테두리(마커 포함)를 그리는 순서를 지정합니다.

구문
--

```css
/\* 일반 \*/
paint-order: normal;

/\* 단일 값 \*/
paint-order: stroke; /\* draw the stroke first, then fill and markers \*/
paint-order: markers; /\* draw the markers first, then fill and stroke \*/

/\* 다중 값 \*/
paint-order: stroke fill; /\* draw the stroke first, then the fill, then the markers \*/
paint-order: markers stroke fill; /\* draw markers, then stroke, then fill \*/
```

아무것도 지정하지 않았을 때의 기본값은 `fill`, `stroke`, `markers`입니다.

하나의 값만 지정하면 그 값을 제일 먼저 그린 후, 기본값의 순서에 따라 나머지를 그립니다. 두 개를 지정하면 나머지 하나를 맨 나중에 그립니다.

**참고:** 마커의 경우 `marker-*` 속성(`marker-start` (en-US) 등)과 `<marker>` (en-US) 요소를 사용하는 SVG 모양의 경우에만 올바릅니다. HTML 텍스트는 이에 해당하지 않으므로 `stroke`와 `fill`의 순서만 정할 수 있습니다.

### 값

`normal`

일반적인 그리기 순서를 사용합니다.

`stroke`,
 `fill`,
 `markers`

일부 항목 또는 모든 항목의 그리기 순서를 지정합니다.

형식 정의
-----

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

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

paint-order =
  normal                         |
  [ fill || stroke || markers ]

```

예제
--

### 테두리와 채움 색 순서 바꾸기

#### SVG

```html
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <text x="10" y="75">stroke in front</text>
  <text x="10" y="150" class="stroke-behind">stroke behind</text>
</svg>
```

#### CSS

```css
text {
  font-family: sans-serif;
  font-size: 50px;
  font-weight: bold;
  fill: black;
  stroke: red;
  stroke-width: 4px;
}

.stroke-behind {
  paint-order: stroke fill;
}
```

#### 결과

명세
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # PaintOrder |

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

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


CSS Miscellaneous - CSS: Cascading Style Sheets

CSS Miscellaneous
=================

이 페이지는 한참 실험 중이거나 다른 어떤 부류와도 맞지 않은 CSS 속성을 포함합니다.

참고
--

### 속성

* `all`
* `clip` (en-US)
* `clip-path`
* `display` (en-US)
* `ime-mode`
* `initial-letter` (en-US)
* `initial-letter-align` (en-US)
* `mask-type` (en-US)
* `text-rendering` (en-US)
* `will-change`
안내서
---

*없음.*

스펙
--

*이 속성은 서로 거의 관련이 없습니다. 스펙은 개별 페이지를 참조하세요.*

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

*이 속성은 서로 거의 관련이 없습니다. 브라우저 내 가용성은 개별 페이지를 참조하세요.*


레이아웃 모드 - CSS: Cascading Style Sheets

레이아웃 모드
=======

CSS **레이아웃 모드**, 줄여서 **레이아웃**은 형제(sibling) 및 조상(ancestor) 박스와 상호 작용하는 방식을 기반으로 박스의 위치와 크기를 결정하는 알고리즘입니다. 그 중 몇 가지입니다:

* 블록 레이아웃(*block layout*), 문서 배치를 위해 설계됨. 블록 레이아웃은 요소(element)를 *float* 하거나 여러 단(*multiple columns*)에 걸쳐 배치하는 기술 같은 문서 중심 기능을 포함합니다.
* 인라인 레이아웃(*inline layout*), 텍스트 배치를 위해 설계됨.
* 테이블 레이아웃(*table layout*), 표 배치를 위해 설계됨.
* 위치지정 레이아웃(*positioned layout*), 다른 요소와 상호 작용이 많이 없는 요소의 위치지정을 위해 설계됨.
* 신축 박스 레이아웃(*flexible box layout* (en-US)), 부드럽게 크기조정이 될 수 있는 복잡한 페이지 배치를 위해 설계됨.
Experimental
* 그리드 레이아웃(*grid layout*), 고정된 격자(grid)에 상대적인 요소 배치를 위해 설계됨.
Experimental

**참고:** CSS 속성(CSS properties) 모두가 모든 *레이아웃 모드*에 적용되지는 않습니다. 속성 대부분은 한 두 모드에 적용되고 속성이 다른 레이아웃 모드에 참여하는 요소에 설정되면 효과가 없습니다.

같이 보기
-----

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


CSS Charsets - CSS: Cascading Style Sheets

CSS Charsets
============

**CSS Charsets**는 스타일 시트에서 사용하는 문자 집합을 정의할 수 있는 CSS 모듈입니다.

참고서
---

### @규칙

* `@charset`
명세서
---

| Specification |
| --- |
| Unknown specification  |


text-decoration - CSS: Cascading Style Sheets

text-decoration
===============

CSS **`text-decoration`** 단축 속성은 텍스트에 장식용 선을 추가합니다. 이 속성은 `text-decoration-line` (en-US), `text-decoration-color` (en-US), `text-decoration-style` (en-US), `text-decoration-thickness` (en-US)의 단축 속성입니다.

시도해보기
-----

텍스트 장식은 모든 자손 텍스트 요소에 걸쳐서 적용됩니다. 달리 말하면, 자식 요소에서는 부모가 적용한 텍스트 장식을 제거할 수 없습니다. 예를 들어 `<p>이 문단에 <em>강조 표시</em>가 있어요.</p>` 마크업에 `p { text-decoration: underline; }` 스타일을 적용하면 전체 문단에 밑줄이 추가됩니다. 그다음 `em { text-decoration: none; }` 스타일 규칙을 추가해도 밑줄은 계속 보입니다. 다만 `em { text-decoration: overline; }` 스타일은 "강조 표시" 텍스트가 윗줄과 밑줄을 모두 갖게 합니다.

구성 속성
-----

이 속성은 다음 CSS 속성의 단축 속성입니다.

* `text-decoration-color` (en-US)
* `text-decoration-line` (en-US)
* `text-decoration-style` (en-US)
* `text-decoration-thickness` (en-US)
구문
--

```css
text-decoration: underline;
text-decoration: overline red;
text-decoration: none;

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

`text-decoration` 속성은 한 개 이상의 공백으로 구분한 값으로 지정할 수 있습니다. 각각의 값은 본디 속성에서 사용하는 값과 동일합니다.

### 값

`text-decoration-line` (en-US)

`underline`, `line-through` 등 장식의 종류를 설정합니다.

`text-decoration-color` (en-US)

장식의 색을 설정합니다.

`text-decoration-style` (en-US)

`solid`, `wavy`, `dashed` 등 장식에 사용할 선의 스타일을 설정합니다.

`text-decoration-thickness` (en-US)

장식에 사용할 선의 두께를 설정합니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `text-decoration-color` (en-US): `currentcolor`
* `text-decoration-style` (en-US): `solid`
* `text-decoration-line` (en-US): `none`
 |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US) and `::first-line` (en-US). |
| 상속 | no |
| 계산 값 | as each of the properties of the shorthand:* `text-decoration-line` (en-US): as specified
* `text-decoration-style` (en-US): as specified
* `text-decoration-color` (en-US): computed color
* `text-decoration-thickness` (en-US): as specified
 |
| Animation type | as each of the properties of the shorthand:* `text-decoration-color` (en-US): a color
* `text-decoration-style` (en-US): discrete
* `text-decoration-line` (en-US): discrete
* `text-decoration-thickness` (en-US): by computed value type
 |

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

text-decoration =
  <'text-decoration-line'>   ||
  <'text-decoration-style'>  ||
  <'text-decoration-color'>

```

예제
--

### text-decoration 값 시연

```css
.under {
  text-decoration: underline red;
}

.over {
  text-decoration: wavy overline lime;
}

.line {
  text-decoration: line-through;
}

.plain {
  text-decoration: none;
}

.underover {
  text-decoration: dashed underline overline;
}

.thick {
  text-decoration: solid underline purple 4px;
}

.blink {
  text-decoration: blink;
}
```

```html
<p class="under">밑줄을 가지는 텍스트입니다.</p>
<p class="over">윗줄을 가지는 텍스트입니다.</p>
<p class="line">취소선을 가지는 텍스트입니다.</p>
<p>
  기본 스타일과 달리
  <a class="plain" href="#">이 링크에는 밑줄이 없을 것입니다.</a>
  사용자들은 보통 하이퍼링크 여부를 밑줄로 구분하므로, 앵커에서 밑줄을 제거할
  때는 주의해야 합니다.
</p>
<p class="underover">밑줄과 윗줄 모두 가지는 텍스트입니다.</p>
<p class="thick">
  브라우저가 지원하는 경우 아주 두꺼운 보라색 밑줄을 가지게 될 텍스트입니다.
</p>
<p class="blink">이 텍스트는 브라우저에 따라서 깜빡일 수 있습니다.</p>
```

명세
--

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-property |

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

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

같이 보기
-----

* 개별 텍스트 장식 속성은 `text-decoration-line` (en-US), `text-decoration-color` (en-US), `text-decoration-style` (en-US), `text-decoration-thickness` (en-US)입니다.
* `text-decoration-skip-ink` (en-US), `text-underline-offset` (en-US), `text-underline-position` (en-US) 속성은 텍스트 장식에 영향을 주지만 이 단축 속성은 포함하지 않습니다.
* `list-style` (en-US) 속성은 HTML `<ol>`과 `<ul>` 목록에서 항목들의 모습을 조절합니다.


@font-face - CSS: Cascading Style Sheets

@font-face
==========

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

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

* Learn more
* See full compatibility
* Report feedback
요약(Summary)
-----------

CSS at-rule 인 `@font-face` 를 사용하여 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있다. `@font-face` 를 사용하여 웹페이지 제작자가 원하는 폰트를 사용할 수 있게함으로써, 컴퓨터에 설치된 폰트만을 사용해야했던 제약이 없어지게되었다. `@font-face` at-rule 은 CSS의 top-level에서 뿐 아니라, CSS conditional-group at-rule 안에서도 사용될 수도 있다.

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

@font-face {
  font-family: <a-remote-font-name>;
  src: <source> [,<source>]*;
  [font-weight: <weight>];
  [font-style: <style>];
}
```

### 속성값(Values)

* `<a-remote-font-name>`
    + : font 속성에서 폰트명(font face)으로 지정될 이름을 설정한다.
* `<source>`
    + : 원격 폰트(remote font) 파일의 위치를 나타내는 URL 값을 지정하거나, 사용자 컴퓨터에 설치된 폰트명을 `local("Font Name")`형식으로 지정하는 속성이다.
* `<weight>`
    + : 폰트의 굵기(font weight) 값.
* `<style>`
    + : 폰트 스타일(font style) 값.

사용자의 로컬환경(local computer)에 설치된 폰트는 `local()` 이라는 구문을 사용하여 지정이 가능하다. 만약 해당 폰트를 찾지못한다면, 다른 대체 폰트를 찾을때까지 폰트를 검색작업을 계속 할 것이다.

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

아래는 다운로드하여 사용가능한 폰트를 설정하는 간단한 예제이며, document의 전체 body 영역에 폰트가 적용된다.
```

<html>
<head>
  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
    }

    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>
```

 실행 결과는 다음과 같다.

아래 예제에서는 로컬에 설치된 "Helvetica Neue Bold" 폰트가 사용된다. 만약 해당 폰트가 설치되어 있지 않다면(다른 2개의 폰트를 적용하기 위한 시도를 하고), 다운로드 가능한 "MgOpenModernaBold.ttf" 폰트가 대신 사용된다.

```css
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
    url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
```

주의사항(Notes)
-----------

* Gecko에서는, 동일 도메인 제한(same domain restriction)을 피하기 위해 HTTP access controls (en-US) 을 사용하지 않는한, 웹폰트(web fonts)의 사용시에는 동일 도메인 제한이 적용된다(폰트 파일은 폰트가 사용되는 페이지와 동일한 도메인상에 존재해야 함).
* **참고:** **주의사항:** TrueType, OpenType, Web Open File(WOFF) 폰트에 대한 MIME타입이 정의되지 않았기 때문에, 파일에 적용될 MIME 타입에 대해서는 고려하지 않아도 된다.
* Gecko에서는 웹폰트(web font)가 사용된 페이지를 표시할 때는 웹폰트가 다운로드 되는 동안 사용자의 컴퓨터에 이미 설치되어 있어 즉시 사용가능한 폰트(CSS fallback font)를 사용하여 텍스트를 표시한다. 각각의 웹폰트의 다운로드가 완료되면 Gecko는 해당 텍스트의 폰트를 교체한다. 이러한 과정은 사용자가 웹페이지 내의 텍스트를 좀 더 빨리 읽게끔 도와준다.
명세
--

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-face-rule |

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

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

참고자료(See also)
--------------

* About WOFF (en-US)
* FontSquirrel @font-face generator
* Beautiful fonts with @font-face
* Open Font Library
* Microsoft Developer Network (MSDN) @font-face reference
* When can I use WOFF?
* When can I use SVG Fonts?


:visited - CSS: Cascading Style Sheets

:visited
========

**`:visited`** CSS 의사 클래스는 사용자가 방문한 적이 있는 링크를 나타냅니다. `:visited`가 바꿀 수 있는 스타일은 개인정보 보호를 위해 매우 제한적입니다.

```css
/\* 방문한 적이 있는 <a> 선택 \*/
a:visited {
  color: green;
}
```

`:visited` 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스(`:link`, `:hover`, `:active`)가 덮어씁니다. 링크를 적절히 디자인하려면 *LVHA-순서(*`:link` — `:visited` — `:hover` — `:active`)를 따라, `:visited` 규칙을 `:link` 뒤, `:hover`와 `:active` 앞에 배치하세요.

스타일 제한
------

브라우저는 개인정보 보호를 위해 `:visited`에서 사용할 수 있는 스타일을 엄격히 제한하고 있습니다.

* 사용 가능한 CSS 속성은 `color`, `background-color`, `border-color`, `border-bottom-color`, `border-left-color`, `border-right-color`, `border-top-color`, `column-rule-color` (en-US), `outline-color` (en-US)입니다.
* 사용 가능한 SVG 속성은 `fill (en-US)`과`stroke (en-US)`입니다.
* 허용 가능한 속성의 알파 채널 값은 무시하고, 대신 `:visited`가 아닐 때의 알파 채널을 사용합니다. 단, 그 값이 0일 땐 `:visited`의 스타일을 모두 무시합니다.
* 사용자 입장에서는 방문한 링크의 색이 바뀐 것처럼 보일 때도, `window.getComputedStyle()` 메서드는 거짓으로라도 항상 `:visited`가 아닐 때의 스타일을 반환합니다.

**참고:** 스타일 제한에 관한 더 많은 정보와 이유에 대해서는 개인정보와 :visited 선택자 (en-US) 문서를 참고하세요.

구문
--

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

기본적으로 색이 없거나 투명한 속성은 `:visited`로 수정할 수 없습니다. `:visited`가 수정 가능한 속성 중 브라우저가 기본값을 지정하는건 보통 `color`와 `column-rule-color` 뿐입니다. 따라서 다른 속성을 수정하고 싶다면 기본값을 직접 지정해야 합니다.

### HTML

```html
<a href="#test-visited-link">링크를 아직 방문하지 않으셨나요?</a><br />
<a href="">이미 방문했습니다.</a>
```

### CSS

```css
a {
  /\* 특정 속성에 투명하지 않은 기본값을 지정해
 :visited 상태로 바꿀 수 있도록 설정 \*/
  background-color: white;
  border: 1px solid white;
}

a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}
```

### 결과

명세
--

| Specification |
| --- |
| HTML Standard # selector-visited |
| Selectors Level 4 # link |

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

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

같이 보기
-----

* 개인정보와 :visited 선택자 (en-US)
* 링크 관련 의사 클래스: `:link`, `:active`, `:hover`


background-repeat - CSS: Cascading Style Sheets

background-repeat
=================

CSS **`background-repeat`** 속성은 배경 이미지의 반복 방법을 지정합니다. 가로축 및 세로축을 따라 반복할 수 있고, 아예 반복하지 않을 수도 있습니다.

시도해보기
-----

반복한 이미지는 기본값에선 요소 크기에 따라 잘릴 수 있지만, 잘리지 않도록 배경 이미지 크기를 조절하거나(`round`) 끝에서 끝까지 고르게 분배(`space`)할 수 있습니다.

구문
--

```css
/\* 키워드 값 \*/
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/\* 2개 값 구문: 가로 | 세로 \*/
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

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

### 값

`<repeat-style>`

한 개 값 구문은 두 개 값 구문의 단축 형태입니다.

|  |  |
| --- | --- |
| **한 개 값** | **두 개 값** |
| `repeat-x` | `repeat no-repeat` |
| `repeat-y` | `no-repeat repeat` |
| `repeat` | `repeat repeat` |
| `space` | `space space` |
| `round` | `round round` |
| `no-repeat` | `no-repeat no-repeat` |

두 개 값 구문의 앞쪽은 가로 반복 방법을, 뒤쪽은 세로 반복 방법을 설정합니다. 각 방법의 동작 방식은 아래 표와 같습니다.

|  |  |
| --- | --- |
| `repeat` | 요소의 배경 영역을 채울 때까지 이미지를 반복합니다. 마지막 반복 이미지가 넘칠 경우 잘라냅니다. |
| `space` | 요소가 잘리지 않을 만큼 이미지를 반복합니다. 제일 처음과 마지막 반복 이미지는 요소의 양쪽 끝에 고정되고, 각 이미지 사이에 남은 여백을 고르게 분배합니다. 잘리지 않고 배치할 수 있는 이미지가 단 한 장인 경우가 아니라면 `background-position` (en-US) 속성은 무시합니다. `space`를 사용했는데 이미지가 잘리는 경우는 그 크기가 너무 커서 한 장 조차 넣을 수 없는 경우뿐입니다. |
| `round` | 가용 영역이 늘어나면 반복 이미지도 늘어나 여백을 남기지 않습니다. 이미지를 하나 더 추가할 공간이 생기면 (남은 공간 >= 이미지 너비의 절반) 비로소 반복 횟수를 하나 추가합니다. 이 때, 원래 존재하던 이미지는 모두 줄어들어 새로운 이미지를 위한 공간을 확보합니다. 예시: 원래 너비가 260px이고, 세 번 반복된 이미지는 각자 300px 너비가 될 때까지 늘어날 수 있습니다. 그 후에는 이미지를 추가하고, 각자 225px로 줄어듭니다. |
| `no-repeat` | 이미지를 반복하지 않습니다. 따라서 배경 이미지 영역이 다 차지 않을 수 있습니다. 반복하지 않은 이미지의 위치는 `background-position` (en-US) CSS속성이 설정합니다. |

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `repeat` |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US) and `::first-line` (en-US). |
| 상속 | no |
| 계산 값 | a list, each item consisting of two keywords, one per dimension |
| Animation type | discrete |

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

background-repeat =
  <repeat-style>#

<repeat-style> =
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}

```

예제
--

### HTML

```html
<ol>
  <li>
    no-repeat
    <div class="one"></div>
  </li>
  <li>
    repeat
    <div class="two"></div>
  </li>
  <li>
    repeat-x
    <div class="three"></div>
  </li>
  <li>
    repeat-y
    <div class="four"></div>
  </li>
  <li>
    space
    <div class="five"></div>
  </li>
  <li>
    round
    <div class="six"></div>
  </li>
  <li>
    repeat-x, repeat-y (multiple images)
    <div class="seven"></div>
  </li>
</ol>
```

### CSS

```css
/\* Shared for all DIVS in example \*/
ol,
li {
  margin: 0;
  padding: 0;
}
li {
  margin-bottom: 12px;
}
div {
  background-image: url(starsolid.gif);
  width: 160px;
  height: 70px;
}

/\* Background repeats \*/
.one {
  background-repeat: no-repeat;
}
.two {
  background-repeat: repeat;
}
.three {
  background-repeat: repeat-x;
}
.four {
  background-repeat: repeat-y;
}
.five {
  background-repeat: space;
}
.six {
  background-repeat: round;
}

/\* Multiple images \*/
.seven {
  background-image: url(starsolid.gif),
    url(https://developer.mozilla.org/static/img/favicon32.png);
  background-repeat: repeat-x, repeat-y;
  height: 144px;
}
```

### 결과

명세
--

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

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

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

같이 보기
-----

* 한 번에 여러 배경 사용하기


<position> - CSS: Cascading Style Sheets

<position>
==========

CSS **`<position>`** (또는 **`<bg-position>`**) 자료형은 요소 박스에 대한 상대 좌표를 나타내는 2차원 좌표입니다. `background-position` (en-US), `offset-anchor` (en-US) 속성에서 사용합니다.

**참고:** `<position>` 값이 설명하는 최종 위치가 요소 박스 내에 위치해야 할 필요는 없습니다.

구문
--

![](/ko/docs/Web/CSS/position_value/position_type.png)`<position>` 자료형은 하나 혹은 두 개의 키워드와 함께 선택적인 오프셋을 사용해 지정합니다.

키워드에는 `center`, `top`, `right`, `bottom`, `left`가 있으며, 각각 요소 박스의 해당하는 방향 모서리 또는 마주보는 두 모서리의 가운데 지점을 의미합니다. 맥락에 따라, `center`는 좌우 모서리의 중간점일 수도 있고, 상하 모서리의 중간점일 수도 있습니다.

오프셋은 상대적인 `<percentage>` 값 또는 절대적인 `<length>` 값으로 지정할 수 있습니다. 양수는 오른쪽과 아래쪽 중 적합한 방향으로 이동하며, 음수는 그 반대입니다.

하나의 오프셋 값만 지정할 경우 x 좌표를 정의하는 것이며, 다른 축의 값은 기본값으로 `center`를 사용합니다.

```css
/\* 1-value syntax \*/
keyword                  /\* Either the horizontal or vertical position; the other axis defaults to center \*/
value                    /\* The position on the x-axis; the y-axis defaults to 50% \*/

/\* 2-value syntax \*/
keyword keyword          /\* A keyword for each direction (the order is irrelevant) \*/
keyword value            /\* A keyword for horizontal position, value for vertical position \*/
value keyword            /\* A value for horizontal position, keyword for vertical position \*/
value value              /\* A value for each direction (horizontal then vertical) \*/

/\* 4-value syntax \*/
keyword value keyword value /\* Each value is an offset from the keyword that preceeds it \*/
```

### 형식 구문
```

[
 [ left | center | right ] || [ top | center | bottom ]
|
 [ left | center | right | <length> | <percentage> ]
 [ top | center | bottom | <length> | <percentage> ]?
|
 [ [ left | right ] [ <length> | <percentage> ] ] &&
 [ [ top | bottom ] [ <length> | <percentage> ] ]
]
```

**참고:** `background-position` (en-US) 속성은 세 값 구문도 허용하나, `<position>`을 사용하는 다른 속성에서는 허용하지 않습니다.

보간
--

애니메이션에서 점의 가로 값과 세로 값은 각각 따로 보간됩니다. 그러나 두 좌표 모두에 대한 보간 속도는 하나의 타이밍 함수 (en-US)가 결정하므로, 점은 직선을 따라 이동하게 됩니다.

예제
--

### 유효한 위치
```

center
left
center top

right 8.5%
bottom 12vmin right -6px

10% 20%
8rem 14px
```

### 유효하지 않은 위치
```

left right
bottom top
10px 15px 20px 15px
```

명세
--

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

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

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

같이 보기
-----

* CSS 값과 단위
* CSS 값과 단위 소개
* `background-position` (en-US)
* `radial-gradient()` (en-US)
* `conic-gradient()` (en-US)


-webkit-overflow-scrolling - CSS: Cascading Style Sheets

-webkit-overflow-scrolling
==========================

**비표준:** 이 기능은 비표준이므로 실제 프로덕션에서 사용하지 마세요. 모든 사용자 환경에서 작동하지 않을 수 도 있으며, 미래에 호환성 문제가 생길 수 있습니다.

CSS **`-webkit-overflow-scrolling`** 속성은 터치 단말기에서 주어진 요소의 모멘텀 기반 스크롤 활성화 여부를 결정합니다.

|  |  |
| --- | --- |
| 초기값 | `auto` |
| 적용대상 | scrolling boxes |
| 상속 | yes |
| 계산 값 | as specified |
| Animation type | discrete |

값
-

`auto`

"일반적"인 스크롤을 사용합니다. 즉 손가락을 터치 화면에서 떼는 순간 스크롤이 멈춥니다.

`touch`

모멘텀 기반 스크롤을 사용합니다. 스크롤 제스쳐가 끝나고 손가락을 터치 화면에서 떼어도 잠시 스크롤이 지속됩니다. 지속 속도와 시간은 스크롤 제스쳐의 세기에 따라 달라집니다. 또한 새로운 쌓임 맥락을 생성합니다.

### 형식 구문

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

### HTML

```html
<div class="scroll-touch">
  <p>This paragraph has momentum scrolling</p>
</div>
<div class="scroll-auto">
  <p>This paragraph does not.</p>
</div>
```

### CSS

```css
div {
  width: 100%;
  overflow: auto;
}

p {
  width: 200%;
  background: #f5f9fa;
  border: 2px solid #eaf2f4;
  padding: 10px;
}

.scroll-touch {
  -webkit-overflow-scrolling: touch; /\* Lets it scroll lazy \*/
}

.scroll-auto {
  -webkit-overflow-scrolling: auto; /\* Stops scrolling immediately \*/
}
```

### 결과

명세
--

명세에 속하지 않습니다. Apple의 Safari CSS Reference에 설명이 있습니다.

|  |  |
| --- | --- |
| 초기값 | `auto` |
| 적용대상 | scrolling boxes |
| 상속 | yes |
| 계산 값 | as specified |
| Animation type | discrete |

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

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

같이 보기
-----

* CSS-Tricks article with demo


@charset - CSS: Cascading Style Sheets

@charset
========

**`@charset`** CSS at-규칙은 스타일 시트에 쓰이는 문자 인코딩을 지정합니다. 스타일 시트의 첫 번째 요소여야 하며 어떤 문자가 선행되지 않아야 합니다; 중첩된 문이 아니기에, 조건부 그룹 at-규칙 내에 사용될 수 없습니다. 여러 `@charset` at-규칙이 정의된 경우, 첫 번째 것만 사용되고 HTML 요소의 `style` attribute 또는 HTML 페이지의 문자 집합과 관련 있는 `<style>` 요소 내에서 사용될 수 없습니다.

```css
@charset "utf-8";
```

이 at-규칙은 `content`처럼 일부 CSS 속성(property)에서 비 ASCII 문자를 사용할 때 유용합니다.

스타일 시트의 문자 인코딩을 정의하는 여러 방법이 있기에, 브라우저는 다음과 같은 순서로 다음 방법을 시도합니다( 그리고 하나가 결과를 산출하자 마자 곧 멈춥니다):

1. 파일의 시작 부분에 놓이는 Unicode byte-order 문자값.
2. `Content-Type:` HTTP 헤더의 `charset` attribute 또는 스타일 시트를 제공하는 데 쓰이는 프로토콜 등가물에 주어진 값.
3. `@charset` CSS at-규칙.
4. 참조하는 문서에 의해 정의된 문자 인코딩 사용: `<link>` 요소의 `charset` attribute. 이 메서드는 HTML5에서 폐기(obsolete)되어 사용해서는 안됩니다.
5. 문서가 UTF-8이라고 가정
구문
--
```

@charset "UTF-8";
@charset 'iso-8859-15';
```

where:

*charset*

사용되는 문자 인코딩을 나타내는 `<string>` (en-US)입니다. IANA-registry에 정의된 웹 안전 문자 인코딩의 이름이어야 합니다. 여러 이름이 인코딩과 관련된 경우, *preferred*로 표시된 것만 사용되어야 합니다.

### 형식 구문

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

```css
@charset "UTF-8"; /\* 스타일 시트의 인코딩을 Unicode UTF-8로 설정 \*/
@charset 'iso-8859-15'; /\* 스타일 시트의 인코딩을 Latin-9 (서유럽어, euro sign 있는) 로 설정 \*/
 @charset "UTF-8"; /\* 무효한, at-규칙 앞에 문자(공백)가 있음 \*/
@charset UTF-8; /\* 무효한, ' 또는 " 없는 문자집합 CSS <string> (en-US)이 아님 \*/
```

명세
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # charset① |

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

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


height - CSS: Cascading Style Sheets

height
======

**`height`** CSS 속성은 요소의 높이를 지정합니다. 기본값은 콘텐츠 영역의 높이지만, `box-sizing`이 `border-box`라면 테두리 영역의 높이를 설정합니다.

시도해보기
-----

`min-height`와 `max-height` 속성은 `height`를 덮어씁니다.

구문
--

```css
/\* 키워드 \*/
height: auto;

/\* <length> \*/
height: 120px;
height: 10em;

/\* <percentage> \*/
height: 75%;

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

### 값

* `<length>`
    + : 높이의 절대값.
* `<percentage>`
    + : 컨테이닝 블록 높이의 백분율.
* `border-box`
Experimental

    + : 앞선 `<length>` 또는 `<percentage>`가 요소의 보더 박스에 적용.
* `content-box`
Experimental

    + : 앞선 `<length>` 또는 `<percentage>`가 요소의 콘텐츠 박스에 적용.
* `auto`
    + : 브라우저가 요소의 높이를 계산하고 선택.
* `fill`
Experimental

    + : 글쓰기 방향에 따라 `fill-available` 인라인 크기 또는 `fill-available` 블록 크기를 사용.
* `max-content`
Experimental

    + : 본질적인 선호 높이.
* `min-content`
Experimental

    + : 본질적인 최소 높이.
* `available`
Experimental

    + : 컨테이닝 블록 높이에서 수평 여백, 테두리, 패딩을 제외한 값.
* `fit-content`
Experimental

    + : 다음 중 더 큰 값.
        - 본질적인 최소 높이
        - 본질적인 선호 높이와 사용 가능한 높이 중 작은 값
### 형식 구문
```

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

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

```

예제
--

### HTML

```html
<div id="taller">제 키는 50픽셀입니다.</div>
<div id="shorter">제 키는 25픽셀입니다.</div>
<div id="parent">
  <div id="child">제 키는 부모의 절반입니다.</div>
</div>
```

### CSS

```css
div {
  width: 250px;
  margin-bottom: 5px;
  border: 2px solid blue;
}

#taller {
  height: 50px;
}

#shorter {
  height: 25px;
}

#parent {
  height: 100px;
}

#child {
  height: 50%;
  width: 75%;
}
```

### 결과

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

페이지를 확대하거나 글꼴 크기를 늘렸을 때 height 속성을 지정한 요소가 잘리거나 다른 내용을 가리지 않도록 확인하세요.

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
명세
--

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

|  |  |
| --- | --- |
| 초기값 | `auto` |
| 적용대상 | all elements but non-replaced inline elements, table columns, and column groups |
| 상속 | no |
| Percentages | The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to `auto`. A percentage height on the root element is relative to the initial containing block. |
| 계산 값 | a percentage or `auto` 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 model (en-US), `width`, `box-sizing`, `min-height`, `max-height`


대체 요소 - CSS: Cascading Style Sheets

대체 요소
=====

CSS의 **대체 요소**(replaced element)란 자신의 표현 결과가 CSS의 범위를 벗어나는 요소로서, CSS 서식 모델과는 분리된 외부 객체인 요소입니다.

간단히 말해서, 대체 요소는 자신의 콘텐츠가 현재 문서 스타일의 영향을 받지 않는 요소라고 할 수 있습니다. CSS는 대체 요소의 위치에 영향을 줄 수 있지만 콘텐츠에는 미치지 못합니다. `<iframe>` (en-US) 등 일부 대체 요소는 자신만의 스타일 시트를 가질 수도 있지만, 부모 문서의 스타일을 상속하지는 않습니다.

CSS가 대체 요소에 영향을 줄 수 있는 다른 유일한 방법은, 일련의 속성을 통해 요소 박스에서 콘텐츠의 위치를 제어하는 것입니다. 콘텐츠 박스 내부의 객체 위치 제어 항목을 참고하세요.

대체 요소
-----

전형적인 대체 요소는 다음과 같습니다.

* `<iframe>` (en-US)
* `<video>`
* `<embed>`
* `<img>`

일부 요소는 특정한 경우에만 대체 요소로 취급합니다.

* `<option>`
* `<audio>` (en-US)
* `<canvas>`
* `<object>`

HTML 명세에 따르면 `<input>` (en-US) 또한 대체될 수 있습니다. `<input>` 유형이 `"image"`인 경우 `<img>`와 유사한 대체 요소이기 때문입니다. 그러나 다른 유형의 `<input>`을 포함한 나머지 양식 컨트롤 요소는 비대체 요소라고 명시하고 있습니다. (명세는 양식 요소의 플랫폼별 기본 렌더링을 "위젯"(Widget)이라는 용어로 설명하고 있습니다.)

CSS `content` 속성을 사용해 추가한 객체도 대체 요소로, HTML 마크업에는 존재하지 않기 때문에 "익명" 대체 요소라고 합니다.

대체 요소와 CSS
----------

CSS는 바깥 여백이나 일부 `auto` 값 계산 등 특정 상황에서 대체 요소를 특별히 취급합니다.

일부 대체 요소는 고유 크기 또는 정의된 기준선을 가질 수 있으며, `vertical-align` 등의 CSS 속성이 사용할 수 있습니다. 오직 대체 요소만이 고유 크기를 가질 수 있습니다.

명세서
---

{{Specifications}}같이 보기
-----

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