recursal/MDN huggingface dataset:
:defined
========

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
CSS **`:defined`** 의사 클래스는 정의된 요소를 선택합니다. 정의된 요소란 브라우저에 내장된 표준 요소와, 성공적으로 정의(`CustomElementRegistry.define()` (en-US) 메서드 등)한 사용자 지정 요소를 의미합니다.


```css
/\* Selects any defined element \*/
:defined {
  font-style: italic;
}

/\* Selects any instance of a specific custom element \*/
simple-custom:defined {
  display: block;
}
```

구문
--

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

### 정의되기 전까지 요소 숨기기

다음 코드는 저희의 defined-pseudo-class 데모에서 발췌한 것입니다. (동작 모습 보기)

이 데모에서는 아주 간단한 사용자 지정 요소를 정의합니다.


```js
customElements.define(
  "simple-custom",
  class extends HTMLElement {
    constructor() {
      super();

      let divElem = document.createElement("div");
      divElem.textContent = this.getAttribute("text");

      let shadowRoot = this.attachShadow({ mode: "open" }).appendChild(divElem);
    }
  },
);
```


그 후, 위의 요소를 표준 `<p>`와 함께 문서에 넣습니다.


```html
<simple-custom text="Custom element example text"></simple-custom>

<p>Standard paragraph example text</p>
```


CSS에는 다음의 스타일을 작성합니다.


```css
// Give the two elements distinctive backgrounds
p {
  background: yellow;
}

simple-custom {
  background: cyan;
}

// Both the custom and the built-in element are given italic text
:defined {
  font-style: italic;
}
```


그리고 아래의 두 규칙을 통해, 정의되지 않은 사용자 지정 요소는 숨기고, 정의가 성공적으로 된 경우에는 블록 레벨 요소로 표시합니다.


```css
simple-custom:not(:defined) {
  display: none;
}

simple-custom:defined {
  display: block;
}
```


위의 데모는 페이지에 불러올 때 꽤 시간이 걸릴 수 있는 복잡한 사용자 지정 요소 스타일링에 유용하게 쓸 수 있습니다. 로딩이 아직 진행 중일 때, 스타일을 입히지 않은는 못생긴 요소가 페이지에 노출되는 것을 막을 수 있으니까요.

명세
--

| Specification |
| --- |
| HTML Standard # selector-defined |

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

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

같이 보기
-----

* 웹 컴포넌트
paint-order
===========

CSS **`paint-order`** 속성은 텍스트 및 모양의 채움 색과 테두리(마커 포함)를 그리는 순서를 지정합니다.

구문
--


```css
/\* 일반 \*/
paint-order: normal;

/\* 단일 값 \*/
paint-order: stroke; /\* draw the stroke first, then fill and markers \*/
paint-order: markers; /\* draw the markers first, then fill and stroke \*/

/\* 다중 값 \*/
paint-order: stroke fill; /\* draw the stroke first, then the fill, then the markers \*/
paint-order: markers stroke fill; /\* draw markers, then stroke, then fill \*/
```


아무것도 지정하지 않았을 때의 기본값은 `fill`, `stroke`, `markers`입니다.

하나의 값만 지정하면 그 값을 제일 먼저 그린 후, 기본값의 순서에 따라 나머지를 그립니다. 두 개를 지정하면 나머지 하나를 맨 나중에 그립니다.

**참고:** 마커의 경우 `marker-*` 속성(`marker-start` (en-US) 등)과 `<marker>` (en-US) 요소를 사용하는 SVG 모양의 경우에만 올바릅니다. HTML 텍스트는 이에 해당하지 않으므로 `stroke`와 `fill`의 순서만 정할 수 있습니다.

### 값

`normal`

일반적인 그리기 순서를 사용합니다.

`stroke`,
 `fill`,
 `markers`

일부 항목 또는 모든 항목의 그리기 순서를 지정합니다.

형식 정의
-----

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

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

paint-order =   
  normal                         |  
  [ fill || stroke || markers ]    
  
```

예제
--

### 테두리와 채움 색 순서 바꾸기

#### SVG


```html
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <text x="10" y="75">stroke in front</text>
  <text x="10" y="150" class="stroke-behind">stroke behind</text>
</svg>
```


#### CSS


```css
text {
  font-family: sans-serif;
  font-size: 50px;
  font-weight: bold;
  fill: black;
  stroke: red;
  stroke-width: 4px;
}

.stroke-behind {
  paint-order: stroke fill;
}
```


#### 결과

명세
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # PaintOrder |

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

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

이 페이지는 한참 실험 중이거나 다른 어떤 부류와도 맞지 않은 CSS 속성을 포함합니다.

참고
--

### 속성

* `all`
* `clip` (en-US)
* `clip-path`
* `display` (en-US)
* `ime-mode`
* `initial-letter` (en-US)
* `initial-letter-align` (en-US)
* `mask-type` (en-US)
* `text-rendering` (en-US)
* `will-change`
안내서
---

*없음.*

스펙
--

*이 속성은 서로 거의 관련이 없습니다. 스펙은 개별 페이지를 참조하세요.*

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

*이 속성은 서로 거의 관련이 없습니다. 브라우저 내 가용성은 개별 페이지를 참조하세요.*
레이아웃 모드
=======

CSS **레이아웃 모드**, 줄여서 **레이아웃**은 형제(sibling) 및 조상(ancestor) 박스와 상호 작용하는 방식을 기반으로 박스의 위치와 크기를 결정하는 알고리즘입니다. 그 중 몇 가지입니다:

* 블록 레이아웃(*block layout*), 문서 배치를 위해 설계됨. 블록 레이아웃은 요소(element)를 *float* 하거나 여러 단(*multiple columns*)에 걸쳐 배치하는 기술 같은 문서 중심 기능을 포함합니다.
* 인라인 레이아웃(*inline layout*), 텍스트 배치를 위해 설계됨.
* 테이블 레이아웃(*table layout*), 표 배치를 위해 설계됨.
* 위치지정 레이아웃(*positioned layout*), 다른 요소와 상호 작용이 많이 없는 요소의 위치지정을 위해 설계됨.
* 신축 박스 레이아웃(*flexible box layout* (en-US)), 부드럽게 크기조정이 될 수 있는 복잡한 페이지 배치를 위해 설계됨. 
Experimental
* 그리드 레이아웃(*grid layout*), 고정된 격자(grid)에 상대적인 요소 배치를 위해 설계됨. 
Experimental

**참고:** CSS 속성(CSS properties) 모두가 모든 *레이아웃 모드*에 적용되지는 않습니다. 속성 대부분은 한 두 모드에 적용되고 속성이 다른 레이아웃 모드에 참여하는 요소에 설정되면 효과가 없습니다.

같이 보기
-----

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

**CSS Charsets**는 스타일 시트에서 사용하는 문자 집합을 정의할 수 있는 CSS 모듈입니다.

참고서
---

### @규칙

* `@charset`
명세서
---

| Specification |
| --- |
| Unknown specification  |
@font-face
==========

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

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

* Learn more
* See full compatibility
* Report feedback
요약(Summary)
-----------

CSS at-rule 인 `@font-face` 를 사용하여 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있다. `@font-face` 를 사용하여 웹페이지 제작자가 원하는 폰트를 사용할 수 있게함으로써, 컴퓨터에 설치된 폰트만을 사용해야했던 제약이 없어지게되었다. `@font-face` at-rule 은 CSS의 top-level에서 뿐 아니라, CSS conditional-group at-rule 안에서도 사용될 수도 있다.

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

@font-face {
  font-family: <a-remote-font-name>;
  src: <source> [,<source>]*;
  [font-weight: <weight>];
  [font-style: <style>];
}
```

### 속성값(Values)

* `<a-remote-font-name>`
    + : font 속성에서 폰트명(font face)으로 지정될 이름을 설정한다.
* `<source>`
    + : 원격 폰트(remote font) 파일의 위치를 나타내는 URL 값을 지정하거나, 사용자 컴퓨터에 설치된 폰트명을 `local("Font Name")`형식으로 지정하는 속성이다.
* `<weight>`
    + : 폰트의 굵기(font weight) 값.
* `<style>`
    + : 폰트 스타일(font style) 값.

사용자의 로컬환경(local computer)에 설치된 폰트는 `local()` 이라는 구문을 사용하여 지정이 가능하다. 만약 해당 폰트를 찾지못한다면, 다른 대체 폰트를 찾을때까지 폰트를 검색작업을 계속 할 것이다.

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

아래는 다운로드하여 사용가능한 폰트를 설정하는 간단한 예제이며, document의 전체 body 영역에 폰트가 적용된다.
```

<html>
<head>
  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
    }

    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>
```


 실행 결과는 다음과 같다.


아래 예제에서는 로컬에 설치된 "Helvetica Neue Bold" 폰트가 사용된다. 만약 해당 폰트가 설치되어 있지 않다면(다른 2개의 폰트를 적용하기 위한 시도를 하고), 다운로드 가능한 "MgOpenModernaBold.ttf" 폰트가 대신 사용된다.


```css
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
    url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
```

주의사항(Notes)
-----------

* Gecko에서는, 동일 도메인 제한(same domain restriction)을 피하기 위해 HTTP access controls (en-US) 을 사용하지 않는한, 웹폰트(web fonts)의 사용시에는 동일 도메인 제한이 적용된다(폰트 파일은 폰트가 사용되는 페이지와 동일한 도메인상에 존재해야 함).
* **참고:** **주의사항:** TrueType, OpenType, Web Open File(WOFF) 폰트에 대한 MIME타입이 정의되지 않았기 때문에, 파일에 적용될 MIME 타입에 대해서는 고려하지 않아도 된다.
* Gecko에서는 웹폰트(web font)가 사용된 페이지를 표시할 때는 웹폰트가 다운로드 되는 동안 사용자의 컴퓨터에 이미 설치되어 있어 즉시 사용가능한 폰트(CSS fallback font)를 사용하여 텍스트를 표시한다. 각각의 웹폰트의 다운로드가 완료되면 Gecko는 해당 텍스트의 폰트를 교체한다. 이러한 과정은 사용자가 웹페이지 내의 텍스트를 좀 더 빨리 읽게끔 도와준다.
명세
--

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-face-rule |

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

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

참고자료(See also)
--------------

* About WOFF (en-US)
* FontSquirrel @font-face generator
* Beautiful fonts with @font-face
* Open Font Library
* Microsoft Developer Network (MSDN) @font-face reference
* When can I use WOFF?
* When can I use SVG Fonts?
:visited
========

**`:visited`** CSS 의사 클래스는 사용자가 방문한 적이 있는 링크를 나타냅니다. `:visited`가 바꿀 수 있는 스타일은 개인정보 보호를 위해 매우 제한적입니다.


```css
/\* 방문한 적이 있는 <a> 선택 \*/
a:visited {
  color: green;
}
```


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

스타일 제한
------

브라우저는 개인정보 보호를 위해 `:visited`에서 사용할 수 있는 스타일을 엄격히 제한하고 있습니다.

* 사용 가능한 CSS 속성은 `color`, `background-color`, `border-color`, `border-bottom-color`, `border-left-color`, `border-right-color`, `border-top-color`, `column-rule-color` (en-US), `outline-color` (en-US)입니다.
* 사용 가능한 SVG 속성은 `fill (en-US)`과`stroke (en-US)`입니다.
* 허용 가능한 속성의 알파 채널 값은 무시하고, 대신 `:visited`가 아닐 때의 알파 채널을 사용합니다. 단, 그 값이 0일 땐 `:visited`의 스타일을 모두 무시합니다.
* 사용자 입장에서는 방문한 링크의 색이 바뀐 것처럼 보일 때도, `window.getComputedStyle()` 메서드는 거짓으로라도 항상 `:visited`가 아닐 때의 스타일을 반환합니다.

**참고:** 스타일 제한에 관한 더 많은 정보와 이유에 대해서는 개인정보와 :visited 선택자 (en-US) 문서를 참고하세요.

구문
--

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

기본적으로 색이 없거나 투명한 속성은 `:visited`로 수정할 수 없습니다. `:visited`가 수정 가능한 속성 중 브라우저가 기본값을 지정하는건 보통 `color`와 `column-rule-color` 뿐입니다. 따라서 다른 속성을 수정하고 싶다면 기본값을 직접 지정해야 합니다.

### HTML


```html
<a href="#test-visited-link">링크를 아직 방문하지 않으셨나요?</a><br />
<a href="">이미 방문했습니다.</a>
```

### CSS


```css
a {
  /\* 특정 속성에 투명하지 않은 기본값을 지정해
 :visited 상태로 바꿀 수 있도록 설정 \*/
  background-color: white;
  border: 1px solid white;
}

a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}
```

### 결과

명세
--

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

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

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

같이 보기
-----

* 개인정보와 :visited 선택자 (en-US)
* 링크 관련 의사 클래스: `:link`, `:active`, `:hover`
<position>
==========

CSS **`<position>`** (또는 **`<bg-position>`**) 자료형은 요소 박스에 대한 상대 좌표를 나타내는 2차원 좌표입니다. `background-position` (en-US), `offset-anchor` (en-US) 속성에서 사용합니다.

**참고:** `<position>` 값이 설명하는 최종 위치가 요소 박스 내에 위치해야 할 필요는 없습니다.

구문
--

![](/ko/docs/Web/CSS/position_value/position_type.png)`<position>` 자료형은 하나 혹은 두 개의 키워드와 함께 선택적인 오프셋을 사용해 지정합니다.

키워드에는 `center`, `top`, `right`, `bottom`, `left`가 있으며, 각각 요소 박스의 해당하는 방향 모서리 또는 마주보는 두 모서리의 가운데 지점을 의미합니다. 맥락에 따라, `center`는 좌우 모서리의 중간점일 수도 있고, 상하 모서리의 중간점일 수도 있습니다.

오프셋은 상대적인 `<percentage>` 값 또는 절대적인 `<length>` 값으로 지정할 수 있습니다. 양수는 오른쪽과 아래쪽 중 적합한 방향으로 이동하며, 음수는 그 반대입니다.

하나의 오프셋 값만 지정할 경우 x 좌표를 정의하는 것이며, 다른 축의 값은 기본값으로 `center`를 사용합니다.


```css
/\* 1-value syntax \*/
keyword                  /\* Either the horizontal or vertical position; the other axis defaults to center \*/
value                    /\* The position on the x-axis; the y-axis defaults to 50% \*/

/\* 2-value syntax \*/
keyword keyword          /\* A keyword for each direction (the order is irrelevant) \*/
keyword value            /\* A keyword for horizontal position, value for vertical position \*/
value keyword            /\* A value for horizontal position, keyword for vertical position \*/
value value              /\* A value for each direction (horizontal then vertical) \*/

/\* 4-value syntax \*/
keyword value keyword value /\* Each value is an offset from the keyword that preceeds it \*/
```

### 형식 구문
```

[
 [ left | center | right ] || [ top | center | bottom ]
|
 [ left | center | right | <length> | <percentage> ]
 [ top | center | bottom | <length> | <percentage> ]?
|
 [ [ left | right ] [ <length> | <percentage> ] ] &&
 [ [ top | bottom ] [ <length> | <percentage> ] ]
]
```


**참고:** `background-position` (en-US) 속성은 세 값 구문도 허용하나, `<position>`을 사용하는 다른 속성에서는 허용하지 않습니다.

보간
--

애니메이션에서 점의 가로 값과 세로 값은 각각 따로 보간됩니다. 그러나 두 좌표 모두에 대한 보간 속도는 하나의 타이밍 함수 (en-US)가 결정하므로, 점은 직선을 따라 이동하게 됩니다.

예제
--

### 유효한 위치
```

center
left
center top

right 8.5%
bottom 12vmin right -6px

10% 20%
8rem 14px
```

### 유효하지 않은 위치
```

left right
bottom top
10px 15px 20px 15px
```

명세
--

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

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

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

같이 보기
-----

* CSS 값과 단위
* CSS 값과 단위 소개
* `background-position` (en-US)
* `radial-gradient()` (en-US)
* `conic-gradient()` (en-US)
-webkit-overflow-scrolling
==========================

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

CSS **`-webkit-overflow-scrolling`** 속성은 터치 단말기에서 주어진 요소의 모멘텀 기반 스크롤 활성화 여부를 결정합니다.

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

값
-

`auto`

"일반적"인 스크롤을 사용합니다. 즉 손가락을 터치 화면에서 떼는 순간 스크롤이 멈춥니다.

`touch`

모멘텀 기반 스크롤을 사용합니다. 스크롤 제스쳐가 끝나고 손가락을 터치 화면에서 떼어도 잠시 스크롤이 지속됩니다. 지속 속도와 시간은 스크롤 제스쳐의 세기에 따라 달라집니다. 또한 새로운 쌓임 맥락을 생성합니다.

### 형식 구문

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

### HTML


```html
<div class="scroll-touch">
  <p>This paragraph has momentum scrolling</p>
</div>
<div class="scroll-auto">
  <p>This paragraph does not.</p>
</div>
```

### CSS


```css
div {
  width: 100%;
  overflow: auto;
}

p {
  width: 200%;
  background: #f5f9fa;
  border: 2px solid #eaf2f4;
  padding: 10px;
}

.scroll-touch {
  -webkit-overflow-scrolling: touch; /\* Lets it scroll lazy \*/
}

.scroll-auto {
  -webkit-overflow-scrolling: auto; /\* Stops scrolling immediately \*/
}
```

### 결과

명세
--

명세에 속하지 않습니다. Apple의 Safari CSS Reference에 설명이 있습니다.

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

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

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

같이 보기
-----

* CSS-Tricks article with demo
@charset
========

**`@charset`** CSS at-규칙은 스타일 시트에 쓰이는 문자 인코딩을 지정합니다. 스타일 시트의 첫 번째 요소여야 하며 어떤 문자가 선행되지 않아야 합니다; 중첩된 문이 아니기에, 조건부 그룹 at-규칙 내에 사용될 수 없습니다. 여러 `@charset` at-규칙이 정의된 경우, 첫 번째 것만 사용되고 HTML 요소의 `style` attribute 또는 HTML 페이지의 문자 집합과 관련 있는 `<style>` 요소 내에서 사용될 수 없습니다.


```css
@charset "utf-8";
```


이 at-규칙은 `content`처럼 일부 CSS 속성(property)에서 비 ASCII 문자를 사용할 때 유용합니다.

스타일 시트의 문자 인코딩을 정의하는 여러 방법이 있기에, 브라우저는 다음과 같은 순서로 다음 방법을 시도합니다( 그리고 하나가 결과를 산출하자 마자 곧 멈춥니다):

1. 파일의 시작 부분에 놓이는 Unicode byte-order 문자값.
2. `Content-Type:` HTTP 헤더의 `charset` attribute 또는 스타일 시트를 제공하는 데 쓰이는 프로토콜 등가물에 주어진 값.
3. `@charset` CSS at-규칙.
4. 참조하는 문서에 의해 정의된 문자 인코딩 사용: `<link>` 요소의 `charset` attribute. 이 메서드는 HTML5에서 폐기(obsolete)되어 사용해서는 안됩니다.
5. 문서가 UTF-8이라고 가정
구문
--
```

@charset "UTF-8";
@charset 'iso-8859-15';
```


where:

*charset*

사용되는 문자 인코딩을 나타내는 `<string>` (en-US)입니다. IANA-registry에 정의된 웹 안전 문자 인코딩의 이름이어야 합니다. 여러 이름이 인코딩과 관련된 경우, *preferred*로 표시된 것만 사용되어야 합니다.

### 형식 구문

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


```css
@charset "UTF-8"; /\* 스타일 시트의 인코딩을 Unicode UTF-8로 설정 \*/
@charset 'iso-8859-15'; /\* 스타일 시트의 인코딩을 Latin-9 (서유럽어, euro sign 있는) 로 설정 \*/
 @charset "UTF-8"; /\* 무효한, at-규칙 앞에 문자(공백)가 있음 \*/
@charset UTF-8; /\* 무효한, ' 또는 " 없는 문자집합 CSS <string> (en-US)이 아님 \*/
```

명세
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # charset① |

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

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

**`height`** CSS 속성은 요소의 높이를 지정합니다. 기본값은 콘텐츠 영역의 높이지만, `box-sizing`이 `border-box`라면 테두리 영역의 높이를 설정합니다.

시도해보기
-----

`min-height`와 `max-height` 속성은 `height`를 덮어씁니다.

구문
--


```css
/\* 키워드 \*/
height: auto;

/\* <length> \*/
height: 120px;
height: 10em;

/\* <percentage> \*/
height: 75%;

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

### 값

* `<length>`
    + : 높이의 절대값.
* `<percentage>`
    + : 컨테이닝 블록 높이의 백분율.
* `border-box` 
Experimental

    + : 앞선 `<length>` 또는 `<percentage>`가 요소의 보더 박스에 적용.
* `content-box` 
Experimental

    + : 앞선 `<length>` 또는 `<percentage>`가 요소의 콘텐츠 박스에 적용.
* `auto`
    + : 브라우저가 요소의 높이를 계산하고 선택.
* `fill` 
Experimental

    + : 글쓰기 방향에 따라 `fill-available` 인라인 크기 또는 `fill-available` 블록 크기를 사용.
* `max-content` 
Experimental

    + : 본질적인 선호 높이.
* `min-content` 
Experimental

    + : 본질적인 최소 높이.
* `available` 
Experimental

    + : 컨테이닝 블록 높이에서 수평 여백, 테두리, 패딩을 제외한 값.
* `fit-content` 
Experimental

    + : 다음 중 더 큰 값.
        - 본질적인 최소 높이
        - 본질적인 선호 높이와 사용 가능한 높이 중 작은 값
### 형식 구문
```

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

예제
--

### HTML


```html
<div id="taller">제 키는 50픽셀입니다.</div>
<div id="shorter">제 키는 25픽셀입니다.</div>
<div id="parent">
  <div id="child">제 키는 부모의 절반입니다.</div>
</div>
```

### CSS


```css
div {
  width: 250px;
  margin-bottom: 5px;
  border: 2px solid blue;
}

#taller {
  height: 50px;
}

#shorter {
  height: 25px;
}

#parent {
  height: 100px;
}

#child {
  height: 50%;
  width: 75%;
}
```

### 결과

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

페이지를 확대하거나 글꼴 크기를 늘렸을 때 height 속성을 지정한 요소가 잘리거나 다른 내용을 가리지 않도록 확인하세요.

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

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # preferred-size-properties |
| 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 value computes to `auto`. A percentage height on the root element is relative to the initial containing block. |
| 계산 값 | a percentage or `auto` 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 model (en-US), `width`, `box-sizing`, `min-height`, `max-height`
대체 요소
=====

CSS의 **대체 요소**(replaced element)란 자신의 표현 결과가 CSS의 범위를 벗어나는 요소로서, CSS 서식 모델과는 분리된 외부 객체인 요소입니다.

간단히 말해서, 대체 요소는 자신의 콘텐츠가 현재 문서 스타일의 영향을 받지 않는 요소라고 할 수 있습니다. CSS는 대체 요소의 위치에 영향을 줄 수 있지만 콘텐츠에는 미치지 못합니다. `<iframe>` (en-US) 등 일부 대체 요소는 자신만의 스타일 시트를 가질 수도 있지만, 부모 문서의 스타일을 상속하지는 않습니다.

CSS가 대체 요소에 영향을 줄 수 있는 다른 유일한 방법은, 일련의 속성을 통해 요소 박스에서 콘텐츠의 위치를 제어하는 것입니다. 콘텐츠 박스 내부의 객체 위치 제어 항목을 참고하세요.

대체 요소
-----

전형적인 대체 요소는 다음과 같습니다.

* `<iframe>` (en-US)
* `<video>`
* `<embed>`
* `<img>`

일부 요소는 특정한 경우에만 대체 요소로 취급합니다.

* `<option>`
* `<audio>` (en-US)
* `<canvas>`
* `<object>`

HTML 명세에 따르면 `<input>` (en-US) 또한 대체될 수 있습니다. `<input>` 유형이 `"image"`인 경우 `<img>`와 유사한 대체 요소이기 때문입니다. 그러나 다른 유형의 `<input>`을 포함한 나머지 양식 컨트롤 요소는 비대체 요소라고 명시하고 있습니다. (명세는 양식 요소의 플랫폼별 기본 렌더링을 "위젯"(Widget)이라는 용어로 설명하고 있습니다.)

CSS `content` 속성을 사용해 추가한 객체도 대체 요소로, HTML 마크업에는 존재하지 않기 때문에 "익명" 대체 요소라고 합니다.

대체 요소와 CSS
----------

CSS는 바깥 여백이나 일부 `auto` 값 계산 등 특정 상황에서 대체 요소를 특별히 취급합니다.

일부 대체 요소는 고유 크기 또는 정의된 기준선을 가질 수 있으며, `vertical-align` 등의 CSS 속성이 사용할 수 있습니다. 오직 대체 요소만이 고유 크기를 가질 수 있습니다.

명세서
---

{{Specifications}}같이 보기
-----

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

**CSS 선택자**는 CSS 규칙을 적용할 요소를 정의합니다.

**참고:** 부모, 부모의 형제, 부모 형제의 자식을 선택할 수 있는 선택자는 존재하지 않습니다.

기본 선택자
------

전체 선택자

 모든 요소를 선택합니다. 추가로 네임스페이스 제한을 둘 수 있습니다.
 **구문:** `*` `ns|*` `*|*`
**예제:** `*`은 문서 내의 모든 요소와 일치합니다.


유형 선택자

 주어진 노드 이름을 가진 모든 요소를 선택합니다.
 **구문:** `elementname`
**예제:** `input`은 모든 `<input>` (en-US) 요소와 일치합니다.


클래스 선택자

 주어진 `class` 특성을 가진 모든 요소를 선택합니다.
 **구문:** `.classname`
**예제:** `.index`는 "index" 클래스를 가진 모든 요소와 일치합니다.


ID 선택자

`id` 특성에 따라 요소를 선택합니다. 문서 내에는 주어진 ID를 가진 요소가 하나만 존재해야 합니다.
 **구문:** `#idname`
**예제:** `#toc`는 "toc" ID를 가진 요소와 일치합니다.


특성 선택자

 주어진 특성을 가진 모든 요소를 선택합니다.
 **구문:** `[attr]` `[attr=value]` `[attr~=value]` `[attr|=value]` `[attr^=value]` `[attr$=value]` `[attr*=value]`
**예제:** `[autoplay]`는 `autoplay` 특성을 설정한 모든 요소와 일치합니다. 특성의 값은 고려하지 않습니다.


그룹 선택자
------

선택자 목록

`,`는 선택자 그룹을 생성하는 방법으로, 모든 일치하는 노드를 선택합니다.
 **구문:** `A, B`
**예제:** `div, span`은 모든 `<span>`과 `<div>` (en-US) 요소와 일치합니다.


결합자
---

자손 결합자

""(공백) 결합자는 첫 번째 요소의 자손인 노드를 선택합니다. **구문:** `A B`**예제:**`div span`은 `<div>` (en-US) 요소 안에 위치하는 모든 `<span>` 요소와 일치합니다.

자식 결합자

`>` 결합자는 첫 번째 요소의 바로 아래 자식인 노드를 선택합니다.
 **구문:** `A > B`
**예제:** `ul > li`는 `<ul>` 요소 바로 아래에 위치하는 모든 `<li>` 요소와 일치합니다.


일반 형제 결합자

`~` 결합자는 형제, 즉 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.
 **구문:** `A ~ B`
**예제:** `p ~ span`은 `<p>` 요소를 뒤따르는 모든 `<span>` 요소와 일치합니다.


인접 형제 결합자

`+` 결합자는 인접 형제, 즉 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.
 **구문:** `A + B`
**예제:** `h2 + p`는 `<h2>` 바로 뒤에 위치하는 `<p>` 요소와 일치합니다.


열 결합자 (en-US) 
Experimental

`||` 결합자는 같은 열에 속하는 노드를 선택합니다.
 **구문:** `A || B`
**예제:** `col || td`는 `<col>` (en-US)의 범위에 속하는 모든 `<td>` (en-US) 요소와 일치합니다.


의사 클래스/요소
---------

의사 클래스

 의사 `:`은 문서 트리가 포함하지 않는 상태 정보에 기반해 요소를 선택할 수 있습니다.
 **예제:** `a:visited`는 사용자가 방문한 모든 `<a>` 요소와 일치합니다.


의사 요소

 의사 `::`는 HTML이 포함하지 않는 개체를 선택합니다.
 **예제:** `p::first-line`은 모든 `<p>` 요소의 첫 번째 줄과 일치합니다.


명세
--

| Specification |
| --- |
| Selectors Level 4  |

의사 클래스와 의사 요소의 명세 표에서 각각의 상세 정보를 볼 수 있습니다.

같이 보기
-----

* CSS 명시도
border-left
===========

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

시도해보기
-----

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


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



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


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

구문
--


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


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

### 값

`<br-width>`

`border-left-width`.

`<br-style>`

`border-left-style`.

`<color>`

`border-left-color`.

### 형식 구문
```

border-left =   
  <line-width>  ||  
  <line-style>  ||  
  <color>         
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

예제
--


```html
<div>왼쪽 테두리를 가진 요소입니다.</div>
```



```css
div {
  border-left: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```

명세
--

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

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

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

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