HTML DOM에서 id와 class는 모두 요소를 식별하는 선택자(selector)로 사용됩니다. 두 속성은 요소에 지정된 이름을 기반으로 해당 요소를 찾아 스타일이나 동작을 적용하는 역할을 하지만, 문법·선택자 개수·고유성 측면에서 중요한 차이점이 있습니다.
id와 class의 주요 차이점
| 번호 | 구분 | id | class |
|---|---|---|---|
| 1 | 문법 | HTML에서 id 이름은 # 기호로 시작하며, 그 뒤에 요소에 부여된 고유한 이름이 옵니다. | 반면 class 이름은 .(마침표) 기호로 시작하며, 그 뒤에 클래스 이름이 옵니다. |
| 2 | 선택자 개수 | 하나의 요소에는 오직 하나의 id 선택자만 연결할 수 있습니다. | 하나의 요소에 여러 개의 class 선택자를 동시에 연결할 수 있습니다. |
| 3 | 고유성 | id는 한 페이지 내에서 유일해야 하며, 최대 한 개의 요소에만 적용할 수 있습니다. | class는 여러 요소에 적용할 수 있으므로 한 페이지에서 여러 번 재사용할 수 있습니다. |
예제로 살펴보는 id vs class
id 사용 예제 (Id.html)
<!DOCTYPE html>
<html>
<head>
<title>
Id demo
</title>
<style>
#idDemo{
color:green;
font-size:25px;
}
</style>
</head>
<body style="text-align:center">
<h1>id로 요소 가져오기</h1>
<p id="idDemo">id 선택자 데모입니다</p>
</body>
</html>위 예제에서는 #idDemo처럼 # 기호를 사용해 id를 선택하며, 초록색 글자와 25px 크기의 스타일이 해당 단일 요소에만 적용됩니다.
class 사용 예제 (Class.html)
<!DOCTYPE html>
<html>
<head>
<title>
Class demo
</title>
<style>
.classDemo{
color:orange;
font-size:25px;
}
</style>
</head>
<body style="text-align:center">
<h1>class로 요소 가져오기</h1>
<p class="classDemo">class 선택자 데모입니다</p>
</body>
</html>반면 위 예제에서는 .classDemo처럼 . 기호를 사용해 클래스를 선택합니다. 이 스타일은 같은 클래스를 가진 모든 요소에 일괄 적용됩니다.
그렇다면 어떤 것을 사용해야 할까?
id는 페이지에서 단 하나뿐인 고유 요소(예: 헤더, 푸터, 특정 섹션)를 지정하거나, JavaScript에서 document.getElementById()로 특정 요소에 빠르게 접근해야 할 때 적합합니다. 또한 CSS 우선순위(specificity)에서 id는 class보다 높은 가중치를 가집니다.
class는 여러 요소에 동일한 스타일을 반복 적용해야 할 때 유용합니다. 버튼, 카드, 배지처럼 재사용성이 필요한 UI 컴포넌트에는 class를 사용하는 것이 좋으며, 하나의 요소에 class="btn primary"처럼 여러 클래스를 조합해 활용할 수도 있습니다.