CSS 참고서
=======

**CSS 참고서**를 이용해 알파벳 순서로 정리한 모든 표준 CSS 속성, 의사 클래스, 의사 요소, CSS 자료형과 @규칙을 찾아보세요. 또한 유형별로 정리한 CSS 선택자와 주요 CSS 개념도 찾아볼 수 있습니다. 추가로 간단한 DOM-CSS / CSSOM 참조도 들어 있습니다.

기본 규칙 구문
--------

### 스타일 규칙 구문
```

style-rule ::=
    selectors-list {
      properties-list
    }
```


... where :
```

selectors-list ::=
    selector[:pseudo-class] [::pseudo-element]
    [, selectors-list]

properties-list ::=
    [property : value] [; properties-list]
```


아래 선택자, 의사 클래스, 의사 요소 목록을 참고하세요. 각 \*`value`\*의 구문은 지정한 \*`property`\*가 정의하는 자료형에 따라 다릅니다.

#### 스타일 규칙 예제


```css
strong {
  color: red;
}

div.menu-bar li:hover > ul {
  display: block;
}
```


CSS 선택자 구문을 설명하는 입문자 단계의 소개 부분은 이 자습서에서 찾아볼 수 있습니다. 규칙 정의에서 구문 오류가 하나라도 발생하면 규칙 전체가 유효하지 않다는 점을 명심하세요. 유효하지 않은 규칙은 브라우저가 무시합니다. CSS 규칙 정의는 모두 (ASCII) 텍스트에 기반하지만, DOM-CSS / CSSOM (규칙 관리 시스템)은 객체에 기반합니다.

### @규칙 구문

@규칙 체계는 매우 다양하므로 필요한 구체적인 구문을 찾으려면 @규칙을 봐주세요.

키워드 색인
------

**참고:** 이 색인에 있는 속성 이름에는 CSS 표준 이름과 다른 JavaScript 이름 (en-US)이 들어가지 않습니다.

### -

* `--*` (en-US)
* `-webkit-line-clamp`

### A

* `abs()` (en-US)
* `accent-color` (en-US)
* `acos()` (en-US)
* `:active`
* `additive-symbols (@counter-style)` (en-US)
* `::after (:after)`
* `align-content`
* `align-items` (en-US)
* `align-self` (en-US)
* `align-tracks` (en-US)
* `all`
* `<an-plus-b>`
* `<angle>`
* `<angle-percentage>`
* `animation`
* `animation-composition` (en-US)
* `animation-delay`
* `animation-direction`
* `animation-duration`
* `animation-fill-mode`
* `animation-iteration-count` (en-US)
* `animation-name` (en-US)
* `animation-play-state` (en-US)
* `animation-range` (en-US)
* `animation-range-end` (en-US)
* `animation-range-start` (en-US)
* `animation-timeline` (en-US)
* `animation-timing-function` (en-US)
* `@annotation` (en-US)
* `:any-link` (en-US)
* `appearance` (en-US)
* `ascent-override (@font-face)` (en-US)
* `asin()` (en-US)
* `aspect-ratio` (en-US)
* `atan()` (en-US)
* `atan2()` (en-US)
* `attr()` (en-US)

### B

* `::backdrop` (en-US)
* `backdrop-filter`
* `backface-visibility`
* `background`
* `background-attachment`
* `background-blend-mode` (en-US)
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position` (en-US)
* `background-position-x` (en-US)
* `background-position-y` (en-US)
* `background-repeat`
* `background-size` (en-US)
* `base-palette (@font-palette-values)` (en-US)
* `<basic-shape>` (en-US)
* `::before (:before)` (en-US)
* `:blank` (en-US)
* `bleed (@page)`
* `<blend-mode>`
* `block-size` (en-US)
* `blur()`
* `border`
* `border-block` (en-US)
* `border-block-color` (en-US)
* `border-block-end` (en-US)
* `border-block-end-color` (en-US)
* `border-block-end-style` (en-US)
* `border-block-end-width` (en-US)
* `border-block-start` (en-US)
* `border-block-start-color` (en-US)
* `border-block-start-style` (en-US)
* `border-block-start-width` (en-US)
* `border-block-style` (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-style`
* `border-bottom-width`
* `border-collapse`
* `border-color`
* `border-end-end-radius` (en-US)
* `border-end-start-radius` (en-US)
* `border-image`
* `border-image-outset`
* `border-image-repeat`
* `border-image-slice`
* `border-image-source`
* `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-style` (en-US)
* `border-inline-end-width` (en-US)
* `border-inline-start` (en-US)
* `border-inline-start-color` (en-US)
* `border-inline-start-style` (en-US)
* `border-inline-start-width` (en-US)
* `border-inline-style` (en-US)
* `border-inline-width` (en-US)
* `border-left`
* `border-left-color`
* `border-left-style`
* `border-left-width`
* `border-radius`
* `border-right`
* `border-right-color`
* `border-right-style`
* `border-right-width`
* `border-spacing`
* `border-start-end-radius` (en-US)
* `border-start-start-radius` (en-US)
* `border-style`
* `border-top`
* `border-top-color`
* `border-top-left-radius` (en-US)
* `border-top-right-radius` (en-US)
* `border-top-style`
* `border-top-width`
* `border-width`
* `bottom` (en-US)
* `@bottom-center`
* `box-decoration-break` (en-US)
* `box-shadow` (en-US)
* `box-sizing`
* `break-after` (en-US)
* `break-before` (en-US)
* `break-inside` (en-US)
* `brightness()`

### C

* `calc()`
* `caption-side` (en-US)
* `caret`
* `caret-color` (en-US)
* `caret-shape`
* `@character-variant` (en-US)
* `@charset`
* `:checked`
* `circle()` (en-US)
* `clamp()` (en-US)
* `clear`
* `clip` (en-US)
* `clip-path`
* `<color>`
* `color`
* `color-scheme` (en-US)
* `column-count` (en-US)
* `column-fill` (en-US)
* `column-gap` (en-US)
* `column-rule` (en-US)
* `column-rule-color` (en-US)
* `column-rule-style` (en-US)
* `column-rule-width` (en-US)
* `column-span` (en-US)
* `column-width` (en-US)
* `columns` (en-US)
* `conic-gradient()` (en-US)
* `contain`
* `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-name` (en-US)
* `container-type` (en-US)
* `content`
* `content-visibility` (en-US)
* `contrast()`
* `cos()` (en-US)
* `<counter>` (en-US)
* `counter-increment` (en-US)
* `counter-reset` (en-US)
* `counter-set` (en-US)
* `@counter-style` (en-US)
* `counters()` (en-US)
* `cross-fade()` (en-US)
* `cubic-bezier()` (en-US)
* `::cue` (en-US)
* `::cue-region` (en-US)
* `:current` (en-US)
* `cursor`
* `<custom-ident>` (en-US)
* `length#cap`
* `length#ch`
* `length#cm`

### D

* `angle#deg`
* `<dashed-ident>` (en-US)
* `:default`
* `:defined`
* `descent-override (@font-face)` (en-US)
* `<dimension>` (en-US)
* `:dir` (en-US)
* `direction` (en-US)
* `:disabled`
* `display` (en-US)
* `<display-box>` (en-US)
* `<display-inside>` (en-US)
* `<display-internal>`
* `<display-legacy>` (en-US)
* `<display-listitem>` (en-US)
* `<display-outside>` (en-US)
* `drop-shadow()` (en-US)
* `resolution#dpcm` (en-US)
* `resolution#dpi` (en-US)
* `resolution#dppx` (en-US)

### E

* `<easing-function>` (en-US)
* `element()` (en-US)
* `ellipse()` (en-US)
* `:empty` (en-US)
* `empty-cells` (en-US)
* `:enabled`
* `env()` (en-US)
* `exp()` (en-US)
* `length#em`
* `length#ex`

### F

* `fallback (@counter-style)` (en-US)
* `filter`
* `<filter-function>`
* `:first`
* `:first-child`
* `::first-letter (:first-letter)` (en-US)
* `::first-line (:first-line)` (en-US)
* `:first-of-type`
* `fit-content()` (en-US)
* `<flex>` (en-US)
* `flex`
* `flex-basis`
* `flex-direction`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `flex-wrap`
* `flex_value#fr` (en-US)
* `float`
* `:focus`
* `:focus-visible` (en-US)
* `:focus-within`
* `font`
* `font-display (@font-face)`
* `@font-face`
* `font-family` (en-US)
* `font-family (@font-face)` (en-US)
* `font-family (@font-palette-values)` (en-US)
* `font-feature-settings`
* `font-feature-settings (@font-face)` (en-US)
* `@font-feature-values` (en-US)
* `font-kerning` (en-US)
* `font-language-override` (en-US)
* `font-optical-sizing` (en-US)
* `font-palette` (en-US)
* `@font-palette-values` (en-US)
* `font-size`
* `font-size-adjust` (en-US)
* `font-stretch` (en-US)
* `font-stretch (@font-face)` (en-US)
* `font-style` (en-US)
* `font-style (@font-face)` (en-US)
* `font-synthesis`
* `font-synthesis-position` (en-US)
* `font-synthesis-small-caps` (en-US)
* `font-synthesis-style` (en-US)
* `font-synthesis-weight` (en-US)
* `font-variant` (en-US)
* `font-variant-alternates` (en-US)
* `font-variant-caps` (en-US)
* `font-variant-east-asian` (en-US)
* `font-variant-emoji` (en-US)
* `font-variant-ligatures` (en-US)
* `font-variant-numeric` (en-US)
* `font-variant-position` (en-US)
* `font-variation-settings` (en-US)
* `font-variation-settings (@font-face)` (en-US)
* `font-weight`
* `font-weight (@font-face)` (en-US)
* `forced-color-adjust` (en-US)
* `format()` (en-US)
* `<frequency>`
* `<frequency-percentage>` (en-US)
* `:fullscreen`
* `:future` (en-US)

### G

* `angle#grad`
* `gap`
* `<gradient>`
* `::grammar-error` (en-US)
* `grayscale()` (en-US)
* `grid` (en-US)
* `grid-area` (en-US)
* `grid-auto-columns` (en-US)
* `grid-auto-flow` (en-US)
* `grid-auto-rows` (en-US)
* `grid-column` (en-US)
* `grid-column-end` (en-US)
* `grid-column-start` (en-US)
* `grid-row` (en-US)
* `grid-row-end` (en-US)
* `grid-row-start` (en-US)
* `grid-template` (en-US)
* `grid-template-areas` (en-US)
* `grid-template-columns`
* `grid-template-rows` (en-US)

### H

* `frequency#Hz`
* `hanging-punctuation` (en-US)
* `:has` (en-US)
* `height`
* `@historical-forms`
* `:host()` (en-US)
* `:host-context()`
* `:hover`
* `hsl()`
* `hsla()`
* `hue-rotate()` (en-US)
* `hwb()`
* `hyphenate-character` (en-US)
* `hyphenate-limit-chars` (en-US)
* `hyphens`
* `hypot()` (en-US)

### I

* `<ident>` (en-US)
* `<image>`
* `image()`
* `image-orientation` (en-US)
* `image-rendering`
* `image-resolution` (en-US)
* `image-set()` (en-US)
* `@import`
* `:in-range` (en-US)
* `:indeterminate` (en-US)
* `inherit`
* `inherits (@property)` (en-US)
* `initial`
* `initial-letter` (en-US)
* `initial-letter-align` (en-US)
* `initial-value (@property)` (en-US)
* `inline-size` (en-US)
* `input-security`
* `inset` (en-US)
* `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)
* `<integer>`
* `:invalid` (en-US)
* `invert()` (en-US)
* `:is` (en-US)
* `isolation`
* `length#ic`
* `length#in`

### J

* `justify-content`
* `justify-items` (en-US)
* `justify-self` (en-US)
* `justify-tracks` (en-US)

### K

* `frequency#kHz`
* `@keyframes`

### L

* `lab()`
* `:lang` (en-US)
* `:last-child`
* `:last-of-type` (en-US)
* `@layer` (en-US)
* `layer()`
* `layer() (@import)`
* `lch()`
* `leader()`
* `:left` (en-US)
* `left` (en-US)
* `@left-bottom`
* `<length>`
* `<length-percentage>`
* `letter-spacing`
* `light-dark()`
* `line-break`
* `line-clamp`
* `line-gap-override (@font-face)` (en-US)
* `line-height` (en-US)
* `line-height-step` (en-US)
* `<line-style>` (en-US)
* `linear-gradient()` (en-US)
* `:link`
* `list-style` (en-US)
* `list-style-image` (en-US)
* `list-style-position` (en-US)
* `list-style-type` (en-US)
* `local()` (en-US)
* `:local-link` (en-US)
* `log()` (en-US)

### M

* `length#mm`
* `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`
* `margin-trim` (en-US)
* `::marker` (en-US)
* `marks (@page)`
* `mask`
* `mask-border` (en-US)
* `mask-border-mode` (en-US)
* `mask-border-outset` (en-US)
* `mask-border-repeat` (en-US)
* `mask-border-slice` (en-US)
* `mask-border-source` (en-US)
* `mask-border-width` (en-US)
* `mask-clip` (en-US)
* `mask-composite` (en-US)
* `mask-image` (en-US)
* `mask-mode` (en-US)
* `mask-origin` (en-US)
* `mask-position` (en-US)
* `mask-repeat` (en-US)
* `mask-size` (en-US)
* `mask-type` (en-US)
* `masonry-auto-flow` (en-US)
* `math-depth` (en-US)
* `math-shift` (en-US)
* `math-style` (en-US)
* `matrix()`
* `matrix3d()` (en-US)
* `max()` (en-US)
* `max-block-size` (en-US)
* `max-height`
* `max-inline-size` (en-US)
* `max-lines`
* `max-width`
* `@media`
* `min()` (en-US)
* `min-block-size` (en-US)
* `min-height`
* `min-inline-size` (en-US)
* `min-width`
* `minmax()` (en-US)
* `mix-blend-mode`
* `mod()` (en-US)
* `time#ms`

### N

* `@namespace`
* `negative (@counter-style)` (en-US)
* `:not`
* `:nth-child`
* `:nth-last-child` (en-US)
* `:nth-last-of-type` (en-US)
* `:nth-of-type` (en-US)
* `<number>`

### O

* `object-fit`
* `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)
* `:only-child` (en-US)
* `:only-of-type` (en-US)
* `opacity`
* `opacity()` (en-US)
* `:optional` (en-US)
* `order`
* `@ornaments` (en-US)
* `orphans` (en-US)
* `:out-of-range` (en-US)
* `outline`
* `outline-color` (en-US)
* `outline-offset` (en-US)
* `outline-style`
* `outline-width`
* `<overflow>`
* `overflow-anchor` (en-US)
* `overflow-block` (en-US)
* `overflow-clip-margin` (en-US)
* `overflow-inline`
* `overflow-wrap`
* `overflow-x` (en-US)
* `overflow-y` (en-US)
* `overlay` (en-US)
* `override-colors (@font-palette-values)` (en-US)
* `overscroll-behavior` (en-US)
* `overscroll-behavior-block` (en-US)
* `overscroll-behavior-inline` (en-US)
* `overscroll-behavior-x` (en-US)
* `overscroll-behavior-y` (en-US)

### P

* `Pseudo-classes`
* `Pseudo-elements`
* `length#pc`
* `length#pt`
* `length#px`
* `pad (@counter-style)` (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`
* `@page`
* `page` (en-US)
* `page-break-after` (en-US)
* `page-break-before` (en-US)
* `page-break-inside` (en-US)
* `page-orientation (@page)` (en-US)
* `paint()` (en-US)
* `paint-order`
* `::part` (en-US)
* `:past` (en-US)
* `path()` (en-US)
* `:paused` (en-US)
* `<percentage>`
* `perspective` (en-US)
* `perspective()` (en-US)
* `perspective-origin` (en-US)
* `:picture-in-picture` (en-US)
* `place-content` (en-US)
* `place-items` (en-US)
* `place-self` (en-US)
* `::placeholder` (en-US)
* `:placeholder-shown` (en-US)
* `:playing` (en-US)
* `pointer-events` (en-US)
* `polygon()` (en-US)
* `<position>`
* `position`
* `pow()` (en-US)
* `prefix (@counter-style)` (en-US)
* `print-color-adjust` (en-US)
* `@property` (en-US)

### Q

* `length#Q`
* `quotes` (en-US)

### R

* `angle#rad`
* `length#rem`
* `radial-gradient()` (en-US)
* `range (@counter-style)` (en-US)
* `<ratio>` (en-US)
* `ray()` (en-US)
* `:read-only` (en-US)
* `:read-write` (en-US)
* `rect()` (en-US)
* `rem()` (en-US)
* `repeat()` (en-US)
* `repeating-conic-gradient()` (en-US)
* `repeating-linear-gradient()` (en-US)
* `repeating-radial-gradient()` (en-US)
* `:required` (en-US)
* `resize` (en-US)
* `<resolution>` (en-US)
* `reversed()`
* `revert`
* `rgb()`
* `rgba()`
* `:right` (en-US)
* `right` (en-US)
* `@right-bottom`
* `:root`
* `rotate` (en-US)
* `rotate()` (en-US)
* `rotate3d()` (en-US)
* `rotateX()` (en-US)
* `rotateY()` (en-US)
* `rotateZ()` (en-US)
* `round()` (en-US)
* `row-gap` (en-US)
* `ruby-align` (en-US)
* `ruby-merge`
* `ruby-position` (en-US)

### S

* `saturate()` (en-US)
* `scale` (en-US)
* `scale()` (en-US)
* `scale3d()` (en-US)
* `scaleX()`
* `scaleY()` (en-US)
* `scaleZ()` (en-US)
* `:scope` (en-US)
* `@scope` (en-US)
* `scroll()` (en-US)
* `scroll-behavior` (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-align` (en-US)
* `scroll-snap-stop` (en-US)
* `scroll-snap-type` (en-US)
* `scroll-timeline` (en-US)
* `scroll-timeline-axis` (en-US)
* `scroll-timeline-name` (en-US)
* `scrollbar-color` (en-US)
* `scrollbar-gutter` (en-US)
* `scrollbar-width` (en-US)
* `::selection` (en-US)
* `selector()`
* `sepia()` (en-US)
* `<shape>` (en-US)
* `shape-image-threshold` (en-US)
* `shape-margin` (en-US)
* `shape-outside` (en-US)
* `sign()` (en-US)
* `sin()` (en-US)
* `size (@page)` (en-US)
* `size-adjust (@font-face)` (en-US)
* `skew()` (en-US)
* `skewX()` (en-US)
* `skewY()` (en-US)
* `::slotted` (en-US)
* `speak-as (@counter-style)` (en-US)
* `::spelling-error` (en-US)
* `sqrt()` (en-US)
* `src (@font-face)` (en-US)
* `@starting-style` (en-US)
* `steps()` (en-US)
* `<string>` (en-US)
* `@styleset` (en-US)
* `@stylistic` (en-US)
* `suffix (@counter-style)` (en-US)
* `@supports`
* `supports() (@import)`
* `@swash` (en-US)
* `symbols (@counter-style)` (en-US)
* `symbols()` (en-US)
* `syntax (@property)` (en-US)
* `system (@counter-style)` (en-US)
* `time#s`

### T

* `angle#turn`
* `tab-size`
* `table-layout` (en-US)
* `tan()` (en-US)
* `:target` (en-US)
* `target-counter()`
* `target-counters()`
* `::target-text` (en-US)
* `target-text()`
* `:target-within` (en-US)
* `text-align`
* `text-align-last` (en-US)
* `text-combine-upright` (en-US)
* `text-decoration`
* `text-decoration-color` (en-US)
* `text-decoration-line` (en-US)
* `text-decoration-skip` (en-US)
* `text-decoration-skip-ink` (en-US)
* `text-decoration-style` (en-US)
* `text-decoration-thickness` (en-US)
* `text-emphasis` (en-US)
* `text-emphasis-color` (en-US)
* `text-emphasis-position` (en-US)
* `text-emphasis-style` (en-US)
* `text-indent` (en-US)
* `text-justify` (en-US)
* `text-orientation` (en-US)
* `text-overflow` (en-US)
* `text-rendering` (en-US)
* `text-shadow` (en-US)
* `text-size-adjust` (en-US)
* `text-transform` (en-US)
* `text-underline-offset` (en-US)
* `text-underline-position` (en-US)
* `text-wrap` (en-US)
* `<time>`
* `<time-percentage>` (en-US)
* `timeline-scope` (en-US)
* `top` (en-US)
* `@top-center`
* `touch-action` (en-US)
* `transform`
* `transform-box` (en-US)
* `<transform-function>`
* `transform-origin` (en-US)
* `transform-style` (en-US)
* `transition`
* `transition-behavior` (en-US)
* `transition-delay` (en-US)
* `transition-duration` (en-US)
* `transition-property` (en-US)
* `transition-timing-function` (en-US)
* `translate` (en-US)
* `translate()`
* `translate3d()` (en-US)
* `translateX()` (en-US)
* `translateY()` (en-US)
* `translateZ()` (en-US)
* `type()`

### U

* `unicode-bidi` (en-US)
* `unicode-range (@font-face)` (en-US)
* `unset`
* `<url>`
* `url()`
* `:user-invalid` (en-US)
* `user-select`
* `:user-valid` (en-US)

### V

* `length#vh`
* `length#vmax`
* `length#vmin`
* `length#vw`
* `:valid` (en-US)
* `var()`
* `vertical-align`
* `view()`
* `view-timeline` (en-US)
* `view-timeline-axis` (en-US)
* `view-timeline-inset` (en-US)
* `view-timeline-name` (en-US)
* `::view-transition` (en-US)
* `::view-transition-group` (en-US)
* `::view-transition-image-pair` (en-US)
* `view-transition-name` (en-US)
* `::view-transition-new` (en-US)
* `::view-transition-old` (en-US)
* `visibility`
* `:visited`

### W

* `:where` (en-US)
* `white-space`
* `white-space-collapse` (en-US)
* `widows` (en-US)
* `width`
* `will-change`
* `word-break`
* `word-spacing`
* `word-wrap` (en-US)
* `writing-mode` (en-US)

### X

* `resolution#x` (en-US)

### Z

* `z-index`

### Others

* `--*` (en-US)

선택자
---

다음은 선택자 목록입니다. 선택자를 사용하면 DOM 요소의 다양한 기능에 기반한 조건을 통해 스타일을 입힐 수 있습니다.

### 기본 선택자

**기본 선택자**는 선택자의 기초를 이루며, 조합을 통해 더 복잡한 선택자를 생성합니다.

* 전체 선택자 `*`, `ns|*`, `*|*`, `|*`
* 태그 선택자 *`elementname`*
* 클래스 선택자 `.classname`
* ID 선택자 `#idname`
* 속성 선택자 `[attr=value]`
### 그룹 선택자

선택자 목록 `A, B`

A와 B 요소를 모두 선택합니다. 일치하는 여러가지 요소를 선택할 때 사용합니다.

### 결합자

결합자는 "\*`A`\*는 \*`B`*의 자식", "*`A`\*는 \*`B`\*와 인접 요소"처럼, 두 개 이상의 선택자끼리 관계를 형성합니다.

인접 형제 결합자 `A + B`

요소 \*`A`\*와 \*`B`\*가 같은 부모를 가지며 \*`B`\*가 \*`A`\*를 바로 뒤따라야 하도록 지정합니다.

일반 형제 결합자 `A ~ B`

요소 \*`A`\*와 \*`B`\*가 같은 부모를 가지며 \*`B`\*가 \*`A`\*를 뒤따라야 하도록 지정합니다. 그러나 \*`B`\*가 \*`A`\*의 바로 옆에 위치해야 할 필요는 없습니다.

자식 결합자 `A > B`

요소 \*`B`\*가 \*`A`\*의 바로 밑에 위치해야 하도록 지정합니다.

자손 결합자 `A B`

요소 \*`B`\*가 \*`A`\*의 밑에 위치해야 하도록 지정합니다. 그러나 \*`B`\*가 \*`A`\*의 바로 아래에 있을 필요는 없습니다.

열 결합자 (en-US) `A || B` 
Experimental

요소 \*`B`\*가 표의 열 *`A`* 안에 위치해야 하도록 지정합니다. 여러 열에 걸친 요소는, 각각의 열 모두에 대해 안쪽에 위치한 것으로 간주합니다.

### 의사 클래스/요소

의사 클래스 `:`

요소의 특정 상태를 선택합니다.

의사 요소 `::`

HTML이 포함하지 않은 객체를 나타냅니다.


**참고:** **같이 보기:** Selectors Level 4 명세의 선택자 목록.

개념
--

### 구문과 의미

* CSS 구문
* @-규칙
* 종속 (en-US)
* 주석
* 서술자
* 상속
* 단축 속성
* 명시도
* 값 정의 구문
### 값

* 실제값 (en-US)
* 계산값
* 초깃값
* 결정값
* 지정값
* 사용값
### 레이아웃

* 블록 서식 맥락 (en-US)
* 박스 모델
* 컨테이닝 블록
* 레이아웃 모드
* 여백 상쇄
* 대체 요소
* 쌓임 맥락
* 시각적 서식 맥락
DOM-CSS / CSSOM
---------------

### 주요 객체 유형

* `DocumentOrShadowRoot.styleSheets`
* `styleSheets (en-US)[i].cssRules (en-US)`
* `cssRules[i].cssText (en-US)` (selector & style)
* `cssRules[i].selectorText (en-US)`
* `HTMLElement.style` (en-US)
* `HTMLElement.style.cssText (en-US)` (just style)
* `Element.className`
* `Element.classList`
### 중요 메서드

* `CSSStyleSheet.insertRule()` (en-US)
* `CSSStyleSheet.deleteRule()` (en-US)
같이 보기
-----

* Mozilla CSS 확장 (en-US) (`-moz-` 접두사 사용)
* WebKit CSS 확장 (en-US) (대다수 `-webkit-` 접두사 사용)
* Microsoft CSS 확장 (`-ms-` 접두사 사용)
외부 링크
-----

* CSS 색인 (w3.org)