recursal/MDN huggingface dataset:
box-sizing
==========

**`box-sizing`** CSS 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다.

시도해보기
-----

CSS 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용됩니다. 요소에 테두리나 안쪽 여백이 있으면 너비와 높이에 더해서 화면에 그립니다. 따라서 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야 합니다.

`box-sizing` 속성을 사용해 이 방식을 바꿀 수 있습니다.

* `content-box`는 기본 CSS 박스 크기 결정법을 사용합니다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 100 픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해집니다.
* `border-box`는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지합니다. 대부분의 경우 이 편이 크기를 조절할 때 쉽습니다.
구문
--

`box-sizing` 속성은 다음 키워드 중 하나로 지정할 수 있습니다.

### 값

`content-box`

CSS 표준이 정의한 초기 기본값. `width`와 `height` 속성이 콘텐츠 영역만 포함하고 안팎 여백과 테두리는 포함하지 않습니다. 즉 `.box {width: 350px; border: 10px solid black;}`을 적용한 요소의 너비는 `370px`입니다.

요소의 크기는 너비 = 콘텐츠 너비, 높이 = 콘텐츠 높이로 계산하고 테두리와 안쪽 여백은 식에 넣지 않습니다.

* `border-box`
    + : `width` 와 `height` 속성이 안쪽 여백과 테두리는 포함하고, 바깥 여백은 포함하지 않습니다. 안쪽 여백과 테두리가 요소 상자 안에 위치함을 유의하세요. 즉 `.box {width: 350px; border: 10px solid black;}`을 적용한 요소의 너비는 `350px`입니다. 콘텐츠 영역의 크기는 음수일 수 없으므로 `border-box`를 사용해 요소를 사라지게 할 수는 없습니다.요소의 크기는 너비 = 테두리 + 안쪽 여백 + 콘텐츠 너비, 높이 = 테두리 + 안쪽 여백 + 콘텐츠 높이로 계산합니다.
### 형식 구문
```

box-sizing =   
  content-box  |  
  border-box     
  
```

예제
--

다음 예제는 두 개의 동일한 요소의 크기가 서로 다른 `box-sizing` 값으로 어떻게 달라지는지 보입니다.

### HTML


```html
<div class="content-box">Content box</div>
<br />
<div class="border-box">Border box</div>
```

### CSS


```css
div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /\* Total width: 160px + (2 \* 20px) + (2 \* 8px) = 216px
 Total height: 80px + (2 \* 20px) + (2 \* 8px) = 136px
 Content box width: 160px
 Content box height: 80px \*/
}

.border-box {
  box-sizing: border-box;
  /\* Total width: 160px
 Total height: 80px
 Content box width: 160px - (2 \* 20px) - (2 \* 8px) = 104px
 Content box height: 80px - (2 \* 20px) - (2 \* 8px) = 24px \*/
}
```

### 결과

명세
--

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # box-sizing |

|  |  |
| --- | --- |
| 초기값 | `content-box` |
| 적용대상 | all elements that accept width or height |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | discrete |

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

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

같이 보기
-----

* CSS 기본 박스 모델
<gradient>
==========

**`<gradient>`** CSS 자료형은 `<image>`의 특별한 종류로 여러 색의 점진적인 변화를 나타냅니다.

시도해보기
-----

CSS 그레이디언트는 원본 크기가 없습니다. 즉 실제 크기나 선호 크기가 없습니다. 그레이디언트의 크기는 적용하는 요소의 크기와 동일해집니다.

구문
--

### 그레이디언트 함수

`<gradient>` 자료형은 아래 나열한 함수 중 하나를 사용해 생성합니다.

#### 선형 그레이디언트

가상의 선을 따라 여러 색 사이를 전이합니다. `linear-gradient()` (en-US) 함수를 사용해 생성합니다.
```

<div class="linear-gradient">선형 그레이디언트</div>
```


```
div {
  width: 240px;
  height: 80px;
}
```



```css
.linear-gradient {
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}
```


#### 원형 그레이디언트

중심점으로부터 바깥으로 여러 색 사이를 전이합니다. `radial-gradient()` (en-US) 함수를 사용해 생성합니다.
```

<div class="radial-gradient">원형 그레이디언트</div>
```


```
div {
  width: 240px;
  height: 80px;
}
```



```css
.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
}
```


#### 반복 그레이디언트

요소를 꽉 채울 때까지 그레이디언트를 필요한 만큼 반복합니다. `repeating-linear-gradient()` (en-US)나 `repeating-radial-gradient()` (en-US) 함수를 사용해 생성합니다.
```

<div class="linear-repeat">반복하는 선형 그레이디언트</div>
<br />
<div class="radial-repeat">반복하는 원형 그레이디언트</div>
```


```
div {
  width: 240px;
  height: 80px;
}
```



```css
.linear-repeat {
  background: repeating-linear-gradient(
    to top left,
    lightpink,
    lightpink 5px,
    white 5px,
    white 10px
  );
}

.radial-repeat {
  background: repeating-radial-gradient(
    powderblue,
    powderblue 8px,
    white 8px,
    white 16px
  );
}
```


#### 원뿔 그레이디언트

원을 따라 여러 색 사이를 전이합니다. `conic-gradient()` (en-US) 함수를 사용해 생성합니다.
```

<div class="conic-gradient">원뿔 그레이디언트</div>
```


```
div {
  width: 200px;
  height: 200px;
}
```



```css
.conic-gradient {
  background: conic-gradient(lightpink, white, powderblue);
}
```

보간
--

색과 관련한 다른 보간과 마찬가지로, 그레이디언트도 색과 투명도가 동시에 변할 때 예상하지 못한 회색이 등장하는걸 방지하기 위해 알파 채널을 미리 곱한 색 공간을 사용해 계산합니다. 오래 된 브라우저에서 `<color>` 키워드를 사용할 땐 다르게 행동할 수 있음을 주의하세요.

명세
--

| Specification |
| --- |
| CSS Images Module Level 4 # gradients |

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

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

같이 보기
-----

* CSS 그레이디언트 사용하기 (en-US)
* 그레이디언트 함수: `linear-gradient()` (en-US), `radial-gradient()` (en-US), `repeating-linear-gradient()` (en-US), `repeating-radial-gradient()` (en-US)
margin
======

**`margin`** CSS 속성은 요소의 네 방향 바깥 여백 영역을 설정합니다. `margin-top`, `margin-right`, `margin-bottom`, `margin-left`의 단축 속성입니다.

시도해보기
-----

위와 아래 여백은 대체 요소가 아닌 `<span>`, `<code>` 등 인라인 요소에선 아무 효과도 없습니다.

**참고:** margin은 요소의 주위에 빈 공간을 추가합니다. 반면 `padding`은 요소의 **내부**에 빈 공간을 만듭니다.

구문
--
```

/* 네 면 모두 적용 */
margin: 1em;
margin: -3px;

/* 세로방향 | 가로방향 */
margin: 5% auto;

/* 위 | 가로방향 | 아래 */
margin: 1em auto 2em;

/* 위 | 오른쪽 | 아래 | 왼쪽 */
margin: 2px 1em 0 auto;

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


`margin` 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 각 값은 `<length>`, `<percentage>` 또는 키워드 `auto` 중 하나입니다. 음수 값은 요소와 이웃의 거리가 더 가까워지도록 합니다.

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

`<length>`

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

`<percentage>`

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

`auto`

브라우저가 적절한 여백 크기를 선택. 예를 들어 요소를 중앙 정렬하고 싶을 때 사용할 수 있습니다.

### 형식 구문
```

margin =   
  <'margin-top'>{1,4}    
  
```

예제
--

### 간단한 예제

#### HTML


```html
<div class="center">이 요소는 중앙 정렬입니다.</div>
<div class="outside">이 요소는 컨테이너 밖으로 빠져 나갔습니다.</div>
```


#### CSS


```css
.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}
```

### 더 많은 예제


```css
margin: 5%; /\* 모두 5% \*/

margin: 10px; /\* 모두 10px \*/

margin: 1.6em 20px;
/\* 상하: 1.6em \*/
/\* 좌우: 20px \*/

margin: 10px 3% -1em;
/\* 상: 10px \*/
/\* 좌우: 3% \*/
/\* 하: -1em \*/

margin: 10px 3px 30px 5px;
/\* 상: 10px \*/
/\* 우: 3px \*/
/\* 하: 30px \*/
/\* 좌: 5px \*/

margin: 2em auto;
/\* 상하: 2em \*/
/\* 수평 중앙정렬 \*/

margin: auto;
/\* 상하: 0 \*/
/\* 수평 중앙정렬 \*/
```

참고
--

### 수평 중앙정렬

현대 브라우저에서 어떤 요소를 중앙에 배치하려면 `display` (en-US)`: flex;` `justify-content``: center;`를 사용하면 됩니다.

하지만 플렉스 박스 레이아웃을 지원하지 않는 Internet Explorer 8-9 등 오래된 브라우저를 지원해야 하면 `margin: 0 auto;`를 대신 사용하세요.

### 여백 상쇄

두 개 요소의 위와 아래 여백은 종종 합쳐져 하나의 여백이 되고, 그 크기는 둘 중 더 큰 여백과 같아집니다. 더 자세한 정보는 여백 상쇄 정복을 참고하세요.

명세
--

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

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `margin-bottom`: `0`
* `margin-left`: `0`
* `margin-right`: `0`
* `margin-top`: `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 |
| 계산 값 | as each of the properties of the shorthand:* `margin-bottom`: the percentage as specified or the absolute length
* `margin-left`: the percentage as specified or the absolute length
* `margin-right`: the percentage as specified or the absolute length
* `margin-top`: 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 기본 박스 모델 입문
* 여백 상쇄 정복
* `margin-top`, `margin-right`, `margin-bottom`, `margin-left`
CSS Table
=========

**CSS Table**은 표 데이터의 배치법을 정의하는 CSS 모듈입니다.

참고서
---

### 속성

* `border-collapse`
* `border-spacing`
* `caption-side` (en-US)
* `empty-cells` (en-US)
* `table-layout` (en-US)
* `vertical-align`
명세서
---

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification  |
:focus-within
=============

CSS **`:focus-within`** 의사 클래스는 포커스를 받았거나, 포커스를 받은 요소를 포함하는 요소를 나타냅니다. 즉 스스로 `:focus` 의사 클래스와 일치하거나, 그 자손 중 하나가 `:focus`와 일치하는 요소를 나타냅니다. (섀도 트리 내부도 포함)


```css
/\* Selects a <div> when one of its descendants is focused \*/
div:focus-within {
  background: cyan;
}
```


흔히 쓸 수 있는 예시로서, `<form>`의 `<input>` (en-US) 필드 중 하나가 포커스된 경우 전체 `<form>`을 강조해야 할 때 유용하게 사용할 수 있습니다.

구문
--

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

다음 예제에서는 두 텍스트 입력 칸 중 하나라도 포커스를 받은 경우 양식을 강조합니다.

### HTML


```html
<p>아래 양식의 값을 채워주세요.</p>

<form>
  <label for="given\_name">이름:</label>
  <input id="given\_name" type="text" />
  <br />
  <label for="family\_name">성:</label>
  <input id="family\_name" type="text" />
</form>
```

### CSS


```css
form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

input {
  margin: 4px;
}
```

### 결과

명세
--

| Specification |
| --- |
| Selectors Level 4 # the-focus-within-pseudo |

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

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

같이 보기
-----

* `:focus`
* `:focus-visible` (en-US) 
Experimental
padding-bottom
==============

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

시도해보기
-----

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

![The effect of the CSS padding-top property on the element box](/files/4109/padding-bottom.svg)

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

구문
--


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

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

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


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

### 값

`<length>`

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

`<percentage>`

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

### 형식 구문
```

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

예제
--


```css
.content {
  padding-bottom: 5%;
}
.sidebox {
  padding-bottom: 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`
CSS 자료형
=======

**CSS 자료형**은 CSS 속성과 함수가 받아들이는, 키워드와 단위를 포함한 일반적인 값을 정의합니다. 자료형은 Component value type의 특별한 종류입니다.

형식 구문에서 자료형을 나타낼 땐 부등호 "<"와 ">"로 감싸서 표기합니다.

참고서
---

* `<angle>`
* `<angle-percentage>`
* `<angular-color-hint>`
* `<angular-color-stop>`
* `<attr-fallback>`
* `<attr-name>`
* `<basic-shape>` (en-US)
* `<blend-mode>`
* `<calc-product>`
* `<calc-sum>` (en-US)
* `<calc-value>`
* `<color>`
* `<color-stop>`
* `<color-stop-angle>`
* `<counter-style>`
* `<custom-ident>` (en-US)
* `<dimension>` (en-US)
* `<filter-function>`
* `<flex>` (en-US)
* `<frequency>`
* `<frequency-percentage>` (en-US)
* `<gradient>`
* `<ident>` (en-US)
* `<image>`
* `<integer>`
* `<length>`
* `<length-percentage>`
* `<number>`
* `<number-percentage>`
* `<percentage>`
* `<position>`
* `<quote>`
* `<ratio>` (en-US)
* `<resolution>` (en-US)
* `<shape-box>` (en-US)
* `<shape-radius>`
* `<string>` (en-US)
* `<time>`
* `<time-percentage>` (en-US)
* `<timing-function>` (en-US)
* `<toggle-value>`
* `<transform-function>`
* `<type-or-unit>`
* `<url>()`
* `<url-modifier>`
* `<zero>`
명세
--

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

같이 보기
-----

* CSS 단위와 값
* CSS 단위와 값 소개
order
=====

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
**`order`** CSS 속성은 플렉스 또는 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정합니다. 컨테이너 아이템의 정렬 순서는 오름차순 `order` 값이고, 같은 값일 경우 소스 코드의 순서대로 정렬됩니다.

시도해보기
-----

구문
--


```css
/\* <integer> 값 \*/
order: 5;
order: -5;

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


**참고:** `order` 속성은 논리적인 순서나 탭 순서와는 전혀 상관 없이 **화면에 보이는 순서**에만 영향을 줍니다. 따라서 비시각적 매체에 적용해선 안됩니다.

### 값

`<integer>`

아이템의 순서.

### 형식 구문
```

order =   
  [ <'layout-order'> <'reading-order'>? ]  |  
  [ [ reading || layout ] && <integer> ]     
  
```

예제
--


```html
<header>...</header>
<main>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</main>
<footer>...</footer>
```


위와 같은 기본적인 HTML에서, 다음 CSS 코드는 콘텐츠 블록을 감싸는, 고전적인 양쪽 사이드바 레이아웃을 만듭니다. Flexible Box Layout 모듈이 자동으로 모든 블록의 높이를 동일하게 하며 가능한 가로축 공간을 모두 분배합니다.


```css
main {
  display: flex;
  text-align: center;
}
main > article {
  flex: 1;
  order: 2;
}
main > nav {
  width: 200px;
  order: 1;
}
main > aside {
  width: 200px;
  order: 3;
}
```

### 결과

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

`order` 속성을 사용하면 실제 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 Display Module Level 3 # order-property |

|  |  |
| --- | --- |
| 초기값 | `0` |
| 적용대상 | Flex items, grid items, and absolutely-positioned flex and grid container children |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | an integer |

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

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

같이 보기
-----

* CSS 플렉스박스 안내서: *플렉스박스의 기본 개념*
* CSS 플렉스박스 안내서: *플렉스 아이템의 순서 정하기 (en-US)*
* CSS 그리드 안내서: *CSS 그리드 레이아웃과 접근성 (en-US)*
padding-left
============

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

시도해보기
-----

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

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

구문
--


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

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

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


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

### 값

`<length>`

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

`<percentage>`

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

### 형식 구문
```

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

예제
--


```css
.content {
  padding-left: 5%;
}
.sidebox {
  padding-left: 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`
border-right
============

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

시도해보기
-----

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


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



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


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

구문
--


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


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

### 값

`<br-width>`

`border-right-width`.

`<br-style>`

`border-right-style`.

`<color>`

`border-right-color`.

### 형식 구문
```

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

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

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

**CSS 색상**은 색상, 색상 유형, 색상 혼합, 투명도 및 이러한 색상 효과를 HTML에 적용하는 방법을 다루는 CSS 모듈입니다. `<color>` 값을 취하는 모든 CSS 속성이 이 모듈에 속하는건 아니지만 의존성은 가지고 있습니다.

참고서
---

### 속성

* `color`
* `color-adjust` (en-US)
* `opacity`
### 자료형

* `<color>`
안내서
---

CSS를 사용하여 HTML 요소에 색상 적용하기 (en-US)

CSS를 사용하여 다양한 유형의 콘텐츠에 색상을 적용하는 방법에 대한 안내서입니다. 모든 색상 관련 CSS 속성이 적용됩니다.

도구
--

색상 선택 도구

이 도구를 사용하면 맞춤 색상을 쉽게 만들고 조정하고 실험 할 수 있습니다.

명세
--

| Specification |
| --- |
| CSS Color Module Level 4  |
| CSS Color Module Level 5  |

같이 보기
-----

* 다른 사양의 일부 색상 관련 속성 : `background-color`, `border-color`, `outline-color` (en-US), `text-decoration-color` (en-US), `text-emphasis-color` (en-US), `text-shadow` (en-US), `caret-color` (en-US), and `column-rule-color` (en-US)
* CSS에서는 그레이디언트가 색상이 아니라 이미지입니다.
brightness()
============

**`brightness()`** CSS 함수는 주어진 이미지에 선형 계수를 적용해 더 밝거나 어둡게 만듭니다. 반환 값은 `<filter-function>`입니다.

시도해보기
-----

구문
--
```

brightness(amount)
```

### 매개변수

`amount`

`<number>` 또는 `<percentage>`로 지정한, 결과물의 밝기. `100%` 미만의 값은 이미지를 어둡게 만들고, `100%`를 초과하는 값은 밝게 합니다. `0%`는 이미지를 완전한 검은색으로 바꾸고 `100%`는 주어진 입력 이미지를 그대로 반환합니다. 보간 시, 누락 값은 `1`입니다.

예제
--


```css
brightness(0%)   /\* 완전한 검정 \*/
brightness(0.4)  /\* 40% 밝기 \*/
brightness(1)    /\* 변화 없음 \*/
brightness(200%) /\* 두 배 밝기 \*/
```

같이 보기
-----

* `<filter-function>`
contrast()
==========

**`contrast()`** CSS 함수는 주어진 이미지의 대비를 조절합니다. 반환 값은 `<filter-function>`입니다.

시도해보기
-----

구문
--
```

contrast(amount)
```

### 매개변수

`amount`

`<number>` 또는 `<percentage>`로 지정한, 결과물의 대비. `100%` 미만의 값은 이미지의 대비를 낮추고, `100%`를 초과하는 값은 높입니다. `0%`는 이미지를 완전히 회색으로 바꾸고 `100%`는 입력 이미지를 그대로 반환합니다. 보간 시, 누락 값은 `1`입니다.

예제
--


```css
contrast(0)     /\* 완전히 회색 \*/
contrast(65%)   /\* 대비 65% \*/
contrast(1)     /\* 변화 없음 \*/
contrast(200%)  /\* 대비 두 배 \*/
```

같이 보기
-----

* `<filter-function>`
blur()
======

**`blur()`** CSS 함수는 주어진 이미지에 가우시안 블러를 적용합니다. 반환 값은 `<filter-function>`입니다.

시도해보기
-----

구문
--
```

blur(radius)
```

### 매개변수

`radius`

`<length>`로 지정한 블러 효과의 지름. 가우시안 함수의 표준 편차, 즉 화면에 보이는 픽셀의 색상이 어느 범위까지 섞일지를 지정합니다. 따라서 큰 값은 이미지를 더 흐리게 만듭니다. `0`은 주어진 입력 결과를 그대로 반환합니다. 보간 시, 누락 값은 0입니다.

예제
--


```css
blur(0)        /\* 변화 없음 \*/
blur(8px)      /\* 8px 블러 \*/
blur(1.17rem)  /\* 1.17rem 블러 \*/
```

같이 보기
-----

* `<filter-function>`
CSS로 이미지 스프라이트 구현하기
===================

**이미지 스프라이트**는 여러 개의 이미지가 필요한 아주 많은 웹앱에서 사용합니다. 이미지 각각을 별도의 파일로 추가하는 대신, 이미지를 하나의 파일로 만들어서 포함하면 HTTP 요청 수가 줄기 때문에 메모리와 네트워크 사용량 측면에서 효율적입니다.

**참고:** HTTP/2를 사용할 땐 오히려 작은 요청을 여러 번 날리는 게 네트워크 사용량에 더 좋을 수도 있습니다.

구현
--

`toolbtn` 클래스가 부여된 모든 아이템에 어떤 이미지가 부여된다고 가정해 봅시다.


```css
.toolbtn {
  background: url(myfile.png);
  display: inline-block;
  height: 20px;
  width: 20px;
}
```


배경 이미지의 위치는 속성에 지정된 `url()` 값 다음에 x, y 2개 값으로 지정할 수도 있고, `background-position` (en-US) 속성으로 지정할 수 있습니다.


```css
#btn1 {
  background-position: -20px 0px;
}

#btn2 {
  background-position: -40px 0px;
}
```


이 CSS 는 ID 가 'btn1' 인 엘리먼트를 왼쪽으로 20 pixel 이동시키고 ID 가 'btn2' 인 엘리먼트를 왼쪽으로 40 pixel 이동시킬 것입니다 (앞서 보인 이미지 룰에 의해 두 엘리먼트에 `toolbtn` 클래스가 부여됐다고 가정합시다).

비슷하게, 마우스 호버 상태를 만들 수도 있습니다.


```css
#btn:hover {
  background-position: <pixels shifted right>px <pixels shifted down>px;
}
```

같이 보기
-----

* Full working demo at CSS Tricks
여백 상쇄 정복
========

여러 블록의 위쪽 및 아래쪽 바깥 여백(마진)은 경우에 따라 제일 큰 여백의 크기를 가진 단일 여백으로 결합(상쇄)되곤 합니다. 이런 동작을 **여백 상쇄**라고 부릅니다. 단, 플로팅 요소와 절대 위치를 지정한 요소의 여백은 절대 상쇄되지 않습니다.

여백 상쇄는 다음과 같은 세 가지 기본 상황에 발생합니다.

인접 형제

인접 형제 요소간의 바깥 여백은 서로 상쇄됩니다. (단, 뒤쪽 형제가 플로팅을 해제해야 하는 경우는 예외)

부모와 자손을 분리하는 콘텐츠 없음

부모 블록에 테두리, 안쪽 여백, 인라인 부분이 없고 블록 서식 맥락이 생성되지 않았으며 부모의 `margin-top`을 자손의 `margin-top`과 분리할 권한이 없는 경우, 또는, 부모 블록에 테두리, 안쪽 여백, 인라인 콘텐츠가 없으며 부모의 `margin-bottom`과 자손의 `margin-bottom`을 분리할 `height`, `min-height`, `max-height`가 존재하지 않는 경우 부모와 자손의 여백이 상쇄됩니다. 상쇄된 여백은 부모 블록 바깥에 위치합니다.

빈 블록

테두리, 안쪽 여백, 인라인 콘텐츠, `height`, `min-height`, `max-height`가 없으면 블록의 `margin-top`과 `margin-bottom`이 서로 상쇄됩니다.

다음은 참고할만한 사항입니다.

* (세 개 이상의 여백 사이의) 더 복잡한 여백 상쇄는 위의 기본 상황이 서로 결합되어 발생합니다.
* 위의 규칙은 바깥 여백이 0이어도 적용되므로, 두 번째 규칙을 만족하는 경우 부모의 바깥 여백이 0이건 아니건 자손의 바깥 여백은 부모 밖으로 나오게 됩니다.
* 음수 값을 가진 바깥 여백을 포함할 경우, 상쇄된 여백의 크기는 제일 큰 양수 여백과 제일 작은(음의 방향으로, 절댓값이 제일 큰) 여백의 합이 됩니다.
* 모든 바깥 여백이 음수 값을 가질 경우, 상쇄된 여백의 크기는 제일 작은(음의 방향으로, 절댓값이 제일 큰) 여백의 크기가 됩니다. 인접 요소와 중첩 요소 모두에 적용됩니다.
예제
--

### HTML


```html
<p>The bottom margin of this paragraph is collapsed …</p>
<p>
  … with the top margin of this paragraph, yielding a margin of
  <code>1.2rem</code> in between.
</p>

<div>
  This parent element contains two paragraphs!
  <p>
    This paragraph has a <code>.4rem</code> margin between it and the text
    above.
  </p>
  <p>
    My bottom margin collapses with my parent, yielding a bottom margin of
    <code>2rem</code>.
  </p>
</div>

<p>I am <code>2rem</code> below the element above.</p>
```

### CSS


```css
div {
  margin: 2rem 0;
  background: lavender;
}

p {
  margin: 0.4rem 0 1.2rem 0;
  background: yellow;
}
```

### 결과