클래스(class)와 아이디(id), 언제 뭐를 써야 할까?

클래스(class)와 아이디(id), 언제 뭐를 써야 할까?

목차

• 1. 주제 소개
• 2. 핵심 내용
• 3. 적용 방법
• 4. 정리
• 5. 자주 묻는 질문

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 중심 스타일링이 보통 더 유연합니다.