HTML id 와 class 차이?

이름을 불러오는 방식

클래스를 불러올 때는 클래스명 앞에 마침표(.)를 찍어준다. 아이디를 불러올 때는 아이디값 앞에 샵(#) 표시를 해준다. 아래는 아이디값과 클래스명을 모두 가진 <p>태그가 있고, 이것을 css를 이용하여 꾸며준 예시이다.

 

<p id="attendance" class="name"> 권현성 </p>

<style>
#attendance {
  color: blue;
  font-size: 17px;
}
.name {
  text-align: center;
}
</style>

 

중복 사용 여부

클래스는 중복 사용이 가능하여, 동일한 클래스명을 페이지의 여러 곳에 사용해도 무방하다. 그러나 아이디는 중복으로 사용할 수 없다. 한 개의 아이디는 페이지에서 딱 한번만 사용해야 한다. 

<!-- name 클래스를 여러 곳에 중복으로 사용할 수 있음 -->

<p class="name">권현성</p>
<p class="name">손흥민</p>

<!-- attendance 아이디는 여러곳에 사용할 수 없음!!,
권현성이 속한 <p> 태그에 사용했다면 손흥민이 속한 <p> 태그에는 사용 불가 -->

<p id="attendance">권현성</p>
<p>손흥민</p>

출처: 디지털 노마드 (heinafantasy.com)