recursal/MDN huggingface dataset:
지정값
===

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

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

### HTML


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

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

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

### CSS


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

p {
  color: green;
}
```

### 결과

명세
--

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

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

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

* Learn more
* See full compatibility
* Report feedback
**`flex-flow`** CSS 속성은 `flex-direction`, `flex-wrap` 속성의 단축 속성입니다.

시도해보기
-----

구문
--


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

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

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

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

### 값

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

### 형식 구문
```

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

예제
--


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

명세
--

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

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

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

같이 보기
-----

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

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

참고서
---

### CSS 속성

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

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

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

| Specification |
| --- |
| CSS Paged Media Module Level 3  |
| CSS Fragmentation Module Level 3  |
overflow-wrap
=============

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

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

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

구문
--


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

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


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

### 값

`normal`

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

`break-word`

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

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

overflow-wrap =   
  normal      |  
  break-word  |  
  anywhere      
  
```

예시
--

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

### HTML


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

### CSS


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

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

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

.hyphens {
  hyphens: auto;
}
```

### Result

명세서
---

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

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

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

바로 보기
-----

* `word-break`
min-width
=========

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

시도해보기
-----

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

구문
--


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

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

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

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

### 값

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

#### 키워드 값

`auto`

최소 너비를 정하지 않음.

`max-content` 
Experimental

본질적인 선호 높이.

`min-content` 
Experimental

본질적인 최소 높이.

`fill-available`
Experimental

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

`fit-content` 
Experimental

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

### 형식 구문
```

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

예제
--


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

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

명세
--

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

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

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

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

같이 보기
-----

* 박스 모델 입문, `box-sizing`
* `width`, `max-width`
outline-width
=============

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

시도해보기
-----

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

구문
--


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

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

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


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

### 값

`<length>`

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

`thin`

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

`medium`

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

`thick`

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

형식 정의
-----

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

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

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

예제
--

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

#### HTML


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


#### CSS


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

#thin {
  outline-width: thin;
}

#medium {
  outline-width: medium;
}

#thick {
  outline-width: thick;
}

#twopixels {
  outline-width: 2px;
}

#oneex {
  outline-width: 1ex;
}

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


#### 결과

명세
--

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

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

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

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

시도해보기
-----

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

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

구문
--


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

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


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

### 값

`none`

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

`manual`

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

`auto`

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


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

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

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

U+2010 (HYPHEN)

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

U+00AD (SHY)

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


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

형식 정의
-----

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

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

hyphens =   
  none    |  
  manual  |  
  auto      
  
```

예제
--

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

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

#### HTML


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


#### CSS


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


#### 결과

명세
--

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

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

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

같이 보기
-----

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

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

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


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

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


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

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

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

### Values

``<time>``

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


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

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

### Formal syntax
```

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

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

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

명세
--

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

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

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

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

* Using CSS animations
* JavaScript `AnimationEvent` API
:fullscreen
===========

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

구문
--

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

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

예제
--

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

### HTML

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


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

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

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


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

### CSS

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


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


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


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

명세
--

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

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

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

같이 보기
-----

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

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

시도해보기
-----

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

구문
--


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

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

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

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

### 값

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

#### 키워드 값

`none`

최대 높이를 정하지 않음.

`max-content` 
Experimental

본질적인 선호 높이.

`min-content` 
Experimental

본질적인 최소 높이.

`fill-available` 
Experimental

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

`fit-content` 
Experimental

`max-content`와 동일.

### 형식 구문
```

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

예제
--


```css
table {
  max-height: 75%;
}

form {
  max-height: none;
}
```

접근성 참고사항
--------

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

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

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

|  |  |
| --- | --- |
| 초기값 | `none` |
| 적용대상 | all elements but non-replaced inline elements, table columns, and column groups |
| 상속 | no |
| Percentages | The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as `none`. |
| 계산 값 | the percentage as specified or the absolute length or `none` |
| Animation type | a length, percentage or calc(); |

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

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

같이 보기
-----

* 박스 모델 입문, `box-sizing`
* `height`, `min-height`
border-spacing
==============

CSS **`border-spacing`** 속성은 인접한 표 칸의 테두리 간격을 지정합니다. `border-collapse`가 `separate`여야 적용됩니다.

시도해보기
-----

`border-spacing` 값은 표 전체의 테두리에도 적용되므로, 표 테두리와 첫 번째 및 마지막 행/열에 속하는 칸 사이 거리는 (가로/세로) `border-spacing` 값과 표에 적용한 (상/우/하/좌) `padding` 값의 합이 됩니다.

**참고:** `border-spacing` 속성은 `<table>` (en-US)에서 이제 사용하지 않는 `cellspacing` 특성에 대응하지만, 추가로 두 번째 값을 지정해 가로와 세로 값을 각각 설정할 수 있다는 차이점이 있습니다.

구문
--
```

/* <length> */
border-spacing: 2px;

/* 가로 <length> | 세로 <length> */
border-spacing: 1cm 2em;

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


`border-spacing` 값은 하나 또는 두 개의 값을 사용해 지정합니다.

* **한 개**의 `<length>` 값을 지정하면 칸 사이의 가로와 세로 두 간격 모두 설정합니다.
* 두 개의 `<length>` 값을 지정하면, 첫 번째 값은 칸 사이의 가로 간격(각 열의 간격), 두 번째 값은 칸 사이의 세로 간격(각 행의 간격)을 설정합니다.
### 값

`<length>`

간격의 크기로 지정할 길이입니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `0` |
| 적용대상 | `table` and `inline-table` elements |
| 상속 | yes |
| 계산 값 | two absolute lengths |
| Animation type | discrete |

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

border-spacing =   
  <length>{1,2}    
  
```

예제
--

### 칸 간격과 안쪽 여백

다음 예제는 칸 사이에 세로 간격 `0.5em`과 가로 간격 `1em`을 배치합니다. 표의 테두리를 따라가면서, `padding` 값이 `border-spacing`과 어떻게 작용하는지 살펴보세요.

#### HTML


```html
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>
```


#### CSS


```css
table {
  border-spacing: 1em 0.5em;
  padding: 0 2em 1em 0;
  border: 1px solid orange;
}

td {
  width: 1.5em;
  height: 1.5em;
  background: #d2d2d2;
  text-align: center;
  vertical-align: middle;
}
```


#### 결과

명세
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # separated-borders |

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

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

같이 보기
-----

* `border-collapse`, `border-style`
* `border-spacing` 속성은 `<table>` (en-US) HTML 요소의 외관을 수정합니다.
:first-child
============

CSS **`:first-child`** 의사 클래스는 형제 요소 중 제일 첫 요소를 나타냅니다.


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


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

구문
--

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

### 기본 예제

#### HTML


```html
<div>
  <p>This text is selected!</p>
  <p>This text isn't selected.</p>
</div>

<div>
  <h2>This text isn't selected: it's not a `p`.</h2>
  <p>This text isn't selected.</p>
</div>
```


#### CSS


```css
p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}
```


#### 결과

### 목록 스타일링

#### HTML


```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>
```


#### CSS


```css
ul li {
  color: blue;
}

ul li:first-child {
  color: red;
  font-weight: bold;
}
```


#### 결과

명세
--

| Specification |
| --- |
| Selectors Level 4 # first-child-pseudo |

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

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

같이 보기
-----

* `:-moz-first-node` (en-US) 
비표준
* `:first-of-type`
* `:last-child`
* `:nth-child()`
margin-right
============

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

시도해보기
-----

구문
--


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

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

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


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

### 값

`<length>`

바깥 여백 크기의 고정 값.

`<percentage>`

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

`auto`

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

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

### 형식 구문
```

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

예제
--


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

명세
--

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ID 선택자
======

CSS **ID 선택자**는 요소의 `id` 특성 값을 비교하여, 완전히 동일한 `id`를 가진 요소를 선택합니다.


```css
/\* id="demo" 요소 선택 \*/
#demo {
  border: red 2px solid;
}
```

구문
--
```

#id_value { style properties }
```


위의 구문은 특성 선택자를 사용한 다음 구문과 동일합니다.
```

[id=id_value] { style properties }
```

예제
--

### CSS


```css
#identified {
  background-color: skyblue;
}
```

### HTML


```html
<div id="identified">특별한 ID를 가진 요소에요!</div>
<div>이건 그냥 div에요.</div>
```

### 결과

명세
--

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

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

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