이벤트 생성 및 트리거

이벤트 생성 및 트리거
============

이 문서에서는 DOM 이벤트를 생성하고 전송하는 방법을 설명합니다. 이러한 이벤트들은 브라우저 자체에서 발생하는 이벤트와 달리 일반적으로 **합성 이벤트**라고 불립니다.

커스텀 이벤트 생성
----------

이벤트는 `Event` 생성자를 사용하여 다음과 같이 생성될 수 있습니다.

```js
const event = new Event("build");

// 이벤트를 수신합니다.
elem.addEventListener(
  "build",
  (e) => {
    /\* … \*/
  },
  false,
);

// 이벤트를 전송합니다.
elem.dispatchEvent(event);
```

위의 코드 예제는 EventTarget.dispatchEvent() 메서드를 사용합니다.

이 생성자는 대부분의 최신 브라우저에서 지원됩니다. 좀 더 장황한 접근 방법은 아래의 구식 방법을 참고하시길 바랍니다.

### 커스텀 데이터 추가 - CustomEvent()

이벤트 객체에 더 많은 데이터를 추가하기 위해 CustomEvent 인터페이스가 존재하며 커스텀 데이터를 전달하기 위해 **상세** 속성이 사용될 수 있습니다. 예를 들어 이벤트는 다음과 같이 생성될 수 있습니다.

```js
const event = new CustomEvent("build", { detail: elem.dataset.time });
```

그러면 이벤트 수신기의 추가 데이터에 접근할 수 있습니다.

```js
function eventHandler(e) {
  console.log(`The time is: ${e.detail}`);
}
```

### 구식 방법

이벤트를 생성하는 오래된 접근 방식은 Java에서 영감을 받은 API를 사용합니다. 다음은 `document.createEvent()`을 사용한 예제입니다.

```js
// 이벤트를 생성합니다.
const event = document.createEvent("Event");

// 이벤트 이름을 'build'로 정의합니다.
event.initEvent("build", true, true);

// 이벤트를 수신합니다.
elem.addEventListener(
  "build",
  (e) => {
    // e.target은 elem과 일치합니다.
  },
  false,
);

// 대상은 임의의 요소 혹은 다른 EventTarget일 수 있습니다.
elem.dispatchEvent(event);
```

### 이벤트 버블링

보통 하위 요소에서 이벤트를 트리거하고 상위 요소가 이벤트를 탐지하도록 하는 것이 바람직합니다. 선택적으로 다음과 같은 데이터를 사용합니다.

```html
<form>
  <textarea></textarea>
</form>
```

```js
const form = document.querySelector("form");
const textarea = document.querySelector("textarea");

// 새로운 이벤트를 생성하고 버블링을 허용하며 "detail" 속성에 전달할 모든 데이터를 제공합니다.
const eventAwesome = new CustomEvent("awesome", {
  bubbles: true,
  detail: { text: () => textarea.value },
});

// 폼 요소는 사용자 지정 "awesome" 이벤트를 수신한 다음 전달된 text() 메서드의 결과를 콘솔에 출력합니다.
form.addEventListener("awesome", (e) => console.log(e.detail.text()));

// 사용자가 입력할 때 폼 내부의 텍스트 영역은 발생한 이벤트를 전송 및 트리거하여 시작점으로 사용합니다.
textarea.addEventListener("input", (e) => e.target.dispatchEvent(eventAwesome));
```

### 동적으로 이벤트 생성 및 전송

요소는 아직 생성되지 않은 이벤트를 수신할 수 있습니다.

```html
<form>
  <textarea></textarea>
</form>
```

```js
const form = document.querySelector("form");
const textarea = document.querySelector("textarea");

form.addEventListener("awesome", (e) => console.log(e.detail.text()));

textarea.addEventListener("input", function () {
  // 이벤트를 즉시 생성하고 전송 및 트리거합니다.
  // 참고: 선택적으로 "함수 표현식"("화살표 함수 표현식" 대신)을 활용하여 "this"가 요소를 나타냅니다.
  this.dispatchEvent(
    new CustomEvent("awesome", {
      bubbles: true,
      detail: { text: () => textarea.value },
    }),
  );
});
```

기본 제공 이벤트 트리거
-------------

이 예제는 DOM 메서드를 사용하여 체크박스의 클릭(프로그램적으로 클릭 이벤트 생성)을 시뮬레이션하는 것을 설명합니다. 실행 중인 예제를 봅니다.

```js
function simulateClick() {
  const event = new MouseEvent("click", {
    view: window,
    bubbles: true,
    cancelable: true,
  });
  const cb = document.getElementById("checkbox");
  const cancelled = !cb.dispatchEvent(event);

  if (cancelled) {
    // preventDefault 핸들러.
    alert("cancelled");
  } else {
    // preventDefault 핸들러 없음.
    alert("not cancelled");
  }
}
```

같이 보기
-----

* CustomEvent()
* `Event.createEvent()`
* `Event.initEvent()` (en-US)
* `EventTarget.dispatchEvent()`
* `EventTarget.addEventListener()`


opacity - CSS: Cascading Style Sheets

opacity
=======

**`opacity`** CSS 속성은 요소의 불투명도를 설정합니다. 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대입니다.

시도해보기
-----

`opacity`는 요소의 내용을 포함해 모든 곳에 영향을 주지만 자식 요소가 상속하지는 않습니다. 따라서 요소와 자식의 투명도가 서로 다르더라도 배경에 대해서는 상대적으로 같은 투명도를 갖습니다.

`opacity` 값이 `1`이 아니면 요소를 새로운 쌓임 맥락에 배치합니다.

자식 요소는 불투명하게 유지하고 싶다면 `background` 속성을 대신 사용하세요.

```css
background: rgba(0, 0, 0, 0.4);
```

구문
--

### 값

`<alpha-value>`

채널의 불투명도(알파 채널의 값)를 나타내는 `0.0` 이상 `1.0` 이하의 `<number>`, 또는 0% 이상 100% 이하의 `<percentage>`. 범위 밖의 숫자는 구문 상 유효하지만, 실제 적용 시에는 범위에 맞춰 나머지 값은 버려집니다.

| 값 | 뜻 |
| --- | --- |
| `0` | 요소가 완전히 투명해 보이지 않음. |
| `0`과 `1` 사이의 아무 `<number>` | 요소가 반투명해 뒤의 내용을 볼 수 있음. |
| `1` (기본값) | 요소가 불투명함. |

### 형식 구문
```

opacity =
  <alpha-value>

<alpha-value> =
  <number>      |
  <percentage>

```

예제
--

### 기본 예제

```css
div {
  background-color: yellow;
}
.light {
  opacity: 0.2; /\* 배경 위로 겨우 볼 수 있음 \*/
}
.medium {
  opacity: 0.5; /\* 배경 위로 조금 더 잘 보임 \*/
}
.heavy {
  opacity: 0.9; /\* 배경 위로 뚜렷하게 보임 \*/
}
```

```html
<div class="light">겨우 보이는 글</div>
<div class="medium">좀 더 잘 보이는 글</div>
<div class="heavy">쉽게 보이는 글</div>
```

### `:hover` 시 다른 불투명도 적용

```css
img.opacity {
  opacity: 1;
}

img.opacity:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
  zoom: 1;
}
```

```html
<img
 src="https://developer.mozilla.org/mdn-social-share.png"
 alt="MDN logo"
 width="128"
 height="146"
 class="opacity" />
```

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

글씨의 투명도를 조절했다면, 낮은 시력을 가진 사용자도 페이지의 콘텐츠를 읽을 수 있도록 글자 색과 배경색의 대비를 높게 유지하는 것이 중요합니다.

색 대비율은 배경색과 투명도를 적용한 글자 색의 밝기를 비교해서 얻어낼 수 있습니다. 현재 웹 콘텐츠 접근성 가이드라인(WCAG)을 만족하려면, 텍스트 콘텐츠는 4.5:1, 제목 등 큰 텍스트는 3:1의 대비율이 필요합니다. 큰 텍스트란 18.66px 이상의 굵은 글씨 혹은 24px 이상의 텍스트로 정의하고 있습니다.

* WebAIM: Color Contrast Checker
* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
명세
--

| Specification |
| --- |
| CSS Color Module Level 4 # transparency |

|  |  |
| --- | --- |
| 초기값 | `1` |
| 적용대상 | all elements |
| 상속 | no |
| Percentages | map to the range `[0,1]` |
| 계산 값 | The same as the specified value after clipping the `number` to the range [0.0, 1.0]. |
| Animation type | by computed value type |

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

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


CSS Writing Modes - CSS: Cascading Style Sheets

CSS Writing Modes
=================

**CSS Writing Modes**는 다양한 국제 쓰기 모드를 정의하는 CSS 모듈입니다, 좌에서 우(가령 Latin 및 Indic 스크립트에 사용됨), 우에서 좌(가령 Hebrew 또는 Arabic 스크립티에 사용됨), 양방향(좌에서 우 및 우에서 좌 스크립트를 섞을 때 사용됨) 및 세로(가령 일부 Asian 스크립트에 사용됨) 등.

참고서
---

### 속성

* `direction` (en-US)
* `glyph-orientation-horizontal`
* `text-combine-upright` (en-US)
* `text-orientation` (en-US)
* `unicode-bidi` (en-US)
* `writing-mode` (en-US)
명세
--

| Specification |
| --- |
| CSS Writing Modes Level 4  |


CSS animated properties - CSS: Cascading Style Sheets

CSS animated properties
=======================

일부 CSS 속성은 애니메이션될 수 있습니다, 즉 그 값을 바꿀 때 CSS animation (en-US) 또는 CSS transition이 사용된 경우 부드러운 방식으로 바꿀 수 있습니다.

다음은 애니메이션 가능한 속성 목록입니다:

* `-moz-outline-radius` (en-US)
* `-moz-outline-radius-bottomleft` (en-US)
* `-moz-outline-radius-bottomright` (en-US)
* `-moz-outline-radius-topleft` (en-US)
* `-moz-outline-radius-topright` (en-US)
* `-ms-grid-columns` (en-US)
* `-ms-grid-rows` (en-US)
* `-webkit-line-clamp`
* `-webkit-text-fill-color` (en-US)
* `-webkit-text-stroke` (en-US)
* `-webkit-text-stroke-color` (en-US)
* `accent-color` (en-US)
* `all`
* `animation-range` (en-US)
* `aspect-ratio` (en-US)
* `backdrop-filter`
* `background`
* `background-clip`
* `background-color`
* `background-origin`
* `background-position` (en-US)
* `background-position-x` (en-US)
* `background-position-y` (en-US)
* `background-size` (en-US)
* `block-size` (en-US)
* `border`
* `border-block` (en-US)
* `border-block-color` (en-US)
* `border-block-end` (en-US)
* `border-block-end-color` (en-US)
* `border-block-end-width` (en-US)
* `border-block-start` (en-US)
* `border-block-start-color` (en-US)
* `border-block-start-width` (en-US)
* `border-block-width` (en-US)
* `border-bottom`
* `border-bottom-color`
* `border-bottom-left-radius` (en-US)
* `border-bottom-right-radius` (en-US)
* `border-bottom-width`
* `border-color`
* `border-end-end-radius` (en-US)
* `border-end-start-radius` (en-US)
* `border-image`
* `border-image-outset`
* `border-image-slice`
* `border-image-width`
* `border-inline` (en-US)
* `border-inline-color` (en-US)
* `border-inline-end` (en-US)
* `border-inline-end-color` (en-US)
* `border-inline-end-width` (en-US)
* `border-inline-start` (en-US)
* `border-inline-start-color` (en-US)
* `border-inline-start-width` (en-US)
* `border-inline-width` (en-US)
* `border-left`
* `border-left-color`
* `border-left-width`
* `border-radius`
* `border-right`
* `border-right-color`
* `border-right-width`
* `border-start-end-radius` (en-US)
* `border-start-start-radius` (en-US)
* `border-top`
* `border-top-color`
* `border-top-left-radius` (en-US)
* `border-top-right-radius` (en-US)
* `border-top-width`
* `border-width`
* `bottom` (en-US)
* `box-shadow` (en-US)
* `caret`
* `caret-color` (en-US)
* `caret-shape`
* `clip` (en-US)
* `clip-path`
* `color`
* `column-count` (en-US)
* `column-gap` (en-US)
* `column-rule` (en-US)
* `column-rule-color` (en-US)
* `column-rule-width` (en-US)
* `column-width` (en-US)
* `columns` (en-US)
* `contain-intrinsic-block-size` (en-US)
* `contain-intrinsic-height` (en-US)
* `contain-intrinsic-inline-size` (en-US)
* `contain-intrinsic-size` (en-US)
* `contain-intrinsic-width` (en-US)
* `container` (en-US)
* `container-type` (en-US)
* `content-visibility` (en-US)
* `counter-increment` (en-US)
* `counter-reset` (en-US)
* `counter-set` (en-US)
* `display` (en-US)
* `filter`
* `flex`
* `flex-basis`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `font`
* `font-size`
* `font-size-adjust` (en-US)
* `font-stretch` (en-US)
* `font-style` (en-US)
* `font-variation-settings` (en-US)
* `font-weight`
* `gap`
* `grid` (en-US)
* `grid-auto-columns` (en-US)
* `grid-auto-rows` (en-US)
* `grid-column-gap` (en-US)
* `grid-gap` (en-US)
* `grid-row-gap` (en-US)
* `grid-template` (en-US)
* `grid-template-columns`
* `grid-template-rows` (en-US)
* `height`
* `hyphenate-limit-chars` (en-US)
* `initial-letter` (en-US)
* `inline-size` (en-US)
* `input-security`
* `inset` (en-US)
* `inset-block` (en-US)
* `inset-block-end` (en-US)
* `inset-block-start` (en-US)
* `inset-inline` (en-US)
* `inset-inline-end` (en-US)
* `inset-inline-start` (en-US)
* `left` (en-US)
* `letter-spacing`
* `line-clamp`
* `line-height` (en-US)
* `line-height-step` (en-US)
* `list-style` (en-US)
* `margin`
* `margin-block` (en-US)
* `margin-block-end` (en-US)
* `margin-block-start` (en-US)
* `margin-bottom`
* `margin-inline` (en-US)
* `margin-inline-end` (en-US)
* `margin-inline-start` (en-US)
* `margin-left`
* `margin-right`
* `margin-top`
* `mask`
* `mask-border` (en-US)
* `mask-position` (en-US)
* `mask-size` (en-US)
* `max-block-size` (en-US)
* `max-height`
* `max-inline-size` (en-US)
* `max-lines`
* `max-width`
* `min-block-size` (en-US)
* `min-height`
* `min-inline-size` (en-US)
* `min-width`
* `object-position`
* `offset` (en-US)
* `offset-anchor` (en-US)
* `offset-distance` (en-US)
* `offset-path` (en-US)
* `offset-position` (en-US)
* `offset-rotate` (en-US)
* `opacity`
* `order`
* `orphans` (en-US)
* `outline`
* `outline-color` (en-US)
* `outline-offset` (en-US)
* `outline-style`
* `outline-width`
* `overlay` (en-US)
* `padding`
* `padding-block` (en-US)
* `padding-block-end` (en-US)
* `padding-block-start` (en-US)
* `padding-bottom`
* `padding-inline` (en-US)
* `padding-inline-end` (en-US)
* `padding-inline-start` (en-US)
* `padding-left`
* `padding-right`
* `padding-top`
* `perspective` (en-US)
* `perspective-origin` (en-US)
* `right` (en-US)
* `rotate` (en-US)
* `row-gap` (en-US)
* `ruby-align` (en-US)
* `ruby-merge`
* `scale` (en-US)
* `scroll-margin` (en-US)
* `scroll-margin-block` (en-US)
* `scroll-margin-block-end` (en-US)
* `scroll-margin-block-start` (en-US)
* `scroll-margin-bottom` (en-US)
* `scroll-margin-inline` (en-US)
* `scroll-margin-inline-end` (en-US)
* `scroll-margin-inline-start` (en-US)
* `scroll-margin-left` (en-US)
* `scroll-margin-right` (en-US)
* `scroll-margin-top` (en-US)
* `scroll-padding` (en-US)
* `scroll-padding-block` (en-US)
* `scroll-padding-block-end` (en-US)
* `scroll-padding-block-start` (en-US)
* `scroll-padding-bottom` (en-US)
* `scroll-padding-inline` (en-US)
* `scroll-padding-inline-end` (en-US)
* `scroll-padding-inline-start` (en-US)
* `scroll-padding-left` (en-US)
* `scroll-padding-right` (en-US)
* `scroll-padding-top` (en-US)
* `scroll-snap-coordinate`
* `scroll-snap-destination`
* `scroll-timeline` (en-US)
* `scrollbar-color` (en-US)
* `scrollbar-width` (en-US)
* `shape-image-threshold` (en-US)
* `shape-margin` (en-US)
* `shape-outside` (en-US)
* `tab-size`
* `text-decoration`
* `text-decoration-color` (en-US)
* `text-decoration-thickness` (en-US)
* `text-emphasis` (en-US)
* `text-emphasis-color` (en-US)
* `text-indent` (en-US)
* `text-shadow` (en-US)
* `text-size-adjust` (en-US)
* `text-underline-offset` (en-US)
* `top` (en-US)
* `transform`
* `transform-origin` (en-US)
* `translate` (en-US)
* `vertical-align`
* `view-timeline` (en-US)
* `view-timeline-inset` (en-US)
* `visibility`
* `widows` (en-US)
* `width`
* `word-spacing`
* `z-index`
* `zoom` (en-US)


@media - CSS: Cascading Style Sheets

@media
======

**`@media`** CSS @규칙은 스타일 시트의 일부를 하나 이상의 미디어 쿼리 결과에 따라 적용할 때 사용할 수 있습니다. `@media`를 사용해 미디어 쿼리를 지정하면 해당 쿼리를 만족하는 장치에서만 CSS 블록을 적용할 수 있습니다.

**참고:** JavaScript에서는 `@media`를 `CSSMediaRule` CSS 객체 모델 인터페이스로 접근할 수 있습니다.

구문
--

`@media` @규칙은 최상위 코드나, 아무 조건부 그룹 @규칙 안에 중첩해 작성할 수 있습니다.

```css
/\* 최상위 코드 레벨 \*/
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/\* 다른 조건부 @규칙 내에 중첩 \*/
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}
```

미디어 쿼리 구문에 관한 내용은 미디어 쿼리 사용하기 문서를 참고하세요.

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

글씨 크기를 조절한 사용자를 위해서, 미디어 쿼리의 `<length>` 자리에는 `em`을 사용하는게 좋습니다.

`em`과 `px` 모두 유효한 단위지만, 사용자가 브라우저의 글씨 크기를 변경했다면 `em`이 더 자연스럽게 동작합니다.

Level 4 미디어 쿼리를 통한 사용자 경험 향상도 고려해보세요. 예컨대 `prefers-reduced-motion` 쿼리를 사용하면 사용자가 시스템에 애니메이션을 최소로 줄여달라고 요청했는지 알 수 있습니다 (en-US).

보안
--

미디어 쿼리는 사용자의 장치와 더 나아가 기능과 디자인에 대한 통찰을 제공하므로, "핑거프린팅"을 통해 장치 고유 식별자로 활용하거나, 그보단 덜 해도 사용자가 원하지 않을 수준의 분류를 하기 위해 오용할 가능성이 있습니다.

그러므로 브라우저는 기기의 특정을 방지하기 위해 일부 반환 값을 모호하게 할 수 있습니다. 또한 사용자에게 추가 설정을 제공할 수도 있는데, 예를 들어 Firefox의 "핑거프린터 차단" 기능을 활성화하면 많은 수의 미디어 쿼리는 실제 장치 상태 대신 기본 값을 보고하게 됩니다.

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

@media =
  @media <media-query-list> { <rule-list> }

```

예제
--

### 출력과 화면 미디어 타입 판별

```css
@media print {
  body {
    font-size: 10pt;
  }
}

@media screen {
  body {
    font-size: 13px;
  }
}

@media screen, print {
  body {
    line-height: 1.2;
  }
}

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
  body {
    line-height: 1.4;
  }
}
```

Media Queries Level 4부터는 새로운 범위 표현 구문을 사용해 더 간결한 미디어 쿼리를 작성할 수 있습니다.

```css
@media (height > 600px) {
  body {
    line-height: 1.4;
  }
}

@media (400px <= width <= 700px) {
  body {
    line-height: 1.4;
  }
}
```

더 많은 예제는 미디어 쿼리 사용하기를 참고하세요.

명세
--

| Specification |
| --- |
| Media Queries Level 4 # media-descriptor-table |
| CSS Conditional Rules Module Level 3 # at-media |

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

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

같이 보기
-----

* 미디어 쿼리 사용하기
* JavaScript에서 `@media`에 접근할 때 사용할 수 있는 CSS 객체 모델 인터페이스 `CSSMediaRule`
* Mozilla 미디어 특성 확장 (en-US)
* WebKit 미디어 특성 확장 (en-US)


mix-blend-mode - CSS: Cascading Style Sheets

mix-blend-mode
==============

**`mix-blend-mode`** CSS 속성은 어느 요소의 콘텐츠가 자신의 배경 및 부모와 어떻게 혼합되어야 하는지 지정합니다.

시도해보기
-----

Syntax
------

```css
/\* Keyword values \*/
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

/\* Global values \*/
mix-blend-mode: inherit;
mix-blend-mode: initial;
mix-blend-mode: revert;
mix-blend-mode: revert-layer;
mix-blend-mode: unset;
```

### Values

`<blend-mode>`

The blending mode that should be applied.

Formal definition
-----------------

|  |  |
| --- | --- |
| 초기값 | `normal` |
| 적용대상 | all elements |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | Not animatable |
| Creates stacking context | yes |

Formal syntax
-------------
```

mix-blend-mode =
  <blend-mode>  |
  plus-darker   |
  plus-lighter

<blend-mode> =
  normal       |
  multiply     |
  screen       |
  overlay      |
  darken       |
  lighten      |
  color-dodge  |
  color-burn   |
  hard-light   |
  soft-light   |
  difference   |
  exclusion    |
  hue          |
  saturation   |
  color        |
  luminosity

```

Examples
--------

### Effect of different mix-blend-mode values
```

<div class="grid">
  <div class="col">
    <div class="note">
      Blending in isolation (no blending with the background)
    </div>
    <div class="row isolate">
      <div class="cell">
        normal
        <div class="container normal">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <defs>
                <linearGradient id="red">
                  <stop offset="0" stop-color="hsl(0,100%,50%)" />
                  <stop offset="100%" stop-color="hsl(0,0%,100%)" />
                </linearGradient>
                <linearGradient id="green">
                  <stop offset="0" stop-color="hsl(120,100%,50%)" />
                  <stop offset="100%" stop-color="hsl(120,0%,100%)" />
                </linearGradient>
                <linearGradient id="blue">
                  <stop offset="0" stop-color="hsl(240,100%,50%)" />
                  <stop offset="100%" stop-color="hsl(240,0%,100%)" />
                </linearGradient>
              </defs>
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        multiply
        <div class="container multiply">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        darken
        <div class="container darken">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        screen
        <div class="container screen">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        lighten
        <div class="container lighten">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        overlay
        <div class="container overlay">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        color-dodge
        <div class="container color-dodge">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        color-burn
        <div class="container color-burn">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        hard-light
        <div class="container hard-light">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        soft-light
        <div class="container soft-light">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        difference
        <div class="container difference">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        exclusion
        <div class="container exclusion">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        hue
        <div class="container hue">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        saturation
        <div class="container saturation">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        color
        <div class="container color">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        luminosity
        <div class="container luminosity">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
    </div>

    <div class="note">Blending globally (blend with the background)</div>
    <div class="row">
      <div class="cell">
        normal
        <div class="container normal">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        multiply
        <div class="container multiply">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        darken
        <div class="container darken">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        screen
        <div class="container screen">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        lighten
        <div class="container lighten">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        overlay
        <div class="container overlay">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        color-dodge
        <div class="container color-dodge">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        color-burn
        <div class="container color-burn">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        hard-light
        <div class="container hard-light">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        soft-light
        <div class="container soft-light">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        difference
        <div class="container difference">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        exclusion
        <div class="container exclusion">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        hue
        <div class="container hue">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        saturation
        <div class="container saturation">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        color
        <div class="container color">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        luminosity
        <div class="container luminosity">
          <div class="group">
            <div class="item firefox"></div>
            <svg class="item" viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

```
html,
body {
  height: 100%;
  box-sizing: border-box;
  background: #eee;
}

.grid {
  width: 100%;
  display: flex;
  font: 1em monospace;
}

.row {
  display: flex;
  flex: 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  height: auto;
}

.col {
  display: flex;
  flex: 1 auto;
  flex-direction: column;
  height: auto;
}

.cell {
  margin: 0.5em;
  padding: 0.5em;
  background-color: #fff;
  overflow: hidden;
  text-align: center;
}

.note {
  background: #fff3d4;
  padding: 1em;
  margin: 0.5em 0.5em 0;
  font: 0.8em sans-serif;
  text-align: left;
  white-space: nowrap;
}

.note + .row .cell {
  margin-top: 0;
}

.container {
  position: relative;
  background: linear-gradient(to right, #000 0%, transparent 50%, #fff 100%),
    linear-gradient(to bottom, #ff0 0%, #f0f 50%, #0ff 100%);
  width: 150px;
  height: 150px;
  margin: 0 auto;
}

.R {
  transform-origin: center;
  transform: rotate(-30deg);
  fill: url(#red);
}

.G {
  transform-origin: center;
  transform: rotate(90deg);
  fill: url(#green);
}

.B {
  transform-origin: center;
  transform: rotate(210deg);
  fill: url(#blue);
}

.isolate .group {
  isolation: isolate;
}

.normal .item {
  mix-blend-mode: normal;
}
.multiply .item {
  mix-blend-mode: multiply;
}
.screen .item {
  mix-blend-mode: screen;
}
.overlay .item {
  mix-blend-mode: overlay;
}
.darken .item {
  mix-blend-mode: darken;
}
.lighten .item {
  mix-blend-mode: lighten;
}
.color-dodge .item {
  mix-blend-mode: color-dodge;
}
.color-burn .item {
  mix-blend-mode: color-burn;
}
.hard-light .item {
  mix-blend-mode: hard-light;
}
.soft-light .item {
  mix-blend-mode: soft-light;
}
.difference .item {
  mix-blend-mode: difference;
}
.exclusion .item {
  mix-blend-mode: exclusion;
}
.hue .item {
  mix-blend-mode: hue;
}
.saturation .item {
  mix-blend-mode: saturation;
}
.color .item {
  mix-blend-mode: color;
}
.luminosity .item {
  mix-blend-mode: luminosity;
}
```

### Using mix-blend-mode with HTML

#### HTML

```html
<div class="isolate">
  <div class="circle circle-1"></div>
  <div class="circle circle-2"></div>
  <div class="circle circle-3"></div>
</div>
```

#### CSS

```css
.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  mix-blend-mode: screen;
  position: absolute;
}

.circle-1 {
  background: red;
}

.circle-2 {
  background: lightgreen;
  left: 40px;
}

.circle-3 {
  background: blue;
  left: 20px;
  top: 40px;
}

.isolate {
  isolation: isolate; /\* Without isolation, the background color will be taken into account \*/
  position: relative;
}
```

#### Result

### Using mix-blend-mode with SVG

#### SVG

```html
<svg>
  <g class="isolate">
    <circle cx="40" cy="40" r="40" fill="red" />
    <circle cx="80" cy="40" r="40" fill="lightgreen" />
    <circle cx="60" cy="80" r="40" fill="blue" />
  </g>
</svg>
```

#### CSS

```css
circle {
  mix-blend-mode: screen;
}
.isolate {
  isolation: isolate;
} /\* Without isolation, the background color will be taken into account \*/
```

#### Result

### Using mix-blend-mode with text

This example uses `mix-blend-mode` to blend text color with the background color of its parent element.

#### HTML

```html
<div class="container">
  <p>Mostly Harmless</p>
  <p class="multiply">Mostly Harmless</p>
  <p class="screen">Mostly Harmless</p>
  <p class="hard-light">Mostly Harmless</p>
</div>
```

#### CSS

```css
@import url("https://fonts.googleapis.com/css2?family=Rubik+Moonrocks&display=swap");

.container {
  background-color: blue;
}

p {
  font:
    4rem "Rubik Moonrocks",
    cursive;
  font-weight: bold;
  color: orange;
  padding: 0.5rem;
  margin: 0;
}

.multiply {
  mix-blend-mode: multiply;
}

.screen {
  mix-blend-mode: screen;
}

.hard-light {
  mix-blend-mode: hard-light;
}
```

#### Result

명세서
---

| Specification |
| --- |
| Compositing and Blending Level 2 # mix-blend-mode |

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

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

See also
--------

* `<blend-mode>`
* `background-blend-mode` (en-US)


border-bottom-color - CSS: Cascading Style Sheets

border-bottom-color
===================

**`border-bottom-color`** CSS 속성은 요소의 아래쪽 테두리 색상을 지정합니다. `border-color` 또는 `border-bottom` 단축 속성으로도 지정할 수 있습니다.

시도해보기
-----

구문
--

```css
/\* <color> 값 \*/
border-bottom-color: red;
border-bottom-color: #ffbb00;
border-bottom-color: rgb(255, 0, 0);
border-bottom-color: hsla(100%, 50%, 25%, 0.75);
border-bottom-color: currentColor;
border-bottom-color: transparent;

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

`border-bottom-color` 속성은 하나의 값을 사용해 지정합니다.

### 값

`<color>`

아래쪽 테두리의 색상.

### 형식 구문
```

border-bottom-color =
  <color>     |
  <image-1D>

<image-1D> =
  <stripes()>

<stripes()> =
  stripes( <color-stripe># )

<color-stripe> =
  <color>                            &&
  [ <length-percentage> | <flex> ]?

<length-percentage> =
  <length>      |
  <percentage>

```

예제
--

### 테두리를 가진 간단한 상자

#### HTML

```html
<div class="mybox">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="redtext">red</span>.
  </p>
</div>
```

#### CSS

```css
.mybox {
  border: solid 0.3em gold;
  border-bottom-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```

#### 결과

명세
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-color |

|  |  |
| --- | --- |
| 초기값 | `currentcolor` |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| 계산 값 | computed color |
| Animation type | a color |

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

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

같이 보기
-----

* 테두리 관련 CSS 단축 속성: `border`, `border-bottom`, `border-color`.
* 다른 방향 테두리의 색상 관련 CSS 단축 속성: `border-top-color`, `border-right-color`, `border-left-color`.
* 아래쪽 테두리 관련 CSS 속성: `border-bottom-style`, `border-bottom-width`.


border-left-style - CSS: Cascading Style Sheets

border-left-style
=================

**`border-left-style`** CSS 속성은 요소 테두리의 왼쪽 스타일을 지정합니다.

시도해보기
-----

**참고:** 명세는 서로 다른 스타일의 테두리가 꼭지점에서 만날 때 어떻게 그려야 할지는 정의하고 있지 않습니다.

구문
--

```css
/\* 키워드 값 \*/
border-left-style: none;
border-left-style: hidden;
border-left-style: dotted;
border-left-style: dashed;
border-left-style: solid;
border-left-style: double;
border-left-style: groove;
border-left-style: ridge;
border-left-style: inset;
border-left-style: outset;

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

`border-left-style` 속성은 `border-style` 속성에 사용할 수 있는 키워드 중 하나를 사용해 지정할 수 있습니다.

### 형식 구문
```

border-left-style =
  <line-style>

<line-style> =
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

```

예제
--

#### HTML

```html
<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>
```

#### CSS

```css
/\* Define look of the table \*/
table {
  border-width: 2px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

/\* border-left-style example classes \*/
.b1 {
  border-left-style: none;
}
.b2 {
  border-left-style: hidden;
}
.b3 {
  border-left-style: dotted;
}
.b4 {
  border-left-style: dashed;
}
.b5 {
  border-left-style: solid;
}
.b6 {
  border-left-style: double;
}
.b7 {
  border-left-style: groove;
}
.b8 {
  border-left-style: ridge;
}
.b9 {
  border-left-style: inset;
}
.b10 {
  border-left-style: outset;
}
```

#### 결과

명세
--

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

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

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

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

같이 보기
-----

* 테두리 스타일 관련 CSS 속성: `border-top-style`, `border-right-style`, `border-bottom-style`, `border-style`.
* 왼쪽 테두리 관련 CSS 속성: `border-left`, `border-left-color`, `border-left-width`.


일반 형제 결합자 - CSS: Cascading Style Sheets

일반 형제 결합자
=========

**일반 형제 결합자**(`~`)는 두 개의 선택자 사이에 위치하여 뒤쪽 선택자의 요소와 앞쪽 선택자 요소의 부모 요소가 같고, 뒤쪽 선택자의 요소가 뒤에 위치할 때 선택합니다. 두 요소가 서로 붙어있을 필요는 없습니다.

```css
/\* 서로 형제인 문단 중 이미지 뒤쪽인 경우에만 선택 \*/
img ~ p {
  color: red;
}
```

구문
--
```

former_element ~ target_element { style properties }
```

예제
--

### CSS

```css
p ~ span {
  color: red;
}
```

### HTML

```html
<span>이건 빨강이 아닙니다.</span>
<p>여기 문단이 있습니다.</p>
<code>그리고 코드도 있습니다.</code>
<span>이제 빨강입니다!</span>
<code>더 많은 코드가 있습니다.</code>
<span>이것도 빨강입니다!</span>
```

### 결과

명세
--

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

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

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

같이 보기
-----

* 인접 형제 결합자


Alternative style sheets - CSS: Cascading Style Sheets

Alternative style sheets
========================

 Firefox는
 *대체 스타일시트*
 를 지원합니다. 대체 스타일시트를 제공하는 페이지에서는 **보기>페이지 스타일** 메뉴를 이용하여 페이지에 적용될 스타일을 선택할 수 있습니다. 따라서 사용자는 자신이 원하는 다양한 종류의 페이지를 볼 수 있게 됩니다.

link 요소를 사용하여 웹 페이지에 대체 스타일시트를 제공할 수 있습니다.

예제:
```

 <link href="default.css" rel="stylesheet" type="text/css" title="Default Style">
 <link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy">
 <link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic">
```

위의 세 가지 스타일 시트를 제공하면, 페이지 스타일 메뉴에 "Default Style", "Fancy", "Basic" 스타일 목록이 출력됩니다. 사용자가 특정 스타일을 선택하면 페이지는 해당 스타일로 바로 다시 렌더링 됩니다.

`link` 또는 `style` 요소에 `title` 속성이 포함되어 있을 경우 해당 제목(title)은 사용자에게로 노출되어 사용자가 선택할 수 있게 됩니다. 동일한 제목을 가진 스타일시트가 여럿 존재할 경우 해당 스타일시트들은 모두 적용되며, `title` 속성이 없는 스타일시트는 항상 적용됩니다.

기본 스타일시트에는 `rel="stylesheet"` 속성을 사용하고 대체 스타일시트에는 `rel="alternate stylesheet"`를 사용하세요. 이를 통해 Firefox는 어떤 스타일시트 제목을 처음 선택해야 할지 알 수 있으며, 대체 스타일시트를 지원하지 않는 브라우저에게 기본 스타일시트가 무엇인지를 알려줍니다.

실제 예제
-----

실제로 동작하는 예제는 여기에서 볼 수 있습니다.

명세
--

| Specification |
| --- |
| HTML Standard # rel-alternate |
| HTML Standard # the-link-is-an-alternative-stylesheet |
| HTML Standard # attr-style-title |
| HTML Standard # attr-meta-http-equiv-default-style |
| CSS Object Model (CSSOM) # css-style-sheet-collections |

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

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


CSS 단위와 값 - CSS: Cascading Style Sheets

CSS 단위와 값
=========

모든 CSS 선언은 속성 / 값 쌍을 포함합니다. 속성에 따라 값은 하나의 정수 또는 키워드, 여러 개의 키워드, 단위가 있거나 없는 값의 나열이 될 수 있습니다. CSS 속성에 허용되는 공통적인 자료형(단위와 값)의 집합이 있습니다. 아래는 이들 자료형 대부분에 대한 개요입니다. 더 자세한 정보를 보려면 각 자료형의 페이지를 참고하세요.

텍스트 자료형
-------

* `<custom-ident>` (en-US)
* `<ident>`로서 미리 정의된 키워드
* `<string>` (en-US)
* `<url>()`

텍스트 자료형은 `<string>`이거나, 연속된 문자를 따옴표로 감싼 것, 또는 따옴표로 감싸지 않은 "CSS 식별자"인 `<ident>`가 될 수 있습니다. `<string>`은 작은따옴표 또는 큰따옴표로 감싸져야 합니다. 사양에서 `<ident>` 또는 `<custom-ident>`의 목록에 포함되어 있는 CSS 식별자는 따옴표로 감싸서는 안 됩니다.

CSS 사양에서는 웹 개발자가 정의할 수 있는 값들, 가령 키프레임 애니메이션이나 서체 가족의 이름, 그리드 영역 같은 것들을 `<custom-ident>` (en-US), `<string>` (en-US), 또는 둘 다로서 목록에 표시합니다.

사용자가 정의한 텍스트 값을 따옴표로 감싸는 것과 감싸지 않는 것 모두가 허용되는 경우, 사양에서는 `<custom-ident> | <string>`로서 이를 목록에 표시하며, 이는 따옴표가 선택 사항임을 의미합니다. 애니메이션 이름이 바로 그런 경우입니다:

```css
@keyframe validIdent {
  /\* keyframes go here \*/
}
@keyframe 'validString' {
  /\* keyframes go here \*/
}
```

몇몇 텍스트 값은 따옴표로 감싸지 않는 경우 유효하지 않습니다. 예를 들어, `grid-area` (en-US)의 값은 `<custom-ident>`일 수 있으므로, 만약 `content`라는 이름의 그리드 영역이 있을 때 아래처럼 이를 따옴표 없이 사용할 수 있습니다:

```css
.item {
  grid-area: content;
}
```

반면, `<string>` (en-US)인 자료형의 경우, 예를 들어 `content` 속성의 문자열 값은 따옴표로 감싸져야 합니다:

```css
.item::after {
  content: "This is my content.";
}
```

일반적으로 이모지를 포함해 여러분이 원하는 아무 이름이나 만들 수 있지만, `none`, `unset`, `initial`, `inherit`, 숫자 또는 2개의 대시로 시작하는 이름은 식별자가 될 수 없으며, 대부분의 경우 미리 정의된 다른 CSS 키워드와 동일한 이름을 사용하고 싶지는 않을 것입니다. 더 자세한 내용을 보려면 `<custom-ident>` (en-US)와 `<string>` (en-US)의 참조 페이지를 확인하세요.

### 미리 정의된 키워드 값

미리 정의된 키워드 값은 특정 속성의 사양에 정의된 텍스트 값입니다. 이 키워드들은 CSS 식별자이기도 해서 따옴표 없이 사용됩니다.

CSS 사양 또는 MDN의 속성 페이지에서 CSS 속성의 값에 대한 문법을 보면, 허용되는 키워드가 아래와 같은 형태로 나열됩니다. 아래는 `float`에 허용되는 미리 정의된 키워드 값입니다.
```

left | right | none | inline-start | inline-end
```

이런 값들은 따옴표 없이 사용됩니다:

```css
.box {
  float: left;
}
```

### CSS 전체에 공유되는 값

한 속성의 사양의 일부로서 존재하는 미리 정의된 키워드와 더불어, 모든 CSS 속성은 CSS 전체에 걸쳐 공유되는 값인 `initial`, `inherit`, `unset`을 받아들일 수 있으며, 이들은 기본 동작을 명시적으로 지정합니다.

`initial` 키워드는 속성의 초기 값으로 지정된 값을 표현합니다. `inherit` 키워드는 해당 요소의 부모에 적용된 동일 속성의 계산값을 표현하며, 해당 속성이 상속된다고 가정합니다.

`unset` 키워드는 `inherit` 또는 `initial`처럼 동작하는데, 해당 속성이 상속되는 경우 전자, 아닌 경우 후자로 동작합니다.

네번째 값으로 `revert`가 Cascade Level 4 사양에 추가되었지만, 지금은 브라우저 지원 상태가 좋지 않습니다.

### URL

`<url>()` 자료형은 함수 표기법을 사용하며, 함수가 URL에 해당하는 `<string>`을 받는 형태입니다. 이것은 절대 URL 또는 상대 URL일 수 있습니다. 예를 들어, 배경 이미지를 넣고 싶을 때 다음 중 아무거나 사용할 수 있습니다.

```css
.box {
  background-image: url("images/my-background.png");
}

.box {
  background-image: url("https://www.exammple.com/images/my-background.png");
}
```

`url()` 의 매개변수는 따옴표로 감싸거나 감싸지 않을 수 있습니다. 감싸지 않는 경우, 이는 `<url-token>`으로 해석되어 특정 문자를 이스케이프하는 등의 추가적인 할 일이 생깁니다. 더 자세한 내용을 보려면 `<url>()`를 확인하세요.

숫자 자료형
------

* `<integer>`
* `<number>`
* `<dimension>` (en-US)
* `<percentage>`
### 정수

정수는 1개 이상의 10진수 숫자(`0`부터 `9`)로, 예를 들어 `1024`나 `-55`가 이에 속합니다. 정수 앞에는 `+` 또는 `-` 기호를 덧붙일 수 있는데, 기호와 정수 사이에 공백이 없어야 합니다.

### 숫자

`<number>`는 실수를 나타내며, 소수점과 소수부분을 포함할 수도 있고 포함하지 않을 수도 있습니다. 예를 들어 `0.255`, `128`, `-1.2`가 이에 속합니다. 숫자 앞에도 `+`나 `-` 기호를 덧붙일 수 있습니다.

### 치수

`<dimension>` (en-US)은 `<number>`에 단위를 붙인 것으로, 예를 들면 `45deg`, `100ms`, `10px`가 이에 속합니다. 덧붙인 단위 식별자는 대소문자를 구별하지 않습니다. 숫자와 단위 식별자 사이에는 공백 또는 다른 문자가 들어갈 수 없습니다: 즉, `1 cm`는 유효하지 않습니다.

CSS는 치수를 사용해 아래와 같은 것들을 표시합니다:

* `<length>` (거리 단위)
* `<angle>`
* `<time>`
* `<frequency>`
* `<resolution>` (en-US)

다음 절에서 이것들을 다룹니다.

#### 거리 단위

거리 단위, 또는 길이가 값으로 허용되는 속성은 `<length>` 자료형으로 표시됩니다. CSS에는 2가지 종류의 길이가 있습니다: 상대적 길이와 절대적 길이입니다.

상대적 길이 단위는 다른 무언가와 비교해 상대적인 길이를 나타냅니다. 예를 들어, `em`은 해당 요소의 폰트 크기에 상대적이며 `vh`는 뷰포트의 높이에 상대적입니다.

| 단위 | 비교의 대상 |
| --- | --- |
| `em` | 해당 요소의 폰트 크기 |
| `ex` | 해당 요소의 폰트의 x높이 |
| `cap` | 해당 요소의 폰트의 대문자 높이(대문자의 공칭 높이) |
| `ch` | 해당 요소의 폰트의 좁은 문자가 평균적으로 나아가는 길이, "0" (ZERO, U+0030) 문자로 대표됨. |
| `ic` | 해당 요소의 폰트의 전각 문자가 평균적으로 나아가는 길이, "水" (CJK 물 표의 문자, U+6C34) 문자로 대표됨. |
| `rem` | 루트 요소의 폰트 크기 |
| `lh` | 해당 요소의 줄 높이 |
| `rlh` | 루트 요소의 줄 높이 |
| `vw` | 뷰포트 너비의 1% |
| `vh` | 뷰포트 높이의 1% |
| `vi` | 루트 요소의 인라인 축 방향으로 뷰포트 길이의 1% |
| `vb` | 루트 요소의 블록 축 방향으로 뷰포트 길이의 1% |
| `vmin` | 뷰포트의 길이 중 더 짧은 것의 1% |
| `vmax` | 뷰포트의 길이 중 더 긴 것의 1% |

절대적 길이 단위는 인치 또는 센티미터의 물리적 길이로 고정적입니다. 그래서 이 단위들의 다수는 인쇄물과 같은 고정된 크기의 매체로 출력되는 경우에 유용합니다. 예를 들어, `mm`는 물리적인 밀리미터, 즉 센티미터의 1/10입니다.

| 단위 | 이름 | 다음과 동일함 |
| --- | --- | --- |
| `cm` | 센티미터 | 1cm = 96px/2.54 |
| `mm` | 밀리미터 | 1mm = 1cm의 1/10 |
| `Q` | 쿼터-밀리미터 | 1Q = 1cm의 1/40 |
| `in` | 인치 | 1in = 2.54cm = 96px |
| `pc` | 피카 | 1pc = 1in의 1/16 |
| `pt` | 포인트 | 1pt = 1in의 1/72 |
| `px` | 픽셀 | 1px = 1in의 1/96 |

길이 값을 포함할 때 길이가 `0`이면, 단위 식별자가 필요하지 않습니다. 그 외의 경우 단위 식별자가 필요합니다. 단위 식별자는 대소문자를 구별하지 않으며, 값의 숫자 부분 이후에 공백 없이 바로 나와야 합니다.

#### 각도 단위

각도 값은 `<angle>` 자료형으로 표시되며 다음의 값이 허용됩니다:

| 단위 | 이름 | 설명 |
| --- | --- | --- |
| `deg` | 도 | 360도가 완전한 원을 이룹니다. |
| `grad` | 그라디안 | 400 그라디안이 완전한 원을 이룹니다. |
| `rad` | 라디안 | 2π 라디안이 완전한 원을 이룹니다. |
| `turn` | 턴 | 1턴이 완전한 원을 이룹니다. |

#### 시간 단위

시간 단위는 `<time>` 자료형으로 표시됩니다. 시간 단위를 포함할 때는 단위 식별자인 `s` 또는 `ms`가 반드시 필요합니다. 아래의 값이 허용됩니다.

| 단위 | 이름 | 설명 |
| --- | --- | --- |
| `s` | 초 |  |
| `ms` | 밀리초 | 1,000 밀리초는 1초와 같습니다. |

#### 진동수 단위

진동수 단위는 `<frequency>` 자료형으로 표시됩니다. 아래 값이 허용됩니다.

| 단위 | 이름 | 설명 |
| --- | --- | --- |
| `Hz` | 헤르츠 | 1초당 발생한 횟수를 나타냅니다. |
| `kHz` | 킬로헤르츠 | 1 킬로헤르츠는 1000 헤르츠와 같습니다. |

`1Hz`, 또는 `1hz`, `1HZ`는 초당 진동수입니다.

#### 해상도 단위

해상도 단위는 `<resolution>` (en-US)로 표시됩니다. 이것들은 스크린과 같은 그래픽 표시에서 CSS 인치당, 센티미터당, 픽셀당 몇 개의 점을 포함할 수 있는지를 나타냄으로써 점 1개의 크기를 표현합니다. 다음의 값이 허용됩니다:

| 단위 | 설명 |
| --- | --- |
| `dpi` | 인치당 점의 수. |
| `dpcm` | 센티미터당 점의 수. |
| `dppx`, `x` | 픽셀당 점의 수. |

### 퍼센트

`<percentage>`는 다른 값의 일부분을 표현하는 자료형입니다.

퍼센트 값은 언제나 다른 양, 예컨대 길이와 같은 것에 상대적입니다. 퍼센트를 허용하는 속성은 그 퍼센트가 참조하는 양 또한 정의합니다. 이 양은 같은 요소가 갖는 다른 속성의 값이거나, 조상 요소가 갖는 속성의 값이거나, 이 요소를 포함하는 블록의 치수 등이 될 수 있습니다.

예를 들면, 어떤 박스의 `width`를 퍼센트로 지정한 경우, 그 박스의 부모의 계산된 너비의 퍼센트를 참조합니다:

```css
.box {
  width: 50%;
}
```

### 퍼센트와 치수 함께 사용하기

일부 속성은 두 자료형 중 하나를 선택해서, 예를 들면 `<length>` **또는** `<percentage>`를 골라서 치수를 지정할 수 있습니다. 이 경우 사양에는 허용되는 값이 `<length-percentage>`처럼 조합된 단위로 기술됩니다. 다음은 가능한 다른 조합입니다:

* `<frequency-percentage>` (en-US)
* `<angle-percentage>`
* `<time-percentage>` (en-US)
### 특별한 자료형 (다른 사양에서 정의된 것들)

* `<color>`
* `<image>`
* `<position>`

#### 색깔

`<color>` 값은 요소의 외관 색깔(예: 배경색)을 지정하며, CSS Color Module에 정의되어 있습니다.

#### 이미지

`<image>` 값은 CSS에서 사용될 수 있는 다양한 종류의 이미지를 지정하며, CSS Image Values and Replaced Content Module에 정의되어 있습니다.

#### 위치

`<position>` 자료형은 배치 영역 안에서 객체의 2D 위치를, 예컨대 컨테이너 안에서 배경 이미지의 위치 같은 것을 정의합니다. 이 자료형은 `background-position` (en-US)으로 해석되므로 CSS Backgrounds and Borders specification에 명시되어 있습니다.

### 함수 표기법

* `calc()`
* `min()` (en-US)
* `max()` (en-US)
* `clamp()` (en-US)
* `toggle()`
* `attr()` (en-US)

함수 표기법 (en-US)은 더 복잡한 자료형을 표현하거나 CSS가 특별한 처리를 하도록 지시하는 자료형의 값입니다. 이 문법은 함수의 이름으로 시작해서 바로 왼쪽 괄호 `(`가 뒤따르고, 함수의 인자를 나열한 다음, 오른쪽 괄호 `)`로 끝납니다. 함수는 여러 개의 인자를 받을 수 있으며, CSS 속성 값과 비슷한 형식을 가집니다.

공백 문자는 허용되지만, 괄호 안에서는 선택 사항입니다. (단 `min()`, `max()`, `clamp()` 함수 페이지의 주의 사항에서 공백 문자에 대한 내용을 확인하세요.)

`rgba()`와 같은 몇몇 레거시 함수 표기법이 콤마를 사용하지만, 일반적으로 콤마는 목록에서 아이템을 구분하기 위해 사용됩니다. 콤마가 인자를 구분하기 위해 사용된 경우, 콤마 전후의 공백 문자는 선택 사항입니다.

명세서
---

| Specification |
| --- |
| CSS Values and Units Module Level 4  |
| CSS Color Module Level 4  |
| CSS Images Module Level 3  |

같이 보기
-----

* CSS의 기본 자료형
* CSS 개론: 값과 단위


isolation - CSS: Cascading Style Sheets

isolation
=========

**`isolation`** CSS 속성은 요소가 새로운 쌓임 맥락을 생성해야 하는지 지정합니다.

시도해보기
-----

`mix-blend-mode`와 함께 사용했을 때 특히 유용합니다.

구문
--

```css
/\* 키워드 값 \*/
isolation: auto;
isolation: isolate;

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

`isolation` 속성은 다음 키워드 값 중 하나를 사용해 지정합니다.

### 값

`auto`

요소에 적용한 속성 중 새로운 쌓임 맥락을 요구하는 속성이 있을 때만 쌓임 맥락을 생성합니다.

`isolate`

항상 새로운 쌓임 맥락을 생성합니다.

### 형식 구문
```

isolation =
  <isolation-mode>

<isolation-mode> =
  auto     |
  isolate

```

예제
--

```html
<div id="b" class="a">
  <div id="d">
    <div class="a c">auto</div>
  </div>
  <div id="e">
    <div class="a c">isolate</div>
  </div>
</div>
```

```css
.a {
  background-color: rgb(0, 255, 0);
}
#b {
  width: 200px;
  height: 210px;
}
.c {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}
#d {
  isolation: auto;
}
#e {
  isolation: isolate;
}
```

명세
--

| Specification |
| --- |
| Compositing and Blending Level 2 # isolation |

|  |  |
| --- | --- |
| 초기값 | `auto` |
| 적용대상 | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements. |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | Not animatable |

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

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

같이 보기
-----

* `<blend-mode>`
* `mix-blend-mode`, `background-blend-mode` (en-US)


CSS Ruby - CSS: Cascading Style Sheets

CSS Ruby
========

**CSS Ruby**는 행간 주석의 형태로 기본 텍스트와 함께 작게 실행되는 텍스트인 ruby 주석 표시와 관련된 렌더링 모델 및 서식 컨트롤을 제공하는 CSS 모듈입니다.

참고서
---

### 속성

* `ruby-align` (en-US)
* `ruby-position` (en-US)
명세
--

| Specification |
| --- |
| CSS Ruby Annotation Layout Module Level 1  |


white-space - CSS: Cascading Style Sheets

white-space
===========

CSS **`white-space`** 속성은 요소가 공백 문자를 처리하는 법을 지정합니다.

시도해보기
-----

**참고:** 단어 안에서 줄이 바뀌기를 원하는 경우 `overflow-wrap`, `word-break`, `hyphens`를 사용하세요.

구문
--

```css
/\* Keyword values \*/
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

/\* Global values \*/
white-space: inherit;
white-space: initial;
white-space: unset;
```

`white-space` 속성은 다음 목록의 키워드 값 중 하나를 사용해 설정합니다.

### 값

`normal`

연속 공백을 하나로 합침. 개행 문자도 다른 공백 문자와 동일하게 처리합니다. 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.

`nowrap`

연속 공백을 하나로 합침. 줄 바꿈은 `<br>` 요소에서만 일어납니다.

`pre`

연속 공백 유지. 줄 바꿈은 개행 문자와 `<br>` 요소에서만 일어납니다.

`pre-wrap`

연속 공백 유지. 줄 바꿈은 개행 문자와 `<br>` 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.

`pre-line`

연속 공백을 하나로 합침. 줄바꿈은 개행 문자와 `<br>` 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.

`break-spaces`

다음 차이점을 제외하면 `pre-wrap`과 동일합니다.

* 연속 공백이 줄의 끝에 위치하더라도 공간을 차지합니다.
* 연속 공백의 중간과 끝에서도 자동으로 줄을 바꿀 수 있습니다.
* 유지한 연속 공백은 `pre-wrap`과 달리 요소 바깥으로 넘치지 않으며, 공간도 차지하므로 박스의 본질 크기(`min-content`, `max-content`)에 영향을 줍니다.

다음은 여러가지 `white-space` 값의 동작을 정리한 표입니다.

|  | 개행 문자 | 스페이스, 탭 | 자동 줄 바꿈 | 줄 끝의 공백 |
| --- | --- | --- | --- | --- |
| `normal` | 병합 | 병합 | 예 | 제거 |
| `nowrap` | 병합 | 병합 | 아니오 | 제거 |
| `pre` | 유지 | 유지 | 아니오 | 유지 |
| `pre-wrap` | 유지 | 유지 | 예 | 넘침 |
| `pre-line` | 유지 | 병합 | 예 | 제거 |
| `break-spaces` | 유지 | 유지 | 예 | 줄 바꿈 |

### 형식 구문
```

white-space =
  normal        |
  pre           |
  nowrap        |
  pre-wrap      |
  break-spaces  |
  pre-line

```

예제
--

### 기본 예제

```css
code {
  white-space: pre;
}
```

### `<pre>` 요소 내부의 줄 바꿈

```css
pre {
  word-wrap: break-word; /\* IE 5.5-7 \*/
  white-space: pre-wrap; /\* current browsers \*/
}
```

실제로 보기
------
```

<div id="css-code" class="box">
  p { white-space:
  <select>
    <option>normal</option>
    <option>nowrap</option>
    <option>pre</option>
    <option>pre-wrap</option>
    <option>pre-line</option>
    <option>break-spaces</option>
  </select>
  }
</div>
<div id="results" class="box">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>
```

```
.box {
  width: 300px;
  padding: 16px;
  border-radius: 10px;
}

#css-code {
  background-color: rgb(220, 220, 220);
  font-size: 16px;
}

#results {
  background-color: rgb(230, 230, 230);
  overflow-x: scroll;
  height: 400px;
  white-space: normal;
  font-size: 14px;
}
```

```
var select = document.querySelector("#css-code select");
var results = document.querySelector("#results p");
select.addEventListener("change", function (e) {
  results.setAttribute("style", "white-space: " + e.target.value);
});
```

### HTML

```html
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>
```

### CSS + 결과

명세
--

| Specification |
| --- |
| CSS Text Module Level 3 # white-space-property |

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

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

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

같이 보기
-----

* 단어 안에서의 자동 줄 바꿈 방식을 지정하는 속성: `overflow-wrap`, `word-break`, `hyphens`


:default - CSS: Cascading Style Sheets

:default
========

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

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

* Learn more
* See full compatibility
* Report feedback
CSS **`:default`** 의사 클래스는 연관 요소 내에서의 기본값인 요소를 선택합니다.

이 선택자는 HTML Standard §4.16.3 Pseudo-classes에 정의되어 있듯 `<button>`, `<input type="checkbox">`, `<input type="radio">` (en-US), `<option>` 요소를 아래와 같은 경우에 선택합니다.

* 옵션 요소의 기본값은 `selected` 특성을 가진 제일 첫 요소, 즉 DOM 순서 기준으로 제일 앞의 활성화 옵션입니다. `multiple` 특성의 `<select>` (en-US)는 둘 이상의 `selected` 옵션을 가질 수도 있으므로, 모든 옵션이 `:default`로 선택됩니다.
* `<input type="checkbox">`와 `<input type="radio">`는 `checked` 특성을 가지고 있으면 선택됩니다.
* `<button>`은 `<form>` 요소의 기본 제출 버튼, 즉 DOM 순서 기준으로 양식에 속하는 제일 첫 `<button>`이면 선택됩니다. (`image`와 `submit`처럼, 양식을 제출하는 다른 `<input>` (en-US) 유형에도 적용됩니다.)
구문
--

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

### HTML

```html
<fieldset>
  <legend>Favorite season</legend>

  <input type="radio" name="season" id="spring" />
  <label for="spring">Spring</label>

  <input type="radio" name="season" id="summer" checked />
  <label for="summer">Summer</label>

  <input type="radio" name="season" id="fall" />
  <label for="fall">Fall</label>

  <input type="radio" name="season" id="winter" />
  <label for="winter">Winter</label>
</fieldset>
```

### CSS

```css
input:default {
  box-shadow: 0 0 2px 1px coral;
}

input:default + label {
  color: coral;
}
```

### 결과

명세
--

| Specification |
| --- |
| HTML Standard # selector-default |
| Selectors Level 4 # default-pseudo |

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

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


border-right-width - CSS: Cascading Style Sheets

border-right-width
==================

CSS **`border-right-width`** 속성은 요소의 오른쪽 테두리 너비를 지정합니다.

시도해보기
-----

구문
--

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

/\* <length> 값 \*/
border-right-width: 10em;
border-right-width: 3vmax;
border-right-width: 6px;

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

### 값

`<line-width>`

테두리의 너비입니다.0 이상의 `<length>` 또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다.

| `thin` |  | 얇은 테두리 |
| --- | --- | --- |
| `medium` |  | 중간 테두리 |
| `thick` |  | 굵은 테두리 |

**참고:** 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나 `thin ≤ medium ≤ thick`이고, 하나의 문서 내에서 동일합니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `medium` |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| 계산 값 | the absolute length or `0` if `border-right-style` is `none` or `hidden` |
| Animation type | a length |

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

border-right-width =
  <line-width>

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

```

예제
--

### 테두리의 너비 비교

#### HTML

```html
<div>Element 1</div>
<div>Element 2</div>
```

#### CSS

```css
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-right-width: thick;
}
div:nth-child(2) {
  border-right-width: 2em;
}
```

#### 결과

명세
--

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

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

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

같이 보기
-----

* 테두리 너비 관련 CSS 속성: `border-bottom-width`, `border-left-width`, `border-top-width`, and `border-width`.
* 오른쪽 테두리 관련 CSS 속성: `border`, `border-right`, `border-right-style`, and `border-right-color`.


border-top-color - CSS: Cascading Style Sheets

border-top-color
================

**`border-top-color`** CSS 속성은 요소의 위쪽 테두리 색상을 지정합니다. `border-color` 또는 `border-top` 단축 속성으로도 지정할 수 있습니다.

시도해보기
-----

구문
--

```css
/\* <color> 값 \*/
border-top-color: red;
border-top-color: #ffbb00;
border-top-color: rgb(255, 0, 0);
border-top-color: hsla(100%, 50%, 25%, 0.75);
border-top-color: currentColor;
border-top-color: transparent;

/\* 전역 값 \*/
border-top-color: inherit;
border-top-color: initial;
border-top-color: unset;
```

`border-top-color` 속성은 하나의 값을 사용해 지정합니다.

### 값

`<color>`

위쪽 테두리의 색상.

### 형식 구문
```

border-top-color =
  <color>     |
  <image-1D>

<image-1D> =
  <stripes()>

<stripes()> =
  stripes( <color-stripe># )

<color-stripe> =
  <color>                            &&
  [ <length-percentage> | <flex> ]?

<length-percentage> =
  <length>      |
  <percentage>

```

예제
--

### 테두리를 가진 간단한 상자

#### HTML

```html
<div class="mybox">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="redtext">red</span>.
  </p>
</div>
```

#### CSS

```css
.mybox {
  border: solid 0.3em gold;
  border-top-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```

#### 결과

명세
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-color |

|  |  |
| --- | --- |
| 초기값 | `currentcolor` |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| 계산 값 | computed color |
| Animation type | a color |

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

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

같이 보기
-----

* 테두리 관련 CSS 단축 속성: `border`, `border-top`, `border-color`.
* 다른 방향 테두리의 색상 관련 CSS 단축 속성: `border-right-color`, `border-bottom-color`, `border-left-color`.
* 위쪽 테두리 관련 CSS 속성: `border-top-style`, `border-top-width`.


@keyframes - CSS: Cascading Style Sheets

@keyframes
==========

**`@keyframes`** @규칙은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이를 통해 브라우저가 transitions으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있습니다.

구문
--

```css
@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
```

### 값

`<custom-ident>` (en-US)

keyframe 목록을 식별하는 이름입니다. 이 이름은 CSS 구문에서 생성된 식별자와 일치해야 합니다.

`from`

시작 offset인 `0%` 입니다.

`to`

마지막 offset인 `100%` 입니다.

`<percentage>`

전체 애니메이션 시간 중 명시된 keyframe이 발생해야 하는 시점의 %입니다.

`<timeline-range-name>` `<percentage>`
Experimental

지정된 `animation-range` (en-US) 를 통과한 시간 중 지정된 키 프레임이 발생해야 하는 시간의 백분율입니다. 타임라인 범위를 사용하는 애니메이션의 종류에 대한 자세한 사항은 CSS 스크롤 기반 애니메이션 (en-US)을 참고하세요.

설명
--

키프레임을 사용하려면 `@keyframes` 룰을 애니메이션과 키프레임 리스트를 매칭시킬 `animation-name` (en-US) 속성으로 사용할 이름과 함께 생성합니다. 각 `@keyframes` 룰은 키프레임 선택자의 스타일 리스트를 포함하고 있고, 각 리스트는 각 키프레임이 생성되고 키프레임의 스타일 정보를 포함하고 있는 지점에서 사용할 %로 구성됩니다.

키프레임의 %를 꼭 순서대로 나열하지 않더라도, %의 순서대로 처리됩니다.

JavaScript는 `@keyframes` @규칙을 CSS 오브젝트 모델 인터페이스인 `CSSKeyframesRule` (en-US)를 통해서 접근할 수 있습니다.

### 유효한 키프레임 리스트

만약 키프레임이 시작 상태와 끝 애니메이션(이는 `0%`/`from` 과 `100%`/`to`를 말합니다)을 명시하지 않는다면, 브라우저는 처음과 마지막에 현재 존재하는 요소의 스타일을 사용합니다. 이는 요소의 애니메이션을 초기 상태에서 다시 시작하고 되돌아가는 데 사용될 수 있습니다.

만약 키 프레임 룰에 애니메이션이 되지 않는 속성을 포함하면 무시되지만, 애니메이션을 지원하는 속성들은 애니메이션이 됩니다.

### 중복 처리

만약 한개의 이름에 대해서 여러개의 키프레임 셋이 존재하면, 파서가 마지막으로 마주치는 키프레임 셋만 유효합니다. `@keyframes` 룰은 캐스케이드 되지 않기 때문에 한개의 룰 셋 이상을 적용하지 않습니다.

만약 애니메이션들의 시간 offset이 중복된 경우, 해당 %에 대한 모든 `@keyframes` 규칙들이 해당 프레임에 적용됩니다. 동일한 % 값을 가진 여러 `@keyframes` 규칙들은 캐스케이드 됩니다.

### 키 프레임에 속성이 누락된 경우

어떤 키 프레임에도 정의되지 않은 속성들은 중간에 가능한 곳에 삽입되며, 삽입이 가능하지 않은 애니메이션들은 제외됩니다. 예시는 아래와 같습니다.

```css
@keyframes identifier {
  0% {
    top: 0;
    left: 0;
  }
  30% {
    top: 50px;
  }
  68%,
 72% {
    left: 50px;
  }
  100% {
    top: 100px;
    left: 100%;
  }
}
```

여기 `top` (en-US) 속성은 `0%`, `30%`, `100%` 키 프레임을 이용하여 애니메이션 됩니다. `left` (en-US) 속성은 `0%`, `68%`, `72%`, `100%` 키 프레임을 사용해 애니메이션 됩니다.

### 키 프레임이 여러번 정의 된 경우

키프레임이 여러 번 정의되었지만 영향을 받는 모든 속성이 각 키프레임에 있는 것은 아니라면 이러한 키프레임에 지정된 모든 값이 고려됩니다. 예시는 아래와 같습니다.

```css
@keyframes identifier {
  0% {
    top: 0;
  }
  50% {
    top: 30px;
    left: 20px;
  }
  50% {
    top: 10px;
  }
  100% {
    top: 0;
  }
}
```

이 예제를 보면 `50%` 키프레임에서는 `top: 10px`과 `left: 20px` 만 적용됩니다.

비표준
 키 프레임 효과 연속은 Firefox 14부터 지원됩니다. 이 의미는 위 예제의 경우 50% 키 프레임에서 왼쪽 : 20px 값이 고려된다는 의미입니다. 이러한 기능이 스펙에는 아직 정의가 되어있진 않지만, 현재 도입에 대한 토론이 진행 중입니다.

### 키프레임에서의 `!important`

키프레임에서 `!important` 속성을 이용한 정의는 모두 무시됩니다.

```css
@keyframes important1 {
  from {
    margin-top: 50px;
  }
  50% {
    margin-top: 150px !important;
  } /\* ignored \*/
  to {
    margin-top: 100px;
  }
}

@keyframes important2 {
  from {
    margin-top: 50px;
    margin-bottom: 100px;
  }
  to {
    margin-top: 150px !important; /\* ignored \*/
    margin-bottom: 50px;
  }
}
```

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

@keyframes =
  @keyframes <keyframes-name> { <qualified-rule-list> }

<keyframes-name> =
  <custom-ident> (en-US)  |
  <string> (en-US)

```

예제
--

CSS 애니메이션에서 예제를 참고하세요.

### CSS 애니메이션 예제

예제는 CSS 애니메이션 사용하기와 스크롤 기반 애니메이션으로 스크롤의 요소들 애니메이션 하기를 참고하세요.

명세서
---

| Specification |
| --- |
| CSS Animations Level 1 # keyframes |

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

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

같이 보기
-----

* `animation-range` (en-US)
* CSS 스크롤 기반 애니메이션 (en-US)
* CSS 애니메이션 사용하기 (en-US)
* 스크롤 기반 애니메이션으로 스크롤의 요소들 애니메이션 하기
* `AnimationEvent`


min-height - CSS: Cascading Style Sheets

min-height
==========

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

시도해보기
-----

`min-height`가 `max-height` 또는 `height`보다 커지면 요소의 높이는 `min-height`의 값을 사용합니다.

구문
--

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

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

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

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

### 값

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

#### 키워드 값

`auto`

최소 높이를 정하지 않음.

`max-content`
Experimental

본질적인 선호 높이.

`min-content`
Experimental

본질적인 최소 높이.

`fill-available`
Experimental

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

`fit-content`
Experimental

CSS3 Box 모듈에 따라 `min-content`의 다른 이름. CSS3 Sizing 모듈은 더 복잡한 알고리즘을 정의하지만, 모든 브라우저에서 실험 기능으로도 구현하지 않습니다.

### 형식 구문
```

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

<length-percentage> =
  <length>      |
  <percentage>

```

예제
--

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

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

명세
--

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

|  |  |
| --- | --- |
| 초기값 | `auto` |
| 적용대상 | 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 `0`. |
| 계산 값 | 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`
* `height`, `max-height`


의사 요소 - CSS: Cascading Style Sheets

의사 요소
=====

CSS **의사 요소**(가상 요소)는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있습니다. 예를 들어 `::first-line` (en-US)을 사용하면 문단 첫 줄의 글씨체만 바꿀 수 있습니다.

```css
/\* The first line of every <p> element. \*/
p::first-line {
  color: blue;
  text-transform: uppercase;
}
```

**참고:** 의사 클래스는 의사 요소와 달리 요소의 **특정 상태**에 스타일을 적용할 때 사용합니다.

구문
--
```

selector::pseudo-element {
  property: value;
}
```

하나의 선택자에 하나의 의사 요소만 사용할 수 있습니다. 반드시 단순 선택자 뒤에 위치해야 합니다.

**참고:** 참고: 규칙을 따라 단일 콜론(`:`) 대신 이중 콜론(`::`)을 사용하여 의사 클래스와 의사 요소를 구별해야 합니다. 그러나 과거 W3C 명세에선 이런 구별을 두지 않았으므로 대부분의 브라우저는 기존 의사 요소에 대해 두 구문 모두 지원합니다.

표준 의사 요소 색인
-----------

* `::after (:after)`
* `::backdrop` (en-US)
Experimental
* `::before (:before)` (en-US)
* `::cue` (en-US)
* `::cue-region` (en-US)
* `::first-letter (:first-letter)` (en-US)
* `::first-line (:first-line)` (en-US)
* `::grammar-error` (en-US)
Experimental
* `::marker` (en-US)
Experimental
* `::part()` (en-US)
Experimental
* `::placeholder` (en-US)
Experimental
* `::selection` (en-US)
* `::slotted()` (en-US)
* `::spelling-error` (en-US)
Experimental
명세
--

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4  |
| CSS Positioned Layout Module Level 4  |
| CSS Shadow Parts  |
| WebVTT: The Web Video Text Tracks Format  |

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

| 브라우저 | 최소 버전 | 지원 |
| --- | --- | --- |
| Firefox (Gecko) | 1.0 (1.0) | `:pseudo-element` |
| 1.0 (1.5) | `:pseudo-element ::pseudo-element` |
| Opera | 4.0 | `:pseudo-element` |
| 7.0 | `:pseudo-element ::pseudo-element` |
| Safari (WebKit) | 1.0 (85) | `:pseudo-element ::pseudo-element` |

같이 보기
-----

* 의사 클래스


CSS Text - CSS: Cascading Style Sheets

CSS Text
========

**CSS Text**는 줄 바꿈, 정돈 및 정렬, 공백 처리 및 텍스트 변환 같은 텍스트 조작을 수행하는 법을 정의하는 CSS 모듈입니다.

참고서
---

### 속성

* `hanging-punctuation` (en-US)
* `hyphens`
* `letter-spacing`
* `line-break`
* `overflow-wrap`
* `tab-size`
* `text-align`
* `text-align-last` (en-US)
* `text-indent` (en-US)
* `text-justify` (en-US)
* `text-size-adjust` (en-US)
* `text-transform` (en-US)
* `white-space`
* `word-break`
* `word-spacing`
명세
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1  |
| CSS Text Module Level 3  |
| CSS Text Module Level 4  |


CSS Flow Layout - CSS: Cascading Style Sheets

CSS Flow Layout
===============

*일반적인 흐름 Normal Flow*, 또는 흐름 레이아웃 Flow Layout 은 그 레이아웃 변화가 있기 전까지 페이지 안의 블록 요소와 인라인 요소가 보여지는 방식 입니다. 흐름이란 본질적으로 레이아웃 아래 서로 같이 동작하고 서로에게 서로가 알려지는 것들의 집합 입니다. 만약에 어느 하나가 *흐름에서 벗어나면* 그것은 독립적으로 동작하게 됩니다.

*일반적인 흐름*에서, **인라인** 요소들은 한줄러 늘어서 보여지게 되는데, 이는 문서의 Writing Mode 에 따라 문장 안의 단어들이 보여지는 방향을 따르게 됩니다. **블록** 요소들은 문서의 Writing Mode 에서의 단락이 하나씩 나눠져 보여지듯이 나타납니다. 그래서 영어에서는, 인라인 요소들은 왼쪽에서 시작하여 하나씩 보여지고, 블록 요소들은 맨 위에서부터 페이지를 따라 아래로 보여집니다.

기본적인 예
------

아래의 예는 블록과 인라인 레벨 박스들을 설명합니다. 초록 테두리를 갖은 두개의 paragraph 요소들은 블록 레벨에 있어서 하나씩 위에서 아래로 나타납니다.

첫번째 문장은 파란 바탕을 갖은 span 요소를 포함하고 있습니다. 이 요소는 인라인 레벨에 있으며 따라서 문장 내에 이어져 나타납니다.

Guides
------

* Block and Inline Layout in Normal Flow
* In Flow and Out of Flow
* Formatting Contexts Explained (en-US)
* Flow Layout and Writing Modes
* Flow Layout and Overflow
Reference
---------

### Glossary Entries

* Block (CSS)

1. **CSS**
2. **CSS Reference**


border-top-width - CSS: Cascading Style Sheets

border-top-width
================

CSS **`border-top-width`** 속성은 요소의 위쪽 테두리 너비를 지정합니다.

시도해보기
-----

구문
--

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

/\* <length> 값 \*/
border-top-width: 10em;
border-top-width: 3vmax;
border-top-width: 6px;

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

### 값

`<line-width>`

테두리의 너비입니다. 0 이상의 `<length>` 또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다.

| `thin` |  | 얇은 테두리 |
| --- | --- | --- |
| `medium` |  | 중간 테두리 |
| `thick` |  | 넓은 테두리 |

**참고:** 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나 `thin ≤ medium ≤ thick`이고, 하나의 문서 내에서 동일합니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `medium` |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| 계산 값 | the absolute length or `0` if `border-top-style` is `none` or `hidden` |
| Animation type | a length |

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

border-top-width =
  <line-width>

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

```

예제
--

### HTML

```html
<div>Element 1</div>
<div>Element 2</div>
```

### CSS

```css
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-top-width: thick;
}
div:nth-child(2) {
  border-top-width: 2em;
}
```

### 결과

명세
--

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

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

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

같이 보기
-----

* 테두리 너비 관련 CSS 속성: `border-left-width`, `border-right-width`, `border-bottom-width`, and `border-width`.
* 위쪽 테두리 관련 CSS 속성: `border`, `border-top`, `border-top-style`, and `border-top-color`.


border-right-color - CSS: Cascading Style Sheets

border-right-color
==================

**`border-right-color`** CSS 속성은 요소의 오른쪽 테두리 색상을 지정합니다. `border-color` 또는 `border-right` 단축 속성으로도 지정할 수 있습니다.

시도해보기
-----

구문
--

```css
/\* <color> 값 \*/
border-right-color: red;
border-right-color: #ffbb00;
border-right-color: rgb(255, 0, 0);
border-right-color: hsla(100%, 50%, 25%, 0.75);
border-right-color: currentColor;
border-right-color: transparent;

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

`border-right-color` 속성은 하나의 값을 사용해 지정합니다.

### 값

`<color>`

오른쪽 테두리의 색상.

### 형식 구문
```

border-right-color =
  <color>     |
  <image-1D>

<image-1D> =
  <stripes()>

<stripes()> =
  stripes( <color-stripe># )

<color-stripe> =
  <color>                            &&
  [ <length-percentage> | <flex> ]?

<length-percentage> =
  <length>      |
  <percentage>

```

예제
--

### 테두리를 가진 간단한 상자

#### HTML

```html
<div class="mybox">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="redtext">red</span>.
  </p>
</div>
```

#### CSS

```css
.mybox {
  border: solid 0.3em gold;
  border-right-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```

#### 결과

명세
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-color |

|  |  |
| --- | --- |
| 초기값 | `currentcolor` |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| 계산 값 | computed color |
| Animation type | a color |

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

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

같이 보기
-----

* 테두리 관련 CSS 단축 속성: `border`, `border-right`, `border-color`.
* 다른 방향 테두리의 색상 관련 CSS 단축 속성: `border-top-color`, `border-bottom-color`, `border-left-color`.
* 오른쪽 테두리 관련 CSS 속성: `border-right-style`, `border-right-width`.


<angle> - CSS: Cascading Style Sheets

<angle>
=======

CSS **`<angle>`** 자료형은 각도의 값을 도, 그레이드, 라디안 또는 회전수로 표현합니다. `<gradient>`나 일부 `transform` 함수에서 사용합니다..

시도해보기
-----

구문
--

`<angle>` 자료형은 `<number>` 다음에 아래 나열한 단위 중 하나를 붙여 구성합니다. 다른 CSS 단위처럼 숫자와 단위 문자 사이에 공백은 존재하지 않습니다. 숫자 `0` 뒤에는 단위를 붙이지 않아도 됩니다.

선택적으로 `+`, `-` 부호를 표시할 수 있습니다. 양의 부호는 시계방향 회전을, 음의 부호는 시계 반대방향 회전을 나타냅니다. 정적 속성에선 하나의 각도를 다른 각도로 표현할 수 있습니다. 예컨대 `90deg`는 `-270deg`, `1turn`은 `4turn`과 동일합니다. 그러나 동적 속성, 즉 `animation`이나 `transition`에서는 결과가 달라집니다.

### 단위

`deg`

각도를 도 단위로 나타냅니다. 1회전은 `360deg`입니다. 예: `0deg`, `90deg`, `14.23deg`

`grad`

각도를 그레이드로 나타냅니다. 1회전은 `400grad`입니다. 예: `0grad`, `100grad`, `38.8grad`

`rad`

각도를 라디안으로 나타냅니다. 1회전은 2π 라디안으로 약 `6.2832rad`입니다. `1rad`는 180/π`deg`입니다. 예: `0rad`, `1.0708rad`, `6.2832rad`

`turn`

각도를 회전의 수로 나타냅니다. 1회전은 `1turn`입니다. 예: `0turn`, `0.25turn`, `1.2turn`

예제
--

### 시계 방향 우측 90도

| Angle90.png | `90deg = 100grad = 0.25turn ≈ 1.5708rad` |
| --- | --- |

### 반대로 회전

| Angle180.png | `180deg = 200grad = 0.5turn ≈ 3.1416rad` |
| --- | --- |

### 시계 반대 방향 우측 90도

| AngleMinus90.png | `-90deg = -100grad = -0.25turn ≈ -1.5708rad` |
| --- | --- |

### 회전 없음

| Angle0.png | `0 = 0deg = 0grad = 0turn = 0rad` |
| --- | --- |

명세
--

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

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

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


animation-fill-mode - CSS: Cascading Style Sheets

animation-fill-mode
===================

**`animation-fill-mode`** CSS 속성은 CSS 애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정합니다.

```css
/\* Single animation \*/
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

/\* Multiple animations \*/
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;
```

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

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

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

### 값(Values)

`none`

애니메이션은 실행되지 않을 때 대상에 스타일을 적용하지 않습니다. 요소는 대신 적용된 다른 CSS 규칙을 사용하여 표시됩니다. 이것은 기본값입니다.

`forwards`

대상은 실행 된 애니메이션의 마지막 keyframe (en-US)에 의해 설정된 계산 된 값을 유지합니다. 마지막 키 프레임은 `animation-direction`및 `animation-iteration-count` (en-US)의 값에 따라 다릅니다.

| `animation-direction` | `animation-iteration-count` | last keyframe encountered |
| --- | --- | --- |
| `normal` | even or odd | `100%` or `to` |
| `reverse` | even or odd | `0%` or `from` |
| `alternate` | even | `0%` or `from` |
| `alternate` | odd | `100%` or `to` |
| `alternate-reverse` | even | `100%` or `to` |
| `alternate-reverse` | odd | `0%` or `from` |

`backwards`

애니메이션은 대상에 적용되는 즉시 첫 번째 관련 keyframe (en-US) 에 정의 된 값을 적용하고 `animation-delay` 기간 동안 이 값을 유지합니다. 첫 번째 관련 키프레임은 `animation-direction`의 값에 따라 다릅니다.

| `animation-direction` | first relevant keyframe |
| --- | --- |
| `normal` or `alternate` | `0%` or `from` |
| `reverse` or `alternate-reverse` | `100%` or `to` |

`both`

애니메이션은 앞뒤 양쪽 모두의 규칙을 따르므로 애니메이션 속성이 양방향으로 확장됩니다.

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

### Formal syntax
```

animation-fill-mode =
  <single-animation-fill-mode>#

<single-animation-fill-mode> =
  none       |
  forwards   |
  backwards  |
  both

```

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

다음 예제에서 animation-fill-mode의 효과를 볼 수 있습니다. 무한 시간 동안 실행되는 애니메이션의 경우 원래 상태 (기본값)로 되돌리기보다는 최종 상태로 유지하는 방법을 보여줍니다.

### HTML

```html
<p>회색 박스 위에 마우스를 올려보세요!</p>
<div class="demo">
  <div class="grows">이 글씨는 커집니다.</div>
  <div class="growsandstays">이 글씨는 커지며, 커진 상태를 유지합니다.</div>
</div>
```

### CSS

```css
.demo {
  border-top: 100px solid #ccc;
  height: 300px;
}

@keyframes grow {
  0% {
    font-size: 0;
  }
  100% {
    font-size: 40px;
  }
}

.demo:hover .grows {
  animation-name: grow;
  animation-duration: 3s;
}

.demo:hover .growsandstays {
  animation-name: grow;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}
```

자세한 예제는 CSS animations를 보십시오.

명세
--

| Specification |
| --- |
| CSS Animations Level 1 # animation-fill-mode |

브라우저 호환성(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


자손 결합자 - CSS: Cascading Style Sheets

자손 결합자
======

보통 한 칸의 공백 문자로 표현하는 **자손 결합자**(" ")는 두 개의 선택자를 조합하여, 뒤쪽 선택자 요소의 조상(부모, 부모의 부모, 부모의 부모의 부모...)에 앞쪽 선택자 요소가 존재할 경우 선택합니다. 자손 결합자를 활용하는 선택자를 자손 선택자라고 부릅니다.

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

기술적으로, 자손 결합자는 하나 이상의 CSS 공백 문자이므로 스페이스 외에도 캐리지 리턴, 폼 피드, 새 줄, 탭 문자도 해당합니다. 또한 결합자를 구성하는 공백 문자는 CSS 주석을 임의의 개수만큼 포함할 수 있습니다.

구문
--
```

selector1 selector2 {
  /* property declarations */
}
```

예제
--

### CSS

```css
li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}
```

### HTML

```html
<ul>
  <li>
    <div>Item 1</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
  <li>
    <div>Item 2</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
</ul>
```

### 결과

명세
--

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

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

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

같이 보기
-----

* 자식 결합자


<display-internal> - CSS: Cascading Style Sheets

<display-internal>
==================

`table`과 `ruby` 같은 몇몇 레이아웃 모델은 복잡한 내부 구조를 가지고 있으며, 자식이나 자손들로 채울 수 있는 다양한 역할을 가지고 있습니다. 이 페이지는 이러한 "내재적인" 디스플레이 값을 정의하며, 이들은 특정 레이아웃 모드 안에서만 의미를 가집니다.

문법
--

유효한 `<display-internal>` 값들:

`table-row-group`

이 요소는 `<tbody>` (en-US) HTML 요소처럼 동작합니다.

`table-header-group`

이 요소는 `<thead>` HTML 요소처럼 동작합니다.

`table-footer-group`

이 요소는 `<tfoot>` HTML 요소처럼 동작합니다.

`table-row`

이 요소는 `<tr>` (en-US) HTML 요소처럼 동작합니다.

`table-cell`

이 요소는 `<td>` (en-US) HTML 요소처럼 동작합니다.

`table-column-group`

이 요소는 `<colgroup>` (en-US) HTML 요소처럼 동작합니다.

`table-column`

이 요소는 `<col>` (en-US) HTML 요소처럼 동작합니다.

`table-caption`

이 요소는 `<caption>` HTML 요소처럼 동작합니다.

`ruby-base`
Experimental

이 요소는 `<rb>` HTML 요소처럼 동작합니다.

`ruby-text`
Experimental

이 요소는 `<rt>` HTML 요소처럼 동작합니다.

`ruby-base-container`
Experimental

이 요소는 익명의 박스로 만들어지는 `<rbc>` HTML 요소처럼 동작합니다.

`ruby-text-container`
Experimental

이 요소는 `<rtc>` HTML 요소처럼 동작합니다.

예제
--

### CSS 테이블의 예시

다음 예시에서는 CSS 테이블 레이아웃을 이용해 간단한 폼을 배치합니다.

#### HTML

```html
<main>
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" />
  </div>
  <div>
    <label for="age">Age</label>
    <input type="text" id="age" name="age" />
  </div>
</main>
```

#### CSS

```css
main {
  display: table;
}

div {
  display: table-row;
}

label,
input {
  display: table-cell;
  margin: 5px;
}
```

#### 결과

명세서
---

#### No specification found

No specification data found for `css.properties.display.table_values,css.properties.display.ruby_values`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

### css.properties.display.table\_values

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

### css.properties.display.ruby\_values

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

같이 보기
-----

* `display` (en-US)
    + `<display-outside>` (en-US)
    + `<display-inside>` (en-US)
    + `<display-listitem>` (en-US)
    + `<display-box>` (en-US)
    + `<display-legacy>` (en-US)


<image> - CSS: Cascading Style Sheets

<image>
=======

**`<image>`** CSS 자료형은 2차원 이미지를 나타냅니다. 이미지는 `<url>()`로 참조하는 일반 이미지, `<gradient>` 또는 `element()` (en-US)를 사용해 동적으로 생성하는 이미지 두 종류가 있습니다. 다른 이미지 함수로는 `image()` (en-US), `image-set()` (en-US), `cross-fade()` (en-US) 등이 있습니다. 이미지는 `background-image`, `border-image`, `content`, `cursor`, `list-style-image` (en-US) 등 많은 속성에 사용할 수 있습니다.

이미지 유형
------

CSS는 다음 이미지 종류를 처리할 수 있습니다.

* **본질적인 크기**(원래 크기)를 가진 이미지. JPEG, PNG 등 래스터 포맷.
* **여러 개의 본질적인 크기**를 가진 이미지. 하나의 파일이 이미지의 여러 버전을 가지고 있는 경우. 일부 .ico 파일 등. 이 때, 본질적인 크기는 제일 크고 컨테이닝 박스와 가로세로 비율이 제일 비슷한 이미지를 따라갑니다.
* 본질적인 크기는 없지만 **본질적인 종횡비**를 가진 이미지. SVG 등 벡터 포맷.
* **본질적인 크기도, 종횡비도 없는** 이미지. CSS 그레이디언트 등.

CSS는 객체의 구체적인 크기를 (1) 그 본질적인 크기, (2) `width`, `height`, `background-size` (en-US) 등 CSS 속성으로 설정한 크기, (3) 아래 표에 나열한, 이미지를 설정한 속성에 따른 기본값을 통해 결정합니다.

| 객체 유형 (CSS 속성) | 객체 크기의 기본값 |
| --- | --- |
| `background-image` | 요소의 배경 위치 영역 크기 |
| `list-style-image` (en-US) | `1em` 문자의 크기 |
| `border-image-source` | 요소의 테두리 이미지 영역 크기 |
| `cursor` | 브라우저가 정의한, 클라이언트 시스템의 일반적인 커서 사이즈 |
| `mask-image` (en-US) | ? |
| `shape-outside` (en-US) | ? |
| `mask-border-source` (en-US) | ? |
| `@counter-style` (en-US)의 `symbols()` (en-US) | 실험적 기능. 지원 시엔 브라우저가 정의한, 클라이언트 시스템의 일반적인 커서 사이즈 |
| 의사 요소의 `content` (`::after`/`::before` (en-US)) | 300px × 150px 사각형 |

구체적인 크기는 다음 알고리즘을 사용해 계산합니다.

* 너비와 높이 모두 지정한 크기가 있다면 그 값을 구체적인 크기로 사용합니다.
* 너비 또는 높이만 지정한 크기가 있고, 본질적인 종횡비가 있다면 그 값으로 다른 크기를 계산해 사용하고, 지정한 크기가 본질적인 크기와 일치하면 다른 크기도 본질적인 크기를 사용하고, 모두 아니면 객체 크기의 기본값을 사용합니다.
* 너비도 높이도 지정한 크기가 없다면, 객체 크기의 기본값을 넘지 않는 한도에서 이미지의 본질적인 종횡비를 사용해 구체적인 크기를 결정합니다. 본질적인 종횡비가 없으면 요소의 종횡비를 사용하며, 요소도 가지고 있지 않으면 객체 크기의 기본값에서 가져옵니다.

**참고:** 모든 브라우저가 모든 속성에 모든 유형의 이미지를 지원하는건 아닙니다. 브라우저 호환성 항목을 참고하세요.

구문
--

`<image>` 자료형은 다음 중 하나로 나타낼 수 있습니다.

* `<url>()` 자료형
* `<gradient>` 자료형
* `element()` (en-US) 함수로 정의한 웹페이지의 일부
* `image()` (en-US) 함수로 정의한 이미지, 이미지 조각, 단일 색
* `cross-fade()` (en-US) 함수로 정의한 두 개 이상 이미지의 혼합
* `image-set()` (en-US) 함수로 정의한 이미지 중 적절한 해상도
예제
--

### 유효한 이미지

```css
url(test.jpg)               /\* "test.jpg"가 실제로 이미지일 때 <url> \*/
linear-gradient(blue, red)  /\* <gradient> \*/
element(#realid)            /\* "realid"가 페이지에 존재하는 ID일 때
 element() 함수로 참조한 웹페이지의 일부 \*/
image(ltr 'arrow.png#xywh=0,0,16,16', red)
                            /\* "arrow.png"가 지원되는 이미지일 때 <url>의 일부, 원본의 좌상단부터 16x16
 지원하지 않는 이미지일 때 빨강 단색
 RTL 언어에서는 이미지아 가로방향 반전됨 \*/
cross-fade(20% url(twenty.png), url(eighty.png))
                            /\* 혼합 이미지, "twenty.png" 불투명도 20%
 "eighty.png" 불투명도 80% \*/
image-set('test.jpg' 1x, 'test-2x.jpg' 2x)
                            /\* 여러 해상도의 이미지 묶음 \*/
```

### 유효하지 않은 이미지

```css
nourl.jpg            /\* 이미지 파일은 url() 함수로 정의해야 함 \*/
url(report.pdf)      /\* url() 함수가 가리키는 파일은 이미지여야 함 \*/
element(#fakeid)     /\* 요소 ID가 페이지에 존재해야 함 \*/
image(z.jpg#xy=0,0)  /\* 이미지 조각은 xywh=#,#,#,# 형식으로 작성해야 함 \*/
image-set('cat.jpg' 1x, 'dog.jpg' 1x) /\* 각각의 이미지가 다른 해상도를 가져야 함 \*/
```

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

브라우저는 배경 이미지에 대한 어떠한 정보도 보조 기술에 제공하지 않습니다. 스크린 리더 사용자에게 특히 큰 영향을 주는데, 스크린 리더가 배경 이미지의 존재를 표현하지 않으므로 사용자도 이미지에 대해 알 수 없기 때문입니다. 이미지가 문서의 목적을 이해하는 것에 중요한 정보를 포함하는 경우 문서에 구조적으로 포함하는 편이 좋습니다.

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

| Specification |
| --- |
| CSS Images Module Level 3 # image-values |

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

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

같이 보기
-----

* `<gradient>`
* `element()` (en-US)
* `image()` (en-US)
* `image-set()` (en-US)
* `cross-fade()` (en-US)


border-bottom-width - CSS: Cascading Style Sheets

border-bottom-width
===================

CSS **`border-bottom-width`** 속성은 요소의 아래 테두리 너비를 지정합니다.

시도해보기
-----

구문
--

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

/\* <length> 값 \*/
border-bottom-width: 10em;
border-bottom-width: 3vmax;
border-bottom-width: 6px;

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

### 값

`<line-width>`

테두리의 너비입니다. 0 이상의 `<length>` 또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다.

| `thin` |  | 얇은 테두리 |
| --- | --- | --- |
| `medium` |  | 중간 테두리 |
| `thick` |  | 굵은 테두리 |

**참고:** 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나 `thin ≤ medium ≤ thick`이고, 하나의 문서 내에서 동일합니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `medium` |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| 계산 값 | the absolute length or `0` if `border-bottom-style` is `none` or `hidden` |
| Animation type | a length |

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

border-bottom-width =
  <line-width>

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

```

예제
--

### 아래 테두리의 너비 비교

#### HTML

```html
<div>Element 1</div>
<div>Element 2</div>
```

#### CSS

```css
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-bottom-width: thick;
}
div:nth-child(2) {
  border-bottom-width: 2em;
}
```

#### 결과

명세
--

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

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

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

같이 보기
-----

* 테두리 너비 관련 CSS 속성: `border-left-width`, `border-right-width`, `border-top-width`, and `border-width`.
* 아래 테두리 관련 CSS 속성: `border`, `border-bottom`, `border-bottom-style`, and `border-bottom-color`.


:focus - CSS: Cascading Style Sheets

:focus
======

CSS **`:focus`** 의사 클래스는 양식의 입력 칸 등 포커스를 받은 요소를 나타냅니다. 보통 사용자가 요소를 클릭 또는 탭하거나, 키보드 `Tab` 키로 선택했을 때 발동합니다.

```css
/\* Selects any <input> when focused \*/
input:focus {
  color: red;
}
```

**참고:** `:focus`는 포커스를 받은 요소 자체에만 해당합니다. 자손이 포커스를 받았을 때의 요소를 선택해야 하면 `:focus-within`을 사용하세요.

구문
--

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

### HTML

```html
<input class="red-input" value="저는 포커스를 받으면 빨갛게 됩니다." /><br />
<input class="blue-input" value="저는 포커스를 받으면 파랗게 됩니다." />
```

### CSS

```css
.red-input:focus {
  background: yellow;
  color: red;
}

.blue-input:focus {
  background: yellow;
  color: blue;
}
```
### 결과

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

낮은 시력을 가진 사용자도 시각적 포커스 지시자를 볼 수 있어야 합니다. 이는 또한 맑은 날의 외부처럼 밝은 공간에서의 스크린 사용자처럼 다른 사람에게도 도움이 될 수 있습니다. WCAG 2.1 SC 1.4.11 Non-Text Contrast는 시각적 포커스 지시자의 대비를 최소한 3:1로 요구하고 있습니다.

* Accessible Visual Focus Indicators: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators
### `:focus { outline: none; }`

절대 포커스의 기본 외곽선(시각적 포커스 지시자)을 대체 외곽선 없이 제거하지 마세요. 대체 외곽선은 WCAG 2.1 SC 1.4.11 Non-Text Contrast 기준을 통과해야 합니다.

* Quick Tip: Never remove CSS outlines
명세
--

| Specification |
| --- |
| HTML Standard # selector-focus |
| Selectors Level 4 # focus-pseudo |

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

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

같이 보기
-----

* `:focus-visible` (en-US)
Experimental
* `:focus-within`


background-color - CSS: Cascading Style Sheets

background-color
================

CSS **`background-color`** 속성은 요소의 배경 색을 지정합니다.

시도해보기
-----

구문
--

```css
/\* 키워드 값 \*/
background-color: red;
background-color: indigo;

/\* 16진수 값 \*/
background-color: #bbff00; /\* 완전 불투명 \*/
background-color: #bf0; /\* 완전 불투명 단축 \*/
background-color: #11ffee00; /\* 완전 투명 \*/
background-color: #1fe0; /\* 완전 투명 단축 \*/
background-color: #11ffeeff; /\* 완전 불투명 \*/
background-color: #1fef; /\* 완전 불투명 단축 \*/

/\* RGB 값 \*/
background-color: rgb(255, 255, 128); /\* 완전 불투명 \*/
background-color: rgba(117, 190, 218, 0.5); /\* 50% 불투명도 \*/

/\* HSL 값 \*/
background-color: hsl(50, 33%, 25%); /\* 완전 불투명 \*/
background-color: hsla(50, 33%, 25%, 0.75); /\* 75% 불투명도 \*/

/\* 특별 키워드 값 \*/
background-color: currentcolor;
background-color: transparent;

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

`background-color` 속성은 하나의 `<color>` 값을 사용해 지정합니다.

### 값

`color`

요소의 배경으로 사용할 단일 색상입니다. `background-image` 뒤에 렌더링 되므로, 이미지가 투명한 부분을 가지고 있으면 그 곳을 통해 볼 수 있습니다.

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

낮은 시력을 가진 사용자도 페이지의 콘텐츠를 읽을 수 있도록 글자 색과 배경색의 대비를 높게 유지하는 것이 중요합니다.

색상 대비율은 배경색과 투명도를 적용한 글자 색의 밝기를 비교해서 얻어낼 수 있습니다. 현재 웹 콘텐츠 접근성 가이드라인(WCAG)을 만족하려면, 텍스트 콘텐츠는 4.5:1, 제목 등 큰 텍스트는 3:1의 대비율이 필요합니다. 큰 텍스트란 18.66px 이상의 굵은 글씨 혹은 24px 이상의 텍스트로 정의하고 있습니다.

* WebAIM: Color Contrast Checker
* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
형식 정의
-----

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

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

background-color =
  <color>

```

예제
--

### HTML

```html
<div class="exampleone">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="exampletwo">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="examplethree">Lorem ipsum dolor sit amet, consectetuer</div>
```

### CSS

```css
.exampleone {
  background-color: teal;
  color: white;
}

.exampletwo {
  background-color: rgb(153, 102, 153);
  color: rgb(255, 255, 204);
}

.examplethree {
  background-color: #777799;
  color: #ffffff;
}
```

### 결과

명세서
---

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

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

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

더 보기
----

* 한 번에 여러 배경 사용하기
* `<color>` 자료형
* 색상 관련 다른 속성: `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로 HTML 요소에 색입히기 (en-US)


border-image-slice - CSS: Cascading Style Sheets

border-image-slice
==================

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-slice`** CSS 속성은 `border-image-source`로 설정한 이미지를 여러 개의 영역으로 나눕니다. 이렇게 나눠진 영역이 요소의 테두리 이미지를 이룹니다.

시도해보기
-----

이미지는 네 개의 꼭지점, 네 개의 모서리, 한 개의 중앙 총 9개의 영역으로 나눠집니다. 상하좌우 각각의 모서리에서 주어진 거리만큼 떨어진 네 개의 분할선이 영역의 크기를 결정합니다.

![The nine regions defined by the border-image or border-image-slice properties](/files/3814/border-image-slice.png)

위의 도표로 구역이 어떻게 나뉘는지 확인할 수 있습니다.

* 1-4번 구역은
 꼭지점 영역
 입니다. 코너 영역은 최종 테두리 이미지에서도 코너를 이루며 한 번씩만 그려집니다.
* 5-8번 구역은
 모서리 영역
 입니다. 모서리 영역은 최종 테두리 이미지의 크기에 맞도록 반복하여 그리거나 크기를 조정하는 등 변형됩니다.
* 9번 구역은
 중앙 영역
 입니다. 기본값으로는 쓰이지 않지만, `fill` 키워드를 지정한 경우 배경 이미지처럼 사용합니다.

`border-image-repeat`, `border-image-width`, `border-image-outset` 속성이 최종 테두리 이미지에서 각 영역의 사용 방법을 지정합니다.

구문
--

```css
/\* 모든 방향 \*/
border-image-slice: 30%;

/\* 세로방향 | 가로방향 \*/
border-image-slice: 10% 30%;

/\* 위 | 가로방향 | 아래 \*/
border-image-slice: 30 30% 45;

/\* 위 | 오른쪽 | 아래 | 왼쪽 \*/
border-image-slice: 7 12 14 5;

/\* `fill` 키워드 \*/
border-image-slice: 10% fill 7 12;

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

`border-image-slice` 속성은 한 개에서 네 개의 `<number>` 또는 `<percentage>` 값을 사용해 지정할 수 있습니다. 각각의 숫자는 네 방향 분할선의 위치를 나타냅니다. 음수 값은 유효하지 않고, 최대 크기보다 큰 값은 `100%`로 잘립니다.

* **한 개의 값**을 지정하면, 모든 분할선의 위치가 각각의 기준 모서리에서 동일한 거리만큼 떨어진 곳으로 설정됩니다.
* **두 개의 값**을 지정하면, 첫 번째 값은 **위와 아래** 분할선, 두 번째 값은 **왼쪽과 오른쪽** 분할선의 위치를 설정합니다.
* **세 개의 값**을 지정하면, 첫 번째 값은 **위**, 두 번째 값은 **왼쪽과 오른쪽**, 세 번째 값은 **아래** 분할선의 위치를 설정합니다.
* **네 개의 값**을 지정하면 각각 **상, 우, 하, 좌** 분할선의 거리를 순서대로 지정합니다. (시계방향)

선택적으로 아무데나 `fill` 키워드를 추가할 수 있습니다.

### 값

`<number>`

모서리에서 분할선까지의 픽셀 거리(래스터 이미지), 또는 좌표 거리(벡터 이미지). 벡터 이미지에서 숫자는 원본 이미지가 아닌 요소의 크기에 상대적이므로 보통 백분율을 선호합니다.

`<percentage>`

모서리에서 분할선까지의 백분율 거리. 가로축은 원본 이미지의 너비에, 세로축은 이미지의 높이에 상대적입니다.

`fill`

중앙 영역을 보존하여 배경 이미지처럼 사용. 실제 `background` 속성보다 위에 그려집니다. 중앙 영역 이미지는 위와 왼쪽 모서리 영역의 크기에 맞도록 늘어납니다.

### 형식 구문
```

border-image-slice =
  [ <number [0,∞]> | <percentage [0,∞]> ]{1,4}  &&
  fill?

```

명세
--

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

|  |  |
| --- | --- |
| 초기값 | `100%` |
| 적용대상 | all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| Percentages | refer to the size of the border image |
| 계산 값 | one to four percentage(s) (as specified) or absolute length(s), plus the keyword `fill` if specified |
| Animation type | by computed value type |

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

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


var() - CSS: Cascading Style Sheets

var()
=====

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

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

* Learn more
* See full compatibility
* Report feedback
CSS **`var()`** 함수는 사용자 지정 속성 (en-US), 또는 "CSS 변수"의 값을 다른 속성의 값으로 지정할 때 사용합니다.

```css
var(--header-color, blue);
```

`var()` 함수는 값이 아닌 속성 이름, 선택자 등 다른 곳에 사용할 수 없습니다. 시도할 경우 유효하지 않은 구문이 되거나, 변수와 관계없는 값이 됩니다.

구문
--

첫 번째 인수는 값을 가져올 사용자 지정 속성의 이름입니다. 선택적으로 제공할 수 있는 두 번째 인수는 대체값으로, 대상 사용자 지정 속성이 유효하지 않은 경우 대신 사용합니다.
```

<var()> =
  var( <custom-property-name> , <declaration-value>? )

```

**참고:** 대체값 구문은 사용자 지정 속성 구문과 동일하게 쉼표를 허용합니다. 그러므로 `var(--foo, red, blue)`의 대체값은 쉼표까지 포함한 `red, blue`입니다. 말하자면 첫 번째 쉼표의 뒤쪽은 모두 대체값이 되는 것입니다.

### 값

`<custom-property-name>`

두 개의 대시로 시작하는, 사용자 지정 속성의 이름을 나타내는 식별자.

`<declaration-value>`

현재 맥락에서, 주어진 사용자 지정 속성이 유효하지 않으면 대신 사용할 대체값. 새 줄, 짝 없이 닫는 괄호(`)`, `]`, `}`) 세미콜론, 느낌표 등 특별한 의미를 가진 문자를 제외한 모든 문자를 사용할 수 있습니다.

예제
--

```css
:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}
```

```css
/\* Fallback \*/
/\* In the component’s style: \*/
.component .header {
  color: var(
    --header-color,
    blue
  ); /\* header-color isn’t set, and so remains blue, the fallback value \*/
}

.component .text {
  color: var(--text-color, black);
}

/\* In the larger application’s style: \*/
.component {
  --text-color: #080;
}
```

명세
--

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

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

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

같이 보기
-----

* `env(…)` (en-US) – 사용자 에이전트가 통제하는 읽기 전용 환경 변수.
* CSS 변수 사용하기


<time> - CSS: Cascading Style Sheets

<time>
======

**`<time>`** CSS 자료형은 시간 값을 초나 밀리초 단위로 나타냅니다. `animation`, `transition`과 관련 속성에서 사용합니다.

구문
--

`<time>` 자료형은 `<number>`와, 그 뒤에 붙는 아래 단위 중 하나로 이루어져 있습니다. 선택 사항으로 하나의 `+` 또는 `-` 기호를 맨 앞에 붙일 수 있습니다. 다른 모든 수치와 마찬가지로 단위와 숫자 사이에는 공백이 없습니다.

**참고:** `0`은 단위와 상관 없이 언제나 동일하지만 시간 단위를 생략할 수 없습니다. 즉 `0`은 유효하지 않은 구문이며 `0s`나 `0ms`를 나타내지 않습니다.

### 단위

**`s`**

시간을 초 단위로 나타냅니다. 예시: `0s`, `1.5s`, `-60s`.

**`ms`**

시간을 밀리초 단위로 나타냅니다. 예시: `0ms`, `150.25ms`, `-60000ms`.

**참고:** `s`와 `ms`의 변환은 `1s` = `1000ms`를 따릅니다.

예제
--

### 유효한 시간
```

12s         양의 정수
-456ms      음의 정수
4.3ms       정수 아닌 실수
14mS        단위는 대소문자 구분을 하지 않지만, 대문자는 추천하지 않음
+0s         + 뒤의 0과 단위
-0ms        - 뒤의 0과 단위
```

### 유효하지 않은 시간
```

0           <length>는 단위 없는 0을 받을 수 있지만, <time>은 불가능
12.0        단위가 없으므로 <number>지만 <time>이 아님
7 ms        수와 단위 사이에 공백은 불허
```

명세
--

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

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

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