레퍼런스
CSS 속성 사전
자주 쓰는 CSS 속성의 역할과 값, 사용 예시를 한국어로 정리했습니다. 속성 이름으로 빠르게 찾아보세요.
레이아웃 · 배치
요소의 표시 방식과 위치, 흐름을 제어하는 속성입니다.
display요소의 표시 방식(블록/인라인/플렉스/그리드)을 정합니다.position요소의 위치 지정 방식을 정합니다.top위치 지정 요소의 위쪽 오프셋입니다.right위치 지정 요소의 오른쪽 오프셋입니다.bottom위치 지정 요소의 아래쪽 오프셋입니다.left위치 지정 요소의 왼쪽 오프셋입니다.z-index요소가 쌓이는 순서(앞뒤)를 정합니다.overflow넘치는 콘텐츠 처리 방식을 정합니다.visibility요소를 보이거나 숨깁니다(공간 유지).box-sizing너비·높이에 padding·border를 포함할지 정합니다.float요소를 좌우로 띄워 텍스트가 감싸게 합니다.clearfloat된 요소 옆에 오지 않도록 막습니다.
플렉스 · 그리드
Flexbox와 Grid로 1·2차원 레이아웃을 만드는 속성입니다.
flexflex-grow·shrink·basis를 한 번에 지정합니다.flex-direction플렉스 주축의 방향을 정합니다.flex-wrap플렉스 아이템의 줄바꿈 여부를 정합니다.flex-grow남는 공간을 차지하는 비율입니다.flex-shrink공간이 부족할 때 줄어드는 비율입니다.flex-basis아이템의 기본 크기입니다.justify-content주축 방향으로 아이템을 정렬합니다.align-items교차축 방향으로 아이템을 정렬합니다.align-content여러 줄의 교차축 정렬을 정합니다.align-self개별 아이템의 교차축 정렬을 덮어씁니다.order아이템의 시각적 순서를 바꿉니다.gap플렉스·그리드 아이템 사이 간격입니다.grid-template-columns그리드의 열 구조를 정의합니다.grid-template-rows그리드의 행 구조를 정의합니다.grid-column아이템이 차지할 열 범위를 정합니다.grid-row아이템이 차지할 행 범위를 정합니다.grid-auto-flow자동 배치 아이템의 흐름 방향을 정합니다.
박스 모델
크기·여백·테두리 등 박스의 형태를 정하는 속성입니다.
타이포그래피
글꼴·크기·정렬 등 텍스트 표현을 다루는 속성입니다.
font-family글꼴(폰트)을 지정합니다.font-size글자 크기를 지정합니다.font-weight글자 굵기를 지정합니다.font-style글자의 기울임 여부를 정합니다.line-height줄 간격(행간)을 정합니다.letter-spacing글자 사이 간격을 조절합니다.text-align인라인 콘텐츠의 가로 정렬을 정합니다.text-decoration밑줄·취소선 등 텍스트 장식을 정합니다.text-transform대소문자 변환을 정합니다.text-overflow넘치는 텍스트의 끝 처리를 정합니다.white-space공백과 줄바꿈 처리 방식을 정합니다.word-break긴 단어의 줄바꿈 규칙을 정합니다.color글자 색을 지정합니다.vertical-align인라인·표 셀의 세로 정렬을 정합니다.
배경 · 시각 효과
배경·색·투명도·필터 등 시각 표현 속성입니다.
background배경 관련 속성을 한 번에 지정합니다.background-color배경 색을 지정합니다.background-image배경 이미지나 그라디언트를 지정합니다.background-size배경 이미지 크기를 정합니다.background-position배경 이미지의 위치를 정합니다.background-repeat배경 이미지 반복 방식을 정합니다.opacity요소의 불투명도를 정합니다.filter흐림·밝기 등 그래픽 필터를 적용합니다.backdrop-filter요소 뒤 배경에 필터를 적용합니다.object-fit이미지·영상이 박스를 채우는 방식을 정합니다.cursor마우스 커서 모양을 정합니다.list-style목록의 마커 스타일을 정합니다.
전환 · 애니메이션
변형·전환·애니메이션 등 움직임을 만드는 속성입니다.