🌱 기초 프론트엔드
ID 선택자란?
쉽게 이해하기
주민등록번호는 사람마다 하나씩만 있고, 절대 중복되지 않죠. ID 선택자도 마찬가지예요. 한 페이지에서 딱 하나의 요소에만 부여하는 고유한 이름이에요. 그래서 그 요소만 정확히 찾아서 스타일을 적용할 수 있어요.
핵심 정리
HTML 요소 하나만 선택해서 스타일을 적용하는 방법이에요.
자세히 알아보기
ID 선택자는 페이지 내에서 유일한 하나의 요소를 선택하는 방법이에요. HTML에서는 `id="이름"` 형태로 쓰고, CSS에서는 `#이름` 형태로 선택해요. 클래스와 달리 ID는 한 페이지에서 단 한 번만 사용해야 해요.
실무에서는 페이지의 핵심 영역을 구분할 때 주로 사용해요. 예를 들어 `id="header"`, `id="main-content"`, `id="footer"`처럼 페이지의 큰 구조를 나타낼 때 쓰죠. 또한 JavaScript에서 특정 요소를 찾을 때도 ID를 많이 사용해요. `document.getElementById('header')`처럼 코드 한 줄로 정확히 그 요소를 찾을 수 있거든요.
하지만 요즘은 ID보다 클래스를 더 많이 사용하는 추세예요. ID는 너무 강력해서(우선순위가 높아서) 나중에 스타일을 덮어쓰기 어렵거든요. 그래서 대부분의 스타일링에는 클래스를 쓰고, ID는 JavaScript로 요소를 찾거나 페이지 내 링크(앵커)를 만들 때만 사용하는 편이에요.