[html] class와 id

html에 이름을 주는 요소에는 class와 id가 있다. 이 둘은 비슷한듯 다르다. 그 차이에 대해 알아보자.

 

class

/* css */
.big-blue-text {
  color: blue;
  font-size: 48px;
}

<!-- html -->
<p class="big-blue-text">First</p>
<p>Second</p>
<p class="big-blue-text">Third</p>

<p>태그에 big-blue-text라는 클래스를 붙여주었다. 이것을 css에서 불러올 땐, '. + 클래스이름'을 써주면된다.

 

 

id

/* css */
#favorite-text {
  color: blue;
  font-size: 48px;
}

<!-- html -->
<p id="favorite-text">First</p>
<p>Second</p>
<p>Third</p>

<p>태그에 favorite-text라는 아이디를 붙여주었다. 이것을 css에서 불러올 땐, '# + 아이디이름'을 써주면된다.

 

 

class와 id의 차이

1. 같은 클래스 이름은 여러 요소가 가질 수 있지만, 같은 아이디는 여러 요소가 공유할 수 없다.
2. 한 요소가 여러 클래스를 가질 수 있지만, 한 요소는 하나의 아이디만 가질 수 있다. (단, 한 요소가 클래스를 여러 개 갖고 아이디도 하나 가질 수 있다.)