animation-delay - CSS: Cascading Style Sheets

animation-delay
===============

**`animation-delay`** CSS 속성은 애니메이션이 시작할 시점을 지정합니다. 시작 즉시, 잠시 후에, 또는 애니메이션이 일부 진행한 시점부터 시작할 수 있습니다.

시도해보기
-----

`animation` 단축 속성을 사용해 애니메이션 관련 속성을 편리하게 같이 지정할 수 있습니다.

구문
--

```css
/\* Single animation \*/
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;

/\* Multiple animations \*/
animation-delay: 2.1s, 480ms;
```

### 값

``<time>``

애니메이션이 시작될 요소가 적용되는 순간부터의 시간 오프셋입니다. 이 값은 초 또는 밀리 초 (ms)로 지정할 수 있습니다. 이 값은 필수입니다.

양수 값은 지정된 시간이 경과 한 후 애니메이션이 시작되어야 함을 나타냅니다. 기본값인 0의 값은 애니메이션이 적용되는 즉시 시작해야 함을 나타냅니다.

음수 값을 지정하면 애니메이션이 즉시 시작되지만 애니메이션 주기의 도중에 시작됩니다. 예를 들어 애니메이션 지연 시간으로 -1s를 지정하면 애니메이션이 즉시 시작되지만 애니메이션 시퀀스의 1초부터 시작됩니다. 만약 animation-delay에 음수 값을 지정했지만 시작값이 절대값이면 시작값은 애니메이션이 요소에 적용된 시점부터 가져옵니다.

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

### 형식 구문
```

animation-delay =
  <time>#

```

예제
--

CSS 애니메이션 사용하기를 보세요.

명세
--

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

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

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

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

같이 보기
-----

* CSS 애니메이션 사용하기
* JavaScript `AnimationEvent` API


<blend-mode> - CSS: Cascading Style Sheets

<blend-mode>
============

CSS **`<blend-mode>`** 자료형은 요소가 겹칠 경우 색상이 어떻게 나타나야 하는지 정의합니다. `background-blend-mode` (en-US)와 `mix-blend-mode` 속성에서 사용합니다.

최종 색상은 혼합 모드를 적용한 레이어 각각의 픽셀 하나씩에 대해 전경색과 배경색을 취한 후 모드에 따라 계산을 수행하여 나온 새로운 값입니다.

구문
--

`<blend-mode>` 자료형은 다음 키워드 값 중 하나를 선택해 지정합니다.

### Values

`normal`

 배경색에 상관하지 않고 최상단 색을 사용합니다.
 두 장의 불투명한 종이를 겹친 것과 같습니다.

`multiply`

 최종 색은 전경과 배경색을 곱한 값입니다.
 검은 레이어는 최종 레이어를 검은 색으로 만들고, 하얀 레이어는 아무런 변화도 주지 않습니다.
 투명한 필름에 프린트한 이미지를 서로 겹친 것과 같습니다.

`screen`

 최종 색은 전경과 배경색을 각각 반전한 후 서로 곱해 나온 값을 다시 반전한 값입니다.
 검은 레이어는 아무런 변화도 주지 않고, 하얀 레이어는 최종 레이어를 하얗게 만듭니다.
 프로젝터 두 대로 이미지를 겹친 것과 같습니다.

`overlay`

 배경색이 더 어두운 경우 `multiply`, 더 밝은 경우 `screen`을 적용합니다.
 `hard-light`와 같지만 배경과 전경을 뒤집은 것입니다.

`darken`

최종 색은 각각의 색상 채널에 대해 제일 어두운 값을 취한 결과입니다.

`lighten`

최종 색은 각각의 색상 채널에 대해 제일 밝은 값을 취한 결과입니다.

`color-dodge`

 최종 색은 배경색을 전경색의 역으로 나눈 결과입니다.
 검은 전경색은 아무런 변화도 주지 않습니다. 전경색이 배경색의 역인 경우 제일 밝은 색이 됩니다.
 `screen`과 유사하지만, 전경색의 밝기가 배경색과 동일하기만 해도 최대의 밝기를 가진 색을 반환합니다.

`color-burn`

 최종 색은 배경색을 반전한 후 전경색으로 나누고, 다시 반전한 결과입니다.
 하얀 전경색은 아무런 변화도 주지 않습니다. 전경색이 배경색의 역인 경우 결과는 검은색입니다.
 `multiply`와 유사하지만, 전경색의 밝기가 배경색의 역과 동일하기만 해도 검은색을 반환합니다.

`hard-light`

 전경색이 더 어두운 경우 `multiply`, 더 밝은 경우 `screen`을 적용합니다.
 `overlay`와 같지만 배경과 전경을 뒤집은 것입니다.
 배경색에 스포트라이트를 "강렬하게" 비춘 효과와 유사합니다.

`soft-light`

`hard-light`와 유사하지만 더 부드럽습니다.
 `hard-light`와 비슷하게 동작합니다.
 배경색에 스포트라이트를 산란시켜 비춘 효과와 유사합니다.

`difference`

 최종 색은 두 색상 중 더 어두운 색을 밝은 색에서 뺀 결과입니다.
 검은 레이어는 아무런 변화도 주지 않고, 흰 레이어로는 다른 레이어의 색을 반전한 효과를 냅니다.

`exclusion`

`difference`와 유사하지만 더 적은 대비를 가진 색을 반환합니다.
 `difference`와 마찬가지로 검은 레이어는 아무런 변화도 주지 않고, 흰 레이어로는 다른 레이어의 색을 반전한 효과를 냅니다.

`hue`

최종 색은 전경색의 색조를 가지며 배경색의 채도와 밝기를 가집니다.

`saturation`

 최종 색은 전경색의 채도를 가지며 배경색의 색조와 밝기를 가집니다.
 색조 없는 순수한 회색 배경으로는 아무런 효과도 없습니다.

`color`

 최종 색은 전경색의 색조와 채도를 가지며 배경색의 밝기를 가집니다.
 회색조를 유지하므로 전경을 색칠할 때 사용할 수 있습니다.

`luminosity`

 최종 색은 전경색의 밝기를 가지며 배경색의 색조와 채도를 가집니다.
 `color`와 동일하지만 배경과 전경을 뒤집은 것입니다.

Description
-----------

For each pixel among the layers to which it is applied, a blend mode takes the colors of the foreground and the background, performs a calculation on them, and returns a new color value.

Changes between blend modes are not interpolated. Any change occurs immediately.

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

<blend-mode> =
  normal       |
  multiply     |
  screen       |
  overlay      |
  darken       |
  lighten      |
  color-dodge  |
  color-burn   |
  hard-light   |
  soft-light   |
  difference   |
  exclusion    |
  hue          |
  saturation   |
  color        |
  luminosity

```

Examples
--------

### Example using "normal"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: normal;
}
```

### Example using "multiply"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: multiply;
}
```

### Example using "screen"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}
```

### Example using "overlay"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: overlay;
}
```

### Example using "darken"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: darken;
}
```

### Example using "lighten"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: lighten;
}
```

### Example using "color-dodge"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color-dodge;
}
```

### Example using "color-burn"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color-burn;
}
```

### Example using "hard-light"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: hard-light;
}
```

### Example using "soft-light"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: soft-light;
}
```

### Example using "difference"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: difference;
}
```

### Example using "exclusion"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: exclusion;
}
```

### Example using "hue"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: hue;
}
```

### Example using "saturation"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: saturation;
}
```

### Example using "color"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color;
}
```

### Example using "luminosity"
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: luminosity;
}
```

### Blend mode comparison

In the following example, we have a `<div>` with two background images set on it — a Firefox logo on top of a linear gradient. Below it, we have a provided a `<select>` menu that allows you to change the `background-blend-mode` applied to the `<div>`, allowing you to compare the different blend mode effects.

#### HTML

```html
<div></div>
<p>Choose a blend-mode:</p>
<select>
  <option selected>normal</option>
  <option>multiply</option>
  <option>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>
```

#### CSS

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

#### JavaScript

```js
const selectElem = document.querySelector("select");
const divElem = document.querySelector("div");

selectElem.addEventListener("change", () => {
  divElem.style.backgroundBlendMode = selectElem.value;
});
```

#### Result

명세서
---

| Specification |
| --- |
| Compositing and Blending Level 2 # ltblendmodegt |

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

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

See also
--------

* Properties that use this data type: `background-blend-mode` (en-US), `mix-blend-mode`

Description to various blend modes on other website:

* Blend modes on Wikipedia
* Blending modes in Adobe Photoshop by Adobe


초깃값 - CSS: Cascading Style Sheets

초깃값
===

CSS 속성의 **초깃값**은 속성의 기본값으로, 속성 정의 표가 명시하고 있습니다. 초깃값의 사용처는 상속 여부에 따라 다릅니다.

* 상속 속성의 경우, 지정값이 없는 이상 초깃값은 **루트 요소에만** 쓰입니다.
* 비상속 속성의 경우, 지정값이 없는 이상 초깃값은 **모든 요소**에 쓰입니다.

**참고:** `initial` 키워드를 사용해 명시적으로 초깃값을 지정할 수 있습니다.

명세
--

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

같이 보기
-----

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


border-color - CSS: Cascading Style Sheets

border-color
============

**`border-color`** CSS 단축 속성은 모든 면의 테두리 색상을 설정합니다.

시도해보기
-----

각 면 테두리의 색상은 `border-top-color`, `border-right-color`, `border-bottom-color`, `border-left-color`를 사용해 정할 수 있습니다. 아니면 쓰기 방향에 따라 달라지는 속성인 `border-block-start-color` (en-US), `border-block-end-color` (en-US), `border-inline-start-color` (en-US), `border-inline-end-color` (en-US)을 사용할 수도 있습니다.

테두리 색상에 대해 더 알아보려면 CSS로 HTML 요소에 색 입히기 (en-US) 문서를 참고하세요.

구문
--

```css
/\* <color> 값 \*/
border-color: red;

/\* 세로방향 | 가로방향 \*/
border-color: red #f015ca;

/\* 위 | 가로방향 | 아래 \*/
border-color: red rgb(240, 30, 50, 0.7) green;

/\* 위 | 오른쪽 | 아래 | 왼쪽 \*/
border-color: red yellow green blue;

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

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

* **한 개**의 값을 사용하면 모든 네 면에 동일한 색상을 적용합니다.
* **두 개**의 값을 사용하면 첫 번째 값이 위아래, 두 번째 값이 좌우의 색상을 맡습니다.
* **세 개**의 값을 사용하면 첫 번째 값이 위, 두 번째 값이 좌우, 세 번째 값이 아래의 색상을 맡습니다.
* **네 개**의 값을 사용하면 각각 순서대로 위, 오른쪽, 아래, 왼쪽(시계방향) 순서로 색상을 적용합니다.
### 값

`<color>`

테두리의 색상.

### 형식 구문
```

border-color =
  [ <color> | <image-1D> ]{1,4}

<image-1D> =
  <stripes()>

<stripes()> =
  stripes( <color-stripe># )

<color-stripe> =
  <color>                            &&
  [ <length-percentage> | <flex> ]?

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

```

예제
--

### `border-color`의 모든 사용법

#### HTML

```html
<div id="justone">
  <p><code>border-color: red;</code>는 아래와 같습니다.</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: red;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="horzvert">
  <p><code>border-color: gold red;</code>는 아래와 같습니다.</p>
  <ul>
    <li><code>border-top-color: gold;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="topvertbott">
  <p><code>border-color: red cyan gold;</code>는 아래와 같습니다.</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: cyan;</code></li>
  </ul>
</div>
<div id="trbl">
  <p><code>border-color: red cyan black gold;</code>는 아래와 같습니다.</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: black;</code></li>
    <li><code>border-left-color: gold;</code></li>
  </ul>
</div>
```

#### CSS

```css
#justone {
  border-color: red;
}

#horzvert {
  border-color: gold red;
}

#topvertbott {
  border-color: red cyan gold;
}

#trbl {
  border-color: red cyan black gold;
}

/\* Set width and style for all divs \*/
div {
  border: solid 0.3em;
  width: auto;
  margin: 0.5em;
  padding: 0.5em;
}

ul {
  margin: 0;
  list-style: none;
}
```

#### 결과

명세
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # logical-shorthand-keyword |
| CSS Backgrounds and Borders Module Level 3 # border-color |

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `border-top-color`: `currentcolor`
* `border-right-color`: `currentcolor`
* `border-bottom-color`: `currentcolor`
* `border-left-color`: `currentcolor`
 |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| 계산 값 | as each of the properties of the shorthand:* `border-bottom-color`: computed color
* `border-left-color`: computed color
* `border-right-color`: computed color
* `border-top-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-bottom-color`: a color
* `border-left-color`: a color
* `border-right-color`: a color
* `border-top-color`: a color
 |

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

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

같이 보기
-----

* 테두리 색상 관련 CSS 속성: `border`, `border-top-color`, `border-right-color`, `border-bottom-color`, `border-left-color`
* 다른 테두리 관련 CSS 속성: `border-width`, `border-style`
* `<color>` 자료형
* 다른 색상 관련 속성: `color`, `background-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)
* CSS로 HTML 요소에 색 입히기 (en-US)


transform - CSS: Cascading Style Sheets

transform
=========

CSS **`transform`** 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. `transform`은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다.

시도해보기
-----

`none`이 아닌 값을 지정하면 새로운 쌓임 맥락을 생성합니다. 이 경우, `position`이 `fixed`거나 `absolute`인 요소의 컨테이닝 블록으로서 작용합니다.

**경고:** 변형 가능한 요소만 `transform`할 수 있습니다. 즉, CSS 박스 모델이 레이아웃을 결정하는 모든 요소 중 비대체 인라인 박스, 표 열 박스 (en-US), 표 열 그룹 박스 (en-US)를 제외한 요소에만 적용할 수 있습니다.

구문
--

```css
/\* 키워드 값 \*/
transform: none;

/\* 함수 값 \*/
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/\* 다중 함수 값 \*/
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

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

`transform` 속성은 키워드 `none` 또는 하나 이상의 `<transform-function>` 값을 사용해 지정할 수 있습니다.

### 값

`<transform-function>`

요소에 적용할 하나 이상의 CSS 변형 함수. 변형 함수는 왼쪽에서 오른쪽으로 곱해집니다. 즉, 요소에 변형을 오른쪽부터 왼쪽으로 하나씩 순서대로 적용하는 것과 같습니다.

`none`

아무런 변형도 적용하지 않음.

### 형식 구문
```

transform =
  none              |
  <transform-list>

<transform-list> =
  <transform-function>+

```

`perspective()` (en-US)가 변형 함수의 일부라면 항상 제일 앞에 위치해야 합니다.

예제
--

### HTML

```html
<div>Transformed element</div>
```

### CSS

```css
div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}
```

### 결과

CSS 변형 사용하기와 `<transform-function>` 문서를 방문해 더 많은 예제를 찾아보세요.

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

크기 변경/확대/축소 애니메이션은 흔한 편두통 유발 요인이므로 접근성에 좋지 않습니다. 그러나 꼭 넣어야 한다면 되도록 사이트 전체의 애니메이션을 켜거나 끌 수 있는 방법을 제공하는걸 고려해주세요.

`prefers-reduced-motion` (en-US) 미디어 기능을 사용할 수도 있습니다. 미디어 쿼리와 함께 사용하면, 사용자가 시스템 설정에서 애니메이션을 줄였는지 알아내고, 애니메이션을 비활성화할 수 있습니다.

자세한 내용은 다음 링크에서 확인할 수 있습니다.

* MDN Understanding WCAG, Guideline 2.3 explanations (en-US)
* Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1
명세
--

| Specification |
| --- |
| CSS Transforms Module Level 2 # transform-functions |
| CSS Transforms Module Level 1 # transform-property |

|  |  |
| --- | --- |
| 초기값 | `none` |
| 적용대상 | transformable elements |
| 상속 | no |
| Percentages | refer to the size of bounding box |
| 계산 값 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a transform |
| Creates stacking context | yes |

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

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

같이 보기
-----

* CSS 변형 사용하기
* 변형 함수의 설명을 담은 `<transform-function>` 자료형 문서.
* CSS 변형 함수의 시각화가 가능한 온라인 도구: CSS Transform Playground


인접 형제 결합자 - CSS: Cascading Style Sheets

인접 형제 결합자
=========

**인접 형제 결합자**(`+`)는 앞에서 지정한 요소의 **바로 다음**에 위치하는 형제 요소만 선택합니다.

```css
/\* Paragraphs that come immediately after any image \*/
img + p {
  font-weight: bold;
}
```

구문
--
```

former_element + target_element { style properties }
```

예제
--

### CSS

```css
li:first-of-type + li {
  color: red;
}
```

### HTML

```html
<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>
```

### 결과

명세
--

| Specification |
| --- |
| Selectors Level 4 # adjacent-sibling-combinators |

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

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

같이 보기
-----

* 일반 형제 결합자


margin-bottom - CSS: Cascading Style Sheets

margin-bottom
=============

**`margin-bottom`** CSS 속성은 요소의 아래쪽에 바깥 여백 영역margin area을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다.

시도해보기
-----

`<span>`, `<code>` 등 비대체non-replaced 인라인 요소에는 효과가 없습니다.

구문
--

```css
/\* <length> 값 \*/
margin-bottom: 10px; /\* 절대 길이 \*/
margin-bottom: 1em; /\* 글씨 크기에 상대적 \*/
margin-bottom: 5%; /\* 가장 가까운 블록 컨테이너의 너비에 상대적 \*/

/\* 키워드 값 \*/
margin-bottom: auto;

/\* 전역 값 \*/
margin-bottom: inherit;
margin-bottom: initial;
margin-bottom: unset;
```

`margin-bottom` 속성은 키워드 `auto`, `<length>`, `<percentage>`를 사용해 설정할 수 있습니다. 값은 양수, 0, 음수가 가능합니다.

### 값

`<length>`

바깥 여백 크기의 고정 값.

`<percentage>`

바깥 여백 크기와 블록 컨테이너 너비의 비율.

`auto`

브라우저가 적절한 값 선택. `margin`을 참고하세요.

### 형식 구문
```

margin-bottom =
  <length-percentage>  |
  auto

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

```

예제
--

```css
.content {
  margin-bottom: 5%;
}
.sidebox {
  margin-bottom: 10px;
}
.logo {
  margin-bottom: -5px;
}
#footer {
  margin-bottom: 1em;
}
```

명세
--

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

|  |  |
| --- | --- |
| 초기값 | `0` |
| 적용대상 | all elements, except elements with table `display` (en-US) types other than `table-caption`, `table` and `inline-table`. It also applies to `::first-letter` (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.


font-size - CSS: Cascading Style Sheets

font-size
=========

**`font-size`** CSS 속성은 폰트의 크기(대문자 "M"의 크기)를 지정합니다. 폰트 크기를 바꾸면 `em` 과 `ex` `<length>` 단위로 계산된 다른 항목들의 크기를 바꿉니다.

시도해보기
-----

구문
--

```css
/\* <absolute-size> 값 \*/
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

/\* <relative-size> 값 \*/
font-size: larger;
font-size: smaller;

/\* <length> 값 \*/
font-size: 12px;
font-size: 0.8em;

/\* <percentage> 값 \*/
font-size: 80%;

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

The `font-size` property is specified in one of the following ways:

* As one of the absolute-size or relative-size keywords
* As a `<length>` or a `<percentage>`, relative to the parent element's font size
### 값

`xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`

 키워드는 사용자의 기본 폰트(`medium`) 크기에 따라 정해집니다. `<font size="1"` 부터
 `<font size="7">` 와 같은 HTML 과 유사하게 표현됩니다. 기본 유저 폰트 크기는 `<font size="3">입니다`.

`larger`, `smaller`

키워드에 따라 부모 엘리먼트의 폰트 크기에서 일정 비율로 늘이거나 줄입니다.

`<length>`

`<length>`는 항상 양수입니다. 만약 단위가 `em` 이나 `ex` 로 표현되어 있으면, 부모 엘리먼트의 크기에 상대적으로
 정해집니다. 예를 들어, 0.5em 은 부모 엘리먼트 폰트 크기의 절반이 현재 엘리먼트의 폰트 크기입니다. 만약 단위가 `rem` 으로 지정되어 있다면, 폰트 크기는
 `html` (루트) 엘리먼트의 폰트 크기에 따라 상대적으로 정해집니다.

``<percentage>`

양수인 `<percentage>` 는, 부모 엘리먼트의 폰트 크기의 비율입니다.

### 형식 구문
```

font-size =
  <absolute-size> (en-US)            |
  <relative-size> (en-US)            |
  <length-percentage [0,∞]>  |
  math

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

```

접근법
---

폰트 크기는 키워드나 pixel과 em처럼 수치 단위처럼 여러가지 방법으로 지정할 수 있습니다. 각 웹 페이지에 맞는 적합한 방법을 선택해야 합니다.

### 키워드

키워드는 웹의 폰트 크기를 정하는 좋은 방법입니다. 키워드로 엘리먼트의 폰트 크기를 정하면 웹 페이지의 모든 페이지의 폰트 크기가 상대적으로 지정되어 쉽게 전체 페이지의 폰트 크기를 늘이거나 줄일 수 있습니다.

### 픽셀

픽셀 단위의 정확함이 필요하면, 폰트 크기를 픽셀 단위로 (`px`) 설정하는 것이 좋은 선택입니다. px 값은 정적이고 운영체제 독립적이며 브라우저 독립적인 방법으로 브라우저에 글자들이 정확히 몇 픽셀 높이로 렌더링 되어야 하는지를 정할 수 있습니다다. 브라우저가 비슷한 효과를 내기 위해 각기 다른 방법을 사용하기 때문에 렌더링된 결과가 브라우저마다 아주 조금씩 달라질 수 있습니다.

폰트 크기 설정을 조합해서 쓸 수 있습니다다. 예를 들어, 부모 엘리먼트의 크기를 `16px` 로 정하고 자식 엘리먼트의 크기를 `larger`로 설정하면, 자식엘리먼트의 폰트 크기는 페이지에 있는 부모 엘리먼트보다 크게 보입니다.

**참고:** 폰트 크기를 픽셀로 정하는 것은 사용자가 폰트 크기를 브라우저를 이용해 바꿀 수 없기 때문에 *접근성이 떨어집니다*. (예를 들어 시각에 제약이 있는 사용자가 폰트 크기를 웹 디자이너가 설정한 크기보다 더 크게 설정하려고 할 수 있습니다.) 그러므로, 접근성 높은 페이지를 만들고자 한다면, 폰트 크기를 픽셀 단위로 설정하는 것을 지양해야 합니다.

### `em` 값

폰트 크기를 설정하는 또 하나의 방법은 `em` 값으로 설정하는 것입니다. `em` 값은 동적입니다. `font-size` 속성을 정의할 때, em 은 부모 엘리먼트의 폰트 크기와 같습니다. 만약, 전체 페이지에서 폰트 크기를 정의하지 않으면 높은 가능성으로 브라우저 기본인 16px로 지정됩니다. 따라서 기본 값일때 1em = 16px 이고 2em = 32px 를 나타냅니다. 만약 body 엘리먼트의 `font-size` 를 20px로 정한 경우, 1em = 20px 이고 2em = 40px 입니다. 2 라는 값은 현재 크기의 배수를 나타냄을 주의해야 합니다.

em 표현을 pixel 값으로 표현해야 한다면 이 공식을 사용할 수 있습니다.
```

em = 구하고자 하는 엘리먼트의 pixel 값 / 부모 엘리먼트의 font-size pixel 값
```

예를 들어 페이지의 폰트 크기가 1em이고, 브라우저 기본 값이 1em = 16px로 정의되어 있다고 가정해보겠습니다. 만약 12px 폰트 크기로 지정하고 싶다면 0.75em(12/16 = 0.75) 로 정해야 합니다. 비슷하게, 10px로 정하고 싶다면 0.625em(10/16 = 0.625) 로 정합니다. 22px 은 1.375em 으로 표현합니다.

문서 전체의 폰트 크기를 정할때 많이 쓰이는 방법은 body 태그의 폰트 크기를 10px 과 같은 62.5% (기본값 16px의 62.5%) 나 0.625em 으로 정하는 것 입니다. 이제 다른 엘리먼트의 폰트 크기를 계산하기 쉬운 px 을 10으로 나눈 em 단위를 이용해서 설정할 수 있습니다. 이 경우 6px = 0.6em 로, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em 로 표현합니다.

```css
body {
  font-size: 62.5%; /\* font-size 1em = 10px 브라우저의 기본 설정 \*/
}
span {
  font-size: 1.6em; /\* 1.6em = 16px \*/
}
```

em 은 자동적으로 폰트의 크기를 적용해주기 때문에 CSS 에서 유용한 단위입니다.

중요하게 기억할 점은, em 값은 합성 값입니다. 위의 CSS 에 아래 HTML 을 적용해보겠습니다.

```html
<div>
  <span>Outer <span>inner</span> outer</span>
</div>
```

그 결과는

브라우저의 기본 `font-size` 가 16px 이라고 가정해보면, "outer" 는 16px 로 그려지고 , "inner" 는 25.6px로 그려집니다. 왜냐하면 span의 `font-size` 가 1.6 em 으로 부모의 `font-size`에 상대적인데, 그 부모의 `font-size`도 상대적으로 계산되기 때문입니다. 이러한 동작을 **합성**이라고 부릅니다.

### `rem`

`rem` 값은 합성 문제를 회피하기 위해 고안되었습니다. `rem` 값은 부모 엘리먼트가 아니라 최상위 `html` 엘리먼트에 상대적입니다. 다르게 표현하면, rem 은 부모 크기에 의해 폰크 크기가 정해지지 않도록 하여 합성 문제를 제거합니다.

아래 CSS 는 이전 예제와 거의 동일합니다. 딱 하나 다른 점은 단위가 `rem` 으로 바뀌었습니다.

```css
html {
  font-size: 62.5%; /\* font-size 1em = 10px on default browser settings \*/
}
span {
  font-size: 1.6rem;
}
```

이 CSS 를 같은 HTML 에 적용하면 이렇게 보입니다

```html
<span>Outer <span>inner</span> outer</span>
```

이 예제에서 "outer inner outer" 는 모두 16px 로 보입니다 (브라우저의 기본 폰트 설정이 16px 인 경우).

예제
--

### 예제 1

```css
/\* 문단 텍스트의 크기를 매우 크게 설정 \*/
p {
  font-size: xx-large;
}

/\* h1 (제목 1)을 주변 텍스트보다 2.5배 큼 \*/
h1 {
  font-size: 250%;
}

/\* span 태그 안의 텍스트를 16px 로 설정 \*/
span {
  font-size: 16px;
}
```

### 예제 2

```css
.small {
  font-size: xx-small;
}
.larger {
  font-size: larger;
}
.point {
  font-size: 24pt;
}
.percent {
  font-size: 200%;
}
```

```html
<h1 class="small">Small H1</h1>
<h1 class="larger">Larger H1</h1>
<h1 class="point">24 point H1</h1>
<h1 class="percent">200% H1</h1>
```

#### 결과

참고
--

`font-size` 속성의 `em` 과 `ex` 단위는 부모 엘리먼트의 폰트 크기에 상대적입니다(자기 엘리먼트의 폰트 크기에 상대적인 다른 속성과는 다르게). 이는 `em` 단위와 퍼센트 단위가 `font-size` 에서 동일하게 동작함을 의미합니다.

명세
--

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-size-prop |

|  |  |
| --- | --- |
| 초기값 | `medium` |
| 적용대상 | all elements and text. It also applies to `::first-letter` (en-US) and `::first-line` (en-US). |
| 상속 | yes |
| Percentages | refer to the parent element's font size |
| 계산 값 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a length |

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

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


margin-left - CSS: Cascading Style Sheets

margin-left
===========

**`margin-left`** CSS 속성은 요소의 왼쪽에 바깥 여백 영역margin area을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다.

시도해보기
-----

구문
--

```css
/\* <length> 값 \*/
margin-left: 20px; /\* 절대 길이 \*/
margin-left: 1em; /\* 글씨 크기에 상대적 \*/
margin-left: 5%; /\* 가장 가까운 블록 컨테이너의 너비에 상대적 \*/

/\* 키워드 값 \*/
margin-left: auto;

/\* 전역 값 \*/
margin-left: inherit;
margin-left: initial;
margin-left: unset;
```

`margin-left` 속성은 키워드 `auto`, `<length>`, `<percentage>`를 사용해 설정할 수 있습니다. 값은 양수, 0, 음수가 가능합니다.

### 값

`<length>`

바깥 여백 크기의 고정 값.

`<percentage>`

바깥 여백 크기와 블록 컨테이너 너비의 비율.

`auto`

사용한 레이아웃 모드에 따라 가로축 미사용 공간 너비의 일부를 바깥 여백에 할당. `margin-left`와 `margin-right`의 값이 모두 `auto`라면 너비를 양 여백에 동일하게 배정합니다. 아래 표가 가능한 여러 경우를 보입니다.

| `display` (en-US) 값 | `float` 값 | `position` 값 | `auto`의 계산 값 | 설명 |
| --- | --- | --- | --- | --- |
| `inline`, `inline-block`, `inline-table` | *any* | `static` or `relative` | `0` | 인라인 레이아웃 모드 |
| `block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption` | *any* | `static` or `relative` | `0`, except if both `margin-left` and `margin-right` are set to `auto`. In this case, it is set to the value centering the element inside its parent. | 블록 레이아웃 모드 |
| `block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption` | `left` or `right` | `static` or `relative` | `0` | 블록 레이아웃 모드 (플로팅 요소) |
| *any* `table-*`*, except* `table-caption` | *any* | *any* | `0` | 내부 `table-*` 요소는 바깥 여백을 가지지 않습니다. 대신 `border-spacing`을 사용하세요. |
| *any, except `flex`,* `inline-flex`*, or* `table-*` | *any* | *`fixed`* or `absolute` | `0`, except if both `margin-left` and `margin-right` are set to `auto`. In this case, it is set to the value centering the border area inside the available `width`, if fixed. | 절대위치 레이아웃 모드 |
| `flex`, `inline-flex` | *any* | *any* | `0`, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal `auto` margins. | 플렉스박스 레이아웃 모드 |

### 형식 구문
```

margin-left =
  <length-percentage>  |
  auto

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

```

예제
--

```css
.content {
  margin-left: 5%;
}
.sidebox {
  margin-left: 10px;
}
.logo {
  margin-left: -5px;
}
```

명세
--

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

|  |  |
| --- | --- |
| 초기값 | `0` |
| 적용대상 | all elements, except elements with table `display` (en-US) types other than `table-caption`, `table` and `inline-table`. It also applies to `::first-letter` (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.


user-select - CSS: Cascading Style Sheets

user-select
===========

CSS **`user-select`** 속성은 사용자가 텍스트를 선택할 수 있는지 지정합니다.

```css
/\* 키워드 값 \*/
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

/\* 전역 값 \*/
user-select: inherit;
user-select: initial;
user-select: unset;
```

구문
--

`none`

이 요소와 아래 요소의 텍스트를 선택하지 못하도록 막습니다. 단 `Selection` (en-US) 객체는 `none`인 요소(와 그 아래)를 포함할 수 있습니다.

`auto`

`auto`의 사용값은 아래와 같이 결정됩니다.

* `::before`와 `::after` 의사 요소의 사용값은 `none`입니다.
* 편집 가능한 요소의 사용값은 `contain`입니다.
* 그렇지 않고, 부모 요소 `user-select`의 사용값이 `all`이면 이 요소의 사용값도 `all`입니다.
* 그렇지 않고, 부모 요소 `user-select`의 사용값이 `none`이면 이 요소의 사용값도 `none`입니다.
* 그렇지 않으면 사용값은 `text`입니다.

`text`

사용자가 텍스트를 선택할 수 있습니다.

`all`

요소의 콘텐츠가 원자적으로 선택됩니다. 즉 선택 범위는 이 요소와 그 아래의 자손 전체를 포함해야 하며 일부만 담을 수는 없습니다. 하위 요소에서 더블 클릭이나 콘텍스트 클릭이 발생한 경우, `all`을 지정한 조상 요소 중 제일 상위 요소를 선택합니다.

`contain`

선택의 시작을 이 요소 안에서 한 경우, 범위가 요소 바깥으로 벗어날 수 없습니다.

형식 정의
-----

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

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

user-select =
  auto     |
  text     |
  none     |
  contain  |
  all

```

예제
--

### HTML

```html
<p>You should be able to select this text.</p>
<p class="unselectable">Hey, you can't select this text!</p>
<p class="all">Clicking once will select all of this text.</p>
```

### CSS

```css
.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.all {
  -moz-user-select: all;
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
}
```

### 결과

명세
--

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # content-selection |

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

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

같이 보기
-----

* `::selection` (en-US) 의사 요소
* JavaScript `Selection` (en-US) 객체.


특성 선택자 - CSS: Cascading Style Sheets

특성 선택자
======

CSS **특성 선택자**는 주어진 특성의 존재 여부나 그 값에 따라 요소를 선택합니다.

```css
/\* <a> elements with a title attribute \*/
a[title] {
  color: purple;
}

/\* <a> elements with an href matching "https://example.org" \*/
a[href="https://example.org"]
{
  color: green;
}

/\* <a> elements with an href containing "example" \*/
a[href\*="example"] {
  font-size: 2em;
}

/\* <a> elements with an href ending ".org" \*/
a[href$=".org"] {
  font-style: italic;
}

/\* <a> elements whose class attribute contains the word "logo" \*/
a[class~="logo"] {
  padding: 2px;
}
```

구문
--

`[attr]`

`attr`이라는 이름의 특성을 가진 요소를 선택합니다.

`[attr=value]`

`attr`이라는 이름의 특성값이 정확히 `value`인 요소를 선택합니다.

`[attr~=value]`

`attr`이라는 이름의 특성값이 정확히 `value`인 요소를 선택합니다. `attr` 특성은 공백으로 구분한 여러 개의 값을 가지고 있을 수 있습니다.

`[attr|=value]`

`attr`이라는 특성값을 가지고 있으며, 그 특성값이 정확히 `value`이거나 `value`로 시작하면서 `-`(U+002D) 문자가 곧바로 뒤에 따라 붙으면 이 요소를 선택합니다. 보통 언어 서브코드(`en-US`, `ko-KR` 등)가 일치하는지 확인할 때 사용합니다.

`[attr^=value]`

`attr`이라는 특성값을 가지고 있으며, 접두사로 `value`가 값에 포함되어 있으면 이 요소를 선택합니다.

`[attr$=value]`

`attr`이라는 특성값을 가지고 있으며, 접미사로 `value`가 값에 포함되어 있으면 이 요소를 선택합니다.

`[attr*=value]`

`attr`이라는 특성값을 가지고 있으며, 값 안에 `value`라는 문자열이 적어도 하나 이상 존재한다면 이 요소를 선택합니다.

`[attr operator value i]`

괄호를 닫기 전에 `i` 혹은 `I`를 붙여주면 값의 대소문자를 구분하지 않습니다. (ASCII 범위 내에 존재하는 문자에 한해서 적용됩니다)

`[attr operator value s]`
Experimental

괄호를 닫기 전에 `s` 혹은 `S`를 붙여주면 값의 대소문자를 구분합니다. (ASCII 범위 내에 존재하는 문자에 한해서 적용됩니다)

예제
--

### 링크

#### CSS

```css
a {
  color: blue;
}

/\* Internal links, beginning with "#" \*/
a[href^="#"] {
  background-color: gold;
}

/\* Links with "example" anywhere in the URL \*/
a[href\*="example"] {
  background-color: silver;
}

/\* Links with "insensitive" anywhere in the URL,
 regardless of capitalization \*/
a[href\*="insensitive" i] {
  color: cyan;
}

/\* Links with "cAsE" anywhere in the URL,
with matching capitalization \*/
a[href\*="cAsE" s] {
  color: pink;
}

/\* Links that end in ".org" \*/
a[href$=".org"] {
  color: red;
}
```

#### HTML

```html
<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
</ul>
```

#### 결과

### 언어

#### CSS

```css
/\* All divs with a `lang` attribute are bold. \*/
div[lang] {
  font-weight: bold;
}

/\* All divs in US English are blue. \*/
div[lang~="en-us"] {
  color: blue;
}

/\* All divs in Portuguese are green. \*/
div[lang="pt"] {
  color: green;
}

/\* All divs in Chinese are red, whether
 simplified (zh-CN) or traditional (zh-TW). \*/
div[lang|="zh"] {
  color: red;
}

/\* All divs with a Traditional Chinese
 `data-lang` are purple. \*/
/\* Note: You could also use hyphenated attributes
 without double quotes \*/
div[data-lang="zh-TW"] {
  color: purple;
}
```

#### HTML

```html
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界您好！</div>
<div lang="zh-TW">世界您好！</div>
<div data-lang="zh-TW">世界您好！</div>
```

#### 결과

### HTML 정렬 목록

`type` (en-US) 특성은 주로 `<input>` (en-US) 요소에 사용하므로, HTML 명세는 type의 대소문자를 구분하지 않고 선택하도록 요구하고 있습니다. 그러므로 `<ol>`의 `type`을 특성 선택자로 선택할 땐 대소문자 구분 수정자를 지정하지 않으면 동작하지 않습니다.

#### CSS

```css
/\* List types require the case sensitive flag due to a quirk in how HTML treats the type attribute. \*/
ol[type="a"] {
  list-style-type: lower-alpha;
  background: red;
}

ol[type="a" s] {
  list-style-type: lower-alpha;
  background: lime;
}

ol[type="A" s] {
  list-style-type: upper-alpha;
  background: lime;
}
```

#### HTML

```html
<ol type="A">
  <li>Example list</li>
</ol>
```

#### 결과

명세
--

| Specification |
| --- |
| Selectors Level 4 # attribute-selectors |

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

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

같이 보기
-----

* CSS `attr()` (en-US) 함수


letter-spacing - CSS: Cascading Style Sheets

letter-spacing
==============

**`letter-spacing`** CSS 속성은 글자 사이의 간격을 조절합니다.

시도해보기
-----

구문
--

```css
/\* 키워드 값 \*/
letter-spacing: normal;

/\* <length> 값 \*/
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: 0.3px;

/\* 전역 값 \*/
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;
```

### 값

`normal`

현재 글꼴의 기본 간격. `0`과 달리, `auto`는 사용자 에이전트가 양쪽 정렬을 위해 간격을 임의로 조절할 수 있습니다.

`<length>`

기본 간격에 **추가**할 글자간 간격. 음수 값을 지정할 수 있지만 구현에 따라 한계가 있을 수 있습니다. 사용자 에이전트가 간격을 줄이거나 늘리지 않습니다.

### 형식 구문
```

letter-spacing =
  normal    |
  <length>

```

예제
--

### HTML

```html
<p class="normal">글자 간격</p>
<p class="em-wide">글자 간격</p>
<p class="em-wider">글자 간격</p>
<p class="em-tight">글자 간격</p>
<p class="px-wide">글자 간격</p>
```

### CSS

```css
.normal {
  letter-spacing: normal;
}
.em-wide {
  letter-spacing: 0.4em;
}
.em-wider {
  letter-spacing: 1em;
}
.em-tight {
  letter-spacing: -0.05em;
}
.px-wide {
  letter-spacing: 6px;
}
```

### 결과

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

`letter-spacing` 값의 절댓값이 너무 크면 스타일을 적용한 글을 읽기 힘들어집니다. 지나치게 큰 값으로는 글자 간격이 지나치게 넓어져 단어를 이루지 못하고 따로 따로 보입니다. 반대로 지나친 음숫값은 글자가 서로 겹쳐 알아볼 수 없습니다.

글꼴마다 문자의 너비가 다르므로 읽기에 용이한 간격은 상황에 따라 다릅니다. 모든 글꼴에 적합한 하나의 값은 존재하지 않습니다.

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

| Specification |
| --- |
| CSS Text Module Level 3 # letter-spacing-property |

|  |  |
| --- | --- |
| 초기값 | `normal` |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US) and `::first-line` (en-US). |
| 상속 | yes |
| 계산 값 | an optimum value consisting of either an absolute length or the keyword `normal` |
| Animation type | a length |

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

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

같이 보기
-----

* `font-kerning` (en-US)


outline - CSS: Cascading Style Sheets

outline
=======

CSS **`outline`** 단축 속성은 모든 외곽선 속성을 한꺼번에 지정합니다.

시도해보기
-----

구성 속성
-----

`outline`은 단축 속성으로서 다음의 하위 속성을 포함합니다.

* `outline-color` (en-US)
* `outline-style`
* `outline-width`
구문
--

```css
/\* style \*/
outline: solid;

/\* color | style \*/
outline: #f66 dashed;

/\* style | width \*/
outline: inset thick;

/\* color | style | width \*/
outline: green solid 3px;

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

`outline` 속성은 아래의 값 중 한 개에서 세 개를 사용해 지정할 수 있으며 순서는 상관하지 않습니다.

**참고:** 많은 요소의 외곽선은 스타일을 지정하지 않을 경우 보이지 않습니다. 스타일 기본값이 `none`이기 때문인데, 주목할만한 예외는 `<input>` (en-US) 요소로 브라우저의 기본 스타일이 적용됩니다.

### 값

`<'outline-color'>`

외곽선의 색을 설정합니다. 누락 시 기본값은 `currentcolor`입니다. `outline-color` (en-US)를 참고하세요.

`<'outline-style'>`

외곽선의 스타일을 설정합니다. 누락 시 기본값은 `none`입니다. `outline-style`을 참고하세요.

`<'outline-width'>`

외곽선의 두께를 설정합니다. 누락 시 기본값은 `medium`입니다. `outline-width`를 참고하세요.

설명
--

테두리와 외곽선은 매우 유사하지만, 다음의 두 가지 차이점이 존재합니다.

* 외곽선은 요소 콘텐츠의 밖에 그려지며 절대 공간을 차지하지 않습니다.
* 명세에 따르면 외곽선은 직사각형일 필요가 없습니다. 보통 직사각형으로 그리기는 합니다.

다른 모든 단축 속성과 마찬가지로, 누락한 하위 속성의 값은 초깃값으로 설정됩니다.

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

`outline`에 `0` 또는 `none` 값을 지정하면 브라우저의 기본 포커스 스타일이 사라집니다. 만약 어떤 요소가 상호작용 가능하다면 반드시 시각으로 포커스 여부를 나타낼 수 있어야 합니다. 기본 포커스 스타일을 제거한 경우 다른 뚜렷한 대안을 제공하세요.

* How to Design Useful and Usable Focus Indicators
* WCAG 2.1: Understanding Success Criterion 2.4.7: Focus Visible
형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `outline-color` (en-US): `auto`
* `outline-style`: `none`
* `outline-width`: `medium`
 |
| 적용대상 | all elements |
| 상속 | no |
| 계산 값 | as each of the properties of the shorthand:* `outline-color` (en-US): For the keyword `auto`, the computed value is `currentcolor`. For the color value, if the value is translucent, the computed value will be the `rgba()` corresponding one. If it isn't, it will be the `rgb()` corresponding one. The `transparent` keyword maps to `rgba(0,0,0,0)`.
* `outline-width`: an absolute length; if the keyword `none` is specified, the computed value is `0`
* `outline-style`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `outline-color` (en-US): a color
* `outline-width`: a length
* `outline-style`: by computed value type
 |

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

outline =
  <'outline-color'>  ||
  <'outline-style'>  ||
  <'outline-width'>

```

예제
--

### 외곽선으로 포커스 스타일 설정

#### HTML

```html
<a href="#">This link has a special focus style.</a>
```

#### CSS

```css
a {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

a:focus {
  outline: 4px dotted #e73;
  outline-offset: 4px;
  background: #ffa;
}
```

#### 결과

명세
--

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

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

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


border-collapse - CSS: Cascading Style Sheets

border-collapse
===============

**`border-collapse`** CSS 속성은 표 테두리(border)가 분리(separated) 또는 상쇄(collapsed)될 지를 결정합니다. 분리 모델에서는, 인접한 셀은 각각 자신의 고유(distinct) 테두리가 있습니다. 상쇄 모델에서는, 인접한 표 셀은 테두리를 공유합니다.

시도해보기
-----

분리(*separated*) 모델은 HTML 표 테두리 전통 모델입니다. 인접 셀은 각각 자신의 고유 테두리가 있습니다. 그 사이의 간격은 `border-spacing` 속성에 의해 주어집니다.

상쇄(*collapsed*) 테두리 모델에서는, 인접 표 셀은 테두리를 공유합니다. 그 모델에서는, `inset`의 `border-style` 값은 `groove`처럼, `outset`은 `ridge`처럼 행동합니다.

구문
--

```css
/\* Keyword values \*/
border-collapse: collapse;
border-collapse: separate;

/\* Global values \*/
border-collapse: inherit;
border-collapse: initial;
border-collapse: unset;
```

### 값

`separate`

분리된 테두리 표 렌더링 모델의 사용을 요청하는 키워드입니다. 기본값입니다.

`collapse`

상쇄된 테두리 표 렌더링 모델의 사용을 요청하는 키워드입니다.

### 형식 구문
```

border-collapse =
  separate  |
  collapse

```

예제
--

### 브라우저 엔진의 다색 표

#### HTML

```html
<table class="separate">
  <caption>
    <code>border-collapse: separate</code>
  </caption>
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Layout Engine</th>
    </tr>
    <tr>
      <td class="fx">Firefox</td>
      <td class="gk">Gecko</td>
    </tr>
    <tr>
      <td class="ie">Internet Explorer</td>
      <td class="tr">Trident</td>
    </tr>
    <tr>
      <td class="sa">Safari</td>
      <td class="wk">Webkit</td>
    </tr>
    <tr>
      <td class="ch">Chrome</td>
      <td class="bk">Blink</td>
    </tr>
    <tr>
      <td class="op">Opera</td>
      <td class="bk">Blink</td>
    </tr>
  </tbody>
</table>
<table class="collapse">
  <caption>
    <code>border-collapse: collapse</code>
  </caption>
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Layout Engine</th>
    </tr>
    <tr>
      <td class="fx">Firefox</td>
      <td class="gk">Gecko</td>
    </tr>
    <tr>
      <td class="ie">Internet Explorer</td>
      <td class="tr">Trident</td>
    </tr>
    <tr>
      <td class="sa">Safari</td>
      <td class="wk">Webkit</td>
    </tr>
    <tr>
      <td class="ch">Chrome</td>
      <td class="bk">Blink</td>
    </tr>
    <tr>
      <td class="op">Opera</td>
      <td class="bk">Blink</td>
    </tr>
  </tbody>
</table>
```

#### CSS

```css
.collapse {
  border-collapse: collapse;
}
.separate {
  border-collapse: separate;
}
table {
  display: inline-table;
  margin: 1em;
  border: dashed 6px;
  border-width: 6px;
}
table th,
table td {
  border: solid 3px;
}
.fx {
  border-color: orange blue;
}
.gk {
  border-color: black red;
}
.ie {
  border-color: blue gold;
}
.tr {
  border-color: aqua;
}
.sa {
  border-color: silver blue;
}
.wk {
  border-color: gold blue;
}
.ch {
  border-color: red yellow green blue;
}
.bk {
  border-color: navy blue teal aqua;
}
.op {
  border-color: red;
}
```

#### 결과

명세
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-border-collapse |

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

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

같이 보기
-----

* `border-spacing`, `border-style`
* The `border-collapse` property alters the appearance of the `<table>` (en-US) HTML element.


backface-visibility - CSS: Cascading Style Sheets

backface-visibility
===================

CSS **`backface-visibility`** 속성은 요소의 뒷면이 사용자를 향할 때 보여야 하는지 지정합니다.

시도해보기
-----

요소의 뒷면은 앞면의 거울상입니다. 2D 상태에서는 볼 수 없지만 변형을 통해 3D 공간에서 회전되면 노출될 수 있습니다. (2D 변형에는 원근이 없으므로 효과가 없습니다.)

구문
--

```css
/\* 키워드 값 \*/
backface-visibility: visible;
backface-visibility: hidden;

/\* 전역 값 \*/
backface-visibility: inherit;
backface-visibility: initial;
backface-visibility: unset;
```

`backface-visibility` 속성은 다음 목록의 키워드 중 하나를 선택해 지정할 수 있습니다.

### 값

`visible`

뒷면이 사용자를 향하면 보입니다.

`hidden`

뒷면이 사용자를 향해도 보이지 않습니다. 요소가 뒤를 향하면 사용자로부터 숨기는 것과 같습니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `visible` |
| 적용대상 | transformable elements |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | discrete |

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

backface-visibility =
  visible  |
  hidden

```

예제
--

### 육면체의 뒷면 비교

아래 예제는 투명한 뒷면의 육면체와 불투명한 뒷면의 육면체를 하나씩 보입니다.

#### HTML

```html
<table>
  <tr>
    <th><code>backface-visibility: visible;</code></th>
    <th><code>backface-visibility: hidden;</code></th>
  </tr>
  <tr>
    <td>
      <div class="container">
        <div class="cube showbf">
          <div class="face front">1</div>
          <div class="face back">2</div>
          <div class="face right">3</div>
          <div class="face left">4</div>
          <div class="face top">5</div>
          <div class="face bottom">6</div>
        </div>
      </div>
      <p>
        Since all faces are partially transparent, the back faces (2, 4, 5) are
        visible through the front faces (1, 3, 6).
      </p>
    </td>
    <td>
      <div class="container">
        <div class="cube hidebf">
          <div class="face front">1</div>
          <div class="face back">2</div>
          <div class="face right">3</div>
          <div class="face left">4</div>
          <div class="face top">5</div>
          <div class="face bottom">6</div>
        </div>
      </div>
      <p>The three back faces (2, 4, 5) are hidden.</p>
    </td>
  </tr>
</table>
```

#### CSS

```css
/\* Classes that will show or hide the
 three back faces of the "cube" \*/
.showbf div {
  backface-visibility: visible;
}

.hidebf div {
  backface-visibility: hidden;
}

/\* Define the container div, the cube div, and a generic face \*/
.container {
  width: 150px;
  height: 150px;
  margin: 75px 0 0 75px;
  border: none;
}

.cube {
  width: 100%;
  height: 100%;
  perspective: 550px;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

/\* Define each face based on direction \*/
.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

/\* Make the table a little nicer \*/
th,
p,
td {
  background-color: #eeeeee;
  margin: 0px;
  padding: 6px;
  font-family: sans-serif;
  text-align: left;
}
```

#### 결과

명세
--

| Specification |
| --- |
| CSS Transforms Module Level 2 # backface-visibility-property |

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

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

같이 보기
-----

* CSS 변형 사용하기


border-width - CSS: Cascading Style Sheets

border-width
============

CSS **`border-width`** 단축 속성은 요소 네 면 테두리의 너비를 설정합니다.

시도해보기
-----

구성 속성
-----

`border-width`는 단축 속성으로서 다음의 하위 속성을 포함합니다.

* `border-bottom-width`
* `border-left-width`
* `border-right-width`
* `border-top-width`
구문
--

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

/\* <length> 값 \*/
border-width: 4px;
border-width: 1.2rem;

/\* 세로방향 | 가로방향 \*/
border-width: 2px 1.5em;

/\* 위 | 가로방향 | 아래 \*/
border-width: 1px 2em 1.5cm;

/\* 위 | 오른쪽 | 아래 | 왼쪽 \*/
border-width: 1px 2em 0 4rem;

/\* 전역 키워드 \*/
border-width: inherit;
border-width: initial;
border-width: unset;
```

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

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

`<line-width>`

테두리의 너비입니다. 0 이상의 `<length>` 또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다.

| `thin` |  | 얇은 테두리 |
| --- | --- | --- |
| `medium` |  | 중간 테두리 |
| `thick` |  | 굵은 테두리 |

**참고:** 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나 `thin ≤ medium ≤ thick`이고, 하나의 문서 내에서 동일합니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `border-top-width`: `medium`
* `border-right-width`: `medium`
* `border-bottom-width`: `medium`
* `border-left-width`: `medium`
 |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| 계산 값 | as each of the properties of the shorthand:* `border-bottom-width`: the absolute length or `0` if `border-bottom-style` is `none` or `hidden`
* `border-left-width`: the absolute length or `0` if `border-left-style` is `none` or `hidden`
* `border-right-width`: the absolute length or `0` if `border-right-style` is `none` or `hidden`
* `border-top-width`: the absolute length or `0` if `border-top-style` is `none` or `hidden`
 |
| Animation type | as each of the properties of the shorthand:* `border-bottom-width`: a length
* `border-left-width`: a length
* `border-right-width`: a length
* `border-top-width`: a length
 |

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

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

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

```

예제
--

### 서로 다른 값의 조합

#### HTML

```html
<p id="sval">한 개의 값: 모든 네 면이 6px 테두리</p>
<p id="bival">두 개의 다른 값: 위아래에 2px 테두리, 좌우에 10px 테두리</p>
<p id="treval">세 개의 다른 값: 위에 0.3em, 아래에 9px, 좌우에 0</p>
<p id="fourval">
  네 개의 다른 값: "얇은" 위, "중간" 오른쪽, "두꺼운" 아래, 왼쪽 1em
</p>
```

#### CSS

```css
#sval {
  border: ridge #ccc;
  border-width: 6px;
}
#bival {
  border: solid red;
  border-width: 2px 10px;
}
#treval {
  border: dotted orange;
  border-width: 0.3em 0 9px;
}
#fourval {
  border: solid lightgreen;
  border-width: thin medium thick 1em;
}
p {
  width: auto;
  margin: 0.25em;
  padding: 0.25em;
}
```

#### 결과

명세
--

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

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

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

같이 보기
-----

* 테두리 관련 단축 속성: `border`, `border-style`, `border-color`
* 테두리 너비 속성: `border-bottom-width`, `border-left-width`, `border-right-width`, `border-top-width`


CSS counter styles - CSS: Cascading Style Sheets

CSS counter styles
==================

**CSS counter styles** 모듈을 사용하면 사용자 정의 카운터 스타일을 정의할 수 있습니다.

참고서
---

### 속성

* `counter-increment` (en-US)
* `counter-reset` (en-US)
### 함수

* `symbols()` (en-US)
### 규칙 지시자

* `@counter-style` (en-US)
    + `system` (en-US)
    + `additive-symbols` (en-US)
    + `negative` (en-US)
    + `prefix` (en-US)
    + `suffix` (en-US)
    + `range` (en-US)
    + `pad` (en-US)
    + `speak-as` (en-US)
    + `fallback` (en-US)
안내서
---

CSS 카운터 사용하기

CSS 카운터 속성을 사용하여 목록 카운터를 제어하는 방법을 설명합니다.

명세서
---

| Specification |
| --- |
| CSS Counter Styles Level 3  |

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

{{Compat}}


float - CSS: Cascading Style Sheets

float
=====

CSS 속성(property) **`float`** 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.

시도해보기
-----

부동\*\*(floating) 요소\*\* 는 `float` 의 계산값(computed value)이 `none`이 아닌 요소입니다.

|  |  |
| --- | --- |
| 초기값 | `none` |
| 적용대상 | all elements, but has no effect if the value of `display` (en-US) is `none`. |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | discrete |

`float` 은 블록 레이아웃의 사용을 뜻하기 때문에, 일부 경우에 `display` (en-US) 값의 계산값을 수정합니다:

| 지정값(Specified value) | 계산값 |
| --- | --- |
| `inline` | `block` |
| `inline-block` | `block` |
| `inline-table` | `table` |
| `table-row` | `block` |
| `table-row-group` | `block` |
| `table-column` | `block` |
| `table-column-group` | `block` |
| `table-cell` | `block` |
| `table-caption` | `block` |
| `table-header-group` | `block` |
| `table-footer-group` | `block` |
| `flex` | `flex`, 다만 `float` 은 이러한 요소에 효과가 없음 |
| `inline-flex` | `inline-flex`, 다만 `float` 은 이러한 요소에 효과가 없음 |
| *그외* | *변화없음* |

**참고:** **주의:** JavaScript에서 이 속성을 `element.style` 객체의 멤버로서 참조한다면, 당신은 `cssFloat`으로 철자를 써야 합니다. 또한 Internet Explorer 8 이전 버전에서는 `styleFloat`으로 썼음을 주의하세요. 이는 DOM 멤버의 이름은 dash(-)로 구분된 CSS 이름의 카멜케이스(camel-case) 명이다는 규칙의 예외(이고 "class"는 "className"으로 <label>의 "for"는 "htmlFor"로 이스케이프할 필요와 같이 "float"이 JavaScript에서 예약어란 사실 때문)입니다.

구문
--

```css
/\* 키워드 값 \*/
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

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

### 값

`left`

는 요소가 자신의 포함(containing) 블록의 좌측에 부동(float, 떠움직여)해야 함을 나타내는 키워드입니다.

`right`

는 요소가 자신의 포함 블록의 우측에 부동해야 함을 나타내는 키워드입니다.

`none`

는 요소가 부동하지 않아야 함을 나타내는 키워드입니다.

`inline-start`

는 요소가 자신의 포함 블록의 시작쪽에 부동해야 함을 나타내는 키워드입니다. 즉, ltr(left to right) 스크립트 상에서 왼쪽 그리고 rtl(right to left) 스크립트 상에서는 오른쪽.

`inline-end`

는 요소가 자신의 포함 블록의 끝쪽에 부동해야 함을 나타내는 키워드입니다. 즉, ltr 스크립트 상에서 오른쪽 그리고 rtl 스크립트 상에서는 왼쪽.

### 형식 구문
```

float =
  block-start      |
  block-end        |
  inline-start     |
  inline-end       |
  snap-block       |
  <snap-block()>   |
  snap-inline      |
  <snap-inline()>  |
  left             |
  right            |
  top              |
  bottom           |
  none             |
  footnote

<snap-block()> =
  snap-block( <length> , [ start | end | near ]? )

<snap-inline()> =
  snap-inline( <length> , [ left | right | near ]? )

```

예제
--

### CSS

```css
div {
  border: solid red;
  max-width: 70ex;
}
h4 {
  float: left;
  margin: 0;
}
```

### HTML

```html
<div>
  <h4>HELLO!</h4>
  This is some text. This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text. This is some text.
</div>
```

### float이 위치 지정되는 법

위에서 말한 바와 같이, 요소가 부동되면 문서의 보통 흐름에서 빠집니다. 부동된 요소는 포함 박스나 *다른 부동된 요소*의 가장자리(edge)에 닿을 때까지 좌나 우로 이동됩니다.

아래 이미지에는, 빨간 사각형이 세 개 있습니다. 둘은 좌에 부동되고 하나는 우에 부동됩니다. "왼쪽" 두 번째 빨간 사각형은 첫 번째 사각형 오른쪽에 놓임을 주의하세요. 추가 사각형은 그들이 포함 박스를 채울 때까지 계속해서 오른쪽으로 쌓입니다. 그 후엔 다음 줄로 넘어갑니다(wrap).

![](/ko/docs/Web/CSS/float/floats.png)

### float 지우기

위 예제에서, 부동된 요소는 안에 텍스트가 부동된 블록보다 세로가 더 짧습니다. 그러나, 텍스트가 모든 부동 요소 하단 아래로 넘어갈 만큼 길지 않다면, 예상치 못한 결과를 볼 수 있습니다. 예를 들어, 위 단락(paragraph)이 오직 "Lorem ipsum dolor sit amet,"만 읽고 "Floats Example" 머릿글(heading)처럼 같은 스타일의 다른 머릿글이 이어졌다면, 두 번째 머릿글은 빨간 박스 사이에 보입니다. 아마도, 우리는 다음 머릿글이 완전히 왼쪽으로 정렬되기를 원합니다. 이를 달성하기 위해, 우리는 float을 지워야(clear) 합니다.

이 예제에서 float을 지우는 가장 간단한 방법은 우리가 왼쪽으로 정렬되는 지 확인하고 싶은 새 머릿글에 `clear` 속성을 추가하는 것입니다:

```css
h2.secondHeading {
  clear: both;
}
```

그러나, 이 방법은 우리가 머릿글이 가로로 옆에 계속 보이기를 원하는 같은 블록 형식 문맥(block formatting context (en-US)) 내에 다른 요소가 없을 때만 동작합니다. 우리 `h2` 좌우로 부동되는 사이드바(sidebar)인 형제(sibling)가 있다면, `clear` 사용은 강제로 머릿글이 두 사이드바 아래로 나타나게 하고 이는 아마 우리가 원하는 게 아닙니다.

그들 아래 요소의 float을 지우는 게 선택사항이 아니라면, 다른 방법(approach)은 부동 요소가 담긴 컨테이너의 블록 형식 문맥을 제한하는 겁니다. 다시 위 예제를 참조하면, 빨간 박스 셋은 모두 `p` 요소 내에 있는 걸로 보입니다. 우리는 박스를 포함하도록 늘어나지만, 그 하단 밖(밑)으로 사라지지 않게 `hidden` 혹은 `auto` 로 p의 `overflow` 속성을 설정할 수 있습니다:

```css
p.withRedBoxes {
  overflow: hidden;
  height: auto;
}
```

**참고:** **주의:** `overflow` 를 `scroll` 로 설정하면 부동된 모든 자식(child) 요소도 포함합니다. 하지만 스크롤바가 콘텐츠의 높이에 상관없이 보입니다. 그 컨테이너가 콘텐츠를 수용하기 위해 늘어야(grow) 함을 나타내는 기본(default)임에도 불구하고, 여기에서 우리는 `height` 를 `auto` 로 설정하고 있습니다.

명세
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-float |
| CSS Logical Properties and Values Level 1 # float-clear |

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

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

같이 보기
-----

* Block formatting context (en-US)


font-weight - CSS: Cascading Style Sheets

font-weight
===========

요약
--

**`font-weight`** CSS 속성은 폰트(font)의 가중치(weight)나 굵기(boldness)를 명시한다. 몇몇 폰트들은 `normal` 나 `bold` 일 때만 가능하다.

|  |  |
| --- | --- |
| 초기값 | `normal` |
| 적용대상 | all elements and text. It also applies to `::first-letter` (en-US) and `::first-line` (en-US). |
| 상속 | yes |
| 계산 값 | the keyword or the numerical value as specified, with `bolder` and `lighter` transformed to the real value |
| Animation type | a font weight |

구문
--

```css
font-weight: normal;
font-weight: bold;

/\* Relative to the parent \*/
font-weight: lighter;
font-weight: bolder;

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

/\* Global values \*/
font-weight: inherit;
font-weight: initial;
font-weight: unset;
```

### 값

`normal`

보통 폰트 가중치. `400` 과 같음.

`bold`

굵은 폰트 가중치. `700` 과 같음.

`lighter`

(가능한 폰트 가중치 중) 부모 요소(element) 보다 얇은 폰트 가중치.

`bolder`

(가능한 폰트 가중치 중) 부모 요소 보다 굵은 폰트 가중치.

`100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`

normal 과 bold 이외를 제공하는 폰트를 위한 숫자형 폰트 가중치.

### 대비책(Fallback)

만약 정확히 주어진 가중치를 사용할 수없다면, 실제로 렌더링 되는 가중치를 결정하기 위해 다음과 같은 경험적 접근이 적용된다:

* 만약 `500` 초과의 가중치가 주어지면, 가능한 굵은(darker) 가중치 중 가장 가까운 것이 사용된다 (만약 없다면, 얇은(lighter) 가중치 중 가장 가까운 것).
* 만약 `400` 미만의 가중치가 주어지면, 가능한 얇은 가중치 중 가장 가까운 것이 사용된다 (만약 없다면, 굵은 가중치 중 가장 가까운 것).
* 만약 가중치가 `400` 이 주어지면, `500` 이 사용된다. 만약 `500` 이 불가능하면, `500` 미만의 폰트 가중치를 위한 경험적 접근이 사용된다.
* 만약 가중치가 `500` 이 주어지면, `400` 이 사용된다. 만약 `400` 이 불가능하면, `400` 미만의 폰트 가중치를 위한 경험적 접근이 사용된다.

이것은 `normal` 과 `bold` 만 지원하는 폰트일 경우, 100-500 은 normal, 600-900 은 bold 임을 의미한다.

### 상대적 가중치의 의미

`lighter` 나 `bolder` 가 주어진 경우, 요소의 절대적인 가중치를 계산하기 위해 다음 차트가 사용된다:

| 상속된 값 | `bolder` | `lighter` |
| --- | --- | --- |
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 500 | 700 | 100 |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |

### 일반적인 가중치 이름 매핑

100~900 의 가중치 값들은 다음의 일반적인 두께 이름으로 대응된다:

`100`

Thin (Hairline)

`200`

Extra Light (Ultra Light)

`300`

Light

`400`

Normal

`500`

Medium

`600`

Semi Bold (Demi Bold)

`700`

Bold

`800`

Extra Bold (Ultra Bold)

`900`

Black (Heavy)

### 보간

`font-weight` 값은 100 단위로 보간된다. 보간은 실수 공간에서 이루어지며 100의 배수에 가까운 값으로 어림한다. 100의 배수 중간의 값들은 양의 무한대 방향의 가까운 값으로 어림한다.

### 형식 구문
```

font-weight =
  <font-weight-absolute>  |
  bolder                  |
  lighter

<font-weight-absolute> =
  normal             |
  bold               |
  <number [1,1000]>

```

예제
--

### HTML

```html
<p>
  Alice was beginning to get very tired of sitting by her sister on the bank,
  and of having nothing to do: once or twice she had peeped into the book her
  sister was reading, but it had no pictures or conversations in it, 'and what
  is the use of a book,' thought Alice 'without pictures or conversations?'
</p>

<div>
  I'm heavy<br />
  <span>I'm lighter</span>
</div>
```

### CSS

```css
/\* Set paragraph text to be bold. \*/
p {
  font-weight: bold;
}

/\* Set div text to two steps darker than
 normal but less than a standard bold. \*/
div {
  font-weight: 600;
}

/\* Sets text enclosed within span tag
 to be one step lighter than the parent. \*/
span {
  font-weight: lighter;
}
```

### 결과

명세
--

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-weight-prop |

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

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


flex-wrap - CSS: Cascading Style Sheets

flex-wrap
=========

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
CSS **`flex-wrap`** property는 `flex-item` 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성입니다. 만약 영역 내에서 벗어나지 못하게 설정한다면, 동시에 요소의 방향 축을 결정할 수 있습니다.

시도해보기
-----

여기를 참고하면 관련된 더욱 자세한 정보를 얻을 수 있습니다. Using CSS flexible boxes

Syntax
------

```css
flex-wrap: nowrap; /\* Default value \*/
flex-wrap: wrap;
flex-wrap: wrap-reverse;

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

`flex-wrap` 속성의 값으로, 다음 목록 중 하나의 키워드를 선택할 수 있습니다.

### Values

아래는 사용 가능한 속성값들입니다:

`nowrap`

기본 설정값으로, `flex-container` 부모요소 영역을 벗어나더라도 `flex-item` 요소들을 **한 줄**에 배치합니다. 시작점은 `flex-direction` 에 의해 결정된 방향으로 적용됩니다.

`wrap`

`flex-item` 요소들이 내부 로직에 의해 분할되어 여러 행에 걸쳐서 배치됩니다. `nowrap` 속성과 마찬가지로 요소가 배치되는 시작점은 `flex-direction` 에 의해 결정됩니다. 일반적으로 위에서 아래로 쌓이는 순서입니다.

`wrap-reverse`

`wrap` 속성값과 동일하지만, 요소가 나열되는 시작점과 끝점의 기준이 반대로 배치됩니다.

### Formal syntax
```

flex-wrap =
  nowrap        |
  wrap          |
  wrap-reverse

```

Examples
--------

### HTML

```html
<h4>This is an example for flex-wrap:wrap</h4>
<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:nowrap</h4>
<div class="content1">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:wrap-reverse</h4>
<div class="content2">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
```

### CSS

```css
/\* Common Styles \*/
.content,
.content1,
.content2 {
  color: #fff;
  font: 100 24px/100px sans-serif;
  height: 150px;
  text-align: center;
}

.content div,
.content1 div,
.content2 div {
  height: 50%;
  width: 50%;
}
.red {
  background: orangered;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
}

/\* Flexbox Styles \*/
.content {
  display: flex;
  flex-wrap: wrap;
}
.content1 {
  display: flex;
  flex-wrap: nowrap;
}
.content2 {
  display: flex;
  flex-wrap: wrap-reverse;
}
```

### Results

명세서
---

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

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

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

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

See also
--------

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Mastering wrapping of flex items (en-US)*


명시도 - CSS: Cascading Style Sheets

명시도
===

**명시도**란 브라우저가 어느 요소와 가장 연관된 속성을 찾는 수단으로, 이렇게 찾은 속성이 해당 요소에 적용됩니다. 명시도는 여러 종류의 CSS 선택자로 구성된 일치 규칙에 기반합니다.

어떻게 계산되는가?
----------

명시도는 주어진 CSS 선언에 적용되는 가중치(weight)로, 일치하는 선택자 내 각 선택자 유형의 수에 의해 결정됩니다. 여러 선언이 명시도가 같은 경우, CSS에서 맨 끝에 오는 선언이 요소에 적용됩니다. 명시도는 같은 요소가 여러 선언의 대상이 되는 경우에만 적용합니다. CSS 규칙에 따라 직접 대상 요소는 요소가 부모로부터 상속받는 규칙보다 항상 우선합니다.

**참고:** **주의:** 문서 트리 내 요소의 근접도(proximity, 가까움)는 명시도에 영향이 없습니다.

### 선택자 유형

아래 선택자는 유형별로 명시도를 증가시킵니다.

1. 유형 선택자(`h1` 등) 및 의사 요소(`:before` 등).
2. 클래스 선택자(`.example` 등), 속성 선택자(`[type="radio"]` 등), 의사 클래스(`:hover` 등).
3. ID 선택자(`#example` 등).

전역 선택자(`*`), 조합자(`+`, `>`, `~`, " ", `||` (en-US)) 및 부정 의사 클래스(`:not()`)는 명시도에 영향을 주지 않습니다. (`:not()` *내부에* 선언한 선택자는 영향을 끼칩니다)

https://specifishity.com에서 자세한 정보를 확인할 수 있습니다.

요소에 추가한 인라인 스타일(`style="font-weight: bold"`처럼)은 항상 외부 스타일시트의 모든 스타일을 덮어쓰므로 가장 높은 명시도를 갖는 것으로 생각할 수 있습니다.

### `!important` 예외

`!important` 규칙이 스타일 선언에 사용된 경우, 이 선언은 다른 선언보다 우선합니다. 엄밀히 말해 `!important` 자체는 명시도와 아무 관련이 없지만, 명시도에 직접 영향을 미칩니다. 그러나 `!important` 사용은 **나쁜 습관**이고 스타일시트 내 자연스러운 종속 (en-US)을 깨뜨려 디버깅을 더 어렵게 만들기에 피해야 합니다. `!important` 규칙으로 충돌하는 두 선언이 같은 요소에 적용된 경우, 더 큰 명시도를 갖는 선언이 적용됩니다.

**몇몇 경험 법칙들:**

* **항상** !important를 고려하기도 전에 명시도를 활용할 방법을 찾아보세요.
* 외부 CSS(Bootstrap 또는 Normalize.css 같은 외부 라이브러리에서)를 재정의하는 페이지 전용 CSS에**만** `!important`를 쓰세요.
* 플러그인/매시업을 작성할 때 `!important`는 **절대** 쓰지 마세요.
* 사이트 전반 CSS에는 `!important`를 **절대** 쓰지 마세요.

**`!important`를 사용하는 대신에, 다음을 고려하세요:**

1. CSS 종속cascading을 더 잘 활용하세요.
2. 더 명시된(명확한) 규칙을 쓰세요. 선택 중인 요소 앞에 하나 이상의 요소를 나타냄으로써 규칙은 더 명확해지고 더 높은 우선 순위를 얻습니다:

```html
<div id="test">
  <span>Text</span>
</div>
```

```css
div#test span {
  color: green;
}
div span {
  color: blue;
}
span {
  color: red;
}
```

순서와 무관하게 첫 번째 규칙이 가장 명확하므로 텍스트는 녹색이 됩니다. (또한, 역시 순서와 무관하게 파란색 규칙이 빨간색 규칙보다 우선합니다.)
3. (2)의 말도 안 되는 특별한 경우로, 더 이상 명시할 요소가 없는 경우 간단한 선택자를 여러 번 써서 명시도를 높일 수 있습니다.

```css
#myId#myId span {
  color: yellow;
}
.myClass.myClass span {
  color: orange;
}
```

#### `!important`를 사용하는 때

##### A) 인라인 스타일을 재정의할 때

사이트 전체의 시각적 요소를 설정하는 전역 CSS 파일은 각 요소에 직접 정의된 인라인 스타일에 덮어쓰일 수 있습니다. 인라인 스타일과 `!important` 모두 매우 나쁜 습관으로 취급되지만, 가끔씩은 `!important`로 인라인 스타일을 덮어써야 할 때가 있습니다.

이때는 전역 CSS 파일의 몇몇 스타일을 `!important`로 설정해서 요소에 직접 작성한 인라인 스타일을 덮어쓸 수 있습니다.

```html
<div class="foo" style="color: red;">나는 무슨 색일까?</div>
```

```css
.foo[style\*="color: red"] {
  color: firebrick !important;
}
```

여러 JavaScript 프레임워크와 라이브러리에서 인라인 스타일을 추가합니다. 이런 인라인 스타일을 덮어쓸 때 매우 구체적인 선택자와 함께 `!important`를 사용할 수 있습니다.

##### B) 명시도가 높은 규칙을 재정의할 때

```css
#someElement p {
  color: blue;
}

p.awesome {
  color: red;
}
```

어떻게 하면 `awesome` 문단이 `#someElement` 안에 있더라도 항상 빨갛게 만들 수 있을까요? `!important`를 사용하지 않으면 위쪽 규칙의 명시도가 높으므로 아래쪽 규칙보다 우선합니다.

#### `!important`를 덮어쓰는 방법

A) 태그, ID나 클래스를 추가함으로써 명시도가 더 높은 !important한 CSS 규칙을 만듭니다.

```css
table td {
  height: 50px !important;
}
.myTable td {
  height: 50px !important;
}
#myTable td {
  height: 50px !important;
}
```

B) 혹은 기존의 선택자 아래에 똑같은 선택자를 하나 더 만듭니다(명시도가 같으면 나중에 정의된 규칙이 우선하므로).

```css
td {
  height: 50px !important;
}
```

C) 아니면 기존 규칙을 수정해서 아예 `!important`를 사용하지 않게 만드는 것이 더 좋은 방법입니다.

```css
[id="someElement"] p {
  color: blue;
}

p.awesome {
  color: red;
}
```

ID를 ID 선택자 대신 속성 선택자로 선택하면 클래스 1개와 같은 명시도가 됩니다. 두 선택자의 명시도가 같아졌으므로 나중에 오는 규칙이 우선합니다.

#### 아래에서 자세한 정보를 확인하세요

* https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css
* https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean
* https://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css
* https://stackoverflow.com/questions/11178673/how-to-override-important
* https://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css
### `:is()` 및 `:not()` 예외

모두 일치 의사 클래스 `:is()` (en-US)
Experimental
 및 부정 의사 클래스 `:not()`은 명시도 계산에서 의사 클래스로 취급되지 *않습니다*. 그러나 이들 의사 클래스 안에 명시된 선택자는 선택자 유형의 수를 결정할 때 일반 선택자로 셉니다.

다음 CSS 조각과 HTML은...

```css
div.outer p {
  color: orange;
}
div:not(.outer) p {
  color: lime;
}
```

```html
<div class="outer">
  <p>This is in the outer div.</p>
  <div class="inner">
    <p>This text is in the inner div.</p>
  </div>
</div>
```

...다음과 같이 화면에 표시됩니다.

### `:where()` 예외
Experimental

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

명시도 조정 가상 클래스 `:where()` (en-US)
Experimental
의 명시도는 항상 0입니다.

다음 CSS 조각과 HTML은...

```css
div:where(.outer) p {
  color: orange;
}

div p {
  color: blueviolet;
}
```

```
#no-where-support {
  margin: 0.5em;
  border: 1px solid red;
}

#no-where-support:where(\*) {
  display: none !important;
}
```

```
<div id="no-where-support">
  ⚠ Your browser doesn't support the
  <code
 ><a href="https://developer.mozilla.org/docs/Web/CSS/:where" target="\_top"
 >:where()</a
 ></code
 >
  pseudo-class.
</div>
```

```html
<div class="outer">
  <p>This is in the outer div.</p>
  <div class="inner">
    <p>This text is in the inner div.</p>
  </div>
</div>
```

...다음과 같이 화면에 표시됩니다.

### 형태 기반 명시도

명시도는 선택자의 형태(form)를 기반으로 합니다. 아래에서 선택자 `*[id="foo"]`는 그 자체로는 ID를 선택하지만 선택자의 명시도를 계산할 때는 속성 선택자로 취급됩니다.

다음 스타일 선언과 마크업은...

```css
\*#foo {
  color: green;
}
\*[id="foo"] {
  color: purple;
}
```

```html
<p id="foo">I am a sample text.</p>
```

...다음과 같이 표시됩니다.

같은 요소와 일치하지만 ID 선택자는 더 높은 명시도를 갖기 때문입니다.

### 트리 근접도 무시

요소와 주어진 선택자로 참조된 다른 요소와의 근접도(proximity)는 명시도에 영향을 주지 않습니다.

다음 스타일 선언과 HTML은...

```css
body h1 {
  color: green;
}
html h1 {
  color: purple;
}
```

```html
<html>
  <body>
    <h1>Here is a title!</h1>
  </body>
</html>
```

...아래와 같이 렌더링됩니다.

두 선언은 선택자 유형 갯수가 같지만 `html h1` 선택자가 나중에 선언되었기 때문입니다.

### 직접 일치 요소와 상속된 스타일

특정한 요소와 직접적으로 일치하는 스타일은 상속된 규칙의 명시도와 무관하게 항상 상속된 스타일보다 우선합니다.

다음 CSS와 HTML은...

```css
#parent {
  color: green;
}
h1 {
  color: purple;
}
```

```html
<html>
  <body id="parent">
    <h1>Here is a title!</h1>
  </body>
</html>
```

...역시 아래와 같이 렌더링됩니다.

`h1` 선택자는 특정한 요소와 직접 일치하지만 초록색 선택자는 그렇지 않고 부모로부터 상속되기 때문입니다.

명세
--

| Specification |
| --- |
| Selectors Level 4 # specificity-rules |

같이 보기
-----

* 명시도 계산기: CSS 규칙을 테스트하고 이해할 수 있는 대화형 웹사이트 - https://specificity.keegan.st/
* CSS3 선택자 명시도 - http://www.w3.org/TR/selectors/#specificity
* CSS 주요 개념
    + CSS 문법
    + @규칙
    + 주석
    + 명시도
    + 상속
    + 박스 모델
    + 레이아웃 모드
    + 시각적 서식 모델
    + 마진 중첩
    + 값
        - 초깃값
        - 계산값
        - 결정값
        - 지정값
        - 사용값
        - 실제값 (en-US)
    + 값 정의 구문
    + 단축 속성
    + 대체 요소


컨테이닝 블록의 모든 것 - CSS: Cascading Style Sheets

컨테이닝 블록의 모든 것
=============

요소의 크기와 위치는 **컨테이닝 블록**(containing block)의 영향을 받곤 합니다. 대부분의 경우, 어떤 요소의 컨테이닝 블록은 가장 가까운 블록 레벨 조상의 콘텐츠 영역이나, 항상 그런 것은 아닙니다. 이 글에서는 요소의 컨테이닝 블록을 결정하는 요인을 살펴보겠습니다.

사용자 에이전트(브라우저 등)는 문서를 그릴 때 모든 요소에 대해 상자(박스)를 생성합니다. 각각의 상자는 아래의 네 가지 영역으로 나눠집니다.

* 콘텐츠 영역
    + 안쪽 여백(패딩) 영역
    + 테두리 영역
    + 바깥 여백(마진) 영역

![Diagram of the box model](/ko/docs/Web/CSS/Containing_block/box-model.png)

많은 개발자들은 요소의 컨테이닝 블록이 언제나 부모 요소의 콘텐츠 영역이라고 생각하지만, 사실 꼭 그렇지는 않습니다. 어떤 항목이 컨테이닝 블록을 결정짓나 알아보겠습니다.

컨테이닝 블록의 효과
-----------

컨테이닝 블록을 결정하는 요인에 뭐가 있는지 알아보기 전에, 애초에 컨테이닝 블록이 무슨 상관인지 알아두는게 유용하겠습니다.

요소의 크기와 위치는 컨테이닝 블록의 영향을 자주 받습니다. 백분율 값을 사용한 `width`, `height`, `padding`, `margin` 속성의 값과 절대적 위치(`absolute`나 `fixed` 등)로 설정된 요소의 오프셋 속성 값은 자신의 컨테이닝 블록으로부터 계산됩니다.

컨테이닝 블록 식별
----------

컨테이닝 블록의 식별 과정은 `position` 속성에 따라 완전히 달라집니다.

1. `position` **속성이 `static`**, **`relative`**, **`sticky`** 중 하나이면, 컨테이닝 블록은 가장 가까운 조상 **블록 컨테이너**(`inline-block`, `block`, `list-item` 등의 요소), 또는 가장 가까우면서 **서식 맥락을 형성하는 조상 요소(`table`, `flex`, `grid`, 아니면 블록 컨테이너 자기 자신)의 콘텐츠 영역 경계를 따라 형성됩니다.**
2. `position` \*\*속성이 `absolute`\*\*인 경우, 컨테이닝 블록은 `position` 속성 값이 `static`이 아닌(`fixed`, `absolute`, `relative`, `sticky`) 가장 가까운 조상의 내부 여백 영역입니다.
3. `position` **속성이 `fixed`인** 경우, 컨테이닝 블록은 뷰포트나 페이지 영역(페이지로 나뉘는 매체인 경우)입니다.
4. `position` **속성이** `absolute` **나** `fixed` 인 경우, 다음 조건 중 하나를 만족하는 가장 가까운 조상의 내부 여백 영역이 컨테이닝 블록이 될 수도 있습니다.
    1. `transform`이나 `perspective` (en-US) 속성이 `none`이 아님.
    2. `will-change` 속성이 `transform`이나 `perspective`임.
    3. `filter` 속성이 `none`임. (Firefox에선 `will-change`가 `filter`일 때도 적용)
    4. `contain` 속성이 `paint`임.

**참고:** 루트 요소(`<html>`)의 컨테이닝 블록은 **초기 컨테이닝 블록**이라고 불리는 사각형입니다. 초기 컨테이닝 블록은 뷰포트 또는 (페이지로 나뉘는 매체에선) 페이지 영역의 크기와 같습니다.

컨테이닝 블록으로부터 백분율 값 계산하기
----------------------

앞서 언급했듯, 특정 속성의 값이 백분율이라면 그 계산값은 요소의 컨테이닝 블록에 의해 결정됩니다. 이렇게 동작하는 속성으로 **박스 모델 속성**과 **오프셋 속성**이 있습니다.

* `height`, `top` (en-US), `bottom` (en-US) 속성은 컨테이닝 블록의 `height`를 사용해 백분율을 계산합니다. 컨테이닝 블록의 `height`가 콘텐츠의 크기에 따라 달라질 수 있고, 컨테이닝 블록의 `position`이 `relative`거나 `static`이면 계산값은 **0**이 됩니다.
* `width`, `left` (en-US), `right` (en-US), `padding`, `margin` 속성은 컨테이닝 블록의 `width`를 사용해 백분율을 계산합니다.
예제
--

모든 예제의 HTML코드는 다음과 같습니다.

```html
<body>
  <section>
    <p>문단입니다!</p>
  </section>
</body>
```

이하 예제는 모두 CSS만 변경합니다.

### 예제 1

다음 예제에서 문단은 정적 위치를 가지고, 가장 가까운 블록 컨테이너는 `<section>`이므로 문단의 컨테이닝 블록도 `<section>`입니다.
```

<body>
  <section>
    <p>문단입니다!</p>
  </section>
</body>
```

```css
body {
  background: beige;
}

section {
  display: block;
  width: 400px;
  height: 160px;
  background: lightgray;
}

p {
  width: 50%; /\* == 400px \* .5 = 200px \*/
  height: 25%; /\* == 160px \* .25 = 40px \*/
  margin: 5%; /\* == 400px \* .05 = 20px \*/
  padding: 5%; /\* == 400px \* .05 = 20px \*/
  background: cyan;
}
```

### 예제 2

다음 예제에서 `<section>`은 `display: inline`으로 인해 블록 컨테이너가 아니고, 서식 문맥도 형성하지 않으므로 문단의 컨테이닝 블록은 `<body>` 요소입니다.
```

<body>
  <section>
    <p>문단입니다!</p>
  </section>
</body>
```

```css
body {
  background: beige;
}

section {
  display: inline;
  background: lightgray;
}

p {
  width: 50%; /\* == body 너비의 절반 \*/
  height: 200px; /\* 참고: 백분율 값이었으면 0 \*/
  background: cyan;
}
```

### 예제 3

다음 예제에서는 `<section>`의 `position`이 `absolute`이기 때문에 문단의 컨테이닝 블록은 `<section>`입니다. 문단의 백분율 값은 컨테이닝 블록의 `padding` 값의 영향을 받겠지만, 컨테이닝 블록의 `box-sizing` 속성이 `border-box`였다면 그렇지 않을 것입니다.
```

<body>
  <section>
    <p>문단입니다!</p>
  </section>
</body>
```

```css
body {
  background: beige;
}

section {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 400px;
  height: 160px;
  padding: 30px 20px;
  background: lightgray;
}

p {
  position: absolute;
  width: 50%; /\* == (400px + 20px + 20px) \* .5 = 220px \*/
  height: 25%; /\* == (160px + 30px + 30px) \* .25 = 55px \*/
  margin: 5%; /\* == (400px + 20px + 20px) \* .05 = 22px \*/
  padding: 5%; /\* == (400px + 20px + 20px) \* .05 = 22px \*/
  background: cyan;
}
```

### 예제 4

다음 예제에서는 문단의 `position`이 `fixed`이므로 컨테이닝 블록은 초기 컨테이닝 블록(화면 매체에서는 뷰포트)입니다. 따라서 문단의 크기는 브라우저 창의 크기에 따라 변합니다.
```

<body>
  <section>
    <p>문단입니다!</p>
  </section>
</body>
```

```css
body {
  background: beige;
}

section {
  width: 400px;
  height: 480px;
  margin: 30px;
  padding: 15px;
  background: lightgray;
}

p {
  position: fixed;
  width: 50%; /\* == (50vw - (세로 스크롤바 너비)) \*/
  height: 50%; /\* == (50vh - (가로 스크롤바 높이)) \*/
  margin: 5%; /\* == (5vw - (세로 스크롤바 너비)) \*/
  padding: 5%; /\* == (5vw - (세로 스크롤바 너비)) \*/
  background: cyan;
}
```

### 예제 5

다음 예제에서는 문단의 `position`이 `absolute`이므로, 컨테이닝 블록은 `transform` 속성이 `none`이 아닌 가장 가까운 조상, `<section>`입니다.
```

<body>
  <section>
    <p>문단입니다!</p>
  </section>
</body>
```

```css
body {
  background: beige;
}

section {
  transform: rotate(0deg);
  width: 400px;
  height: 160px;
  background: lightgray;
}

p {
  position: absolute;
  left: 80px;
  top: 30px;
  width: 50%; /\* == 200px \*/
  height: 25%; /\* == 40px \*/
  margin: 5%; /\* == 20px \*/
  padding: 5%; /\* == 20px \*/
  background: cyan;
}
```

같이 보기
-----

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


::-webkit-scrollbar - CSS: Cascading Style Sheets

::-webkit-scrollbar
===================

**비표준:** 이 기능은 비표준이므로 실제 프로덕션에서 사용하지 마세요. 모든 사용자 환경에서 작동하지 않을 수 도 있으며, 미래에 호환성 문제가 생길 수 있습니다.

CSS 의사 요소 `::-webkit-scrollbar` 는 요소에 `overflow:scroll;`이 설정되어 있을 때 해당 요소의 스크롤바 스타일에 영향을 끼칩니다.

**참고:** `overflow:scroll;`이 설정되지 않으면, 스크롤바가 표시되지 않습니다.

**참고:** `::-webkit-scrollbar`는 Blink 및 WebKit 기반의 브라우저에서만 사용 가능합니다. (예: Chrome, Edge, Opera, Safari, iOS의 모든 브라우저 등등). 스크롤바를 스타일링하는 표준화된 방법은 `scrollbar-color` (en-US)와 `scrollbar-width` (en-US)로 이용 가능합니다.

CSS 스크롤바 선택자
------------

WebKit 브라우저의 스크롤바의 다양한 부분을 커스터마이징하기 위해 다음과 같은 의사 요소를 사용할 수 있습니다:

* `::-webkit-scrollbar` — 스크롤바 전체.
* `::-webkit-scrollbar-button` — 스크롤바의 버튼 (한 번 누를 때마다 위아래로 한 줄씩 오르내리는 위아래 화살표).
* `::-webkit-scrollbar-thumb` — 드래그할 수 있는 스크롤 손잡이.
* `::-webkit-scrollbar-track` — 흰색 막대 위에 회색 바가 존재할 경우의 스크롤바의 트랙(진행 표시줄).
* `::-webkit-scrollbar-track-piece` — 손잡이에 의해 덮이지 않은 트랙(진행 표시줄)의 부분.
* `::-webkit-scrollbar-corner` — 수평 스크롤바와 수직 스크롤바가 교차하는 곳의 하단 모서리. 주로 브라우저 창의 우측 하단 모서리에 위치한다.
* `::-webkit-resizer` — 몇몇 요소들의 하단 모서리에 나타나는, 드래그 할 수 있는 사이즈 변경 손잡이.
예제
--

### CSS

```css
.visible-scrollbar,
.invisible-scrollbar,
.mostly-customized-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;
  height: 2em;
}

.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

/\* "대부분 커스터마이징된" 스크롤바
 \* (width/height가 지정되지 않으면 보이지 않음 \*/
.mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaa; /\* 또는 트랙에 추가한다 \*/
}

/\* 썸(thumb) 추가 \*/
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
  background: #000;
}
```

### HTML

```html
<div class="visible-scrollbar">
  Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor. Proin at nulla
  elementum, consectetur ex eget, commodo ante. Sed eros mi, bibendum ut
  dignissim et, maximus eget nibh. Phasellus blandit quam turpis, at mollis
  velit pretium ut. Nunc consequat efficitur ultrices. Nullam hendrerit posuere
  est. Nulla libero sapien, egestas ac felis porta, cursus ultricies quam.
  Vestibulum tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
  consectetur ipsum a ornare blandit. Aenean tempus at lorem sit amet faucibus.
  Curabitur nibh justo, faucibus sed velit cursus, mattis cursus dolor.
  Pellentesque id pretium est. Quisque convallis nisi a diam malesuada mollis.
  Aliquam at enim ligula.
</div>

<div class="invisible-scrollbar">
  Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword
</div>

<div class="mostly-customized-scrollbar">
  Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br />
  And pretty tall<br />
  thing with weird scrollbars.<br />
  Who thought scrollbars could be made weeeeird?
</div>
```

### 결과

명세
--

표준의 일부가 아닙니다.

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

### css.selectors.-webkit-scrollbar

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

### css.selectors.-webkit-scrollbar-button

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

### css.selectors.-webkit-scrollbar-thumb

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

### css.selectors.-webkit-scrollbar-track

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

### css.selectors.-webkit-scrollbar-track-piece

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

### css.selectors.-webkit-scrollbar-corner

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

### css.selectors.-webkit-resizer

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

같이 보기
-----

* 스크롤바 스타일링에 관한 WebKit 블로그
* `scrollbar-width` (en-US)
* `scrollbar-color` (en-US)


유형 선택자 - CSS: Cascading Style Sheets

유형 선택자
======

CSS **유형 선택자**는 노드 이름을 사용해 요소를 선택합니다. 즉 문서 내에서 주어진 유형의 모든 요소를 선택합니다.

```css
/\* All <a> elements. \*/
a {
  color: red;
}
```

구문
--
```

element { style properties }
```

예제
--

### CSS

```css
span {
  background-color: DodgerBlue;
  color: #ffffff;
}
```

### HTML

```html
<span>텍스트를 가진 span입니다.</span>
<p>텍스트를 가진 p입니다.</p>
<span>또 다시 텍스트를 가진 span입니다.</span>
```

### 결과

명세
--

| Specification |
| --- |
| Selectors Level 4 # type-selectors |

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

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


-webkit-line-clamp - CSS: Cascading Style Sheets

-webkit-line-clamp
==================

**`-webkit-line-clamp`** CSS 속성은 블록 컨테이너의 콘텐츠를 지정한 줄 수만큼으로 제한합니다.

`display` (en-US) 속성을 `-webkit-box` 또는 `-webkit-inline-box`로, 그리고 `-webkit-box-orient` (en-US) 속성을 `vertical`로 설정한 경우에만 동작합니다.

`-webkit-line-clamp`만 사용하는 경우, 말줄임표는 노출되나 넘친 콘텐츠가 숨겨지지 않으므로 대개 `overflow` 속성 또한 `hidden`으로 설정해야 합니다.

앵커 요소에 적용한 경우 텍스트의 끝이 아니라 중앙에서 잘리는 경우도 있습니다.

**참고:** `-webkit-line-clamp`는 원래 WebKit이 구현했었으며 몇몇 문제점을 가지고 있으나 레거시 지원을 위해 표준화를 거쳤습니다. CSS Overflow Module Level 3 명세의 `line-clamp`가 `-webkit-line-clamp`를 대체하기 위해 정의된 속성입니다.

구문
--

```css
/\* 키워드 값 \*/
-webkit-line-clamp: none;

/\* <integer> 값 \*/
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;

/\* 전역 값 \*/
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: unset;
```

`none`

콘텐츠를 자르지 않습니다.

`<integer>`

몇 줄 뒤에 콘텐츠를 자를지 지정합니다. 0보다 커야 합니다.

형식 정의
-----

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

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

-webkit-line-clamp =
  none             |
  <integer [1,∞]>

```

예제
--

### 문단 자르기

#### HTML

```html
<p>
  In this example the <code>-webkit-line-clamp</code> property is set to
  <code>3</code>, which means the text is clamped after three lines. An ellipsis
  will be shown at the point where the text is clamped.
</p>
```

#### CSS

```css
p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
```

#### 결과

명세
--

| Specification |
| --- |
| CSS Overflow Module Level 4 # propdef--webkit-line-clamp |

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

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

같이 보기
-----

* Line Clampin' (Truncating Multiple Line Text)
* `line-clamp`