recursal/MDN huggingface dataset:
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  |
@-규칙
====

**@-규칙**은 식별자(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 |
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
==========

**`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 **`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
==================

**`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`.
전체 선택자
======

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 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  |
animation-delay
===============

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

시도해보기
-----

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

구문
--


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

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

### 값

``<time>``

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

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

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


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

### 형식 구문
```

animation-delay =   
  <time>#    
  
```

예제
--

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

명세
--

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

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

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

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

같이 보기
-----

* CSS 애니메이션 사용하기
* JavaScript `AnimationEvent` API
초깃값
===

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

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

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

명세
--

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

같이 보기
-----

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

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

시도해보기
-----

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

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

구문
--


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

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

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

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


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

### 값

`<transform-function>`

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

`none`

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

### 형식 구문
```

transform =   
  none              |  
  <transform-list>    
  
<transform-list> =   
  <transform-function>+    
  
```


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

예제
--

### HTML


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

### CSS


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

### 결과

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

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

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

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

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

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

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

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

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

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

같이 보기
-----

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

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


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

구문
--
```

former_element + target_element { style properties }
```

예제
--

### CSS


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

### HTML


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

### 결과

명세
--

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

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

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

같이 보기
-----

* 일반 형제 결합자
margin-bottom
=============

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

시도해보기
-----

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

구문
--


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

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

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


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

### 값

`<length>`

바깥 여백 크기의 고정 값.

`<percentage>`

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

`auto`

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

### 형식 구문
```

margin-bottom =   
  <length-percentage>  |  
  auto                   
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

예제
--


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

명세
--

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

|  |  |
| --- | --- |
| 초기값 | `0` |
| 적용대상 | all elements, except elements with table `display` (en-US) types other than `table-caption`, `table` and `inline-table`. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| Percentages | refer to the width of the containing block |
| 계산 값 | the percentage as specified or the absolute length |
| Animation type | a length |

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

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