Leeyanggoo
[CSS] 선택자 id와 class의 차이점을 알아보자! 본문
id 선택자
CSS의 선택자는 HTML 요소 중 같은 요소일지라도 각자 다른 속성을 부여할 때 사용합니다.
그중 id 선택자는 여러 요소 중 특정한 이름을 부여하는 선택자이며 중복해서 사용할 수 없습니다.
See the Pen CSS_id by leeyanggoo (@leeyanggoo) on CodePen.
id 선택자는 HTML 요소 태그의 시작에 <p id="name">과 같이 붙여서 나타냅니다.
또한 id 선택자의 이름은 숫자로 시작할 수 없고, 주로 영문자로 시작합니다.
class 선택자
class 선택자는 HTML 요소 중 같은 이름을 갖는 특정한 집단을 모아 속성을 부여하는 선택자입니다.
즉 특정 집단을 class라고 표현하는 것이며, 여러 개의 요소에 같은 class 이름을 부여할 수 있습니다.
See the Pen CSS_class by leeyanggoo (@leeyanggoo) on CodePen.
class 선택자는 HTML 요소 태그의 시작에 <p class="name">과 같이 붙여서 나타냅니다.
class 선택자 또한 이름은 숫자로 시작할 수 없고, 주로 영문자로 시작합니다.
class 선택자는 요소가 다른 HTML 태그들에 속성을 부여할 수 있으며, 하나만 사용할 수도 있습니다.
위의 예시는 서로 다른 태그인 <h2>와 <p> 태그에 같은 "special"이라는 calss이름을 부여함으로써 color: red라는 속성을 부여했으며, class 이름이 다른 <p class=normal> 태그의 요소는 영향을 받지 않은 것을 볼 수 있습니다.
