클래스(class)와 아이디(id), 언제 뭐를 써야 할까?
1. 주제 소개
HTML을 작성하다 보면 class와 id를 언제 써야 할지 헷갈립니다. 둘 다 요소를 식별하는 이름표이지만 쓰임새가 다릅니다. class는 여러 개를 묶는 공용 이름, id는 문서 안에서 단 하나만 갖는 고유 이름이라고 기억하면 쉽습니다.
2. 핵심 내용
class: 반복되는 스타일과 그룹에 적합
여러 카드, 버튼, 배지처럼 같은 디자인을 공유하는 요소들에는 class를 사용합니다. 한 요소에 class를 여러 개 붙일 수 있어 재사용성과 조합이 좋습니다.
id: 한 페이지에서 유일한 대상에 사용
헤더, 특정 섹션 앵커, 고유한 입력 필드처럼 "딱 하나"를 정확히 지목해야 할 때 id를 씁니다. 같은 id를 여러 요소에 중복하면 예기치 않은 동작이 생길 수 있습니다.
CSS와 JavaScript 관점 차이
CSS에서는 공통 스타일은 class 중심으로 작성하고, JavaScript에서는 특정 요소를 빠르게 찾기 위해 id를 사용할 수 있습니다. 다만 최근에는 구조적 선택자와 data-속성도 많이 활용합니다.
3. 적용 방법
실무에서는 "재사용되면 class, 유일하면 id" 원칙을 먼저 적용하세요. 아래 기준표를 체크하면 대부분의 상황에서 올바른 선택을 할 수 있습니다.
| 상황 | 권장 선택 | 이유 |
|---|---|---|
| 여러 버튼 동일 스타일 | class | 반복 사용과 유지보수에 유리 |
| 목차 이동용 특정 섹션 | id | 앵커 링크 대상으로 유일해야 함 |
| 컴포넌트 상태 조합 | class | 여러 class 조합으로 표현 가능 |
4. 정리
class와 id의 핵심은 범위입니다. class는 "여럿", id는 "하나"를 가리킵니다. 초반부터 이 기준을 습관화하면 CSS 충돌을 줄이고 JavaScript 선택자도 훨씬 안정적으로 관리할 수 있습니다.
5. 자주 묻는 질문
Q1. 한 요소에 class와 id를 같이 써도 되나요?
가능합니다. 예를 들어 공통 버튼 스타일은 class로, 특별한 추적 대상은 id로 함께 지정할 수 있습니다.
Q2. id를 스타일링에 자주 쓰면 안 좋나요?
가능하지만 권장되진 않습니다. 재사용성과 우선순위 관리 측면에서 class 중심 스타일링이 보통 더 유연합니다.