HTML/CSS를 처음 접할 때 가장 헷갈리는 것이 바로 ID(#)와 Class(.)의 차이다.
color: red;를 주면 둘 다 빨간색으로 변하고, 겉보기엔 똑같이 작동하는 것처럼 보인다.
하지만 이 둘은 태생부터 “성격”과 “권력(우선순위)”이 완전히 다르다. 이 차이를 모르면 나중에 유지보수 지옥에 빠지게 된다.
- 한눈에 보는 비유: 주민번호 vs 유니폼
가장 쉬운 비유로 정의하자면 다음과 같다.
💡 핵심 비유
ID (#): 주민등록번호. 전 국민(페이지) 중 딱 한 명만 가질 수 있는 고유한 식별자다.
Class (.): 유니폼(교복). 여러 명이 똑같은 옷을 입을 수 있다.
구분 ID (#) Class (.)
비유 주민등록번호 (고유함) 유니폼 / 교복 (공유 가능)
개수 한 페이지에 딱 1개만 존재 한 페이지에 여러 개 사용 가능
힘(우선순위) 매우 셈 (대장, 100점) 약함 (일반 병사, 10점)
주 용도 자바스크립트 제어, 링크 이동 스타일링(CSS), 디자인 재사용
- 결정적인 차이 3가지
① “개수”의 차이 (Uniqueness)
ID는 유일해야 하고, Class는 반복해도 된다.
ID (#header): 문서 전체에서 단 하나만 존재해야 한다. 만약 <div id="header">를 두 번 쓴다면? 작동은 할지 몰라도 웹 표준 위반이며, 자바스크립트가 요소를 찾을 때 첫 번째만 찾고 에러를 뿜을 것이다.
Class (.btn): 재사용이 핵심이다. ‘제출 버튼’, ‘취소 버튼’, ‘로그인 버튼’ 등 여러 곳에 똑같은 디자인을 입힐 수 있다.
② “힘”의 차이 (Specificity)
CSS 전쟁에서 ID는 깡패다.
똑같은 요소에 서로 다른 색상을 지정했을 때, 누가 이길까?
HTML
CSS
/* CSS /
#box { color: red; } / ID: 빨강 (힘 100점) /
.box { color: blue; } / Class: 파랑 (힘 10점) */
👉 결과: 빨간색 (Red)
ID의 우선순위가 압도적으로 높아서 Class의 스타일을 무시해버린다. 나중에 스타일을 수정하려고 해도, ID로 작성된 코드는 덮어쓰기가 매우 힘들다. 결국 !important 같은 나쁜 코드를 남발하게 된다.
③ “기능”의 차이 (Anchor)
ID에는 ‘책갈피’ 기능이 있다.
ID는 URL을 통해 특정 위치로 점프하는 기능을 기본적으로 제공한다.