Winnie The Pooh Bear CSS선택자_id선택자와 class선택자의 차이점

배움기록/CSS

CSS선택자_id선택자와 class선택자의 차이점

코딩은 처음이라 2023. 2. 21. 20:08

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형

CSS선택자_id선택자와 class선택자의 차이점

 

 

 

 

id 선택자

  • HTML문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여
  • HTML 요소에 id로 이름을 붙일 때는 유일한 이름을 부여
  • 다른 요소에 같은 id명을 또 주면 안됨
  • CSS에서는 id 선택자 앞에 '#'을 붙여야 함
  • id명이나 class명은 숫자로 시작할 수 X
  • 영문자로 시작

 

[ 예시 1 ]

See the Pen Untitled by hyunmijin (@hyunmijin) on CodePen.

 

 

 

class 선택자

  • HTML 문서의 여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 속성 부여 가능
  • 여러개의 요소에 같은 class명 부여 가능
  • 하나의 요소에 여러개의 class명 부여 가능
  • CSS에서는 class 선택자 앞에 ' ' 를 붙여야함

 

 

[ 예시 2 ]

See the Pen Untitled by hyunmijin (@hyunmijin) on CodePen.

 

 

 

 

 

id 선택자와 class선택자를 살펴보았는데요

그럼 차이점에 대해 한번 더 정리해볼까요!?

id 선택자 class 선택자
같은 요소 =각기 다른 이름을 지정 여러 요소=같은 이름을 갖는 요소들만 따로 모아 속성 부여 가능
유일한 이름 부여 여러개의 요소에 같은 class명 부여 가능
CSS에서 선택자 앞에 # CSS에서 class앞에 ' '

 

반응형