선택자는 HTML문서에서 어느 부분에 스타일을 적용할지 정하는 규칙
| 선택자 | 의미 | 예시 | 설명 |
|---|---|---|---|
| 전체(*) 선택자 | 모든 요소 선택 | * { color: red; } | 페이지 모든 HTML 요소에 스타일 적용 |
| 타입(요소) 선택자 | 특정 HTML 태그 선택 | p {color: red;} | 모든 p태그에 적용 |
| 클래스 선택자 (.클래스명) | 특정 클래스 속성을 가진 요소 선택 | .title { font-size: 20px;} | 여러 요소에 재사용 가능 |
| 아이디 선택자 (#아이디명) | 특정 ID 속성을 가진 요소 선택 | 선택 #main { background: yellow; } | 문서 내 고유 |
| 그룹 선택자 (,) | 여러 선택자 한 번에 지정 | h1, p { color: blue; } | 한 번에 여러 요소 선택 |
HTML 문서 안의 모든 요소를 한 번에 선택하는 CSS선택자 전체 라는 말 처럼 페이지에 존재하는 모든 태그에 동일하게 스타일 적용
* {
속성: 값;
}
HTML 태그 이름을 그대로 선택자로 하여 해당 태그에 스타일을 적용하는 방법
태그이름 {
속성: 값;
}
HTML에서 class 속성을 사용해서 스타일을 적용 CSS에서 . 점 뒤에 클래스 이름을 붙여서 사용
.클래스명 {
속성: 값;
}