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
*가 정의하는 자료형에 따라 다릅니다.
스타일 규칙 예제
strong {
color: red;
}
div.menu-bar li:hover > ul {
display: block;
}
CSS 선택자 구문을 설명하는 입문자 단계의 소개 부분은 이 자습서에서 찾아볼 수 있습니다. 규칙 정의에서 구문 오류가 하나라도 발생하면 규칙 전체가 유효하지 않다는 점을 명심하세요. 유효하지 않은 규칙은 브라우저가 무시합니다. CSS 규칙 정의는 모두 (ASCII) 텍스트에 기반하지만, DOM-CSS / CSSOM (규칙 관리 시스템)은 객체에 기반합니다.
@규칙 구문
@규칙 체계는 매우 다양하므로 필요한 구체적인 구문을 찾으려면 @규칙을 봐주세요.
키워드 색인
참고: 이 색인에 있는 속성 이름에는 CSS 표준 이름과 다른 JavaScript 이름 (en-US)이 들어가지 않습니다.
-
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-timeline
(en-US)animation-timing-function
(en-US)@annotation
(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
base-palette (@font-palette-values)
(en-US)<basic-shape>
::before (:before)
:blank
(en-US)bleed (@page)
<blend-mode>
block-overflow
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
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)character-variant()
(en-US)@charset
:checked
circle()
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
:default
:defined
descent-override (@font-face)
(en-US)<dimension>
(en-US):dir
(en-US)direction
(en-US):disabled
display
<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
element()
(en-US)ellipse()
: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
font-family (@font-face)
(en-US)font-family (@font-palette-values)
(en-US)font-feature-settings
font-feature-settings (@font-face)
@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-variant
(en-US)font-variant (@font-face)
(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
grid-area
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
height (@viewport)
(en-US)@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()
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
K
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
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-height (@viewport)
(en-US)max-inline-size
(en-US)max-lines
max-width
max-width (@viewport)
(en-US)max-zoom (@viewport)
(en-US)@media
min()
(en-US)min-block-size
(en-US)min-height
min-height (@viewport)
(en-US)min-inline-size
(en-US)min-width
min-width (@viewport)
(en-US)min-zoom (@viewport)
(en-US)minmax()
(en-US)mix-blend-mode
mod()
(en-US)time#ms
N
@namespace
negative (@counter-style)
(en-US):not
:nth-child
:nth-col
(en-US):nth-last-child
(en-US):nth-last-col
(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
orientation (@viewport)
(en-US)@ornaments
(en-US)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
(en-US)overflow-wrap
overflow-x
(en-US)overflow-y
(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
:placeholder-shown
(en-US):playing
(en-US)pointer-events
polygon()
<position>
position
pow()
(en-US)prefix (@counter-style)
(en-US)print-color-adjust
(en-US)@property
(en-US)
Q
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)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
(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)steps()
(en-US)<string>
(en-US)@styleset
(en-US)styleset()
(en-US)@stylistic
(en-US)stylistic()
(en-US)suffix (@counter-style)
(en-US)@supports
supports() (@import)
@swash
(en-US)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
text-size-adjust
(en-US)text-transform
(en-US)text-underline-offset
(en-US)text-underline-position
(en-US)<time>
<time-percentage>
(en-US)<timing-function>
(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-delay
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)user-zoom (@viewport)
(en-US)
V
length#vh
length#vmax
length#vmin
length#vw
:valid
(en-US)var()
vertical-align
::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)@viewport
viewport-fit (@viewport)
(en-US)visibility
:visited
W
:where
(en-US)white-space
widows
(en-US)width
width (@viewport)
(en-US)will-change
word-break
word-spacing
word-wrap
(en-US)writing-mode
(en-US)
X
Z
Others
선택자
다음은 선택자 목록입니다. 선택자를 사용하면 DOM 요소의 다양한 기능에 기반한 조건을 통해 스타일을 입힐 수 있습니다.
기본 선택자
그룹 선택자
- 선택자 목록
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
안에 위치해야 하도록 지정합니다. 여러 열에 걸친 요소는, 각각의 열 모두에 대해 안쪽에 위치한 것으로 간주합니다.
의사 클래스/요소
참고: 같이 보기: Selectors Level 4 명세의 선택자 목록.
개념
구문과 의미
값
레이아웃
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
중요 메서드
같이 보기
- Mozilla CSS 확장 (en-US) (
-moz-
접두사 사용) - WebKit CSS 확장 (en-US) (대다수
-webkit-
접두사 사용) - Microsoft CSS 확장 (
-ms-
접두사 사용)