스타일 속성

HTML 요소에 어떤 스타일을 적용할 지 지정하는 키워드

선택자 {
	속성 : 값;
}
CSS
복사

구성 요소

구성 요소	설명	예시
선택자 (Selector)	어떤 HTML 요소에 스타일을 적용할지 지정	p, .menu, #header
속성 (Property)	적용할 스타일의 종류 (디자인 항목)	color, font-size, margin
값 (Value)	속성에 적용될 실제 값 (색상, 크기, 위치 등)	red, 16px, center

CSS 스타일 속성 이름은 케밥 케이스로 정의되어 있습니다.

•

font-size

•

background-color

두 단어 이상이 될 때, 단어와 단어 사이의 구분을 - (하이픈, 대시) 로 구분하게 되어있습니다.

스타일 속성 종류

순서	속성 범주	설명	주요 속성 예시
1	글꼴 속성 (Font Properties)	텍스트의 기본 스타일을 설정합니다.	font-family, font-size, font-weight, font-style
2	텍스트 속성 (Text Properties)	텍스트의 표현 방식을 제어합니다.	text-align, text-decoration, text-transform, letter-spacing
3	여백 속성 (Margin & Padding Properties)	요소 간의 여백 및 내부 여백을 설정합니다.	margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left
4	배경 속성 (Background Properties)	요소의 배경을 설정합니다.	background-color, background-image, background-repeat, background-size, background-position
5	위치 속성 (Positioning Properties)	요소의 위치와 쌓임 순서를 설정합니다.	position, top, right, bottom, left, z-index
6	배치 속성 (Layout Properties)	요소의 배치와 흐름을 제어합니다.	float, clear
7	표현 속성 (Display & Visibility Properties)	요소의 표시 방식과 가시성을 제어합니다.	display, visibility, opacity
8	변형 속성 (Transform Properties)	요소의 변형(회전, 이동 등)을 설정합니다.	transform, transform-origin, transform-style
9	전환 속성 (Transition Properties)	속성의 변화를 애니메이션화하여 부드러운 전환 효과를 제공합니다.	transition, transition-property, transition-duration, transition-timing-function, transition-delay
10	애니메이션 속성 (Animation Properties)	요소에 애니메이션을 적용하여 동적인 효과를 생성합니다.	animation, animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction