CSS를 배우기 시작하면 가장 먼저 자주 만나게 되는 선택자가 바로 class와 id입니다.
둘 다 HTML 요소를 선택해서 스타일을 적용할 수 있다는 점은 같지만, 사용 목적과 우선순위, 재사용성에서 큰 차이가 있습니다.
초보자 분들은 "둘 다 똑같이 스타일 주는 거 아닌가?"라고 생각하기 쉽지만, 실무에서는 이 차이를 정확히 이해하고 써야 유지보수와 협업이 쉬워집니다.
특히 퍼블리싱과 프론트엔드 작업에서는 잘못된 선택자 사용이 CSS 충돌로 이어질 수 있습니다.
이번 글에서는 class와 id 선택자의 차이, 각각의 특징, 그리고 실무에서 어떤 기준으로 선택해야 하는지까지 쉽게 정리해보겠습니다.
class 선택자란?
class는 여러 요소에 공통 스타일을 재사용하기 위해 사용하는 선택자입니다.
.button {
background: black;
color: white;
}
HTML에서는 다음처럼 사용합니다.
<button class="button">버튼1</button>
<button class="button">버튼2</button>
같은 class 이름을 여러 요소에 반복해서 사용할 수 있다는 것이 가장 큰 특징입니다.
id 선택자란?
id는 문서 안에서 단 하나의 고유한 요소를 선택할 때 사용합니다.
#header {
position: fixed;
}
HTML 예시는 다음과 같습니다.
<header id="header">헤더 영역</header>
id는 HTML 문서 내에서 중복 없이 한 번만 사용하는 것이 원칙입니다.
class와 id의 가장 큰 차이
1. 재사용성
class는 여러 요소에서 반복 사용이 가능합니다.
<div class="card"></div>
<div class="card"></div>
반면 id는 한 문서에서 한 번만 사용해야 합니다.
<div id="main"></div>
2. CSS 우선순위
CSS에서는 id 선택자가 class보다 우선순위가 더 높습니다.
#box {
color: red;
}
.box {
color: blue;
}
같은 요소에 둘 다 적용되면 id의 빨간색이 우선 적용됩니다.
3. 사용 목적
class > 스타일 재사용, 컴포넌트 단위
id > 고유 영역, JavaScript 제어, anchor link
실무에서는 class를 더 많이 쓰는 이유
실무에서는 대부분 class 기반으로 CSS를 작성합니다.
그 이유는 다음과 같습니다.
- 재사용 가능
- 유지보수 쉬움
- CSS 충돌 방지
- 컴포넌트 구조에 적합
예를 들어 버튼, 카드, 배너 같은 UI는 class로 만드는 것이 일반적입니다.
id는 언제 사용하는 것이 좋을까?
id는 다음과 같은 경우에 사용하는 것이 적절합니다.
고유한 레이아웃 영역
<main id="content"></main>
JavaScript 요소 선택
document.getElementById("modal")
페이지 내부 이동(anchor)
<a href="#contact">문의로 이동</a>
<section id="contact"></section>
잘못된 사용 예
아래처럼 반복되는 요소에 id를 쓰는 것은 좋지 않습니다.
<div id="card"></div>
<div id="card"></div>
이 경우 HTML 규칙 위반이며 JavaScript 선택에도 문제가 생깁니다.
class와 id 함께 사용하기
실무에서는 함께 사용하는 경우도 많습니다.
<section id="about" class="section">
소개 영역
</section>
이 구조는 id로 고유 영역을 지정하고, class로 공통 스타일을 적용하는 방식입니다.
SEO와 접근성 관점
class와 id 자체가 SEO에 직접 영향을 주지는 않지만, 구조를 명확하게 만드는 데 도움이 됩니다.
특히 id는 내부 링크 구조를 만들 때 유용하여 긴 페이지의 사용자 경험을 개선할 수 있습니다.
실무 추천 사용 기준
실무에서는 아래 기준으로 생각하면 가장 쉽습니다.
- 반복 스타일 = class
- 고유 영역 = id
- JavaScript 선택 = id 또는 data-*
- 컴포넌트 UI = class
마무리
class와 id는 비슷해 보여도 목적이 명확히 다른 선택자입니다.
정리하면 다음과 같습니다.
- class는 재사용 가능한 스타일용
- id는 문서 내 고유 요소용
- CSS는 class 중심으로 작성하는 것이 실무에 유리
처음부터 이 기준을 잘 잡아두면 CSS 구조가 훨씬 깔끔해지고 유지보수도 쉬워집니다.