🌱 기초 프론트엔드
CSS 선택자(Selector)란?
쉽게 이해하기
CSS 선택자는 우편 주소 같은 거예요. '서울시 강남구 123번지'처럼 정확한 주소를 써야 택배가 도착하듯이, CSS에서도 '.button'이나 '#header' 같은 선택자로 정확한 요소를 찾아서 스타일을 적용합니다.
핵심 정리
CSS에서 스타일을 적용할 HTML 요소를 지정하는 방법입니다.
자세히 알아보기
CSS 선택자(Selector)는 HTML 문서에서 스타일을 적용할 대상을 선택하는 패턴입니다. 가장 기본적인 선택자는 태그 이름(예: div, p, button), 클래스(.class-name), ID(#id-name) 세 가지예요.
실무에서 가장 많이 쓰는 건 클래스 선택자입니다. 예를 들어 '.btn-primary'라고 쓰면 'btn-primary' 클래스를 가진 모든 요소에 파란색 버튼 스타일을 적용할 수 있죠. 반면 ID 선택자는 페이지에서 단 하나의 요소에만 사용됩니다.
더 복잡한 선택자도 있어요. '.container .item'은 container 클래스 안에 있는 item 클래스를 찾고, '.item:hover'는 마우스를 올렸을 때만 스타일을 적용합니다. 이런 선택자를 조합하면 아주 정밀하게 원하는 요소만 꾸밀 수 있습니다.
선택자를 효율적으로 사용하면 CSS 코드가 깔끔해지고 유지보수도 쉬워집니다. 다만 너무 복잡한 선택자는 성능에 안 좋을 수 있으니 적당히 쓰는 게 좋아요.