> 선택자
어떤 요소에 스타일을 적용할 것인지에 대한 정보
> 선택자의 종류
- 기본 선택자
- 그룹 선택자
- 특성 선택자
- 결합 선택자
- 의사 클래스
- 의사 요소
> 기본 선택자_ 1) 전체 선택자
- 모든 요소를 선택함.
- *(애스터리스크) : 문서 내의 모든 요소를 의미하는 기호.
ex.
> 문서 내의 모든 요소의 글자를 분홍색으로 지정.
> 기본 선택자_ 2) 태그 선택자
- 작성한 태그에 해당되는 요소를 모두 선택함.
ex.
> 문서 내의 모든 p 태그 요소의 글자를 분홍색으로 지정.
> 기본 선택자_ 3) 클래스 선택자
- 작성한 class 속성값을 가진 요소를 모두 선택함.
- class 속성 앞에는 꼭 '.(온점)'을 적어야 함.
ex.
> 문서 내의 class 속성이 "text"인 모든 요소의 글자를 분홍색으로 지정.
> 기본 선택자_ 4) 아이디 선택자
- 작성한 id 속성값을 가진 요소를 선택함.
- id 속성 앞에는 꼭 '#'을 적어야 함.
ex.
> 문서 내의 id 속성이 "name"인 요소의 글자를 분홍색으로 지정.
> 그룹 선택자
- 다양한 유형의 요소를 한번에 선택할 때 사용함.
- 쉼표(,)를 사용해 선택자를 그룹화함.
ex.
> 문서 내 모든 h2, div, span 태그 요소의 글자를 분홍색으로 지정.
> 스타일을 중복해서 적용한 경우
- 선택자가 겹치는 경우 : 나중에 작성된 스타일이 적용됨.
- 선택자가 다르지만 요소가 겹치는 경우 : 선택자 우선순위에 의해 적용됨.
> 선택자 우선순위
1. 아이디 선택자
2. 클래스 선택자
3. 태그 선택자
ex.
'CSS' 카테고리의 다른 글
| [CSS] padding 속성과 margin 속성 (0) | 2023.11.02 |
|---|---|
| [CSS] 박스모델이란? (0) | 2023.11.02 |
| [CSS] display 속성과 border 속성 (0) | 2023.11.01 |
| [CSS] 텍스트 관련 속성 (0) | 2023.10.30 |
| [CSS] 기본 문법 (ft. HTML에 CSS 더하기) (0) | 2023.10.30 |