Frontend/CSS

2. CSS 기본 선택자

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

 

전체 선택자

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

* {속성: 값; ...}

 

 

태그 선택자

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

태그명 {스타일 규칙}

 

 

id 선택자

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

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

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

 

 

클래스 선택자

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

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

 

 

그룹 선택자

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

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

 

 

스타일 우선순위

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