[HTML] 1. id와 class의 차이점

개요

id와 class는 <div>와 같은 태그에 들어가는 속성들이다. 이번에는 id와 class가 어떠한 차이가 있는 지 알아보자.

---

속성의 특징

태그에 id 또는 class와 같은 속성을 추가하면 해당 태그에만 속성을 지니며, 태그 안의 영역은 같은 속성을 지니지 않는다. 다만, 속성을 가진 태그가 받는 효과는 동일하게 적용된다.

---

id 속성

id 속성은 한 문서 내에서 유일한 식별자(identifier)를 가지는 속성이다. 즉, 한 문서 내에서 동일한 id 값은 사용할 수 없다. 예시를 보자.

<!-- 올바른 사용 -->
<div id="example1">Content 1</div>
<div id="example2">Content 2</div>

<!-- 잘못된 사용 -->
<div id="example">Content 1</div>
<div id="example">Content 2</div>

 

첫번째 예시처럼 사용을 한 경우, id를 올바르게 사용한 경우이다. 각 태그가 서로 다른 id를 가지고 있기 때문에 문제가 되지 않는다. 

 

하지만, 두번째 예시처럼 2개의 태그가 같은 id를 사용할 수는 없다. id는 db에서 primary key와 같이 한 문서에서는 동일한 id는 나올 수 없다. 여기서 문서는 html 파일 하나를 의미하기 때문에 (문서 = html) 여러 html 파일이 포함된 프로그램에서 각 html 파일이 같은 id를 가진다 해도 문제가 되지는 않는다. 다만, 데이터 식별에 혼동이 발생할 수 있으니 되도록이면 중복해서 사용하지 말자.

---

class 속성

 

class속성은 id속성과는 다르게 한 문서에서 여러 번 사용할 수 있는 속성이다. 그렇기 때문에 여러 요소에 동일한 스타일을 적용하거나 JavaScript에서 그룹으로 요소(element)를 조작할 때 사용한다. 한 요소에 여러 개의 클래스를 지정할 수 있습니다. 아래 예시처럼 id와 다르게 첫번째, 두번째 모두 올바른 사용법이다. 

<!-- 올바른 사용 -->
<div class="example1">Content 1</div>
<div class="example2">Content 2</div>

<!-- 올바른 사용 -->
<div class="example">Content 1</div>
<div class="example">Content 2</div>

 

---

표

속성	id	class
선택자	#	.
특징	태그는 하나의 id 속성만 가질 수 있음	태그는 여러 class속성을 가질 수 있음