recursal/MDN huggingface dataset:
border-image-width
==================

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-width`** CSS 속성은 요소 테두리 이미지의 너비를 설정합니다.

시도해보기
-----

속성의 값이 `border-width`보다 크다면 테두리 이미지는 안쪽 여백(과 콘텐츠) 영역을 침범하여 그려집니다.

구문
--


```css
/\* 키워드 값 \*/
border-image-width: auto;

/\* <length> 값 \*/
border-image-width: 1rem;

/\* <percentage> 값 \*/
border-image-width: 25%;

/\* <number> 값 \*/
border-image-width: 3;

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

/\* 위 | 가로방향 | 아래 \*/
border-image-width: 5% 15% 10%;

/\* 위 | 오른쪽 | 아래 | 왼쪽 \*/
border-image-width: 5% 2em 10% auto;

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


`border-image-width` 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 음수는 유효하지 않습니다.

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

`<length-percentage>`

`<length>` 또는 `<percentage>`로 지정한 테두리 너비. 백분율 값은 왼쪽과 오른쪽 테두리에 대해선 테두리 이미지 영역의 너비, 위쪽과 아래쪽에 대해선 테두리 이미지 영역의 높이를 사용해 계산합니다.

`<number>`

테두리 너비로 `border-width`의 배수 사용

`auto`

방향과 일치하는 `border-image-slice`가 가진 원래 너비 또는 높이 사용. 이미지가 원래 크기를 가지고 있지 않으면 방향과 일치하는 `border-width` 크기를 사용합니다.

### 형식 구문
```

border-image-width =   
  [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

예제
--

다음 예제는 아래의 가로 90픽셀, 세로 90픽셀 이미지를 사용해 테두리 이미지를 생성합니다.

![](/ko/docs/Web/CSS/border-image-width/border.png)

원본 이미지의 각 원은 가로 30픽셀, 세로 30픽셀입니다.

### HTML


```html
<p>
  밤을 쉬이 봄이 무성할 릴케 듯합니다. 토끼, 써 이런 하나에 듯합니다. 이네들은
  나는 패, 듯합니다. 나는 보고, 딴은 토끼, 이런 멀리 듯합니다. 청춘이 가을로 둘
  버리었습니다. 걱정도 밤이 나는 애기 오는 언덕 경, 계십니다. 멀리 까닭이요,
  나는 별빛이 듯합니다. 소녀들의 벌레는 걱정도 까닭이요, 북간도에 쓸쓸함과 오면
  것은 어머님, 까닭입니다.
</p>
```

### CSS


```css
p {
  border: 20px solid;
  border-image: url("border.png") 30 round;
  border-image-width: 16px;
  padding: 40px;
}
```

### 결과

명세
--

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

|  |  |
| --- | --- |
| 초기값 | `1` |
| 적용대상 | all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| Percentages | refer to the width or height of the border image area |
| 계산 값 | 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.
CSS Basic User Interface
========================

**CSS Basic User Interface**는 사용자 인터페이스와 연관된 렌더링 및 기능의 동작 방식을 정의하는 CSS 모듈입니다.

참고서
---

### 속성

* `appearance` (en-US) 
Experimental
* `box-sizing`
* `cursor`
* `ime-mode` 
지원이 중단되었습니다
* `nav-down` 
Experimental
* `nav-left` 
Experimental
* `nav-right` 
Experimental
* `nav-up` 
Experimental
* `outline`
* `outline-width`
* `outline-style`
* `outline-color` (en-US)
* `outline-offset` (en-US)
* `resize` (en-US)
* `text-overflow` (en-US)
* `user-select`
안내서
---

`cursor` 속성값에 URL 사용하기

URL을 `cursor` 속성에 사용해 사용자 지정 커서를 생성하는 방법을 설명합니다.

명세
--

| Specification |
| --- |
| CSS Basic User Interface Module Level 4  |
flex-grow
=========

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-grow`** CSS property 는 `flex-item` 요소가, `flex-container` 요소 내부에서 할당 가능한 공간의 정도를 선언합니다. 만약 **형제 요소**로 렌더링 된 모든 `flex-item` 요소들이 동일한 `flex-grow` 값을 갖는다면, `flex-container` 내부에서 동일한 공간을 할당받습니다. 하지만 `flex-grow` 값으로 다른 소수값을 지정한다면, 그에 따라 다른 공간값을 나누어 할당받게 됩니다.

보통 `flex-grow`를 사용할땐, `flex-shrink`, `flex-basis` 속성을 함께 사용합니다. 그리고 일반적으로는 모든 값이 설정되었음을 보장하기 위하여 `flex` 속성을 이용해 **축약형**으로 사용합니다.

시도해보기
-----

Syntax
------


```css
/\* <number> values \*/
flex-grow: 3;
flex-grow: 0.6;

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


`flex-grow` 속성에 대한 값은 `<number>` 단독으로 표현합니다.

### Values

`<number>`

관련 링크를 참고하세요. `<number>`. 단, 음수값은 허용되지 않습니다.

### Formal syntax
```

flex-grow =   
  <number [0,∞]>    
  
```

Example
-------

### HTML


```html
<h4>This is a Flex-Grow</h4>
<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>
<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 class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
  <div class="box" style="background-color:brown;">F</div>
</div>
```

### CSS


```css
#content {
  display: flex;

  justify-content: space-around;
  flex-flow: row wrap;
  align-items: stretch;
}

.box {
  flex-grow: 1;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

.box1 {
  flex-grow: 2;
  border: 3px solid rgba(0, 0, 0, 0.2);
}
```

### Result

명세서
---

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

|  |  |
| --- | --- |
| 초기값 | `0` |
| 적용대상 | flex items, including in-flow pseudo-elements |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | a number |

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

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

See also
--------

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Controlling Ratios of flex items along the main axis (en-US)*
* `flex-grow` is weird. Or is it? article by Manuel Matuzovic on CSS-Tricks, which illustrates how flex-grow works
background-attachment
=====================

CSS **`background-attachment`** 속성은 배경 이미지를 뷰포트 내에서 고정할지, 아니면 자신의 컨테이닝 블록과 함께 스크롤할지 지정합니다.

시도해보기
-----

구문
--


```css
/\* 키워드 값 \*/
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

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


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

### 값

`fixed`

배경을 뷰포트에 대해 고정합니다. 요소에 스크롤이 존재해도 배경은 함께 스크롤되지 않습니다. 이 값은 `background-clip: text`와 호환되지 않습니다.

`local`

배경을 요소 콘텐츠에 대해 고정합니다. 요소에 스크롤이 존재하면 배경은 콘텐츠와 함께 스크롤됩니다. 배경 페인트 영역과 배경 위치 영역은 테두리 틀이 아닌 스크롤 가능 영역을 기준점으로 삼습니다.

`scroll`

배경을 요소 자체에 대해 고정합니다. 요소에 스크롤이 존재해도 배경은 함께 스크롤되지 않습니다. 즉 요소의 테두리에 배경 이미지를 부착한 것과 같은 효과입니다.

형식 정의
-----

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

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

background-attachment =   
  <attachment>#    
  
<attachment> =   
  scroll  |  
  fixed   |  
  local     
  
```

예제
--

### 간단한 예제

#### HTML


```html
<p>
  There were doors all round the hall, but they were all locked; and when Alice
  had been all the way down one side and up the other, trying every door, she
  walked sadly down the middle, wondering how she was ever to get out again.
</p>
```


#### CSS


```css
p {
  background-image: url("starsolid.gif");
  background-attachment: fixed;
}
```


#### 결과

### 다중 배경 이미지

`background-attachment`는 다중 배경 이미지를 지원합니다. 각 배경에 대해 `<attachment>`를 지정하려면 쉼표로 구분하여 다수의 값을 제공하세요. 주어진 순서대로 배경에 적용합니다.

#### HTML


```html
<p>
  There were doors all round the hall, but they were all locked; and when Alice
  had been all the way down one side and up the other, trying every door, she
  walked sadly down the middle, wondering how she was ever to get out again.
  Suddenly she came upon a little three-legged table, all made of solid glass;
  there was nothing on it except a tiny golden key, and Alice's first thought
  was that it might belong to one of the doors of the hall; but, alas! either
  the locks were too large, or the key was too small, but at any rate it would
  not open any of them. However, on the second time round, she came upon a low
  curtain she had not noticed before, and behind it was a little door about
  fifteen inches high: she tried the little golden key in the lock, and to her
  great delight it fitted!
</p>
```


#### CSS


```css
p {
  background-image: url("starsolid.gif"), url("startransparent.gif");
  background-attachment: fixed, scroll;
  background-repeat: no-repeat, repeat-y;
}
```


#### 결과

명세
--

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

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

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

같이 보기
-----

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

**CSS Images**는 사용할 수 있는 이미지의 유형(`<image>` 자료형, 포함하는 URL, 그레이디언트 및 그 외의 다른 유형 이미지), 이미지의 크기 조정 방법, 그리고 이미지 및 다른 대체 콘텐츠가 각기 다른 레이아웃 모델과 상호작용하는 법을 정의하는 CSS 모듈입니다.

참고서
---

### 속성

* `image-orientation` (en-US)
* `image-rendering`
* `image-resolution` (en-US)
* `object-fit`
* `object-position`
### 함수

* `linear-gradient()` (en-US)
* `radial-gradient()` (en-US)
* `repeating-linear-gradient()` (en-US)
* `repeating-radial-gradient()` (en-US)
* `conic-gradient()` (en-US)
* `repeating-conic-gradient()` (en-US)
* `url()`
* `element()` (en-US)
* `image()` (en-US)
* `cross-fade()` (en-US)
### 자료형

* `<image>`
* `<uri>()` (en-US)
안내서
---

CSS 그레이디언트 사용하기 (en-US)

CSS 이미지의 특정 유형인 "그레이디언트"를 소개하고, 그 사용법을 보입니다.

CSS에서 이미지 스프라이트 구현하기

다수의 이미지를 하나의 문서로 합쳐서 다운로드 요청을 절약하고 페이지 속도를 향상하는 방법을 소개합니다.

명세
--

| Specification |
| --- |
| CSS Images Module Level 3  |
| Compatibility Standard # css-%3Cimage%3E-type |
| CSS Values and Units Module Level 4 # urls |
:active
=======

**`:active`** CSS 의사 클래스는 사용자가 활성화한 요소(버튼 등)를 나타냅니다. 마우스를 사용하는 경우, "활성"이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미합니다.


```css
/\* 활성화된 모든 <a> 태그를 선택 \*/
a:active {
  color: red;
}
```


`:active` 의사 클래스는 대개 `<a>`, `<button>`과 함께 사용합니다. 다른 흔한 대상으로는 활성화된 요소를 포함한 다른 요소와, 연결된 `<label>`로 선택한 입력 폼 요소 등이 있습니다.

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

**참고:** CSS3 명세에 따르면, 다수의 버튼을 가진 마우스라도 `:active` 의사 클래스는 주 버튼에만 적용돼야 합니다. 오른손잡이 마우스 기준, 주 버튼은 보통 맨 왼쪽 버튼입니다.

구문
--

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

### 활성화 링크

#### HTML


```html
<p>
  링크를 포함하는 문단입니다.
  <a href="#">이 링크는 클릭하는 동안 색이 빨갛게 됩니다.</a>
  이 문단은 클릭하는 동안 배경색이 회색이 됩니다.
</p>
```


#### CSS


```css
a:link {
  color: blue;
} /\* 방문하지 않은 링크 \*/
a:visited {
  color: purple;
} /\* 방문한 링크 \*/
a:hover {
  background: yellow;
} /\* 마우스를 올린 링크 \*/
a:active {
  color: red;
} /\* 활성화한 링크 \*/

p:active {
  background: #eee;
} /\* 활성화한 문단 \*/
```


#### 결과

### 활성화 폼 요소

#### HTML


```html
<form>
  <label for="my-button">내 버튼: </label>
  <button id="my-button" type="button">제 라벨이나 저를 클릭해보세요!</button>
</form>
```


#### CSS


```css
form :active {
  color: red;
}

form button {
  background: white;
}
```


#### 결과

명세
--

| Specification |
| --- |
| HTML Standard # selector-active |
| Selectors Level 4 # the-active-pseudo |

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

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

같이 보기
-----

* 링크 관련 의사 클래스: `:link`, `:visited`, `:hover`.
CSS Text Decoration
===================

**CSS Text Decoration**은 밑줄, 텍스트 그림자 및 강조 표시 등 텍스트 장식에 관련된 기능을 정의하는 CSS 모듈입니다.

참고서
---

### 속성

* `letter-spacing`
* `text-align`
* `text-decoration`
* `text-decoration-color` (en-US)
* `text-decoration-line` (en-US)
* `text-decoration-style` (en-US)
* `text-emphasis` (en-US)
* `text-emphasis-color` (en-US)
* `text-emphasis-position` (en-US)
* `text-emphasis-style` (en-US)
* `text-indent` (en-US)
* `text-rendering` (en-US)
* `text-shadow` (en-US)
* `text-transform` (en-US)
* `white-space`
* `word-spacing`
명세서
---

| Specification |
| --- |
| CSS Text Decoration Module Level 3  |
:hover
======

**`:hover`** CSS 의사 클래스는 사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 선택합니다. 보통 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택됩니다.


```css
/\* "호버링" 중인 <a> 요소 선택 \*/
a:hover {
  color: orange;
}
```


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

**참고:** `:hover` 의사 클래스는 터치스크린에서 문제가 많습니다. 브라우저에 따라서 :hover를 절대 활성화하지 않을 수도 있지만, 요소를 터치한 직후에만, 아니면 터치한 이후 다른 요소를 다시 터치하기 전까지 계속 활성화할 수도 있습니다. 웹 개발자는 호버링이 제한적이거나 아예 불가능한 장치에서도 콘텐츠에 접근할 수 있도록 개발해야 합니다.

구문
--

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

### HTML


```html
<a href="#">이 링크를 가리켜보세요.</a>
```

### CSS


```css
a {
  background-color: powderblue;
  transition: background-color 0.5s;
}

a:hover {
  background-color: gold;
}
```

### 결과

명세
--

| Specification |
| --- |
| HTML Standard # selector-hover |
| Selectors Level 4 # the-hover-pseudo |

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

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

같이 보기
-----

* Chromium 버그 #370155: Don't make `:hover` sticky on tap on sites that set a mobile viewport
* Chromium 버그 #306581: Immediately show hover and active states on touch when page isn't scrollable.
:root
=====

CSS **`:root`** 의사 클래스는 문서 트리의 루트 요소를 선택합니다 HTML의 루트 요소는 `<html>` 요소이므로, `:root`의 명시도가 더 높다는 점을 제외하면 `html` 선택자와 똑같습니다.


```css
/\* 문서의 루트 요소 선택
 HTML에서는 <html> \*/
:root {
  background: yellow;
}
```

구문
--

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

### 전역 CSS 변수 선언하기

`:root`는 전역 CSS 변수 선언에 유용하게 사용할 수 있습니다.


```css
:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}
```

명세
--

| Specification |
| --- |
| Selectors Level 4 # root-pseudo |

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

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

같이 보기
-----

* `<html>`
* `Document.rootElement` (en-US)
* `Node.getRootNode()` (en-US)
* `Node.rootNode` (en-US)
* `Element.shadowRoot` (en-US)
* `ShadowRoot` (en-US)
font-synthesis
==============

CSS **`font-synthesis`** 속성은 브라우저가 굵은 글꼴과 이탤릭 글꼴을 합성하는 것을 허용할지 설정합니다.

시도해보기
-----

구문
--

`font-synthesis`는 다음 방법 중 하나를 사용해 지정합니다.

* `none` 키워드.
* `weight` 또는 `style` 키워드.
* `weight`와 `style` 키워드.
### 값

`none`

굵은 글꼴과 이탤릭 글꼴의 합성을 금지합니다.

`weight`

필요한 경우 굵은 글꼴을 합성할 수 있습니다.

`style`

필요한 경우 이탤릭 글꼴을 합성할 수 있습니다.

설명
--

대부분의 표준 서양 글꼴은 이탤릭과 굵은 글꼴을 포함하고 있으나 상용 글꼴은 그렇지 않은 경우도 많습니다. 한국, 중국, 일본을 포함한 비 알파벳 문화권의 문자 체계는 보통 이런 변형을 포함하지 않으며 브라우저의 글꼴 합성으로 인해 가독성이 떨어질 수 있습니다. 이 두 가지 경우에 대해 `font-synthesis`를 사용해 기본 글꼴 합성을 끄는 것이 좋을 수도 있습니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `weight style small-caps position`  |
| 적용대상 | all elements and text. It also applies to `::first-letter` (en-US) and `::first-line` (en-US). |
| 상속 | yes |
| 계산 값 | as specified |
| Animation type | discrete |

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

font-synthesis =   
  none                                           |  
  [ weight || style || small-caps || position ]    
  
```

예제
--

### 글꼴 합성 비활성화

#### HTML


```html
<em class="syn">절 합성하세요! Synthesize!</em>
<br />
<em class="no-syn">절 합성하지 마세요! Synthesize!</em>
```


#### CSS


```css
em {
  font-weight: bold;
}
.syn {
  font-synthesis: style weight;
}
.no-syn {
  font-synthesis: none;
}
```


#### 결과

명세
--

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-synthesis |

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

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

같이 보기
-----

* `font-style` (en-US)
* `font-weight`
상속
==

MDN 내 각 CSS 속성(property) 정의 페이지의 요약절은 그 속성이 기본(default)으로 상속되는지("Inherited: Yes") 혹은 상속되지 않는지("Inherited: no") 쓰여 있습니다. 이 상속 여부는 요소의 속성에 어떤 값이 지정되지 않을 때 일어나는 일을 제어합니다.

상속되는 속성
-------

요소의 **상속되는 속성**에 값이 지정되지 않은 경우, 요소는 부모 요소의 해당 속성의 계산값을 얻습니다. 오직 문서의 루트 요소만 속성의 요약절에 주어진 초기값을 얻습니다.

상속되는 속성의 대표적인 예는 `color` 속성입니다. 주어진 스타일 규칙:


```css
p {
  color: green;
}
```


과 마크업:


```html
<p>This paragraph has <em>emphasized text</em> in it.</p>
```


`em` 요소는 `p` 요소로부터 `color` 속성값을 상속했기 때문에, "emphasized text"는 녹색으로 보입니다. 속성의 초기값(페이지가 어떤 색을 지정하지 않았을 때 루트 요소에 사용된 색)을 얻지 *않*습니다.

상속되지 않는 속성
----------

요소의 **상속되지 않는 속성**(Mozilla 코드에서는 가끔 **reset 속성**으로 불림)에 어떤 값이 지정되지 않는 경우, 요소는 그 속성의 초기값을 얻습니다(속성의 요약절에 지정된 대로).

상속되지 않는 속성의 대표적인 예는 `border` 속성입니다. 주어진 스타일 규칙:


```css
p {
  border: medium solid;
}
```


과 마크업:


```html
<p>This paragraph has <em>emphasized text</em> in it.</p>
```


"emphasized text"는 테두리가 없습니다(`border-style`의 초기값이 `none`이기 때문에).

참고
--

`inherit` 키워드는 작성자가 명시적으로 상속을 지정할 수 있게 합니다. 상속되는 속성과 상속되지 않는 속성 모두에 작동합니다.

같이 보기
-----

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

CSS **`word-spacing`** 속성은 단어와 단어 사이, 태그와 태그 사이의 거리를 설정합니다.

시도해보기
-----

구문
--


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

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

/\* <percentage> 값 \*/
word-spacing: 50%;
word-spacing: 200%;

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

### 값

`normal`

현재 글씨체와 브라우저가 결정한 일반적인 단어 간격을 사용합니다.

`<length>`

지정한 길이를 기본 단어 간격에 더합니다.

`<percentage>`

영향 받는 문자 최대 폭의 백분율만큼을 기본 단어 간격에 더합니다.

예제
--

### HTML


```html
<div id="mozdiv1">다양한 단어...</div>
<div id="mozdiv2">...더 많은 단어</div>
```

### CSS


```css
#mozdiv1 {
  word-spacing: 15px;
}

#mozdiv2 {
  word-spacing: 5em;
}
```

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

큰 절댓값의 `word-spacing`을 적용한 문장은 거의 읽기 힘들어집니다. 큰 양의 값을 적용하면 단어의 사이가 너무나도 멀어져서 문장처럼 보이지 않습니다. 반면 지나친 음의 값을 적용하면 단어끼리 서로 겹쳐서 어느 단어의 시작과 끝을 알아차리지 못하게 됩니다.

글씨체마다 문자 너비가 다르므로, 가독성을 확보하는 수준의 `word-spacing` 역시 상황에 맞춰 결정해야 합니다. 모든 글씨체에서 가독성을 유지하는 단 하나의 값은 존재하지 않습니다.

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

|  |  |
| --- | --- |
| 초기값 | `normal` |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US) and `::first-line` (en-US). |
| 상속 | yes |
| Percentages | refer to the width of the affected glyph |
| 계산 값 | absolute `length` |
| Animation type | a length |

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

word-spacing =   
  normal    |  
  <length>    
  
```

명세
--

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

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

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

같이 보기
-----

* `letter-spacing`
initial
=======

CSS **`initial`** 키워드는 속성의 초깃값(기본값)을 요소에 적용합니다. 초깃값은 브라우저가 지정합니다. 모든 속성에서 사용할 수 있으며, `all`에 지정할 경우 모든 CSS 속성을 초깃값으로 재설정합니다.

**참고:** 상속 속성의 초깃값은 예상치 못한 값일 수도 있습니다. 따라서, `inherit`, `unset`, `revert` 키워드의 사용을 대신 고려해보세요.

예제
--

#### HTML


```html
<p>
  <span>This text is red.</span>
  <em>This text is in the initial color (typically black).</em>
  <span>This is red again.</span>
</p>
```


#### CSS


```css
p {
  color: red;
}

em {
  color: initial;
}
```

명세
--

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

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

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

참조
--

* `inherit`, `unset`, `revert`, `all`
border-image-repeat
===================

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-repeat`** CSS 속성은 원본 이미지의 모서리 영역을 요소의 테두리 이미지 크기에 맞춰 조절할 때 사용할 방법을 지정합니다.

시도해보기
-----

구문
--


```css
/\* 키워드 값 \*/
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;

/\* 세로방향 | 가로방향 \*/
border-image-repeat: round stretch;

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


`border-image-repeat` 속성은 한 개 또는 두 개의 값을 사용해 지정할 수 있습니다.

* **한 개의 값**을 지정하면 **모든 네 면**이 같은 방식을 사용합니다.
* **두 개의 값**을 지정하면, 첫 번째 값은 **위와 아래**, 두 번째 값은 **왼쪽과 오른쪽 면**의 방식을 지정합니다.
### 값

`stretch`

원본 이미지의 모서리 영역을 늘리거나 줄여 간격을 채웁니다.

`repeat`

원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 마지막 이미지는 잘릴 수 있습니다.

`round`

원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 늘어나거나 줄어들 수 있습니다.

`space`

원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 각 타일에 균등하게 공백을 배치합니다.

### 형식 구문
```

border-image-repeat =   
  [ stretch | repeat | round | space ]{1,2}    
  
```

예제
--

### CSS


```css
#bordered {
  width: 12rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 40px solid;
  border-image: url("border.png") 27;
  border-image-repeat: stretch; /\* 라이브 샘플에서 바꿀 수 있습니다 \*/
}
```


```
<div id="bordered">저한테 다양한 테두리 반복 속성을 써보세요!</div>

<select id="repetition">
  <option value="stretch">stretch</option>
  <option value="repeat">repeat</option>
  <option value="round">round</option>
  <option value="space">space</option>
  <option value="stretch repeat">stretch repeat</option>
  <option value="space round">space round</option>
</select>
```


```
var repetition = document.getElementById("repetition");
repetition.addEventListener("change", function (evt) {
  document.getElementById("bordered").style.borderImageRepeat =
    evt.target.value;
});
```

명세
--

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

|  |  |
| --- | --- |
| 초기값 | `stretch` |
| 적용대상 | all elements, except internal table elements when `border-collapse` is `collapse`. 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 속성의 **계산값**은 상속 과정에서 부모가 자식에게 물려주는 값을 말합니다. 계산값은 지정값으로부터 다음 방법을 통해 구합니다.

* 특수값인 `inherit`, `initial`, `unset`, `revert`를 처리하여.
* 각 속성 정의 표의 "Computed value" 항목이 가리키는 연산을 수행하여.

계산값을 구하기 위한 연산은 보통 상댓값(`em` 단위나 백분율 등)을 절댓값으로 변환하는 작업을 수반합니다. 예컨대 요소가 `font-size: 1px`과 `padding-top: 2em`을 가진다면, `padding-top`의 계산값은 글씨 크기의 두 배인 `32px`입니다.

그러나, `width`, `margin-right`, `text-index`, `top`과 같이, 백분율의 값을 알아내려면 레이아웃부터 계산해야 하는 속성의 백분율 지정값은 백분율 계산값이 됩니다. 추가로, `line-height` 속성의 단위 없는 값도 그대로 계산값이 됩니다. 이렇게 남겨진 상대적 계산값은 사용값을 구할 때 절댓값이 됩니다.

**참고:**`getComputedStyle()` DOM API는 결정값을 반환합니다. 결정값은 속성에 따라 계산값일 수도, 사용값일 수도 있습니다.

명세
--

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

같이 보기
-----

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