overflow-inline - CSS: Cascading Style Sheets

overflow-inline
===============

**`overflow-inline`** CSS 속성은 콘텐츠가 박스의 인라인 시작과 끝 가장자리를 넘어설 때 어떤 내용을 보여줄지를 설정합니다. 이는 아무 것도 표시하지 않을 수도 있고, 스크롤 바가 나타날 수도 있으며 넘친 콘텐츠가 보일 수도 있습니다.

**참고:** `overflow-inline` 속성은 문서의 작성 방식에 따라 `overflow-y` (en-US) 또는 `overflow-x` (en-US)로 매핑됩니다.

구문
--

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

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

`overflow-inline` 속성은 단일한 `<overflow>` (en-US) 키워드 값으로 지정됩니다.

### 값

`visible`

콘텐츠가 잘리지 않으며 안쪽 여백 상자의 인라인 시작과 끝 가장자리를 벗어나 화면에 렌더링 될 수 있습니다.

`hidden`

필요한 경우 콘텐츠가 인라인 크기에 맞게 잘립니다. 이때 스크롤 바는 제공되지 않습니다.

`clip`

콘텐츠는 `overflow-clip-margin` (en-US) 속성을 사용하여 정의된 요소의 오버플로우 클립 가장자리에서 잘립니다.

`scroll`

콘텐츠는 필요한 경우 인라인 크기의 안쪽 여백 박스에 맞춰 잘리게 됩니다. 브라우저는 실제로 콘텐츠가 잘린 여부에 관계없이 스크롤바를 표시합니다. (이렇게 하면 콘텐츠가 변경될 때 스크롤바가 나타나거나 사라지는 것을 방지할 수 있습니다.) 프린터에서는 여전히 콘텐츠가 넘치게 출력될 수 있습니다.

`auto`

사용자 에이전트에 따라 달라집니다. 만약 콘텐츠가 안쪽 여백 상자 안에 맞는다면, `visible` 과 동일하게 표시되지만, 여전히 새로운 블록 서식 문맥을 생성합니다. 데스크탑 브라우저는 콘텐츠가 넘칠 경우 스크롤 바를 제공합니다.

형식 정의
-----

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

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

overflow-inline =
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto

```

예제
--

### Inline Overflow 동작 설정

#### HTML

```html
<ul>
  <li>
    <code>overflow-inline: hidden</code> (박스 외부에 있는 텍스트를 숨깁니다.)
    <div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline: scroll</code> (항상 스크롤 바를 추가합니다.)
    <div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline: visible</code> (필요한 경우 박스 외부에 있는 텍스트를
    표시합니다.)
    <div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline: auto</code> (대부분의 브라우저에서
    <code>scroll</code>
    과 동일합니다.)
    <div id="div4">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline: clip</code> (오버플로우 클립 가장자리를 기준으로 박스
    외부의 텍스트를 숨깁니다.)
    <code>clip</code>
    <div id="div5">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>
</ul>
```

#### CSS

```css
div {
  border: 1px solid black;
  width: 250px;
  margin-bottom: 12px;
}

#div1 {
  overflow-inline: hidden;
}
#div2 {
  overflow-inline: scroll;
}
#div3 {
  overflow-inline: visible;
}
#div4 {
  overflow-inline: auto;
}
#div5 {
  overflow-inline: clip;
  overflow-clip-margin: 2em;
}
```

#### 결과

명세
--

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

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

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

같이 보기
-----

* `clip` (en-US), `display` (en-US), `overflow`, `overflow-block` (en-US), `overflow-clip-margin` (en-US), `overflow-x` (en-US), `overflow-y` (en-US), `text-overflow` (en-US), `white-space`
* CSS overflow (en-US) module
* CSS logical properties (en-US)
* CSS writing modes
* CSS building blocks: Overflowing content


CSS 선택자 - CSS: Cascading Style Sheets

CSS 선택자
=======

**CSS 선택자**는 CSS 규칙을 적용할 요소를 정의합니다.

**참고:** 부모, 부모의 형제, 부모 형제의 자식을 선택할 수 있는 선택자는 존재하지 않습니다.

기본 선택자
------

전체 선택자

 모든 요소를 선택합니다. 추가로 네임스페이스 제한을 둘 수 있습니다.
 **구문:** `*` `ns|*` `*|*`
**예제:** `*`은 문서 내의 모든 요소와 일치합니다.

유형 선택자

 주어진 노드 이름을 가진 모든 요소를 선택합니다.
 **구문:** `elementname`
**예제:** `input`은 모든 `<input>` (en-US) 요소와 일치합니다.

클래스 선택자

 주어진 `class` 특성을 가진 모든 요소를 선택합니다.
 **구문:** `.classname`
**예제:** `.index`는 "index" 클래스를 가진 모든 요소와 일치합니다.

ID 선택자

`id` 특성에 따라 요소를 선택합니다. 문서 내에는 주어진 ID를 가진 요소가 하나만 존재해야 합니다.
 **구문:** `#idname`
**예제:** `#toc`는 "toc" ID를 가진 요소와 일치합니다.

특성 선택자

 주어진 특성을 가진 모든 요소를 선택합니다.
 **구문:** `[attr]` `[attr=value]` `[attr~=value]` `[attr|=value]` `[attr^=value]` `[attr$=value]` `[attr*=value]`
**예제:** `[autoplay]`는 `autoplay` 특성을 설정한 모든 요소와 일치합니다. 특성의 값은 고려하지 않습니다.

그룹 선택자
------

선택자 목록

`,`는 선택자 그룹을 생성하는 방법으로, 모든 일치하는 노드를 선택합니다.
 **구문:** `A, B`
**예제:** `div, span`은 모든 `<span>`과 `<div>` (en-US) 요소와 일치합니다.

결합자
---

자손 결합자

""(공백) 결합자는 첫 번째 요소의 자손인 노드를 선택합니다. **구문:** `A B`**예제:**`div span`은 `<div>` (en-US) 요소 안에 위치하는 모든 `<span>` 요소와 일치합니다.

자식 결합자

`>` 결합자는 첫 번째 요소의 바로 아래 자식인 노드를 선택합니다.
 **구문:** `A > B`
**예제:** `ul > li`는 `<ul>` 요소 바로 아래에 위치하는 모든 `<li>` 요소와 일치합니다.

일반 형제 결합자

`~` 결합자는 형제, 즉 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.
 **구문:** `A ~ B`
**예제:** `p ~ span`은 `<p>` 요소를 뒤따르는 모든 `<span>` 요소와 일치합니다.

인접 형제 결합자

`+` 결합자는 인접 형제, 즉 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.
 **구문:** `A + B`
**예제:** `h2 + p`는 `<h2>` 바로 뒤에 위치하는 `<p>` 요소와 일치합니다.

열 결합자 (en-US)
Experimental

`||` 결합자는 같은 열에 속하는 노드를 선택합니다.
 **구문:** `A || B`
**예제:** `col || td`는 `<col>` (en-US)의 범위에 속하는 모든 `<td>` (en-US) 요소와 일치합니다.

의사 클래스/요소
---------

의사 클래스

 의사 `:`은 문서 트리가 포함하지 않는 상태 정보에 기반해 요소를 선택할 수 있습니다.
 **예제:** `a:visited`는 사용자가 방문한 모든 `<a>` 요소와 일치합니다.

의사 요소

 의사 `::`는 HTML이 포함하지 않는 개체를 선택합니다.
 **예제:** `p::first-line`은 모든 `<p>` 요소의 첫 번째 줄과 일치합니다.

명세
--

| Specification |
| --- |
| Selectors Level 4  |

의사 클래스와 의사 요소의 명세 표에서 각각의 상세 정보를 볼 수 있습니다.

같이 보기
-----

* CSS 명시도


border-left - CSS: Cascading Style Sheets

border-left
===========

**`border-left`** CSS 단축 속성은 요소의 왼쪽 테두리를 설정합니다. `border-left-width`, `border-left-style`, `border-left-color`의 값을 지정합니다.

시도해보기
-----

다른 단축 속성과 마찬가지로, `border-left`는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다.

```css
border-left-style: dotted;
border-left: thick green;
```

```css
border-left-style: dotted;
border-left: none thick green;
```

따라서 `border-left`보다 먼저 지정한 `border-left-style`의 값은 무시됩니다. `border-left-style`의 기본값은 `none`이므로, `border-style`을 명시하지 않으면 테두리를 만들지 않습니다.

구문
--

```css
border-left: 1px;
border-left: 2px dotted;
border-left: medium dashed green;
```

`border-left`은 한 개에서 세 개의 값을 사용해 지정할 수 있고, 순서는 상관하지 않습니다.

### 값

`<br-width>`

`border-left-width`.

`<br-style>`

`border-left-style`.

`<color>`

`border-left-color`.

### 형식 구문
```

border-left =
  <line-width>  ||
  <line-style>  ||
  <color>

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

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

```

예제
--

```html
<div>왼쪽 테두리를 가진 요소입니다.</div>
```

```css
div {
  border-left: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```

명세
--

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

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

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

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


:first-of-type - CSS: Cascading Style Sheets

:first-of-type
==============

CSS **`:first-of-type`** 의사 클래스는 형제 요소 중 자신의 유형과 일치하는 제일 첫 요소를 나타냅니다.

```css
/\* Selects any <p> that is the first element
 of its type among its siblings \*/
p:first-of-type {
  color: red;
}
```

**참고:** 초기 정의에서는 부모가 있는 요소만 선택할 수 있었습니다. Selectors Level 4부터는 이 제한이 사라졌습니다.

구문
--

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

### 첫 문단 스타일링

#### HTML

```html
<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
```

#### CSS

```css
p:first-of-type {
  color: red;
  font-style: italic;
}
```

#### 결과

### 중첩 요소

아래 코드는 중첩 요소를 선택하는 방법을 보입니다. 기본 선택자를 지정하지 않은 경우 전체 선택자(`*`)가 암시된다는 점도 볼 수 있습니다.

#### HTML

```html
<article>
  <div>This `div` is first!</div>
  <div>This <span>nested `span` is first</span>!</div>
  <div>
    This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!
  </div>
  <div>This <span>nested `span` gets styled</span>!</div>
  <b>This `b` qualifies!</b>
  <div>This is the final `div`.</div>
</article>
```

#### CSS

```css
article :first-of-type {
  background-color: pink;
}
```

#### 결과

명세
--

| Specification |
| --- |
| Selectors Level 4 # first-of-type-pseudo |

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

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

같이 보기
-----

* `:first-child`, `:last-of-type` (en-US), `:nth-of-type` (en-US)


::after (:after) - CSS: Cascading Style Sheets

::after (:after)
================

CSS에서, **`::after`** 는 선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성합니다. 보통 `content` 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다. 기본값은 인라인입니다.

```css
/\* 링크 뒤에 화살표 추가 \*/
a::after {
  content: "→";
}
```

**참고:** `::before`와 `::after`로 생성한 의사 요소는 원본 요소의 서식 박스에 포함되므로, `<img>`나 `<br>` 등 대체 요소에 적용할 수 없습니다.

구문
--

Error: could not find syntax for this item

**참고:** 의사 클래스와 의사 요소를 구분하기 위해 CSS3부터`::after` 구문을 도입했습니다. 그러나 브라우저는 CSS2 구문인 `:after`도 허용합니다.

예제
--

### 간단한 사용법

평범한 문단과 흥미진진한 문단을 위해 클래스 두 개를 만들고, 문단 마지막에 의사 요소를 추가해보겠습니다.

#### HTML

```html
<p class="boring-text">적당히 평범하고 심심한 글입니다.</p>
<p>지루하지도 흥미진진하지도 않은 글입니다.</p>
<p class="exciting-text">MDN 기여는 쉽고 재밌습니다.</p>
```

#### CSS

```css
.exciting-text::after {
  content: " <- 흥미진진!";
  color: green;
}

.boring-text::after {
  content: " <- 먼지풀풀";
  color: red;
}
```

#### 결과

### 장식 예제

`content` 속성을 활용해 자유롭게 텍스트나 이미지를 추가할 수 있습니다.

#### HTML

```html
<span class="ribbon">마지막의 주황색 상자를 바라보세요.</span>
```

#### CSS

```css
.ribbon {
  background-color: #5bc8f7;
}

.ribbon::after {
  content: "멋진 주황색 상자입니다.";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}
```

#### 결과

### 툴팁

다음 예제는 `::after`와 함께 CSS `attr()` (en-US) 표현식, `data-descr` 사용자 설정 데이터 속성을 사용해 툴팁을 구현합니다. JavaScript 없이요!

`tabindex="0"`을 추가해 각 `span`에 포커스가 갈 수 있도록 지정한 후, CSS `:focus` 선택자를 추가하여 키보드 사용자도 지원할 수 있습니다. 예제를 통해 ::before와 ::after가 얼마나 유연한지 확인할 수 있지만, 가장 접근성이 뛰어난 구현을 위해서라면 요약과 세부 요소 (en-US)처럼 의미를 담은 요소를 활용하는 편이 좋습니다.

#### HTML

```html
<p>
  이 예제는
  <span tabindex="0" data-descr="단어와 문장 부호의 집합">텍스트</span>와 함께
  약간의
  <span tabindex="0" data-descr="호버 시 보여지는 작은 팝업">툴팁</span>을
  포함합니다.
</p>
```

#### CSS

```css
span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00f;
  cursor: help;
}

span[data-descr]:hover::after,
span[data-descr]:focus::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}
```

#### 결과

명세
--

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # generated-content |

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

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

같이 보기
-----

* `::before` (en-US)
* `content`


border-image - CSS: Cascading Style Sheets

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

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`** CSS 속성은 요소의 주위에 이미지를 그립니다. 일반 테두리를 대체합니다.

시도해보기
-----

`border-image`는 `border-image-source`, `border-image-slice`, `border-image-width`, `border-image-outset`, `border-image-repeat`의 단축 속성입니다. 다른 단축 속성과 마찬가지로, 생략한 속성은 초기값으로 설정됩니다.

**참고:** 테두리 이미지를 불러오는데 실패할 경우에 대비해 `border-style` 속성을 설정해야 합니다. 사실 명세에 따르면 필수로 지정해야 하지만 모든 브라우저가 그렇게 구현하지는 않았습니다.

구문
--

```css
/\* 이미지 | 슬라이스 \*/
border-image: linear-gradient(red, blue) 27;

/\* 이미지 | 슬라이스 | 반복 \*/
border-image: url("/images/border.png") 27 space;

/\* 이미지 | 슬라이스 | 너비 \*/
border-image: linear-gradient(red, blue) 27 / 35px;

/\* 이미지 | 슬라이스 | 너비 | 거리 | 반복 \*/
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;
```

`border-image` 속성은 아래 나열한 값 중 한 개에서 다섯 개 사이를 사용해 지정할 수 있습니다.

**참고:** 만약 `border-image-source`의 계산값이 `none`이거나 이미지를 그릴 수 없다면 `border-style`이 대신 보여집니다.

### 값

`<'border-image-source'>`

원본 이미지. `border-image-source`를 참고하세요.

`<'border-image-slice'>`

이미지를 구역별로 나눌 때 사용할 슬라이스 크기. 네 개 값까지 지정할 수 있습니다. `border-image-slice`를 참고하세요.

`<'border-image-width'>`

테두리 이미지 너비. 네 개 값까지 지정할 수 있습니다. `border-image-width`를 참고하세요.

`<'border-image-outset'>`

테두리 이미지와 요소 외곽의 거리. 네 개 값까지 지정할 수 있습니다. `border-image-outset`을 참고하세요.

`<'border-image-repeat'>`

원본 이미지의 모서리 구역을 테두리의 크기에 맞출 때의 조정 방법. 두 개 값까지 지정할 수 있습니다. `border-image-repeat`을 참고하세요.

### 형식 구문
```

border-image =
  <'border-image-source'>                             ||
  <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]?  ||
  <'border-image-repeat'>

```

예제
--

### 비트맵

이번 예제는 요소의 테두리에 마름모 패턴을 적용합니다. 테두리 이미지의 원본은 가로 81픽셀, 세로 81픽셀의 ".png" 파일로, 8개의 마름모가 사각형의 테두리를 이루고 있습니다.

![an example borderimage](/ko/docs/Web/CSS/border-image/border.png)

#### HTML

```html
<div id="bitmap">
  This element is surrounded by a bitmap-based border image!
</div>
```

#### CSS

마름모 하나의 크기에 맞추기 위해, 81을 3으로 나눈 `27`을 슬라이스 크기로 사용하여 원본 이미지를 모서리와 테두리 구역으로 나눕니다. 테두리 이미지의 중앙을 요소 테두리의 가운데로 맞추기 위해 거리도 각 너비의 절반으로 설정합니다. 마지막으로 반복 값에 `round`를 지정해 모서리가 끊기거나 잘리지 않도록 설정합니다.

```css
#bitmap {
  width: 200px;
  background-color: #ffa;
  border: 36px solid orange;
  margin: 30px;
  padding: 10px;

  border-image: url("border.png") 27 / 36px 28px 18px 8px / 18px 14px 9px 4px
    round;
}
```

#### 결과

### 그레이디언트

#### HTML

```html
<div id="gradient">그레이디언트 기반 테두리 이미지에 둘러 쌓인 요소에요!</div>
```

#### CSS

```css
#gradient {
  width: 200px;
  border: 30px solid;
  border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60;
  padding: 20px;
}
```

#### 결과

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

보조 기술은 테두리 이미지를 읽을 수 없습니다. 이미지가 페이지 목적의 이해에 필수적인 정보를 갖고 있다면 문서에서 구조적으로 설명하는 편이 좋습니다.

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

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

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `border-image-source`: `none`
* `border-image-slice`: `100%`
* `border-image-width`: `1`
* `border-image-outset`: `0`
* `border-image-repeat`: `stretch`
 |
| 적용대상 | all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| Percentages | as each of the properties of the shorthand:* `border-image-slice`: refer to the size of the border image
* `border-image-width`: refer to the width or height of the border image area
 |
| 계산 값 | as each of the properties of the shorthand:* `border-image-outset`: as specified, but with relative lengths converted into absolute lengths
* `border-image-repeat`: as specified
* `border-image-slice`: one to four percentage(s) (as specified) or absolute length(s), plus the keyword `fill` if specified
* `border-image-source`: `none` or the image with its URI made absolute
* `border-image-width`: as specified, but with relative lengths converted into absolute lengths
 |
| Animation type | as each of the properties of the shorthand:* `border-image-outset`: by computed value type
* `border-image-repeat`: discrete
* `border-image-slice`: by computed value type
* `border-image-source`: discrete
* `border-image-width`: by computed value type
 |

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

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

같이 보기
-----

* `border`
* `outline`
* `box-shadow` (en-US)
* `background-image`
* `url()` 함수
* 그레이디언트 함수: `conic-gradient()` (en-US), `linear-gradient()` (en-US), `repeating-linear-gradient()` (en-US), `radial-gradient()` (en-US), `repeating-radial-gradient()` (en-US)


cursor - CSS: Cascading Style Sheets

cursor
======

CSS **`cursor`** 속성은 요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정합니다.

시도해보기
-----

구문
--

```css
/\* 키워드 값 \*/
cursor: pointer;
cursor: auto;

/\* URL, 대체용 키워드 \*/
cursor: url(hand.cur), pointer;

/\* URL과 좌표 및 대체 키워드
crsor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;

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

`cursor` 속성은 쉼표로 구분한 0개 이상의 `<url>`과, 필수로 지정해야 하는 키워드 값으로 이루어집니다. 각각의 `<url>`은 이미지 파일을 가리켜야 합니다. 브라우저는 첫 번째 이미지를 불러오려 시도하고, 실패했을 땐 다음 이미지를, 모두 실패하거나 지정한 이미지가 처음부터 없었다면 키워드 값을 사용합니다.

`<url>`은 공백으로 구분한 숫자 쌍을 받을 수 있습니다. 두 숫자는 이미지의 좌상단 모서리를 기준으로, 커서가 상호작용하는 부분의 x, y 좌표를 나타냅니다.

아래 예제는 `<url>` 값으로 이미지 두 개를 지정했고, 두 번째 이미지는 `<x><y>` 좌표도 설정했으며 모두 불러올 수 없으면 `progress` 키워드를 사용합니다.

```css
cursor:
  url(one.svg),
  url(two.svg) 5 5,
  progress;
```

### 값

`<url>`

이미지 파일을 가리키는 `url(…)`, 또는 쉼표로 구분한 `url(…), url(…), …` 목록. 일부 커서 이미지를 사용할 수 없을 때를 대비해 여러 이미지를 지정할 수 있습니다. 이미지를 사용할 경우 URL이 아닌 값(하나 이상의 키워드 값)을 목록의 맨 뒤에 붙여야 합니다. `cursor` 속성값으로 URL 사용하기를 참고하세요.

`<x>` `<y>`
Experimental

xy 좌표. 32 미만의 `<number>`여야 합니다.

키워드 값

*행 위로 마우스를 올리면 현재 브라우저에서 보이는 모습을 확인할 수 있습니다.*

| 카테고리 | CSS 값 | 예제 | 설명 |
| --- | --- | --- | --- |
| 일반 | `auto` |  |
 사용자 에이전트가 현재 맥락에 맞춰 표시할 커서를 결정. 예를 들어 글씨
 위에서는 `text`를 사용합니다.
  |
| `default` | default.gif | 플랫폼에 따라 다른 기본 커서. 보통 화살표입니다. |
| `none` |  | 커서 없음. |
| 링크와 상태 | `context-menu` | context-menu.png | 콘텍스트 메뉴 사용 가능. |
| `help` | help.gif | 도움말 사용 가능. |
| `pointer` | pointer.gif | 링크를 나타내는 포인터. 보통 한 쪽을 가리키는 손입니다. |
| `progress` | progress.gif |
 프로그램이 백그라운드에서 작업 중이지만, 사용자가 인터페이스와
 상호작용할 수 있음. (`wait`과 반대)
  |
| `wait` | wait.gif |
 프로그램이 작업 중이고, 사용자가 인터페이스와 상호작용할 수 없음.
 (`progress`와 반대) 간혹 모래시계나 시계모양 그림을
 사용합니다.
  |
| 선택 | `cell` | cell.gif | 표의 칸이나 여러 칸을 선택할 수 있음. |
| `crosshair` | crosshair.gif | 십자 커서. 종종 비트맵 선택에 사용합니다. |
| `text` | text.gif | 글씨 선택 가능. 보통 I빔 모양입니다. |
| `vertical-text` | vertical-text.gif | 세로쓰기 글씨 선택 가능. 보통 옆으로 누운 I빔 모양입니다. |
| 드래그 앤 드롭 | `alias` | alias.gif | 별칭이나 바로가기를 만드는 중. |
| `copy` | copy.gif | 복사하는 중. |
| `move` | move.gif | 움직이는 중. |
| `no-drop` | no-drop.gif |
 현재 위치에 놓을 수 없음.[Firefox bug 275173](https://bugzil.la/275173): Windows와 Mac
 OS X에서 `no-drop`은 `not-allowed`와 같습니다.
  |
| `not-allowed` | not-allowed.gif | 요청한 행동을 수행할 수 없음. |
| `grab` | grab.gif | 잡을 수 있음. (잡아서 이동) |
| `grabbing` | grabbing.gif | 잡고 있음. (잡아서 이동) |
| 크기 조절과 스크롤 | `all-scroll` | all-scroll.gif |
 모든 방향으로 이동 가능. (패닝)[Firefox bug 275174](https://bugzil.la/275174):
 Windows에서 `all-scroll`은 `move`와 같습니다.
  |
| `col-resize` | col-resize.gif |
 항목/행의 크기를 좌우로 조절할 수 있음. 종종 좌우 화살표의 가운데를
 세로로 분리한 모양을 사용합니다.
  |
| `row-resize` | row-resize.gif |
 항목/열의 크기를 상하로 조절할 수 있음. 종종 상하 화살표의 가운데를
 가로로 분리한 모양을 사용합니다.
  |
| `n-resize` | Example of a resize towards the top cursor |
 움직일 수 있는 모서리. 예를 들어, `se-resize` 커서는 움직임이
 사각형의 동남쪽에서 시작할 때 사용합니다. 어떤 환경에선 동일한 방향의
 양방향 화살표를 대신 보여줍니다. 즉 `n-resize`와
 `s-resize`는 `ns-resize`와 같습니다.
  |
| `e-resize` | Example of a resize towards the right cursor |
| `s-resize` | Example of a resize towards the bottom cursor  |
| `w-resize` | Example of a resize towards the left cursor |
| `ne-resize` | Example of a resize towards the top-right corner cursor |
| `nw-resize` | Example of a resize towards the top-left corner cursor |
| `se-resize` | Example of a resize towards the bottom-right corner cursor |
| `sw-resize` | Example of a resize towards the bottom-left corner cursor |
| `ew-resize` | 3-resize.gif | 양방향 크기 조절 커서. |
| `ns-resize` | 6-resize.gif |
| `nesw-resize` | 1-resize.gif |
| `nwse-resize` | 4-resize.gif |
| 확대와 축소 | `zoom-in` | zoom-in.gif | 확대/축소할 수 있음. |
| `zoom-out` | zoom-out.gif |

### 형식 구문
```

cursor =
  [ [ <url> | <url-set> ] [ <x> <y> ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]

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

<x> =
  x

<y> =
  y

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

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

```

사용 일람
-----

비록 명세에 cursor의 크기 제한은 정해져있지 않지만, 각각의 사용자 에이전트가 별도로 최대 크기를 규정할 수도 있습니다. 이 때, 크기를 넘어가는 이미지를 사용할 경우, 보통 사용자 에이전트는 해당 이미지를 완전히 무시합니다.

브라우저 호환성 항목에서 커서 크기 제한을 찾아보세요.

예제
--

```css
.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/\* URL을 쓸 땐 키워드 값 필수 \*/
.baz {
  cursor: url("hyper.cur"), auto;
}
```

명세
--

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

|  |  |
| --- | --- |
| 초기값 | `auto` |
| 적용대상 | all elements |
| 상속 | yes |
| 계산 값 | as specified, but with `url` values made absolute |
| Animation type | discrete |

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

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

같이 보기
-----

* `cursor` 속성값으로 URL 사용하기
* `pointer-events` (en-US)


will-change - CSS: Cascading Style Sheets

will-change
===========

요약
--

**`will-change`** CSS 속성은 요소에 예상되는 변화의 종류에 관한 힌트를 브라우저에 제공케 한다. 그래서 실제 요소가 변화되기 전에 미리 브라우저는 적절하게 최적화할 수 있다. 이러한 종류의 최적화는 잠재적으로 성능 비용이 큰 작업을 그것이 실제로 요구되기 전에 미리 실행함으로써 페이지의 반응성을 증가시킬 수 있다.

이 속성을 적당하게 사용하는 것이 꽤 어려울 수 있다:

* *너무 많은 요소에 will-change 를 적용하지 말라.* 브라우저는 모든 것을 최적화하기 위해 가능한 모든 것을 이미 시도하고 있다. will-change 와 묶인 강한 최적화의 몇은 많은 기기 자원을 소모할 것이다. 또한 이 같은 과도한 사용은 페이지 속도를 늦추거나 엄청난 자원을 소비할 수 있다.
* *아껴 사용하라.* 브라우저가 만드는 최적화의 기본 행동은 가능한 바로 최적화를 제거하고 기본 상태로 돌리는 것이다. 그러나 will-change를 스타일시트에 직접 추가하는 것은 목표 요소가 곧 변경되어 (will-change 를 정의하지 않았을 때보다) 더 오랜 시간동안 최적화를 유지하리란 것을 암시한다. 스크립트 코드를 사용하여 변화발생의 전후로 will-change 의 활성/비활성을 바꿔주는 것이 좋다.
* *서둘러 최적화하기 위해 will-change 를 적용하지 말라.* 만약 페이지가 잘 돌아간다면 단지 조금 더 빨리하기 위해 will-change 속성을 추가하지 말라. `will-change` 는 당장의 성능 문제를 해결하기 위한 마지막 수단으로 사용되기 위해 계획된 것이다. 성능문제를 예상하며 사용되어선 안된다. will-change 의 초과사용은 브라우저가 가능한 변화에 대한 준비를 시도하기 때문에 과도한 메모리 사용과 더 복잡한 렌더링을 초래할 것이다. 더 열악한 성능을 이끌 것이다.
* *작업할 충분한 시간을 줘라.* 이 속성은 작성자로 하여금 사용자 에이전트가 변경가능한 속성을 미리 알 수 있게 하도록고안되었다. 그러면 브라우저는 실제 속성변화가 발생하기 전에 속성에 요구되는 어떠한 최적화던지 미리 적용하는 것을 선택할 수 있다. 그래서 브라우저가 실제 최적화를 할 시간을 주는 것은 중요하다. 변화가 발생하기 조금 전에라도 그 변화를 예상할 방법을 찾아 `will-change` 를 설정하라.

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

구문
--

```css
/\* 키워드 값 \*/
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform; /\* Example of <custom-ident> \*/
will-change: opacity; /\* Example of <custom-ident> \*/
will-change: left, top; /\* Example of two <animateable-feature> \*/

/\* 전역 값 \*/
will-change: inherit;
will-change: initial;
will-change: unset;
```

### 값

`auto`

이 키워드는 특정 의도 없음을 나타낸다; 사용자 에이전트는 보통 실행하는 어떤 발견한 방법이던 최적화이던 적용해야 한다.

`<animateable-feature>` 는 다음의 값중 하나일 수 있다:

`scroll-position`

머지않아 요소 스크롤 위치의 변경 혹은 변이에 대한 기대를 가르킨다.

`contents`

머지않아 요소 내용에 대한 변경 혹은 변이에 대한 기대를 가르킨다.

`<custom-ident>` (en-US)

머지않아 해당 요소의 주어진 이름의 속성에 대한 변경 혹은 변이에 대한 기대를 가르킨다. 만약 주어진 속성이 축약형이라면 그 안에 들어간 나열된 속성 모두에 대한 기대이다. 다음의 값들은 불가능하다: `unset`, `initial`, `inherit`, `will-change`, `auto`, `scroll-position`, `contents`. 명세는 특정값의 행동을 정의하지 않으나 but it is common for `transform` to be a compositing layer hint. Chrome currently takes two actions, given particular CSS property idents: establish a new compositing layer or a new stacking context.

### Formal syntax
```

will-change =
  auto                    |
  <animateable-feature>#

<animateable-feature> =
  scroll-position  |
  contents         |
  <custom-ident> (en-US)

```

예시
--

```css
.sidebar {
  will-change: transform;
}
```

상단 예시는 will-change 속성을 스타일시트에 직접 추가한다: 이것은 브라우저가 항상 메모리내에서 필요보다 더 오래동안 최적화를 유지하도록 하는데 바로 이렇게 스타일시트에 직접 삽입하는 것을 피해야 할 이유로서 살펴봤던 것이다. 아래는 스크립트를 통해 will-change 를 적용하는 법의 다른 예시를 보여주고 십중팔구 대부분의 경우에 이렇게 시행해야 한다.

```js
var el = document.getElementById("element");

// 요소가 hover 상태일 때 will-change 설정
el.addEventListener("mouseenter", hintBrowser);
el.addEventListener("animationEnd", removeHint);

function hintBrowser() {
  // 애니메이션 키프레임 단락 내에서
  // 변경될 예정인 최적화 가능한 속성들
  this.style.willChange = "transform, opacity";
}

function removeHint() {
  this.style.willChange = "auto";
}
```

그러나 페이지가 크고 복잡한 앨범 혹은 슬라이드 다발로 이뤄진 프레젠테이션등 키를 눌러서 페이지를 넘기는 어플리케이션등을 위해선 스타일시트에 will-change 를 직접 포함시키는 것이 적절할 것이다. 이것은 브라우저가 미리 변이를 준비하게 해 키가 눌리자마자 페이지간의 팔팔한 애니메이션을 가능케 할 것이다.

```css
.slide {
  will-change: transform;
}
```

명세
--

| Specification |
| --- |
| CSS Will Change Module Level 1 # will-change |

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

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


CSS Generated Content - CSS: Cascading Style Sheets

CSS Generated Content
=====================

**CSS Generated Content**는 요소에 콘텐츠를 추가하는 방법을 정의하는 CSS 모듈입니다. 생성 콘텐츠는 익명의 대체 요소에 콘텐츠를 추가하거나 매우 제한된 상황에서 DOM 노드의 콘텐츠를 생성된 값으로 대체하는 데 사용될 수 있습니다.
 자세한 내용은 생성 콘텐츠에 대한 안내 방법 을 참조하고 구현 정보는 `content` 와 `quotes` (en-US) 속성을 참조하십시오.

참고서
---

### 속성

* `content`
* `quotes` (en-US)
명세서
---

| Specification |
| --- |
| CSS Generated Content Module Level 3  |

같이 보기
-----

* CSS 생성 콘텐츠의 사용
* `content`
* `quotes` (en-US)
* `::before` (en-US)
* `::after`
* `::marker` (en-US)


border-top-style - CSS: Cascading Style Sheets

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

**`border-top-style`** CSS 속성은 요소 테두리의 위쪽 스타일을 지정합니다.

시도해보기
-----

**참고:** 명세는 서로 다른 스타일의 테두리가 꼭지점에서 만날 때 어떻게 그려야 할지는 정의하고 있지 않습니다.

구문
--

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

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

`border-top-style` 속성은 `border-style` 속성에 사용할 수 있는 키워드 중 하나를 사용해 지정할 수 있습니다.

### 형식 구문
```

border-top-style =
  <line-style>

<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
/\* Define look of the table \*/
table {
  border-width: 2px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

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

#### 결과

명세
--

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

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

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

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

같이 보기
-----

* 테두리 스타일 관련 CSS 속성: `border-right-style`, `border-bottom-style`, `border-left-style`, `border-style`.
* 위쪽 테두리 관련 CSS 속성: `border-top`, `border-top-color`, `border-top-width`.


border-image-outset - CSS: Cascading Style Sheets

border-image-outset
===================

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-outset`** CSS 속성은 요소의 테두리 상자와 테두리 이미지의 거리를 설정합니다.

`border-image-outset`으로 인해 요소 바깥에 그려지는 테두리로는 스크롤이 생기지 않으며 마우스 이벤트를 잡아낼 수도 없습니다.

시도해보기
-----

구문
--

```css
/\* <length> 값 \*/
border-image-outset: 1rem;

/\* <number> 값 \*/
border-image-outset: 1.5;

/\* 세로방향 | 가로방향 \*/
border-image-outset: 1 1.2;

/\* 위 | 가로방향 | 아래 \*/
border-image-outset: 30px 2 45px;

/\* 위 | 오른쪽 | 아래 | 왼쪽 \*/
border-image-outset: 7px 12px 14px 5px;

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

`border-image-outset` 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 각 값은 `<length>`나 `<number>`입니다. 음수는 유효하지 않습니다.

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

`<length>`

테두리 거리의 크기로 고정값 사용.

`<number>`

테두리 거리의 크기로 `border-width`의 배수 사용.

### 형식 구문
```

border-image-outset =
  [ <length [0,∞]> | <number [0,∞]> ]{1,4}

```

예제
--

### HTML

```html
<div id="outset">밖으로 나간 테두리를 가지고 있어요!</div>
```

### CSS

```css
#outset {
  width: 10rem;
  background: #cef;
  border: 1.4rem solid;
  border-image: radial-gradient(#ff2, #55f) 40;
  border-image-outset: 1.5; /\* = 1.5 \* 1.4rem = 2.1rem \*/
  margin: 2.1rem;
}
```

### 결과

명세
--

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

|  |  |
| --- | --- |
| 초기값 | `0` |
| 적용대상 | all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| 계산 값 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | by computed value type |

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

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


border-left-color - CSS: Cascading Style Sheets

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

**`border-left-color`** CSS 속성은 요소의 왼쪽 테두리 색상을 지정합니다. `border-color` 또는 `border-left` 단축 속성으로도 지정할 수 있습니다.

시도해보기
-----

구문
--

```css
/\* <color> 값 \*/
border-left-color: red;
border-left-color: #ffbb00;
border-left-color: rgb(255, 0, 0);
border-left-color: hsla(100%, 50%, 25%, 0.75);
border-left-color: currentColor;
border-left-color: transparent;

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

`border-left-color` 속성은 하나의 값을 사용해 지정합니다.

### 값

`<color>`

왼쪽 테두리의 색상.

### 형식 구문
```

border-left-color =
  <color>     |
  <image-1D>

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

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

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

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

```

예제
--

### 테두리를 가진 간단한 상자

#### HTML

```html
<div class="mybox">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="redtext">red</span>.
  </p>
</div>
```

#### CSS

```css
.mybox {
  border: solid 0.3em gold;
  border-left-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```

#### 결과

명세
--

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

|  |  |
| --- | --- |
| 초기값 | `currentcolor` |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| 계산 값 | computed color |
| Animation type | a color |

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

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

같이 보기
-----

* 테두리 관련 CSS 단축 속성: `border`, `border-left`, `border-color`.
* 다른 방향 테두리의 색상 관련 CSS 단축 속성: `border-top-color`, `border-right-color`, `border-bottom-color`.
* 왼쪽 테두리 관련 CSS 속성: `border-left-style`, `border-left-width`.


animation - CSS: Cascading Style Sheets

animation
=========

**`animation`** 단축 CSS 속성은 스타일 사이에 에니메이션을 적용합니다. `animation-name` (en-US), `animation-duration`, `animation-timing-function` (en-US), `animation-delay`, `animation-iteration-count` (en-US), `animation-direction`, `animation-fill-mode`, 그리고 `animation-play-state` (en-US)의 단축형입니다.

시도해보기
-----

구성 속성
-----

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

* `animation-delay`
* `animation-direction`
* `animation-duration`
* `animation-fill-mode`
* `animation-iteration-count` (en-US)
* `animation-name` (en-US)
* `animation-play-state` (en-US)
* `animation-timing-function` (en-US)
구문
--

```css
/\* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name \*/
animation: 3s ease-in 1s 2 reverse both paused slidein;

/\* @keyframes duration | easing-function | delay | name \*/
animation: 3s linear 1s slidein;

/\* 애니메이션 두 개 \*/
animation:
  3s linear slidein,
  3s ease-out 5s slideout;
```

`animation` 속성은 쉼표로 구분된 하나 이상의 단일 애니메이션으로 지정됩니다.

각각의 애니메이션은 다음과 같이 지정됩니다.

* `<time>` 값이 0개, 1개 또는 2개 존재
* 다음 값이 0개 또는 1개 존재
    + `<single-easing-function>`
    + `<single-animation-iteration-count>`
    + `<single-animation-direction>`
    + `<single-animation-fill-mode>`
    + `<single-animation-play-state>`
* 애니메이션의 선택적인 이름. `none`, `<custom-ident>` (en-US), 또는 `<string>` (en-US)일 수 있음.

**참고:** 현재 구현은 재설정 전용이므로 `animation-timeline` (en-US), `animation-range-start` (en-US), 그리고 `animation-range-end` (en-US)가 현재 이 목록에 포함되어 있지 않습니다. 즉, `animation`을 포함하면 이전에 선언된 `animation-timeline` 값이 `auto`로 재설정되고, 이전에 선언된 `animation-range-start`와 `animation-range-end` 값은 `normal`로 재설정되지만, 이러한 속성은 `animation`을 통해 설정할 수 없습니다. CSS 스크롤 기반 애니메이션 (en-US)을 만들 때 적용하려면 애니메이션 단축을 선언한 후 이러한 속성을 선언해야 합니다.

### 값

`<single-easing-function>`

전환 유형을 결정합니다. 값은 `<easing-function>` (en-US)에서 사용할 수 있는 값 중 하나여야 합니다.

`<single-animation-iteration-count>`

애니메이션이 재생되는 횟수입니다. 값은 `animation-iteration-count` (en-US)에서 사용 가능한 값 중 하나여야 합니다.

`<single-animation-direction>`

애니메이션이 재생되는 방향입니다. 값은 `animation-direction`에서 사용 가능한 값 중 하나여야 합니다.

`<single-animation-fill-mode>`

실행 전후에 애니메이션 대상에 스타일을 적용시키는 방법을 결정합니다. 값은 `animation-fill-mode`에서 사용 가능한 값 중 하나여야 합니다..

`<single-animation-play-state>`

애니메이션의 재생 여부를 결정합니다. 값은 `animation-play-state` (en-US)에서 사용 가능한 값 중 하나여야 합니다.

설명
--

각 애니메이션 정의 내에서 시간 값의 순서는 중요합니다. `<time>`으로 파싱할 수 있는 첫 번째 값은 `animation-duration`에 할당되고, 두 번째 값은 `animation-delay`에 할당됩니다.

각 애니메이션 정의에서 다른 값의 순서는 `animation-name` (en-US) 값을 다른 값과 구별하는 데에도 중요합니다. `animation` 단축 값이 `animation-name` 이외의 `animation` 속성 값으로 파싱할 수 있는 경우, 이 값은 `animation-name`이 아닌 그 속성에 먼저 적용됩니다. 이러한 이유로 `animation` 단축을 사용할 때 `animation-name` 값을 값 목록의 마지막 값으로 지정하는 것이 좋습니다. 이는 쉼표로 구분된 여러 개의 애니메이션 단축을 지정하는 경우에도 마찬가지입니다.

애니메이션을 적용하려면 애니메이션 이름을 반드시 설정해야 하지만, `animation` 축약의 모든 값은 선택 사항이며, 각 `animation` 구성 요소의 초기 값이 기본값입니다. `animation-name`의 초기 값은 `none`입니다. 즉, `animation` 단축 속성에 `animation-name` 값이 선언되지 않으면 속성에 적용할 애니메이션이 없는 것입니다.

`animation` 단축 속성에서 `animation-duration` 값이 생략되면 이 속성의 값은 기본적으로 `0s`로 설정됩니다. 이 경우 애니메이션은 계속 발생하지만( `animationStart` (en-US)와 `animationEnd` (en-US) 이벤트는 발생함) 애니메이션이 표시되진 않습니다.

접근성 문제
------

깜박이는 애니메이션은 주의력 결핍 과잉 행동 장애(ADHD)와 같은 인지 문제가 있는 사람들에게 문제가 될 수 있습니다. 또한 특정 종류의 움직임은 전정 장애, 간질, 편두통 그리고 암소시성 민감증을 유발할 수 있습니다.

축소된 애니메이션 경험에 선호도를 표현한 사용자를 위한 우대 경험을 만들기 위해 애니메이션을 일시 중지하거나 비활성화하는 메커니즘을 제공하고 움직임 감소 미디어 쿼리 (en-US)를 사용하는 것을 고려하십시오.

* 움직임 민감성을 위한 더 안전한 웹 애니메이션 설계 · A List Apart 기사
* 움직임 감소 미디어 쿼리 소개 | CSS-Tricks
* 반응형 움직임 디자인 | WebKit
* MDN WCAG 이해하기, 가이드라인 2.2 설명 (en-US)
* Success Criterion 2.2.2 이해하기 | W3C Understanding WCAG 2.0
형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `animation-name` (en-US): `none`
* `animation-duration`: `0s`
* `animation-timing-function` (en-US): `ease`
* `animation-delay`: `0s`
* `animation-iteration-count` (en-US): `1`
* `animation-direction`: `normal`
* `animation-fill-mode`: `none`
* `animation-play-state` (en-US): `running`
* `animation-timeline` (en-US): `auto`
 |
| 적용대상 | all elements |
| 상속 | no |
| 계산 값 | as each of the properties of the shorthand:* `animation-name` (en-US): as specified
* `animation-duration`: as specified
* `animation-timing-function` (en-US): as specified
* `animation-delay`: as specified
* `animation-direction`: as specified
* `animation-iteration-count` (en-US): as specified
* `animation-fill-mode`: as specified
* `animation-play-state` (en-US): as specified
* `animation-timeline` (en-US): a list, each item either a case-sensitive CSS identifier or the keywords `none`, `auto`
 |
| Animation type | Not animatable |

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

animation =
  <single-animation>#

<single-animation> =
  <time [0s,∞]>                       ||
  <easing-function>                   ||
  <time>                              ||
  <single-animation-iteration-count>  ||
  <single-animation-direction>        ||
  <single-animation-fill-mode>        ||
  <single-animation-play-state>       ||
  [ none | <keyframes-name> ]

<easing-function> =
  linear                          |
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>

<single-animation-iteration-count> =
  infinite        |
  <number [0,∞]>

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

<single-animation-fill-mode> =
  none       |
  forwards   |
  backwards  |
  both

<single-animation-play-state> =
  running  |
  paused

<keyframes-name> =
  <custom-ident> (en-US)  |
  <string> (en-US)

<linear-easing-function> =
  linear( <linear-stop-list> )

<cubic-bezier-easing-function> =
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )

<step-easing-function> =
  step-start                             |
  step-end                               |
  steps( <integer> , <step-position>? )

<linear-stop-list> =
  [ <linear-stop> ]#

<step-position> =
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end

<linear-stop> =
  <number>               &&
  <linear-stop-length>?

<linear-stop-length> =
  <percentage>{1,2}

```

예제
--

**참고:** CSS 박스 모델 속성에 애니메이션을 적용하는 것은 권장되지 않습니다. 어떤 박스 모델 속성을 애니메이션하는 것은 본질적으로 CPU를 많이 사용합니다. 대신 transform 속성에 애니메이션을 적용하는 것을 고려하십시오.

### 해 뜨기

 여기서 우리는 하늘색 하늘을 가로지르는 노란 태양 애니메이션을 만들어봅니다.
 태양이 뷰포트 중앙으로 올라간 다음 시야에서 사라집니다.

```html
<div class="sun"></div>
```

```css
:root {
  overflow: hidden; /\* 수평선 아래 태양의 일부를 숨깁니다. \*/
  background-color: lightblue;
  display: flex;
  justify-content: center; /\* 태양을 배경 중앙에 배치합니다. \*/
}

.sun {
  background-color: yellow;
  border-radius: 50%; /\* 둥근 배경을 만듭니다. \*/
  height: 100vh; /\* 태양을 뷰포트의 크기로 만듭니다. \*/
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate sun-rise;
}

@keyframes sun-rise {
  from {
    /\* 태양을 뷰포트 너머로 밀어냅니다. \*/
    transform: translateY(110vh);
  }
  to {
    /\* 태양을 기본 위치로 되돌립니다. \*/
    transform: translateY(0);
  }
}
```

### 여러 속성 애니메이션

이전 예제의 태양 애니메이션에 추가하여, 태양이 뜨고 질 때 태양의 색상을 변경하는 두 번째 애니메이션을 추가합니다. 태양은 수평선 아래에 있을 때 진한 빨간색으로 시작하여 상단에 도달하면 밝은 주황색으로 바뀝니다.

```html
<div class="sun"></div>
```

```css
:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate animating-multiple-properties;
}

/\* 단일 애니메이션에서 여러 속성을 애니메이션할 수 있습니다. \*/
@keyframes animating-multiple-properties {
  from {
    transform: translateY(110vh);
    background-color: red;
    filter: brightness(75%);
  }
  to {
    transform: translateY(0);
    background-color: orange;
    /\* 설정되지 않은 속성, 즉 'filter'는 기본값으로 되돌아갑니다. \*/
  }
}
```

### 여러 애니메이션 적용하기

 여기 하늘색 배경에 뜨고 지는 태양이 있습니다.
 태양은 점점 무지개 색으로 변합니다.
 태양의 위치와 색상의 타이밍은 독립적입니다.

```html
<div class="sun"></div>
```

```css
:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  /\* 여러 애니메이션은 쉼표로 구분되고, 각 애니메이션의 매개변수는 독립적으로 설정됩니다. \*/
  animation:
    4s linear 0s infinite alternate rise,
    24s linear 0s infinite psychedelic;
}

@keyframes rise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes psychedelic {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}
```

### 여러 애니메이션 캐스케이딩

여기 밝은 파란색 배경에 노란색 태양이 있습니다. 태양은 뷰포트의 왼쪽과 오른쪽 사이에서 튕깁니다. rise 애니메이션이 정의됐더라도 태양은 뷰포트에 남아 있습니다. 상승 애니메이션의 transform 속성은 bounce 애니메이션으로 '덮어써지게' 됩니다.

```html
<div class="sun"></div>
```

```css
:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  /\*
 캐스케이딩으로 나중에 선언된 애니메이션은
 이전에 선언된 애니메이션 속성을 재정의합니다.
 \*/
  /\* bounce는 rise가 설정한 transform을 '덮어쓰므로' 태양은 수평으로만 움직입니다. \*/
  animation:
    4s linear 0s infinite alternate rise,
    4s linear 0s infinite alternate bounce;
}

@keyframes rise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes bounce {
  from {
    transform: translateX(-50vw);
  }
  to {
    transform: translateX(50vw);
  }
}
```

추가 예제는 CSS 애니메이션 사용하기를 참조하세요.

명세서
---

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

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

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

같이 보기
-----

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


미디어 쿼리 - CSS: Cascading Style Sheets

미디어 쿼리
======

**미디어 쿼리**는 다양한 기기 특성과 파라메터의 존재 여부에 따라 사이트, 혹은 앱을 조정할 수 있습니다.

미디어 쿼리는 반응형 디자인의 핵심 구성 요소입니다. 예를 들어, 미디어 쿼리는 작은 기기에 맞춰 폰트 사이즈를 줄어들게 하거나, 세로 모드(portrait mode)일 때 단락의 패딩 값을 증가시킬 수도 있습니다. 혹은 터치 스크린에서 버튼 사이즈를 키울 수도 있습니다.

CSS에서는 `@media` @규칙을 사용해서 스타일 시트의 일부를 조건부로 적용합니다. 이 스타일 시트는 미디어 쿼리의 결과에 기반한 스타일 시트입니다. `@import`를 사용해서 조건부로 전체 스타일시트를 적용해보세요.

### HTML에서의 미디어 쿼리

HTML에서 미디어 쿼리는 다양한 요소에 적용될 수 있습니다.:

* `<link>` 요소의 `media` 속성에서는, 링크된 리소스 (일반적으로 CSS)가 적용되어야하는 미디어를 정의합니다.
* `<source>` (en-US) 요소의 `media` (en-US) 속성에서는, 해당 소스가 적용되어야하는 미디어를 정의합니다. (이건 `<picture>` (en-US) 요소 안에서만 유효합니다.)
* `<style>` 요소의 `media` 속성에서는, 스타일이 적용되어야하는 미디어를 정의합니다.
### JavaScript에서의 미디어 쿼리

JavaScript에서는, `Window.matchMedia()` 메소드로 미디어 쿼리를 테스트할 수 있습니다. `MediaQueryList.addListener()` (en-US) 메소드를 사용하면 쿼리가 변경될 때마다 사이트나 앱에서 알림을 받을 수도 있습니다. 이러한 기능을 사용하면, 사이트나 앱이 기기 구성, 방향 또는 상태의 변화에 따라 응답할 수도 있습니다.

Testing media queries (en-US)에서 프로그래밍 방식으로 미디어 쿼리를 사용하는 방법에 대해 자세히 배워보세요.

참고서
---

### @규칙

* `@import`
* `@media`
안내서
---

미디어 쿼리 사용하기

미디어 쿼리 표현식을 구성하는데 사용되는 미디어 쿼리, 구문 및 연산자와 미디어 기능을 소개합니다.

프로그래밍 방식으로 미디어 쿼리 테스트하기 (en-US)

JavaScript 코드에서 어떻게 미디어 쿼리를 사용해 디바이스의 상태를 확인하는지, 그리고 미디어 쿼리가 변경될 때(사용자가 화면을 회전시키거나 브라우저를 리사이즈 할 때와 같은 상황)마다 알림을 보내기 위해 어떻게 리스너를 설정하는지에 대해 설명합니다.

접근성을 위한 미디어 쿼리

미디어 쿼리를 사용해 사용자가 웹사이트를 더 잘 이해할 수 있게 만들어보세요.

명세
--

| Specification |
| --- |
| Media Queries Level 4  |
| CSS Conditional Rules Module Level 3  |

같이 보기
-----

* `@supports` 를 사용하면 브라우저가 지원하는 다양한 CSS 기술들에 대한 스타일을 적용할 수 있습니다.


border-bottom-style - CSS: Cascading Style Sheets

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

**`border-bottom-style`** CSS 속성은 요소 테두리의 아래쪽 스타일을 지정합니다.

시도해보기
-----

**참고:** 명세는 서로 다른 스타일의 테두리가 꼭지점에서 만날 때 어떻게 그려야 할지는 정의하고 있지 않습니다.

구문
--

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

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

`border-bottom-style` 속성은 `border-style` 속성에 사용할 수 있는 키워드 중 하나를 사용해 지정할 수 있습니다.

### 형식 구문
```

border-bottom-style =
  <line-style>

<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
/\* Define look of the table \*/
table {
  border-width: 2px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

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

#### 결과

명세
--

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

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

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

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

같이 보기
-----

* 테두리 스타일 관련 CSS 속성: `border-top-style`, `border-right-style`, `border-left-style`, `border-style`.
* 아래쪽 테두리 관련 CSS 속성: `border-bottom`, `border-bottom-color`, `border-bottom-width`.


object-position - CSS: Cascading Style Sheets

object-position
===============

CSS **`object-position`** 속성은 대체 요소의 콘텐츠 정렬 방식을 지정합니다. 대체 요소의 객체가 덮지 않은 부분은 요소의 배경이 보이게 됩니다.

대체 요소 객체의 고유 크기(수정을 가하지 않은 원래 크기)를 조정해 요소 박스에 맞추는 방법은 `object-fit` 속성으로 지정할 수 있습니다.

시도해보기
-----

구문
--

```css
/\* <position> 값 \*/
object-position: center top;
object-position: 100px 50px;

/\* 전역 값 \*/
object-position: inherit;
object-position: initial;
object-position: unset;
```

### 값

`<position>`

객체의 2D 위치를 지정하는 한 개에서 네 개의 값. 상대와 절대 오프셋을 사용할 수 있습니다.

**참고:** 콘텐츠가 대체 요소의 박스 바깥으로 나가도록 지정할 수도 있습니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `50% 50%` |
| 적용대상 | replaced elements |
| 상속 | yes |
| Percentages | refer to width and height of element itself |
| 계산 값 | as specified |
| Animation type | a repeatable list |

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

object-position =
  <position>

<position> =
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

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

```

예제
--

### 이미지 콘텐츠 위치 지정

#### HTML

두 개의 `<img>` 요소가 MDN 로고를 가리키는 코드입니다.

```html
<img id="object-position-1" src="mdn.svg" alt="MDN Logo" />
<img id="object-position-2" src="mdn.svg" alt="MDN Logo" />
```

#### CSS

다음 CSS는 두 `<img>` 요소 모두에 적용할 스타일과 함께, 각각 별도로 적용할 `object-position` 속성도 지정하고 있습니다.

```css
img {
  width: 300px;
  height: 250px;
  border: 1px solid black;
  background-color: silver;
  margin-right: 1em;
  object-fit: none;
}

#object-position-1 {
  object-position: 10px;
}

#object-position-2 {
  object-position: 100% 10%;
}
```

첫 번째 이미지는 요소 박스의 왼쪽 경계로부터 10픽셀 떨어진 곳으로 배치됩니다. 두 번째 이미지는 요소 박스의 오른쪽 경계와 자신의 오른쪽 모서리를 서로 겹치고, 박스의 위쪽 경계로부터 박스 높이의 10% 떨어진 지점으로 배치됩니다.

#### 결과

명세
--

| Specification |
| --- |
| CSS Images Module Level 3 # the-object-position |

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

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

같이 보기
-----

* 이미지 관련 다른 CSS 속성: `object-fit`, `image-orientation` (en-US), `image-rendering`, `image-resolution` (en-US).


border - CSS: Cascading Style Sheets

border
======

CSS **`border`** 단축 속성은 요소의 테두리를 설정합니다. `border-width`, `border-style`, `border-color`의 값을 설정합니다.

시도해보기
-----

구성 속성
-----

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

* `border-color`
* `border-style`
* `border-width`
구문
--

```css
/\* 스타일 \*/
border: solid;

/\* 너비 | 스타일 \*/
border: 2px dotted;

/\* 스타일 | 색 \*/
border: outset #f33;

/\* 너비 | 스타일 | 색 \*/
border: medium dashed green;

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

`border` 속성은 다음의 값 중 한 개에서 세 개를 선택해서 지정할 수 있습니다. 순서는 영향을 주지 않습니다.

**참고:** 스타일을 지정하지 않으면 기본값인 `none`이 사용돼 테두리가 보이지 않습니다.

### 값

`<line-width>`

테두리의 굵기로 기본값은 `medium`입니다. `border-width`를 참고하세요.

`<line-style>`

테두리의 스타일로 기본값은 `none`입니다. `border-style`을 참고하세요.

`<color>`

테두리의 색상으로 기본값은 `currentcolor`입니다. `border-color`를 참고하세요.

설명
--

다른 단축 속성과 마찬가지로, 생략한 속성은 초깃값으로 설정됩니다. 한 가지 중요한 점은, `border`를 사용해서는 `border-image`에 원하는 값을 지정할 수는 없고 대신 초깃값인 `none`이 자동으로 설정됩니다.

`border` 단축 속성은 요소의 테두리를 모두 동일하게 설정하고 싶을 때 특히 유용합니다. 그러나 서로의 테두리를 다르게 하고 싶다면 네 면을 각각 설정할 수 있는 본디 속성 `border-width`, `border-style`,`border-color`를 사용하면 됩니다. 아니면 한 면의 테두리를 절대 기준(`border-top` 등)이나 상대 기준(`border-block-start` (en-US) 등) 속성을 사용해서 따로 정해줄 수도 있습니다.

### 테두리 vs외곽선

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

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

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `border-width`: as each of the properties of the shorthand:
    + `border-top-width`: `medium`
    + `border-right-width`: `medium`
    + `border-bottom-width`: `medium`
    + `border-left-width`: `medium`
* `border-style`: as each of the properties of the shorthand:
    + `border-top-style`: `none`
    + `border-right-style`: `none`
    + `border-bottom-style`: `none`
    + `border-left-style`: `none`
* `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-width`: 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`
* `border-style`: as each of the properties of the shorthand:
    + `border-bottom-style`: as specified
    + `border-left-style`: as specified
    + `border-right-style`: as specified
    + `border-top-style`: as specified
* `border-color`: 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-color`: 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
* `border-style`: discrete
* `border-width`: 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 =
  <line-width>  ||
  <line-style>  ||
  <color>

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

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

```

예제
--

### 튀어나오는 듯한 분홍색 테두리 추가하기

#### HTML

```html
<div>테두리와 외곽선에 더해 그림자까지, 정말 멋지지 않나요?</div>
```

#### CSS

```css
div {
  border: 0.5rem outset pink;
  outline: 0.5rem solid khaki;
  box-shadow: 0 0 0 2rem skyblue;
  border-radius: 12px;
  font: bold 1rem sans-serif;
  margin: 2rem;
  padding: 1rem;
  outline-offset: 0.5rem;
}
```

#### 결과

명세
--

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

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `border-width`: as each of the properties of the shorthand:
    + `border-top-width`: `medium`
    + `border-right-width`: `medium`
    + `border-bottom-width`: `medium`
    + `border-left-width`: `medium`
* `border-style`: as each of the properties of the shorthand:
    + `border-top-style`: `none`
    + `border-right-style`: `none`
    + `border-bottom-style`: `none`
    + `border-left-style`: `none`
* `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-width`: 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`
* `border-style`: as each of the properties of the shorthand:
    + `border-bottom-style`: as specified
    + `border-left-style`: as specified
    + `border-right-style`: as specified
    + `border-top-style`: as specified
* `border-color`: 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-color`: 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
* `border-style`: discrete
* `border-width`: 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
 |

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

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

같이 보기
-----

* `border-width`
* `border-style`
* `border-color`
* 배경 및 테두리
* CSS 배우기: 배경 및 테두리


grid-template-columns - CSS: Cascading Style Sheets

grid-template-columns
=====================

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

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

* Learn more
* See full compatibility
* Report feedback
**`grid-template-columns`** CSS 속성은 grid columns의 열 이름과 트랙 크기 조정 함수들을 정의합니다.

시도해보기
-----

구문
--

```css
/\* Keyword value \*/
grid-template-columns: none;

/\* <track-list> values \*/
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);
grid-template-columns: subgrid;
grid-template-columns: masonry;

/\* <auto-track-list> values \*/
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-columns:
  [linename1] 100px [linename2]
  repeat(auto-fit, [linename3 linename4] 300px)
  100px;
grid-template-columns:
  [linename1 linename2] 100px
  repeat(auto-fit, [linename1] 300px) [linename3];

/\* Global values \*/
grid-template-columns: inherit;
grid-template-columns: initial;
grid-template-columns: revert;
grid-template-columns: revert-layer;
grid-template-columns: unset;
```

### 값

* `none`
    + 명시적 그리드가 없음을 의미합니다. 모든 열은 암시적으로 생성되고 각 열의 크기는 `grid-auto-columns` (en-US) 속성에 의해 결정됩니다.
* `[linename]`
    + 해당 위치의 각 열에 대한 이름을 명시하는 `<custom-ident>` (en-US) 입니다. ident는 예약어인 `span` 이나 `auto`를 제외한 어떤 문자열이든 올 수 있습니다. 행에는 `[line-name-a line-name-b]`와 같이 대괄호 안에 공백으로 구분된 여러 이름을 가질 수 있습니다.
* `<length>`
    + 음수가 아닌 길이, 열의 너비를 나타냅니다.
* `<percentage>`
    + 음수가 아닌 그리드 컨테이너의 내부 크기에 상대적인 `<percentage>` 값입니다. 만약 그리드 컨테이너의 크기가 트랙의 크기에 따라 달라지는 경우, 백분율을 `auto`로 처리해야 합니다.
     트랙의 본질적인 크기 기여는 그리드 컨테이너의 크기로 조정될 수 있으며, 트랙의 최종 크기를 백분율에 맞는 최소 크기 만큼 증가시킬 수 있습니다.
* `<flex>` (en-US)
    + 트랙의 Flex 요소를 지정하는 `fr` 단위를 가지는 음이 아닌 치수입니다. 각각의 `<flex>`에 크기가 정해진 트랙은 flex 요소에 비례하여 나머지 공간을 차지합니다.
     `minmax()` 외부에서 사용하면, 이는 자동 최소값 즉 `minmax(auto, <flex>)`를 의미합니다.
* `max-content` (en-US)
    + 그리드 트랙을 차지하는 그리드 항목의 가장 큰 최대 콘텐츠 기여도를 의미합니다. 예를 들어, 만약 그리드 트랙의 첫번째 요소가 "Repetitio est mater studiorum"라는 문장을 포함하고, 두번째 요소가 "Dum spiro, spero"라는 문장을 포함한다면, 최대 콘텐츠 기여는 모든 그리드 요소 중에서 가장 긴 "Repetitio est mater studiorum"의 크기로 지정됩니다.
* `min-content` (en-US)
    + 그리드 트랙을 차지하는 그리드 항목의 가장 큰 최소 콘텐츠 기여도 를 나타냅니다. 예를 들어 그리드 트랙의 첫번째 요소가 "Repetitio est mater studiorum"라는 문장을 포함하고, 두번째 요소가 "Dum spiro, spero"라는 문장을 포함한다면, 최소 콘텐츠 기여는 모든 그리드 요소 중에서 가장 긴 단어인 "studiorum"의 크기로 지정됩니다.
* `minmax(min, max)` (en-US)
    + min 이상 max 이하의 사이즈 범위를 정의하는 함수 표기입니다. max가 min보다 작다면, max는 무시되고 이 함수는 min으로 처리됩니다. 최대값으로서 `<flex>` 값은 트랙의 flex 요소를 설정합니다. `<flex>` 값은 최소값으로는 유효하지 않습니다.
* `auto`
    + 최대값으로 트랙 내 모든 아이템 중 가장 큰 `max-content` (en-US) 를 나타냅니다.
     최소값으로 트랙 내 모든 아이템 중 최대 최소 크기를 나타냅니다. (아이템들의 `min-width`/`min-height`로 명시되어있습니다.) 이것은 항상은 아니지만 주로 `min-content` (en-US) 크기 값입니다.
     만약 `minmax()` (en-US) notation 외부에서 사용된다면, `auto`는 위에 명시된것과 같이 최소, 최대값 사이의 범위를 나타냅니다. 이것은 대부분 `minmax(min-content,max-content)`와 유사하게 동작합니다.

    **참고:** `auto` 트랙 크기는 (그리고 오직 `auto` 트랙 크기만) `align-content` 과 `justify-content` 요소에 의해 확장될 수 있습니다. 그러므로 기본적으로 `auto`에 크기가 지정된 트랙은 그리드 컨테이너의 나머지 공간을 차지합니다.
* ``fit-content( [ <length> | <percentage> ] )` (en-US)`
    + `max(minimum, min(limit, max-content))` 공식을 의미합니다. minimum이 `auto` 최소값(항상은 아니지만 주로 `min-content` (en-US)의 최소값과 동일한), limit은 fit-content()의 인자로 전달되는 트랙 크기를 결정하는 함수입니다. 이 값은 주로 `minmax(auto, max-content)` 와 `minmax(auto, limit)`에서 작은 값으로 계산됩니다.
* `repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )` (en-US)
    + 트랙 목록에서 반복되는 조각을 의미합니다. 반복 패턴을 나타내는 많은 수의 열을 보다 간결한 형태로 작성할 수 있습니다.
* `masonry` (en-US)
Experimental

    + masonry 값은 이 축이 masonry 알고리즘에 따라 배치되어야 함을 나타냅니다.
* `subgrid` (en-US)
    + `subgrid` 값은 그리드가 해당 축에서 부모 그리드의 spanned 부분을 채택함을 나타냅니다. 그리드 행/열의 크기는 명시적으로 지정되지 않고 상위 그리드의 정의에서 가져옵니다.

>
> **경고** `masonry` 값은 그리드 명세서의 3 단계에 있으며 현재 파이어 폭스의 flag에는 실험적인 기능만 구현되어 있습니다.
>
>
> `subgrid` 값은 그리드 명세서의 2 단계에 있으며 현재 Firefox 71 이상에서만 구현되어 있습니다.
>
>
>

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `none` |
| 적용대상 | grid containers |
| 상속 | no |
| Percentages | refer to corresponding dimension of the content area |
| 계산 값 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list |

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

grid-template-columns =
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?

<track-list> =
  [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?

<auto-track-list> =
  [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]\* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]\* <line-names>?

<line-name-list> =
  [ <line-names> | <name-repeat> ]+

<line-names> =
  '[' <custom-ident> (en-US)\* ']'

<track-size> =
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )

<track-repeat> =
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )

<fixed-size> =
  <fixed-breadth>                                   |
  minmax( <fixed-breadth> , <track-breadth> )       |
  minmax( <inflexible-breadth> , <fixed-breadth> )

<fixed-repeat> =
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

<auto-repeat> =
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

<name-repeat> =
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )

<track-breadth> =
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto

<inflexible-breadth> =
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto

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

<fixed-breadth> =
  <length-percentage [0,∞]>

```

예시
--

### 그리드 열 크기 지정하기

#### HTML

```html
<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>
```

#### CSS

```css
#grid {
  display: grid;
  width: 100%;
  grid-template-columns: 50px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}
```

#### 결과

명세서
---

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # track-sizing |
| CSS Grid Layout Module Level 2 # subgrids |
| CSS Grid Layout Module Level 3 # masonry-layout |

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

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

같이 보기
-----

* 연관 CSS 속성: `grid-template-rows` (en-US), `grid-template-areas` (en-US), `grid-template` (en-US)
* 그리드 레이아웃 안내서: Basic concepts of grid layout - Grid Tracks
* 영상 설명서: Defining a Grid
* Subgrid (en-US)


border-bottom - CSS: Cascading Style Sheets

border-bottom
=============

**`border-bottom`** CSS 단축 속성은 요소의 아래쪽 테두리를 설정합니다. `border-bottom-width`, `border-bottom-style`, `border-bottom-color`의 값을 지정합니다.

시도해보기
-----

다른 단축 속성과 마찬가지로, `border-bottom`는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다.

```css
border-bottom-style: dotted;
border-bottom: thick green;
```

```css
border-bottom-style: dotted;
border-bottom: none thick green;
```

따라서 `border-bottom`보다 먼저 지정한 `border-bottom-style`의 값은 무시됩니다. `border-bottom-style`의 기본값은 `none`이므로, `border-style`을 명시하지 않으면 테두리를 만들지 않습니다.

구문
--

```css
border-bottom: 1px;
border-bottom: 2px dotted;
border-bottom: medium dashed green;
```

`border-bottom`은 한 개에서 세 개의 값을 사용해 지정할 수 있고, 순서는 상관하지 않습니다.

### 값

`<br-width>`

`border-bottom-width`.

`<br-style>`

`border-bottom-style`.

`<color>`

`border-bottom-color`.

### 형식 구문
```

border-bottom =
  <line-width>  ||
  <line-style>  ||
  <color>

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

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

```

예제
--

```html
<div>아래쪽 테두리를 가진 요소입니다.</div>
```

```css
div {
  border-bottom: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```

명세
--

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

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `border-bottom-width`: `medium`
* `border-bottom-style`: `none`
* `border-bottom-color`: `currentcolor`
 |
| 적용대상 | 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-bottom-style`: as specified
* `border-bottom-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-bottom-color`: a color
* `border-bottom-style`: discrete
* `border-bottom-width`: a length
 |

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

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


<length> - CSS: Cascading Style Sheets

<length>
========

CSS **`<length>`** 자료형은 거리 값을 나타냅니다. `width`, `height`, `margin`, `padding`, `border-width`, `font-size`, `text-shadow` (en-US) 등 다양한 속성에 사용할 수 있습니다.

**참고:** `<percentage>` 값을 일부 속성의 `<length>` 값으로 사용할 수는 있지만 `<percentage>`와 `<length>` 는 다릅니다. `<length-percentage>`를 참고하세요.

구문
--

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

**참고:** 일부 속성은 음의 `<length>`를 받지만 다른 속성은 그렇지 않습니다.

### 단위

#### 상대길이 단위

상대길이는 어떤 다른 거리와의 상대적 비율을 표현합니다. 어떤 다른 거리란 단위에 따라 특정 문자, `line-height` (en-US), 아니면 뷰포트일 수 있습니다.

##### 글꼴 상대 길이

글꼴 상대 길이는 `<length>` 값을 특정 문자나 현재 요소가 사용하는 글꼴의 특정 속성을 기준으로 설정합니다.

**참고:** 아래 단위들, 특히 `em`과 `rem`은 사용자가 글꼴 크기를 늘려도 페이지의 수직 흐름을 유지하는, 확대 가능한 레이아웃을 만들기 위해 많이 쓰입니다.

`cap`
Experimental

요소 `font`의 "cap height"(영문 대문자의 평균 높이 값)를 나타냅니다.

`ch`

 요소 `font`의 문자 "0"(영, 유니코드 U+0030)의 너비를 나타냅니다.
 문자 "0"의 너비를 측정하는 것이 불가능하거나 실용적이지 않은 경우 너비 0.5em에 높이 1em이라고 가정해야 합니다.

`em`

요소 `font-size`의 계산값. 요소의 `font-size` 속성에 사용한다면 상속받는 `font-size` 값을 나타냅니다.

`ex`

요소 `font`의 x높이를 나타냅니다. "x"문자를 가진 글꼴에서는 보통 소문자 높이와 같습니다. 많은 글꼴에서 `1ex ≈ 0.5em`입니다.

`ic`
Experimental

"水" (한중일 한자 "물", U+6C34) 문자를 렌더링할 때 사용하는 글꼴에서의 너비를 나타냅니다.

`lh`
Experimental

요소가 `line-height` (en-US)를 가지고 있는 경우, `line-height`의 계산값을 절대 길이로 변환해 나타냅니다.

`rem`

루트 요소(보통 `<html>`)의 `font-size`를 나타냅니다. 루트 요소의 `font-size`에 사용할 경우 최초값(보통 브라우저 기본값은 `16px`이나 사용자 설정으로 변할 수 있음)을 나타냅니다.

`rlh`
Experimental

루트 요소(보통 `<html>`)의 `line-height` (en-US)를 절대 길이로 변환해 나타냅니다. 루트 요소의 `font-size`나 `line-height`에 사용할 경우 최초값을 나타냅니다.

##### 뷰포트 백분율 길이

뷰포트 백분율 길이는 `<length>` 값을 뷰포트, 즉 문서에서 볼 수 있는 부분의 크기를 기준으로 설정합니다. 뷰포트 길이는 `@page` 선언 블록에서는 유효하지 않습니다.

`vh`

뷰포트의 초기 컨테이닝 블록 높이 1%와 같습니다.

`vw`

뷰포트의 초기 컨테이닝 블록 너비 1%와 같습니다.

`vi`
Experimental

초기 컨테이닝 블록의 인라인 축 (en-US) 크기 1%와 같습니다.

`vb`
Experimental

초기 컨테이닝 블록의 블록 축 (en-US) 크기 1%와 같습니다.

`vmin`

`vw`와 `vh` 중 작은 것과 같습니다.

`vmax`

`vw`와 `vh` 중 큰 것과 같습니다.

#### 절대길이 단위

절대길이 단위는 프린트 등 출력 수단의 크기를 알 수 있을 때의 물리적 측정 거리를 나타냅니다. 구현은 어떤 단위를 물리적인 실제 거리에 맞춰 기준으로 삼고, 나머지 단위를 상대적으로 계산해 설정합니다. 기준 단위는 화면 등 저해상도 장치와 프린터 등 고해상도 장치에서 다릅니다.

저해상도 장치에서 `px` 단위는 물리적인 픽셀을 의미하며 나머지는 이에 상대적입니다. 따라서 `1in`은 `96px`로 정의하며 이는 `72pt`와 동일합니다. 그러나 인치(`in`), 센티미터(`cm`), 밀리미터(`mm`) 등 이렇게 정의하는 단위가 같은 이름을 가진 물리적인 측정 단위와 일치하지 않을 수 있다는 문제점이 있습니다.

고해상도 장치에서 인치(`in`), 센티미터(`cm`), 밀리미터(`mm`)가 기준이 되어 물리적 거리와 동일합니다. 그래서 px 단위도 이에 맞춰 1인치의 1/96로 정의합니다.

**참고:** 많은 사용자가 사용자 에이전트의 기본 글꼴 크기를 늘려 읽기 쉽도록 설정합니다. 절대길이는 사용자 설정을 따르지 않기 때문에 접근성 문제를 유발할 수 있습니다. 따라서 `font-size`를 설정할 땐 `em`, `rem` 등 상대길이를 선택하세요.

`px`

1 픽셀. 화면에서는 전통적으로 하나의 장치 픽셀(점)을 의미했지만, 프린터나 고해상도 화면에서는 1/96 `in`을 맞출 수 있도록 여러 개의 장치 픽셀을 의미합니다.

`cm`

1 센티미터, `1cm` = `96px/2.54`.

`mm`

1 밀리미터, `1mm` = 1/10 `cm`.

`Q`
Experimental

1/4 밀리미터, `1Q` = 1/40 `cm`.

`in`

1 인치, `1in` = `2.54cm` = `96px`.

`pc`

1 피카, `1pc` = `12pt` = 1/6`1in`.

`pt`

One point. `1pt` = 1/72nd of `1in`.

보간
--

애니메이션에서 `<length>` 자료형의 값은 부동소수점 실수로 간주하며 보간은 계산값을 사용합니다. 보간 속도는 애니메이션에 연결된 타이밍 함수 (en-US)가 결정합니다.

예제
--

### 길이 단위 비교

아래 데모에서는 주어진 하나의 입력 칸에 `300px`, `50%`, `30vw` 등 `<length>` 값을 입력한 후 `Return`을 누르면 그 길이만큼의 막대를 생성합니다.

서로 다른 길이 단위를 입력하고 비교해보세요.

#### HTML

```html
<div class="outer">
  <div class="input-container">
    <label>길이:</label>
    <input type="text" id="length" />
  </div>
  <div class="inner"></div>
</div>
<div class="results"></div>
```

#### CSS

```css
html {
  font-family: sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}

.outer {
  width: 100%;
  height: 50px;
  background-color: #eee;
  position: relative;
}

.inner {
  height: 50px;
  background-color: #999;
  box-shadow:
    inset 3px 3px 5px rgba(255, 255, 255, 0.5),
    inset -3px -3px 5px rgba(0, 0, 0, 0.5);
}

.result {
  height: 20px;
  background-color: #999;
  box-shadow:
    inset 3px 3px 5px rgba(255, 255, 255, 0.5),
    inset -3px -3px 5px rgba(0, 0, 0, 0.5);
  background-color: orange;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.result code {
  position: absolute;
  margin-left: 20px;
}

.results {
  margin-top: 10px;
}

.input-container {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 50px;
}

label {
  margin: 0 10px 0 20px;
}
```

#### JavaScript

```js
const inputDiv = document.querySelector(".inner");
const inputElem = document.querySelector("input");
const resultsDiv = document.querySelector(".results");

inputElem.addEventListener("change", () => {
  inputDiv.style.width = inputElem.value;

  const result = document.createElement("div");
  result.className = "result";
  result.style.width = inputElem.value;
  result.innerHTML = `<code>너비: ${inputElem.value}</code>`;
  resultsDiv.appendChild(result);

  inputElem.value = "";
  inputElem.focus();
});
```

#### 결과

명세
--

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

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

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


transition - CSS: Cascading Style Sheets

transition
==========

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

Summary
-------

**`transition`** CSS속성은 `transition-property` (en-US), `transition-duration` (en-US), `transition-timing-function` (en-US) 과 `transition-delay` (en-US)를 위한 단축 속성입니다. 이 속성으로 엘리먼트의 두 가지 상태 사이에 변화를 줄 수 있습니다. 엘리먼트의 각 상태는 가상 클래스 를 사용해 정의된 `:hover` 이나 `:active` 또는 JavaScript를 사용해 동적으로 만들어진 것들입니다.

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `transition-delay` (en-US): `0s`
* `transition-duration` (en-US): `0s`
* `transition-property` (en-US): all
* `transition-timing-function` (en-US): `ease`
* `transition-behavior` (en-US): `normal`
 |
| 적용대상 | all elements, `::before` (en-US) and `::after` pseudo-elements |
| 상속 | no |
| 계산 값 | as each of the properties of the shorthand:* `transition-delay` (en-US): as specified
* `transition-duration` (en-US): as specified
* `transition-property` (en-US): as specified
* `transition-timing-function` (en-US): as specified
* `transition-behavior` (en-US): as specified
 |
| Animation type | Not animatable |

Syntax
------

```css
/\* Apply to 1 property \*/
/\* property name | duration \*/
transition: margin-left 4s;

/\* property name | duration | delay \*/
transition: margin-left 4s 1s;

/\* property name | duration | timing function | delay \*/
transition: margin-left 4s ease-in-out 1s;

/\* Apply to 2 properties \*/
transition:
  margin-left 4s,
  color 1s;

/\* Apply to all changed properties \*/
transition: all 0.5s ease-out;

/\* Global values \*/
transition: inherit;
transition: initial;
transition: unset;
```

이 속성에서 각 항목의 순서는 중요합니다: 시간으로 해석될 수 있는 값이 첫번째에 위치한다면 `transition-duration` (en-US) 로 적용되고, 두번째에 위치한다면 `transition-delay` (en-US) 로 적용됩니다.

속성값 목록이 알맞은 길이를 갖지 않는다면 어떻게 처리될지 궁금하다면 속성값 목록이 다른 개수를 가진 경우를 참고하세요. 요컨대, 실제 속성의 개수보다 많이 기술된 것은 무시됩니다.

### Formal syntax
```

transition =
  <single-transition>#

<single-transition> =
  [ none | <single-transition-property> ]  ||
  <time>                                   ||
  <easing-function>                        ||
  <time>

<single-transition-property> =
  all             |
  <custom-ident> (en-US)

<easing-function> =
  linear                          |
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>

<linear-easing-function> =
  linear( <linear-stop-list> )

<cubic-bezier-easing-function> =
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )

<step-easing-function> =
  step-start                             |
  step-end                               |
  steps( <integer> , <step-position>? )

<linear-stop-list> =
  [ <linear-stop> ]#

<step-position> =
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end

<linear-stop> =
  <number>               &&
  <linear-stop-length>?

<linear-stop-length> =
  <percentage>{1,2}

```

Examples
--------

CSS 트랜지션 사용하기 에 다양한 CSS transition 예제가 있습니다.

명세서
---

| Specification |
| --- |
| CSS Transitions # transition-shorthand-property |

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

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

See also
--------

* Using CSS transitions (en-US)
* `TransitionEvent` (en-US)


border-top - CSS: Cascading Style Sheets

border-top
==========

**`border-top`** CSS 단축 속성은 요소의 위쪽 테두리를 설정합니다. `border-top-width`, `border-top-style`, `border-top-color`의 값을 지정합니다.

시도해보기
-----

다른 단축 속성과 마찬가지로, `border-top`는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다.

```css
border-top-style: dotted;
border-top: thick green;
```

```css
border-top-style: dotted;
border-top: none thick green;
```

따라서 `border-top`보다 먼저 지정한 `border-top-style`의 값은 무시됩니다. `border-top-style`의 기본값은 `none`이므로, `border-style`을 명시하지 않으면 테두리를 만들지 않습니다.

구문
--

```css
border-top: 1px;
border-top: 2px dotted;
border-top: medium dashed green;
```

`border-top`은 한 개에서 세 개의 값을 사용해 지정할 수 있고, 순서는 상관하지 않습니다.

### 값

`<br-width>`

`border-top-width`.

`<br-style>`

`border-top-style`.

`<color>`

`border-top-color`.

### 형식 구문
```

border-top =
  <line-width>  ||
  <line-style>  ||
  <color>

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

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

```

예제
--

```html
<div>위쪽 테두리를 가진 요소입니다.</div>
```

```css
div {
  border-top: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```

명세
--

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

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

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

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


border-left-width - CSS: Cascading Style Sheets

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

CSS **`border-left-width`** 속성은 요소의 왼쪽 테두리 너비를 지정합니다.

시도해보기
-----

구문
--

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

/\* <length> 값 \*/
border-left-width: 10em;
border-left-width: 3vmax;
border-left-width: 6px;

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

### 값

`<line-width>`

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

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

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

형식 정의
-----

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

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

border-left-width =
  <line-width>

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

```

예제
--

### 테두리의 너비 비교

#### HTML

```html
<div>Element 1</div>
<div>Element 2</div>
```

#### CSS

```css
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-left-width: thick;
}
div:nth-child(2) {
  border-left-width: 2em;
}
```

#### 결과

명세
--

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

같이 보기
-----

* 테두리 너비 관련 CSS 속성: `border-top-width`, `border-right-width`, `border-bottom-width`, and `border-width`.
* 왼쪽 테두리 관련 CSS 속성: `border`, `border-left`, `border-left-style`, and `border-left-color`.


CSS Flexible Box Layout - CSS: Cascading Style Sheets

CSS Flexible Box Layout
=======================

**CSS Flexible Box Layout**은 사용자 인터페이스 디자인과 단방향 레이아웃에 최적화된 CSS 모듈입니다. 플렉스 레이아웃 모델에서는, 플렉스 컨테이너의 자식을 어떤 방향으로도 배치할 수 있으며, 자식의 크기도 유연하게("플렉시블") 빈 공간을 채우거나, 컨테이너를 넘어가지 않도록 줄어듭니다. 자식 간의 수평 및 수직 정렬 또한 쉽게 조작할 수 있습니다.

기본 예제
-----

다음 예제의 컨테이너는 `display: flex`를 적용한 상태입니다. 따라서 컨테이너의 세 자식은 플렉스 항목이 됩니다. `justify-content`의 값은 `space-between`으로, 각 아이템을 주축(가로축)에 균일한 간격으로 배치합니다. 그래서 같은 양의 공간이 자식 사이에 균일하게 생기며 왼쪽과 오른쪽 아이템이 플렉스 컨테이너의 양 모서리에 붙어서 배치됩니다. 또한 `align-items`의 기본값인 `stretch`로 인해, 각 항목의 높이가 플렉스 컨테이너의 높이까지 늘어나서 세 자식 모두 제일 높이가 큰 항목과 같은 높이가 되는 것도 확인할 수 있습니다.

참고서
---

### CSS 속성

* `flex`
* `flex-basis`
* `flex-direction`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `flex-wrap`
* `order`
### 정렬 속성

`align-content`, `align-self`, `align-items`, `justify-content` 속성은 플렉스박스 명세에서 처음 나왔지만, 지금은 박스 정렬 명세가 정의하며 플렉스박스 명세는 박스 정렬 명세를 참조하고 있습니다. 추가 정렬 속성도 박스 정렬 명세가 가지고 있습니다.

* `justify-content`
* `align-content`
* `align-items` (en-US)
* `align-self` (en-US)
* `place-content` (en-US)
* `place-items` (en-US)
* `row-gap` (en-US)
* `column-gap` (en-US)
* `gap`
### 용어

* 플렉스박스
* 플렉스 컨테이너
* 플렉스 항목
* 주축
* 교차축
* 플렉스
안내서
---

플렉스박스의 기본 개념

플렉스박스의 기능 개요입니다.

다른 레이아웃과 플렉스박스의 관계 (en-US)

플렉스박스와 다른 레이아웃 방법, 그리고 다른 CSS 명세가 가진 관계를 설명합니다.

플렉스 컨테이너의 아이템 정렬하기

박스 정렬 속성이 플렉스박스에서 동작하는 방식을 설명합니다.

플렉스 아이템 배치하기 (en-US)

아이템의 순서와 방향을 바꾸는 여러 방법과, 이 때 발생할 수 있는 여러 문제를 다룹니다.

플렉스 아이템의 주요 축 비율 조절하기 (en-US)

`flex-grow`, `flex-shrink`, `flex-basis` 속성을 설명합니다.

플렉스 아이템 줄바꿈 마스터하기 (en-US)

여러 줄로 이뤄진 플렉스 컨테이너를 만드는 방법과, 컨테이너 아이템의 표시 방법 설정을 설명합니다.

플렉스박스의 일반적인 용례

일반적인 플렉스박스 디자인 패턴입니다.

플렉스박스의 하위 호환성 (en-US)

플렉스박스의 브라우저 상태, 상호 호환성 이슈와 함께 구형 브라우저와 이전 명세를 지원하는 방법을 설명합니다.

명세
--

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1  |


@-규칙 - CSS: Cascading Style Sheets

@-규칙
====

**@-규칙**은 식별자(identifier)가 뒤따르는 at 기호('`@`' (`U+0040 COMMERCIAL AT`))로 시작하는 CSS 문이며 다음 세미콜론('`;`' (`U+003B SEMICOLON`)) 또는 다음 CSS 블록 중 먼저 오는 쪽까지 모든 것을 포함합니다.

```css
/\* General structure \*/
@identifier (RULE);

/\* Example: tells browser to use UTF-8 character set \*/
@charset "utf-8";
```

다음과 같이 식별자가 지정된 각각 다른 구문인 여러 at-규칙이 있습니다:

* `@charset` — 스타일 시트에 의해 사용되는 문자 집합을 정의함.
* `@import` — CSS 엔진에게 외부 스타일 시트를 포함하도록 알림.
* `@namespace` — CSS 엔진에게 모든 콘텐츠가 XML 네임스페이스로 시작하(prefix가 붙)는 것이 고려되어야 함을 알림.
* ***중첩 @-규칙*** — 중첩 문의 부분 집합으로, 조건부 그룹 규칙 속뿐만 아니라 스타일 시트의 문으로 사용될 수 있습니다:
    + `@media` — 장치가 미디어 질의(*media query*)를 사용하여 정의된 조건의 기준을 만족하면 해당 콘텐츠를 적용하는 조건부 그룹 규칙.
    + `@supports` — 브라우저가 주어진 조건의 기준을 만족하면 해당 콘텐츠를 적용하는 조건부 그룹 규칙.
    + `@document` (en-US)
    Experimental
     — 스타일 시트가 적용되는 문서가 주어진 조건의 기준을 만족하면 해당 콘텐츠를 적용하는 조건부 그룹 규칙. *(CSS Spec 레벨 4로 연기됨)*
    + `@page` — 문서를 출력할 때 적용되는 레이아웃 변화의 양상(aspect)을 설명.
    + `@font-face` — 다운로드되는 외부 글꼴의 양상을 설명.
    + `@keyframes` — CSS 애니메이션 sequence 내 중간 단계의 양상을 설명.
    + `@counter-style` (en-US) — 미리 정의된 스타일 집합의 일부가 아닌 특정 카운터 스타일을 정의. *(Candidate Recommendation 단계이지만, 작성 중인 현재 Gecko에서만 구현됨)*
    + `@font-feature-values` (en-US) (`@swash`, `@ornaments`, `@annotation`, `@stylistic`, `@styleset` 및 `@character-variant`와 함께)
     — OpenType에서 다르게 활성화된 기능에 대해 `font-variant-alternates` (en-US)에서 일반 이름을 정의. *(Candidate Recommendation 단계이지만, 작성 중인 현재 Gekko에서만 구현됨)*
조건부 그룹 규칙
---------

속성값과 마찬가지로, 각각의 @-규칙은 다른 구문이 있습니다. 그럼에도 불구하고, 그 중 몇몇은 조건부 그룹 규칙(**conditional group rules**)으로 불리는 특별한 범주로 분류될 수 있습니다. 이들 문은 공통 구문을 공유하고 그 각각은 *중첩 문*(*규칙 집합(ruleset)* 또는 *중첩 @-규칙* 중 하나)을 포함할 수 있습니다. 게다가, 그들은 모두 일반 semantic 의미를 전달합니다. 그들은 모두 어떤 유형의 조건을 링크합니다, 언제라도 **참** 또는 **거짓** 중 하나로 평가하는. 조건을 **참**으로 평가하면, 그룹 내 모든 문이 적용됩니다.

조건부 그룹 규칙은 CSS 조건부 규칙 모듈 레벨 3에서 정의되고 다음과 같습니다:

* `@media`,
* `@supports`,
* `@document` (en-US). *(CSS Spec 레벨 4로 연기됨)*

각 조건부 그룹은 또한 중첩 문을 포함할 수 있기에, 불특정한 양의 중첩이 있을 수 있습니다.

명세
--

| Specification |
| --- |
| CSS Conditional Rules Module Level 3  |
| Compatibility Standard # css-at-rules |


backdrop-filter - CSS: Cascading Style Sheets

backdrop-filter
===============

CSS **`backdrop-filter`** 는 요소 뒤 영역에 흐림이나 색상 시프트 등 그래픽 효과를 적용할 수 있는 속성입니다. 요소 "뒤"에 적용하기 때문에, 효과를 확인하려면 요소나 요소의 배경을 적어도 반투명하게는 설정해야 합니다.

```css
/\* 키워드 값 \*/
backdrop-filter: none;

/\* SVG 필터를 가리키는 URL \*/
backdrop-filter: url(commonfilters.svg#filter);

/\* <filter-function> 값 \*/
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/\* 다중 필터 \*/
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/\* 전역 값 \*/
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: unset;
```

구문
--

### 값

`none`

뒤에 아무런 필터도 적용하지 않습니다.

`<filter-function-list>`

뒤에 적용할 `<filter-function>` 또는 SVG필터 (en-US)의 공백 구분 목록입니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `none` |
| 적용대상 | all elements; In SVG, it applies to container elements excluding the `defs` (en-US) element and all graphics elements |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | a filter function list |

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

backdrop-filter =
  none                 |
  <filter-value-list>

<filter-value-list> =
  [ <filter-function> | <url> ]+

<filter-function> =
  <blur()>         |
  <brightness()>   |
  <contrast()>     |
  <drop-shadow()>  |
  <grayscale()>    |
  <hue-rotate()>   |
  <invert()>       |
  <opacity()>      |
  <sepia()>        |
  <saturate()>

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

<blur()> =
  blur( <length>? )

<brightness()> =
  brightness( [ <number> | <percentage> ]? )

<contrast()> =
  contrast( [ <number> | <percentage> ]? )

<drop-shadow()> =
  drop-shadow( [ <color>? && <length>{2,3} ] )

<grayscale()> =
  grayscale( [ <number> | <percentage> ]? )

<hue-rotate()> =
  hue-rotate( [ <angle> | <zero> ]? )

<invert()> =
  invert( [ <number> | <percentage> ]? )

<opacity()> =
  opacity( [ <number> | <percentage> ]? )

<sepia()> =
  sepia( [ <number> | <percentage> ]? )

<saturate()> =
  saturate( [ <number> | <percentage> ]? )

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

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

```

예제
--

### CSS

```css
.box {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
  line-height: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  max-width: 50%;
  max-height: 50%;
  padding: 20px 40px;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-image: url(https://picsum.photos/id/1080/6858/4574),
    linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}
```

### HTML

```html
<div class="container">
  <div class="box">
    <p>backdrop-filter: blur(10px)</p>
  </div>
</div>
```

### 결과

명세
--

| Specification |
| --- |
| Filter Effects Module Level 2 # BackdropFilterProperty |

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

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

같이 보기
-----

* `filter`


margin-top - CSS: Cascading Style Sheets

margin-top
==========

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

시도해보기
-----

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

구문
--

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

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

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

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

### 값

`<length>`

바깥 여백 크기의 고정 값.

`<percentage>`

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

`auto`

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

### 형식 구문
```

margin-top =
  <length-percentage>  |
  auto

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

```

예제
--

```css
.content {
  margin-top: 5%;
}
.sidebox {
  margin-top: 10px;
}
.logo {
  margin-top: -5px;
}
#footer {
  margin-top: 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.


visibility - CSS: Cascading Style Sheets

visibility
==========

**`visibility`** CSS 속성은 문서의 레이아웃을 변경하지 않고 요소를 보이거나 숨깁니다. `visibility`로 `<table>` (en-US)의 행이나 열을 숨길 수도 있습니다.

시도해보기
-----

문서를 숨기고, **레이아웃에서도 제외**하려면, `visibility`를 사용하는 대신 `display` (en-US) 속성을 `none`으로 설정하세요.

구문
--

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

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

### 값

`visible`

요소가 보임.

`hidden`

요소가 숨겨짐(그려지지 않음). 레이아웃에는 숨겨지지 않았을 때와 동일한 영향을 줍니다. `visibility`를 `visible`로 설정한 자손은 화면에 보입니다. 숨겨진 요소는 포커스(탭 인덱스로 탐색 등)를 받을 수 없습니다.

`collapse`

The `collapse` keyword has different effects for different elements:

* `<table>` (en-US)의 행, 열, 행 그룹과 열 그룹에 적용하면 `display` (en-US)를 `none`으로 설정한 것과 동일하게 요소를 숨기고 차지하던 공간도 제거합니다. 그러나 다른 행(열)의 크기는 `collapse`를 적용한 행(열)이 보이는 것 처럼 취급해 계산합니다. 따라서 표의 너비나 높이의 재계산 없이 빠르게 행이나 열을 제거할 수 있습니다.
* 플렉스 아이템에 적용하면 요소를 숨기고 차지하던 공간도 제거합니다.
* XUL 요소에 적용하면 다른 스타일과 관계 없이 크기의 계산값으로 항상 0을 사용합니다. 그러나 `margin`은 바뀌지 않습니다.
* 다른 요소에서는 `hidden`과 동일합니다.

### 형식 구문
```

visibility =
  visible   |
  hidden    |
  collapse

```

보간
--

가시성은 **보여짐**과 **보이지 않음** 사이에서 보간할 수 있습니다. 따라서 시작이나 종료 값이 `visible`이 아니면 보간할 수 없습니다. 가시성 값은 이산값을 사용하며 `0`은 `hidden`, `0` 초과 `1` 이하의 모든 값은 `visible`에 맵핑됩니다. 범위 밖의 값(`cubic-bezier()` 함수의 y값이 [0, 1]을 벗어날 때만 트랜지션의 시작과 종료 시 발생)은 `0`과 `1` 중 더 가까운 값으로 취급합니다.

예제
--

### 기본 예제

#### HTML

```html
<p class="visible">첫 번째 문단은 보입니다.</p>
<p class="not-visible">두 번째 문단은 보이지 않습니다.</p>
<p class="visible">
  세 번째 문단은 보입니다. 두 번째 문단이 여전히 공간을 차지하고 있어요.
</p>
```

#### CSS

```css
.visible {
  visibility: visible;
}

.not-visible {
  visibility: hidden;
}
```

### 표 예제

#### HTML

```html
<table>
  <tr>
    <td>1.1</td>
    <td class="collapse">1.2</td>
    <td>1.3</td>
  </tr>
  <tr class="collapse">
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>
```

#### CSS

```css
.collapse {
  visibility: collapse;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid gray;
}
```

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

`visibility` 값을 `hidden`으로 설정한 요소는 접근성 트리에서 제외됩니다. 즉 해당 요소와, 그 모든 자손 요소는 스크린 리더가 읽지 않습니다.

참고
--

* 일부 현대 브라우저에서는 `visibility: collapse`를 지원하지 않거나 잘못 지원합니다. 따라서 표의 행과 열이 아닌 요소에 사용했을 때 `visibility: hidden`과 똑같이 취급하지 않을 수도 있습니다.
* `visibility: collapse`를 적용한 칸에 중첩해서 다른 표가 존재하면 바깥 표의 레이아웃이 바뀔 수도 있습니다. 이를 방지하려면 중첩된 표에 `visibility: visible`을 명시해야 합니다.
명세
--

| Specification |
| --- |
| CSS Display Module Level 3 # visibility |

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

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

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


word-break - CSS: Cascading Style Sheets

word-break
==========

CSS **`word-break`** 속성은 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정합니다.

시도해보기
-----

구문
--

```css
/\* 키워드 값 \*/
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /\* 사용 안함 \*/

/\* 전역 값 \*/
word-break: inherit;
word-break: initial;
word-break: unset;
```

`word-break` 속성은 아래의 값 중 하나를 선택해서 지정할 수 있습니다.

### 값

`normal`

기본 줄 바꿈 규칙을 사용합니다.

`break-all`

오버플로를 방지하기 위해서는 어떠한 두 문자 사이에서도 줄 바꿈이 발생할 수 있습니다. (한중일 텍스트 제외)

`keep-all`

한중일(CJK) 텍스트에서는 줄을 바꿀 때 단어를 끊지 않습니다. 비 CJK 텍스트에서는 `normal`과 동일합니다.

`break-word`
지원이 중단되었습니다

실제 `overflow-wrap` 속성에 상관하지 않고, `word-break: normal`과 `overflow-wrap: anywhere`를 설정한 것과 같은 효과를 냅니다.

**참고:** `word-break: break-word`와 `overflow-wrap: break-word`(`overflow-wrap` 참고)와 달리, `word-break: break-all`은 텍스트의 오버플로가 시작하는 정확한 지점에서 줄을 바꿉니다. 단어 전체를 다음 줄로 이동하면 중간을 끊지 않아도 될 상황에서도 마찬가지입니다.

형식 정의
-----

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

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

word-break =
  normal      |
  keep-all    |
  break-all   |
  break-word

```

예제
--

### HTML

```html
<p>1. <code>word-break: normal</code></p>
<p class="normal narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>3. <code>word-break: keep-all</code></p>
<p class="keepAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>4. <code>word-break: break-word</code></p>
<p class="breakWord narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>
```

### CSS

```css
.narrow {
  padding: 5px;
  border: 1px solid;
  display: table;
  max-width: 100%;
}

.normal {
  word-break: normal;
}

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

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

.breakWord {
  word-break: break-word;
}
```

명세
--

| Specification |
| --- |
| CSS Text Module Level 3 # word-break-property |

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

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

같이 보기
-----

* `overflow-wrap`


border-right-style - CSS: Cascading Style Sheets

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

**`border-right-style`** CSS 속성은 요소 테두리의 오른쪽 스타일을 지정합니다.

시도해보기
-----

**참고:** 명세는 서로 다른 스타일의 테두리가 꼭지점에서 만날 때 어떻게 그려야 할지는 정의하고 있지 않습니다.

구문
--

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

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

`border-right-style` 속성은 `border-style` 속성에 사용할 수 있는 키워드 중 하나를 사용해 지정할 수 있습니다.

### 형식 구문
```

border-right-style =
  <line-style>

<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
/\* Define look of the table \*/
table {
  border-width: 2px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

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

#### 결과

명세
--

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

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

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

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

같이 보기
-----

* 테두리 스타일 관련 CSS 속성: `border-top-style`, `border-bottom-style`, `border-left-style`, `border-style`.
* 오른쪽 테두리 관련 CSS 속성: `border-right`, `border-right-color`, `border-right-width`.


flex-direction - CSS: Cascading Style Sheets

flex-direction
==============

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-direction`** CSS 속성은 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정합니다.

시도해보기
-----

`row`와 `row-reverse`의 경우 플렉스 컨테이너의 방향성에 영향을 받음을 참고하세요. 컨테이너의 `dir` 값이 `ltr`이라면 `row`는 왼쪽부터 시작하는 가로축을, `row-reverse`는 오른쪽부터 시작하는 가로축을 나타냅니다. 그러나 `dir` 값이 `rtl`이라면 `row`가 오른쪽부터 시작하는 가로축을, `row-reverse`가 왼쪽부터 시작하는 가로축을 나타냅니다.

구문
--

```css
/\* 한 줄의 글을 작성하는 방향대로 \*/
flex-direction: row;

/\* <row>처럼, 대신 역방향 \*/
flex-direction: row-reverse;

/\* 글 여러 줄이 쌓이는 방향대로 \*/
flex-direction: column;

/\* <column>처럼, 대신 역방향 \*/
flex-direction: column-reverse;

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

### 값

`row`

플렉스 컨테이너의 주축이 글의 작성 방향과 동일합니다. 주축의 시작점과 끝점이 콘텐츠 방향과 동일합니다.

`row-reverse`

`row`와 동일하게 동작하지만 시작점과 끝점이 반대에 위치합니다.

`column`

플렉스 컨테이너의 주축이 블록 축과 동일합니다. 주축의 시작점과 끝점이, 글 작성 모드의 이전 지점 및 이후 지점과 동일합니다.

`column-reverse`

`column`과 동일하게 동작하지만 시작점과 끝점이 반대에 위치합니다.

### 형식 구문
```

flex-direction =
  row             |
  row-reverse     |
  column          |
  column-reverse

```

예제
--

### HTML

```html
<h4>This is a Column-Reverse</h4>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
</div>
<h4>This is a Row-Reverse</h4>
<div id="content1">
  <div class="box1" style="background-color:red;">A</div>
  <div class="box1" style="background-color:lightblue;">B</div>
  <div class="box1" style="background-color:yellow;">C</div>
</div>
```

### CSS

```css
#content {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  -webkit-flex-direction: column-reverse;
  display: flex;
  flex-direction: column-reverse;
}

.box {
  width: 50px;
  height: 50px;
}

#content1 {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  -webkit-flex-direction: row-reverse;
  display: flex;
  flex-direction: row-reverse;
}

.box1 {
  width: 50px;
  height: 50px;
}
```

### 결과

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

`flex-direction` 속성에 `row-reverse` 또는 `column-reverse` 값을 사용하면 DOM 구조와 그 시각적 표현에 차이가 생깁니다. 이는 낮은 시력으로 스크린 리더 등 접근성 기술을 사용해 이동하는 사용자의 경험에 부정적인 영향을 줄 수 있습니다. 시각적(CSS) 순서가 중요하다고 해도, 스크린 리더 사용자는 그 순서가 어떻게 되는지 알 수 없습니다.

* Flexbox & the keyboard navigation disconnect — Tink
* Source Order Matters | Adrian Roselli
* MDN Understanding WCAG, Guideline 1.3 explanations (en-US)
* Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0
명세
--

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

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

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

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

같이 보기
-----

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


전체 선택자 - CSS: Cascading Style Sheets

전체 선택자
======

CSS **전체 선택자**(`*`)는 모든 형태의 모든 요소를 선택합니다.

```css
/\* Selects all elements \*/
\* {
  color: green;
}
```

CSS 3부터는 별표를 `네임스페이스`와 함께 사용할 수 있습니다.

* `ns|*` - 네임스페이스 ns 안의 모든 요소 선택
* `*|*` - 모든 요소 선택
* `|*` - 네임스페이스 없는 모든 요소 선택
구문
--
```

* { style properties }
```

단순 선택자에서 별표는 선택사항입니다. 즉 `*.warning`과 `.warning`은 같습니다.

예제
--

### CSS

```css
\* [lang^="en"] {
  color: green;
}

\*.warning {
  color: red;
}

\*#maincontent {
  border: 1px solid blue;
}

.floating {
  float: left;
}

/\* automatically clear the next sibling after a floating element \*/
.floating + \* {
  clear: left;
}
```

### HTML

```html
<p class="warning">
  <span lang="en-us">A green span</span> in a red paragraph.
</p>
<p id="maincontent" lang="en-gb">
  <span class="warning">A red span</span> in a green paragraph.
</p>
```

### 결과

명세
--

| Specification |
| --- |
| Selectors Level 4 # the-universal-selector |

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

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


CSS Lists - CSS: Cascading Style Sheets

CSS Lists
=========

**CSS Lists**는 리스트 배치 방법 및 스타일 지정 방법을 정의하는 CSS 모듈입니다.

참고서
---

### 속성

* `list-style-image` (en-US)
* `list-style-type` (en-US)
* `list-style-position` (en-US)
* `list-style` (en-US)
안내서
---

일관된 리스트 들여쓰기

서로 다른 브라우저 사이에 일관된 들여쓰기를 이루는 법을 설명합니다.

CSS 카운터 사용하기

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

명세서
---

| Specification |
| --- |
| CSS Lists and Counters Module Level 3  |