recursal/MDN huggingface dataset:
background-origin
=================

CSS **`background-origin`** 속성은 배경의 원점을 테두리 시작점, 테두리 내부, 안쪽 여백 내부 중 하나로 지정합니다.

시도해보기
-----

`background-attachment`가 `fixed`인 경우 `background-origin`은 무시됩니다.

구문
--


```css
/\* 키워드 값 \*/
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

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


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

### 값

`border-box`

배경을 테두리 박스에 상대적으로 배치합니다.

`padding-box`

배경을 안쪽 여백 박스에 상대적으로 배치합니다.

`content-box`

배경을 콘텐츠 박스에 상대적으로 배치합니다.

형식 정의
-----

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

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

background-origin =   
  <visual-box>#    
  
<visual-box> =   
  content-box  |  
  padding-box  |  
  border-box     
  
```

예제
--

### 배경 원점 설정하기


```css
.example {
  border: 10px double;
  padding: 10px;
  background: url("image.jpg");
  background-position: center left;
  background-origin: content-box;
}
```



```css
#example2 {
  border: 4px solid black;
  padding: 10px;
  background: url("image.gif");
  background-repeat: no-repeat;
  background-origin: border-box;
}
```



```css
div {
  background-image: url("logo.jpg"), url("mainback.png"); /\* Applies two images to the background \*/
  background-position:
    top right,
    0px 0px;
  background-origin: content-box, padding-box;
}
```

명세
--

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

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

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

같이 보기
-----

* `background-clip`
-moz-image-region
=================

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

XUL 요소와 가상요소들에 대하여 `list-style-image` (en-US) 속성을 사용할때 이 속성은 전체이미지에서 사용되는 부분의 령역을 지정합니다. 이것은 요소들이 성능을 향상시키기 위해 같은 이미지의 서로다른 부분을 사용할수 있게 합니다.


```css
/\* Keyword value \*/
-moz-image-region: auto;

/\* <shape> value \*/
-moz-image-region: rect(0, 8px, 4px, 4px);

/\* Global values \*/
-moz-image-region: inherit;
-moz-image-region: initial;
-moz-image-region: unset;
```


문법은 `clip` (en-US)속성과 류사합니다. 4개의 값은 모두 이미지의 외쪽 웃모서리로부터 상대적입니다.

|  |  |
| --- | --- |
| 초기값 | `auto` |
| 적용대상 | XUL `image` elements and `:-moz-tree-image`, `:-moz-tree-twisty`, and `:-moz-tree-checkbox` pseudo-elements. **Note:** `-moz-image-region` only works with `image` elements where the icon is specified using `list-style-image` (en-US). It will not work with XUL `<image src="url" />`. |
| 상속 | yes |
| 계산 값 | as specified |
| Animation type | discrete |

구문
--
```

-moz-image-region: rect(top, right, bottom, left);
```

### 형식 구문

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

#example-button {
  /* display only the 4x4 area from the top left of this image */
  list-style-image: url("chrome://example/skin/example.png");
  -moz-image-region: rect(0px, 4px, 4px, 0px);
}
#example-button:hover {
  /* use the 4x4 area to the right of the first for the hovered button */
  -moz-image-region: rect(0px, 8px, 4px, 4px);
}
```

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

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

**`:link`** CSS 의사 클래스는 아직 방문하지 않은 요소를 나타냅니다. `href` 속성을 가진 `<a>`, `<area>`, `<link>` 중 방문하지 않은 모든 요소를 선택합니다.


```css
/\* 아직 방문하지 않은 <a> 요소를 선택 \*/
a:link {
  color: red;
}
```


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

**참고:** 방문 여부에 상관하지 않고 요소를 선택하려면 `:any-link` (en-US)를 사용하세요.

구문
--

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

대부분의 브라우저는 방문한 링크에 기본값으로 특별한 `color` 값을 지정합니다. 따라서 다음 예제의 링크를 방문한 적이 없을 때만 글자 색이 적용된 모습을 볼 수 있고, 방문한 적이 있으면 브라우저 기록을 지워서 확인할 수 있습니다. 그러나 방문한 링크의 배경색은 보통 브라우저가 지정하지 않으므로 `background-color`는 계속 확인할 수 있습니다.

### HTML


```html
<a href="#ordinary-target">평범한 링크입니다.</a><br />
<a href="">이 링크는 이미 방문했습니다.</a><br />
<a>플레이스홀더 링크 (스타일 적용 안됨)</a>
```

### CSS


```css
a:link {
  background-color: gold;
  color: green;
}
```

### 결과

명세
--

| Specification |
| --- |
| HTML Standard # selector-link |
| Selectors Level 4 # link |

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

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

같이 보기
-----

* 링크 관련 의사 클래스: `:visited`, `:hover`, `:active`
padding-right
=============

**`padding-right`** CSS 속성은 요소의 오른쪽에 안쪽 여백 영역을 설정합니다.

시도해보기
-----

요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다.

**참고:** `padding` 속성을 사용하면 하나의 선언으로 네 방향 여백을 모두 설정할 수 있습니다.

구문
--


```css
/\* <length> 값 \*/
padding-right: 0.5em;
padding-right: 0;
padding-right: 2cm;

/\* <percentage> 값 \*/
padding-right: 10%;

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


`padding-right` 속성의 값은 아래 목록 중 하나로 지정할 수 있습니다. 바깥 여백margin과 다르게, 음수 값은 사용할 수 없습니다.

### 값

`<length>`

여백의 크기로 고정값 사용.

`<percentage>`

여백의 크기로 컨테이닝 블록 너비의 백분율 사용.

### 형식 구문
```

padding-right =   
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

예제
--


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

명세
--

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

|  |  |
| --- | --- |
| 초기값 | `0` |
| 적용대상 | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to `::first-letter` (en-US) and `::first-line` (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.

같이 보기
-----

* CSS 기본 박스 모델 입문
* `padding`
Filter Effects
==============

**Filter Effects**는 요소의 렌더링을 문서에 표시하기 전에 전처리하는 방법을 정의하는 CSS 모듈입니다.

참고서
---

### 속성

* `backdrop-filter`
* `filter`
### 자료형

* `<filter-function>`
명세
--

| Specification |
| --- |
| Filter Effects Module Level 2  |
| Filter Effects Module Level 1  |
CSS Multi-column Layout
=======================

**CSS Multi-column Layout**은 다단 레이아웃을 정의하는 CSS 모듈입니다. 레이아웃에서 단의 숫자와 콘텐츠가 하나의 단에서 다른 단으로 흐르는 방식, 단 사이의 간격, 구분선과 구분선의 모양 등의 지원을 포함하고 있습니다.

참고
--

### CSS 속성

* `break-after` (en-US)
* `break-before` (en-US)
* `break-inside` (en-US)
* `column-count` (en-US)
* `column-fill` (en-US)
* `column-gap` (en-US)
* `column-rule` (en-US)
* `column-rule-color` (en-US)
* `column-rule-style` (en-US)
* `column-rule-width` (en-US)
* `column-span` (en-US)
* `column-width` (en-US)
* `columns` (en-US)
### 관련 CSS Fragmentation 속성

* `break-after` (en-US)
* `break-before` (en-US)
* `break-inside` (en-US)
* `orphans` (en-US)
* `widows` (en-US)
안내서
---

다단 레이아웃 기초 개념 (en-US)

다단 레이아웃 명세를 훑어봅니다.

단 꾸미기 (en-US)

구분선과 단 사이 간격을 조절합니다.

폭과 균형 (en-US)

요소가 모든 단에 걸쳐있도록 만들고, 한 단이 채워지는 방식을 조정합니다.

다단에서 오버플로 다루기 (en-US)

어떤 요소가 자신의 단을 넘쳤을 때 일어나는 일과, 컨테이너 너비에 맞추기에는 너무 많은 단이 들어있을 때 발생하는 일을 배웁니다.

다단에서 콘텐츠 끊기 (en-US)

CSS Fragmentation 명세의 소개와 함께 단 콘텐츠를 끊는 법을 배웁니다.

명세
--

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1  |

같이 보기
-----

* CSS Flexible Box Layout (CSS 플렉스박스)
* CSS Grid Layout
결정값
===

CSS 속성의 **결정값**은 `getComputedStyle()`이 반환하는 값입니다.

속성 대부분은 결정값이 계산값이지만, `width`와 `height`를 포함한 기존 속성은 사용값입니다. 속성 별 자세한 사항은 아래의 명세를 참고하세요.

명세
--

| Specification |
| --- |
| CSS Object Model (CSSOM) # resolved-values |

같이 보기
-----

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

CSS **`object-fit`** 속성은 `<img>`나 `<video>` 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정합니다.

`object-position` 속성을 사용해 대체 요소 콘텐츠가 콘텐츠 박스 내에 위치할 지점을 바꿀 수 있습니다.

시도해보기
-----

구문
--

`object-fit` 속성은 다음 목록 중 하나의 키워드를 사용해 지정합니다.

### 값

`contain`

대체 콘텐츠의 가로세로비를 유지하면서, 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절합니다. 콘텐츠가 콘텐츠 박스 크기에 맞도록 하면서도 가로세로비를 유지하게 되므로, 서로의 가로세로비가 일치하지 않으면 객체가 "레터박스"처럼 됩니다.

`cover`

대체 콘텐츠의 가로세로비를 유지하면서, 요소 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 객체 일부가 잘려나갑니다.

`fill`

요소 콘텐츠 박스 크기에 맞춰 대체 콘텐츠의 크기를 조절합니다. 콘텐츠가 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 콘텐츠가 늘어납니다.

`none`

대체 콘텐츠의 크기를 조절하지 않습니다.

`scale-down`

`none`과 `contain` 중 대체 콘텐츠의 크기가 더 작아지는 값을 선택합니다.

형식 정의
-----

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

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

object-fit =   
  fill        |  
  contain     |  
  cover       |  
  none        |  
  scale-down    
  
```

예제
--

### 이미지에 `object-fit` 지정

#### HTML


```html
<section>
  <h2>object-fit: fill</h2>
  <img class="fill" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="fill narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: contain</h2>
  <img class="contain" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="contain narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: cover</h2>
  <img class="cover" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="cover narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: none</h2>
  <img class="none" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="none narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: scale-down</h2>
  <img class="scale-down" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="scale-down narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />
</section>
```


#### CSS


```css
h2 {
  font-family:
    Courier New,
    monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 940px;
}

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
}

.narrow {
  width: 100px;
  height: 150px;
  margin-top: 10px;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}
```


#### 결과

명세
--

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

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

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

같이 보기
-----

* 이미지 관련 다른 CSS 속성: `object-position`, `image-orientation` (en-US), `image-rendering`, `image-resolution` (en-US).
* `background-size` (en-US)
line-break
==========

CSS **`line-break`** 속성은 한중일(CJK) 3개국어의 텍스트 줄을 어디서 바꿀지 지정합니다.


```css
/\* 키워드 값 \*/
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

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

구문
--

### 값

`auto`

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

`loose`

가장 자유로운 줄 바꿈 규칙을 사용합니다. 보통 신문 등 짧은 줄에서 사용합니다.

`normal`

가장 흔한 줄 바꿈 규칙을 사용합니다.

`strict`

가장 엄격한 줄 바꿈 규칙을 사용합니다.

`anywhere`

모든 타이포그래피 글자 단위 주위에서 줄을 바꿀 수 있습니다. 줄 바꿈 위치는 모든 문장 부호, 공백, 단어 중간을 포함하며 GL, WJ, ZWJ 문자 클래스가 나타내는 줄 바꿈 제한 및 `word-break`가 요구하는 규칙 모두 무시할 수 있습니다. 붙임표는 사용하지 않습니다.

형식 정의
-----

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

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

line-break =   
  auto      |  
  loose     |  
  normal    |  
  strict    |  
  anywhere    
  
```

예제
--

### 줄 바꿈 지정하기

줄 바꿈이 "々", "ぁ", "。"의 주위에서 어떻게 발생하는지 살펴보세요.

#### HTML


```html
<div lang="ja">
  <p class="wrapbox auto">
    auto:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox loose">
    loose:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox normal">
    normal:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox strict">
    strict:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox anywhere">
    anywhere:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
</div>
```


#### CSS


```css
.wrapbox {
  width: 10em;
  margin: 0.5em;
  white-space: normal;
  vertical-align: top;
  display: inline-block;
}
.auto {
  line-break: auto;
}
.loose {
  line-break: loose;
}
.normal {
  line-break: normal;
}
.strict {
  line-break: strict;
}
.anywhere {
  line-break: anywhere;
}
```


#### 결과

명세
--

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

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

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

**CSS Shapes**는 CSS에서 사용하기 위한 기하학적 도형을 설명한다. 레벌1 명세에 의하면 떠있는 요소에 CSS Shapes를 적용할 수 있다. 명세의 정의에 의하면 떠있는 요소의 모양을 정의 하거나 요소 상자의 사각형을 따르는 대신 테두리 선을 따라 감싸지도록 하는 방법 등 다양한 방법을 정의하고 있다.

기본 예제
-----

아래 예제는 왼쪽에 떠있는 이미지에 shape-outside속성에 circle(50%) 값이 적용된 모습을 볼수 있다. 이런식으로 원모양을 만들면 도옇의 둘래를 따라 주변 텍스트가 흘러내리는것을 볼수 있다. 둘러싼 텍스트가 도형의 모양을 따라 길이가 변하게 되었다.

참고서
---

### 속성

* `shape-outside` (en-US)
* `shape-margin` (en-US)
* `shape-image-threshold` (en-US)
### 자료형

* `<basic-shape>` (en-US)
안내서
---

* Overview of CSS Shapes (en-US)
* Shapes from Box Values (en-US)
* Basic Shapes (en-US)
* Shapes from Images (en-US)
* Edit Shape Paths in CSS — Firefox Developer Tools (en-US)
외부 자료
-----

* A list of CSS Shapes resources
* CSS Shapes 101
* Creating non-rectangular layouts with CSS Shapes
* How To Use CSS Shapes In Your Web Design
* How To Get Started With CSS Shapes
* What I Learned In One Weekend With CSS Shapes
* CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components
명세
--

| Specification |
| --- |
| CSS Shapes Module Level 1  |
:first
======

CSS **`:first`** 의사 클래스는 `@page` @-규칙과 함께 사용되며, 출력 시의 첫 페이지를 나타냅니다.


```css
/\* Selects the first page when printing \*/
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}
```


**참고:** first 의사 클래스 안에서는 CSS 속성의 사용이 제한됩니다. 바깥 여백, `orphans` (en-US), `widows` (en-US)와 페이지 넘김만 바꿀 수 있으며, 여백 지정 시 절대길이 단위만 사용할 수 있습니다. 다른 모든 속성은 무시합니다.

구문
--

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

### HTML


```html
<p>First Page.</p>
<p>Second Page.</p>
<button>출력!</button>
```

### CSS


```css
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

p {
  page-break-after: always;
}
```

### JavaScript


```js
document.querySelector("button").addEventListener("click", () => {
  window.print();
});
```

### 결과

"출력!" 버튼을 눌러 페이지 출력 화면을 확인해보세요. 첫 번째 페이지의 콘텐츠는 중앙 어딘가에 위치하고, 두 번째 페이지의 콘텐츠는 기본 위치에 존재해야 합니다.

명세
--

| Specification |
| --- |
| CSS Paged Media Module Level 3 # left-right-first |

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

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

같이 보기
-----

* `@page`
* 페이지 관련 다른 의사 클래스: `:left` (en-US), `:right` (en-US)
:last-child
===========

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

시도해보기
-----

구문
--
```

:last-child
```

예제
--

### 기본 예제

#### HTML


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

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


#### CSS


```css
p:last-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:last-child {
  border: 1px solid red;
  color: red;
}
```


#### 결과

명세
--

| Specification |
| --- |
| Selectors Level 4 # the-last-child-pseudo |

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

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

같이보기
----

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

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

**CSS Scrollbars**는 Windows IE 5.5에서 2000년에 도입한 더이상 사용되지 않는(obsolete) 스크롤바 색상 프로퍼티를 표준화합니다.

기본 예제
-----

이 예제에서 우리는 녹색 트랙과 보라색 썸(thumb)을 가진 얇은 스크롤바를 사용하기로 선택했습니다.


```css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}
```

### HTML


```html
<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>
```

### 결과

참고
--

### CSS 속성

* `scrollbar-width` (en-US)
* `scrollbar-color` (en-US)
명세
--

| Specification |
| --- |
| CSS Scrollbars Styling Module Level 1  |

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

스크롤바를 커스터마이징 할 때, 스크롤바에 충분한 대비가 있고 터치 입력을 사용하는 사람들에게도 충분히 히트 영역(hit area)이 큰지 고려하십시오.

* Baseline Rules for Scrollbar Usability | Adrian Roselli
브라우저 호환성
--------

### css.properties.scrollbar-color

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

### css.properties.scrollbar-width

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

같이 보기
-----

* `::-webkit-scrollbar`
* `-ms-overflow-style`
CSS Positioning
===============

**CSS Positioning**은 요소를 페이지에 배치하는 방법을 정의하는 CSS 모듈입니다.

참고서
---

### CSS 속성

* `bottom` (en-US)
* `clear`
* `float`
* `left` (en-US)
* `position`
* `right` (en-US)
* `top` (en-US)
* `z-index`
안내서
---

CSS z-index 이해하기

쌓임 문맥의 개념을 소개하고 몇 가지 예와 함께 z축 순서의 동작을 설명합니다.

명세
--

| Specification |
| --- |
| CSS Positioned Layout Module Level 3  |
자식 결합자
======

**자식 결합자**(`>`)는 두 개의 CSS 선택자 사이에 위치하여 뒤쪽 선택자의 요소가 앞쪽 선택자 요소의 바로 밑에 위치할 경우에만 선택합니다.


```css
/\* List items that are children of the "my-things" list \*/
ul.my-things > li {
  margin: 2em;
}
```


뒤쪽 선택자의 요소는 앞쪽 선택자 요소의 바로 아래에 위치해야 하므로, DOM 트리의 깊이에 상관하지 않고 아래의 모든 요소를 선택하는 자손 결합자보다 더 엄격합니다.

구문
--
```

selector1 > selector2 { style properties }
```

예제
--

### CSS


```css
span {
  background-color: white;
}

div > span {
  background-color: DodgerBlue;
}
```

### HTML


```html
<div>
  <span
 >Span #1, in the div.
    <span>Span #2, in the span that's in the div.</span>
  </span>
</div>
<span>Span #3, not in the div at all.</span>
```

### 결과

명세
--

| Specification |
| --- |
| Selectors Level 4 # child-combinators |

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

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

같이 보기
-----

* 자손 결합자
CSS Conditional Rules
=====================

**CSS Conditional Rules**는 프로세서 또는 스타일 시트에 적용되는 문서의 기능에만 기반을 두는 규칙 집합을 정의할 수 있는 CSS 모듈입니다.

참고서
---

### @규칙

* `@document` (en-US)
* `@media`
* `@supports`
명세서
---

| Specification |
| --- |
| CSS Conditional Rules Module Level 5  |
| CSS Conditional Rules Module Level 4  |
| CSS Conditional Rules Module Level 3  |
<integer>
=========

**`<integer>`** CSS 자료형은 `<number>`의 종류 중 하나로 소수점이 없는 완전한 수, 즉 정수를 표현합니다. 정수는 `column-count` (en-US), `counter-increment` (en-US), `grid-column` (en-US), `grid-row` (en-US), `z-index` 등 다양한 속성에서 사용할 수 있습니다.

구문
--

`<integer>` 자료형은 하나 이상의 0부터 9까지의 10진수 숫자로 구성하며, 선택적으로 `+`, `-`로 부호를 표시할 수 있습니다. 따로 연관지어야 하는 단위는 없습니다.

**참고:** 공식적으로 정해진 `<integer>` 값의 범위는 없습니다. Opera 12.1은 최대 215-1, IE는 220-1, 그 외 브라우저는 더 큰 값도 지원합니다. CSS3 Values 논의 중 최소한의 범위를 설정하자는 말이 많아서 가장 최근인 2012년 4월 LC 단계에서는 [-227-1; 227-1]으로 결정했습니다. 224-1과 230-1처럼 다른 값도 제안됐습니다. 하지만 최신 명세는 범위를 지정하고 있지 않습니다.

보간
--

애니메이션에서 `<integer>` 자료형의 값은 이산적으로 1씩 변화합니다. 계산은 유동소수점 실수를 사용하며 최종 결과인 이산값은 버림 함수를 사용해 얻습니다. 보간의 속도는 애니메이션과 연결된 타이밍 함수 (en-US)가 결정합니다.

예제
--

### 유효한 정수
```

12          양의 정수 (부호 표시 없음)
+123        양의 정수 (+ 부호)
-456        음의 정수
0           0
+0          0, 양의 부호
-0          0, 음의 부호
```

### 유효하지 않은 정수
```

12.0        정수를 표현하지만 <interger>가 아닌 <number>
12.         소수점은 불허
+---12      하나의 +/-만 허용
ten         글자는 불허
_5          특수문자는 불허
\35         유니코드 이스케이프 문자는 정수를 표현하더라도 불허 (\35: 5)
\4E94       아라비아 숫자 외의 다른 표현은 이스케이프 후에도 불허 (\4E94: 일본어 五).
3e4         과학적 표기법 불허
```

명세
--

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

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

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

같이 보기
-----

* `<number>`
unset
=====

CSS **`unset`** 키워드를 적용한 속성은, 부모로부터 상속할 값이 존재하면 상속값을, 그렇지 않다면 초깃값을 사용합니다. 다르게 표현하자면, 전자일 땐 `inherit` 키워드처럼, 후자일 땐 `initial` 키워드처럼 동작합니다. `all` 단축 속성을 포함한 모든 속성에 사용할 수 있습니다.

예제
--

### 글자 색

#### HTML


```html
<p>This text is red.</p>
<div class="foo">
  <p>This text is also red.</p>
</div>
<div class="bar">
  <p>This text is green (default inherited value).</p>
</div>
```


#### CSS


```css
.foo {
  color: blue;
}
.bar {
  color: green;
}

p {
  color: red;
}
.bar p {
  color: unset;
}
```


#### 결과

### 테두리

#### HTML


```html
<p>This text has a red border.</p>
<div>
  <p>This text has a red border.</p>
</div>
<div class="bar">
  <p>This text has has a black border (initial default, not inherited).</p>
</div>
```


#### CSS


```css
div {
  border: 1px solid green;
}

p {
  border: 1px solid red;
}

.bar p {
  border-color: unset;
}
```


#### 결과

명세
--

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

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

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

같이 보기
-----

* `initial`을 사용해 속성의 초깃값을 사용하세요.
* `revert`를 사용해 사용자 에이전트가 지정한 값(또는 사용자가 수정한 값)으로 속성을 되돌리세요.
* `inherit`을 사용해 속성의 값이 부모와 같도록 지정하세요.
* `all` 속성을 사용하면 요소의 모든 속성을 한꺼번에 `initial`, `inherit`, `revert`, `unset`할 수 있습니다.
CSS Custom Properties for Cascading Variables
=============================================

캐스케이딩 변수를 위한 CSS 사용자지정 속성은, 반복적으로 사용가능한 사용자지정 속성을 만들 수 있게 해주는 모듈입니다.

CSS 속성
------

* `--*` (en-US)
명세
--

| Specification |
| --- |
| CSS Custom Properties for Cascading Variables Module Level 1  |