스타일 속성
HTML 요소에 어떤 스타일을 적용할 지 지정하는 키워드
선택자 {
속성 : 값;
}
CSS
복사
구성 요소
구성 요소 | 설명 | 예시 |
선택자 (Selector) | 어떤 HTML 요소에 스타일을 적용할지 지정 | p, .menu, #header |
속성 (Property) | 적용할 스타일의 종류 (디자인 항목) | color, font-size, margin |
값 (Value) | 속성에 적용될 실제 값 (색상, 크기, 위치 등) | red, 16px, center |
CSS 스타일 속성 이름은 케밥 케이스로 정의되어 있습니다.•
font-size
•
background-color
두 단어 이상이 될 때, 단어와 단어 사이의 구분을 - (하이픈, 대시) 로 구분하게 되어있습니다.
스타일 속성 종류
순서 | 속성 범주 | 설명 | 주요 속성 예시 |
1 | 텍스트의 기본 스타일을 설정합니다. | font-family, font-size, font-weight, font-style | |
2 | 텍스트의 표현 방식을 제어합니다. | text-align, text-decoration, text-transform, letter-spacing | |
3 | 요소 간의 여백 및 내부 여백을 설정합니다. | margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left | |
4 | 요소의 배경을 설정합니다. | background-color, background-image, background-repeat, background-size, background-position | |
5 | 요소의 위치와 쌓임 순서를 설정합니다. | position, top, right, bottom, left, z-index | |
6 | 요소의 배치와 흐름을 제어합니다. | float, clear | |
7 | 요소의 표시 방식과 가시성을 제어합니다. | display, visibility, opacity | |
8 | 요소의 변형(회전, 이동 등)을 설정합니다. | transform, transform-origin, transform-style | |
9 | 속성의 변화를 애니메이션화하여 부드러운 전환 효과를 제공합니다. | transition, transition-property, transition-duration, transition-timing-function, transition-delay | |
10 | 요소에 애니메이션을 적용하여 동적인 효과를 생성합니다. | animation, animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction |