클래스(class)와 아이디(id)의 차이점

html의 특정 요소에만 다른 효과를 주고 싶을 때, 해당 요소에 클래스명 또는 아이디값을 할당하여 처리가 가능하다. 클래스(class)와 아이디(id)는 얼핏 보기엔 똑같은 기능을 하는 것 같지만, 알고 보면 이 둘은 큰 차이점을 가지고 있다.

 

 

이름을 불러오는 방식

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

 

<p id="attendance" class="name"> 김영희 </p>

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

 

중복 사용 여부

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

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

<p class="name">김영희</p>
<p class="name">박철수</p>

<!-- attendance 아이디는 여러곳에 사용할 수 없음,
김영희가 속한 <p> 태그에 사용했다면 박철수가 속한 <p> 태그에는 사용 불가 -->

<p id="attendance">김영희</p>
<p>박철수</p>

 

한 요소가 갖는 클래스 & 아이디의 갯수 제한

클래스(class)의 경우에는 한 요소에 여러개의 클래스명이 적용될 수 있다. 그러나 아이디(id)는 한 요소에 한 아이디만 적용이 가능하다. 글로만 설명을 하면 혼란스러울 듯 하여 아래에 예제를 추가하겠다. 

 

<!-- 하나의 <p> 태그에 여러 클래스 사용, 클래스를 추가할 때는 띄어쓰기로 구분 -->
<p class="school name friend">김영희</p>

<!-- 하나의 <p> 태그에 하나의 아이디만 사용 가능 -->
<p id="attendance">김영희</p>

<!-- 여러개 아이디를 사용할 수 없음, 아이디의 잘못된 사용 (아래) -->
<p id="attendance education">김영희</p>

<!-- 한 요소가 여러개의 클래스, 한개의 아이디를 동시에 가지는 것은 가능 -->
<p class="school name" id="attendance">김영희</p>

 

정리하자면, 여러가지 스타일링을 한꺼번에 적용해야 할 때는 클래스(class)를 사용하고, 한가지만 적용하고 싶다면 아이디(id)를 사용하면 된다. 오늘의 정리 끝!