본문 바로가기
Frontend/CSS

2. CSS 기본 선택자

by 예린lynn 2024. 7. 4.
728x90
  1. 전체 선택자
  2. 태그 선택자
  3. id 선택자
  4. 클래스 선택자
  5. 그룹 선택자

 

전체 선택자

스타일을 문서의 모든 요소에 적용

* {속성: 값; ...}

 

 

태그 선택자

특정 태그를 사용한 모든 요소에 스타일 적용

태그명 {스타일 규칙}

 

 

id 선택자

고유한 식별자인 id 를 사용하여 요소 선택.

id 선택자는 문서에서 한 번만 적용할 수 있으며, 다른 선택자보다 우선순위가 높다.

#아이디명 {스타일 규칙}

 

 

클래스 선택자

HTML 요소에 임의의 클래스를 지정하여 해당 클래스를 가진 모든 요소를 선택.

.클래스명 {스타일 규칙}

 

 

그룹 선택자

여러 선택자에서 같은 스타일 규칙을 사용하여 적용

선택자1, 선택자2 {스타일 규칙}

 

 

스타일 우선순위

  • 일반적으로 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓴다.
  • !important > 인라인 스타일 > id 스타일 > 클래스 스타일 > 태그 스타일
  • 중요도가 같은 스타일이면, 스타일 적용 범위에 따라 우선순위를 결정한다.
  • 스타일 적용 범위가 좁을수록 우선순위가 높다.
728x90

'Frontend > CSS' 카테고리의 다른 글

6. 목록 스타일  (0) 2024.07.04
5. 텍스트 스타일링  (0) 2024.07.04
4. 색상 활용  (0) 2024.07.04
3. 글꼴 스타일링  (0) 2024.07.04
1. CSS 스타일 시트  (0) 2024.07.04