class와 id 차이 쉽게 정리

class와 id 차이에서 먼저 볼 부분

class는 여러 요소에 반복해서 쓰기 좋고, id는 한 페이지에서 특정 요소 하나를 구분할 때 사용합니다.

class는 같은 디자인 규칙을 여러 곳에 재사용할 때 편합니다. 버튼, 카드, 입력창처럼 반복되는 UI에는 class가 자연스럽습니다.

id는 페이지 안에서 고유해야 하므로 스타일링보다 JavaScript에서 특정 요소를 정확히 찾을 때 더 자주 쓰입니다.

CSS 선택자 우선순위에서는 id가 class보다 강합니다. 그래서 id를 남발하면 나중에 스타일을 덮어쓰기 어려워질 수 있습니다.

버튼 3개 스타일링

<button class="btn primary">저장</button>
<button class="btn">취소</button>
<button id="deleteButton" class="btn danger">삭제</button>

<style>
.btn { padding: 10px 14px; border: 1px solid #ddd; }
.primary { background: #2563eb; color: white; }
#deleteButton { border-color: #ef4444; }
</style>

이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.

class와 id 차이 쉽게 정리 비교 기준

잘못 작성했을 때 나타나는 흐름

CSS 글은 속성 하나만 외우기보다 부모 요소와 자식 요소의 관계를 같이 확인하는 방식으로 읽는 것이 좋습니다.

스타일이 적용되지 않을 때는 개발자 도구에서 어떤 규칙이 취소선 처리되는지 먼저 보면 원인을 빠르게 좁힐 수 있습니다.

모바일 화면에서는 고정 너비, 긴 코드, margin 조합이 문제를 만들기 쉬우므로 작은 화면 기준까지 함께 확인해야 합니다.

브라우저에서 직접 확인하는 순서

먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.

초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.

실습 후 점검할 항목

• 반복되는 디자인은 class로 만들기
• id는 꼭 하나만 필요한 요소에 쓰기
• 스타일이 안 바뀔 때 id 우선순위 때문인지 확인하기
• JavaScript 선택 목적과 CSS 스타일 목적을 구분하기