HTML,CSS,JS

CSS - 선택자

야생늑대 2022. 4. 24. 19:24
반응형

▶ 선택자의 우선순위

태그 선택자   <   Class 선택자   <   id 선택자 

 

※ 모두 똑같은 형태의 선택자라면 맨마지막에 등장하는 선택자가 우선순위가 높다

(class 선택자도 띄어쓰기로 여러개의 선택자를 줄 수 있는데 마지막에 작성된 선택자가 우선순위가 높다.)


  • id 선택자는 웹페이지에서 같은 선택자를 중복해서 사용하면 안된다. 
  • 여러번 써도 동작은 하지만 쓰지말라고 권장하고 있다. 즉 id 값은 단 한번만 등장해야 한다.
  • id는 학교에서는 학번, 대한민국에서는 주민번호다. id의 핵심은 중복돼서는 안된다는거다.
  • HTML 문서에서도 id 값은 유일무이한 값이어야한다.

  • 선택자의 우선 순위를 보면 좀더 구체적인 범위를 지정하는 선택자가 높다.
  • id 선택자는 선택한 id 를 가진 태그만 지정
  • class는 한 그룹을 정해서 지정
  • 태그선택자는 선택한 태그 전체를 지정한다.

 

※ HTML 문서에 이러한 코드가 있다면 아래와 같이 선택자를 준다.

 

▶ 태그 선택자는 효과를 줄 태그를 적어준다.

▶ 클래스 선택자는  약속한 특수기호로 도트( . ) 를 사용한다.

▶ id 선택자는 약속한 특수기호로 샵( # ) 을 사용한다.

 

※ 태그에 style속성이 있다면 우선순위가 선택자보다 높다.

반응형

'HTML,CSS,JS' 카테고리의 다른 글

Gson 라이브러리 추가하기  (0) 2022.05.17
jquery 사용 준비  (0) 2022.05.17
CSS 기본 개념  (0) 2022.04.24
클리어픽스 clearfix  (0) 2022.04.22