[css]클래스(class) vs 아이디(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>

 

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

클래스의 경우에는 한 요소에 여러 개의 클래스명이 적용될 수 있다. 그러나 이이디는 한 요소에 한 아이디만 적용이 가능하다.

 

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

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

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

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

 

=> 여러 가지 스타일링을 한꺼번에 적용해야 할 때는 클래스를 사용하고, 한 가지만 적용하고 싶다면 아이디를 사용하면 된다.