TL
툴랩
💰후원하기
💰후원하기

CSS 속성 참조

플렉스박스, 그리드, 타이포그래피, 애니메이션 등 종합 CSS 속성 참조입니다.

52개 속성

display레이아웃

Defines how element is rendered in the document.

block | inline | flex | grid | inline-flex | inline-grid | none | contents
position레이아웃

Specifies positioning method.

static | relative | absolute | fixed | sticky
top / right / bottom / left레이아웃

Offset for positioned elements.

<length> | <percentage> | auto
float레이아웃

Moves element to left/right of container.

left | right | none | inline-start | inline-end
clear레이아웃

Specifies what happens with the element next to a floated element.

none | left | right | both | inline-start | inline-end
z-index레이아웃

Sets stacking order of elements.

auto | <integer>
overflow레이아웃

Controls content that overflows element box.

visible | hidden | scroll | auto | clip
width / height박스 모델

Sets element dimensions.

<length> | <percentage> | auto | min-content | max-content | fit-content
max-width / max-height박스 모델

Sets maximum element dimensions.

<length> | <percentage> | none | min-content | max-content
min-width / min-height박스 모델

Sets minimum element dimensions.

<length> | <percentage> | auto | min-content | max-content
margin박스 모델

Space outside the element border.

<length> | <percentage> | auto (shorthand: top right bottom left)
padding박스 모델

Space between content and border.

<length> | <percentage> (shorthand: top right bottom left)
border박스 모델

Shorthand for border-width, border-style, border-color.

<border-width> || <border-style> || <color>
border-radius박스 모델

Rounds corners of element border box.

<length> | <percentage> (1-4 values for corners)
box-sizing박스 모델

How width/height is calculated.

content-box | border-box
box-shadow박스 모델

Adds shadow effects around element frame.

<offset-x> <offset-y> <blur> <spread> <color> | inset | none
flex-directionFlexbox

Sets main axis of flex container.

row | row-reverse | column | column-reverse
flex-wrapFlexbox

Whether flex items wrap onto multiple lines.

nowrap | wrap | wrap-reverse
justify-contentFlexbox

Alignment along main axis.

flex-start | flex-end | center | space-between | space-around | space-evenly
align-itemsFlexbox

Default alignment along cross axis.

stretch | flex-start | flex-end | center | baseline
align-contentFlexbox

Multi-line flex container alignment.

flex-start | flex-end | center | space-between | space-around | stretch
flexFlexbox

Shorthand for flex-grow, flex-shrink, flex-basis.

none | auto | <flex-grow> <flex-shrink> <flex-basis>
gapFlexbox

Space between flex/grid items.

<length> | <percentage> (row-gap column-gap)
grid-template-columnsGrid

Defines columns of the grid.

none | <track-size> | repeat() | minmax() | auto-fill | auto-fit
grid-template-rowsGrid

Defines rows of the grid.

none | <track-size> | repeat() | minmax()
grid-columnGrid

Shorthand for grid-column-start and grid-column-end.

<line> / <line> | span <number>
grid-rowGrid

Shorthand for grid-row-start and grid-row-end.

<line> / <line> | span <number>
grid-areaGrid

Named grid area or row/column shorthand.

<name> | <row-start> / <col-start> / <row-end> / <col-end>
font-size타이포그래피

Size of the font.

<length> | <percentage> | xx-small...xx-large | smaller | larger
font-family타이포그래피

Prioritized list of font family names.

<family-name> | <generic-family> (comma-separated list)
font-weight타이포그래피

Weight/boldness of the font.

normal | bold | bolder | lighter | 100–900
font-style타이포그래피

Italic or oblique font.

normal | italic | oblique
line-height타이포그래피

Height of a line box.

normal | <number> | <length> | <percentage>
text-align타이포그래피

Horizontal alignment of text.

left | right | center | justify | start | end
text-decoration타이포그래피

Decorative lines on text.

none | underline | overline | line-through | blink
text-transform타이포그래피

Capitalization of text.

none | uppercase | lowercase | capitalize
letter-spacing타이포그래피

Space between characters.

normal | <length>
word-spacing타이포그래피

Space between words.

normal | <length>
color시각적 효과

Foreground color of text and text decorations.

<color> (name, hex, rgb(), hsl(), oklch())
background시각적 효과

Shorthand for all background properties.

<color> | <image> | <position> / <size> <repeat> <attachment>
background-color시각적 효과

Background color of element.

<color> | transparent
opacity시각적 효과

Transparency of element (0–1).

<number> (0 = transparent, 1 = opaque)
visibility시각적 효과

Shows or hides element without changing layout.

visible | hidden | collapse
transition애니메이션

Shorthand for transition properties.

<property> <duration> <easing> <delay>
animation애니메이션

Shorthand for animation properties.

<name> <duration> <easing> <delay> <iteration> <direction> <fill-mode>
transform애니메이션

Applies 2D/3D transforms.

none | translate() rotate() scale() skew() matrix()
will-change애니메이션

Hints browser about expected changes for optimization.

auto | scroll-position | contents | transform | opacity
cursorUI

Type of mouse cursor.

auto | default | pointer | text | move | grab | not-allowed | crosshair | ...
pointer-eventsUI

Controls when element can be target of pointer events.

auto | none | all | fill | stroke | painted
user-selectUI

Controls if text can be selected.

auto | none | text | all | contain
outlineUI

Outline drawn around element outside border.

<outline-width> || <outline-style> || <color> | none
resizeUI

Whether/how user can resize element.

none | both | horizontal | vertical

이 도구 소개

이 레퍼런스는 레이아웃, 박스 모델, Flexbox, Grid, 타이포그래피, 시각적 효과, 애니메이션, UI 상호작용의 8개 카테고리에서 가장 많이 사용되는 CSS 속성을 다룹니다.

검색 상자를 사용하여 속성 이름, 설명 또는 허용 값으로 필터링하세요. 카테고리 필터를 사용하여 특정 그룹을 탐색할 수 있습니다.

사용 방법

  1. 검색 상자에 속성 이름이나 키워드를 입력하여 목록을 필터링하세요.
  2. 드롭다운에서 카테고리를 선택하여 해당 그룹만 표시하세요.
  3. 각 행에는 속성 이름, 카테고리 태그, 설명, 허용 값이 표시됩니다.

활용 사례

프론트엔드 개발자가 개발 중에 속성 이름과 유효한 값을 조회합니다. CSS를 배우는 학생들이 어떤 속성이 있는지 탐색하는 데 사용합니다.

자주 묻는 질문

  • 모든 CSS 속성이 포함되어 있나요? — 아니요. 가장 많이 사용되는 속성만 다룹니다. 희귀하거나 실험적인 속성은 명확성을 위해 제외되었습니다.
  • 벤더 프리픽스 속성도 나열되나요? — 아니요. 프리픽스 없는 표준 속성만 나열됩니다. 최신 브라우저는 벤더 프리픽스 없이 이를 지원합니다.