[CSS] CSS 핵심 선택자(Selector) 정복하기: ID, 클래스, 태그 - PLUV

“수많은 HTML 요소 중에서 내가 원하는 특정 요소에만 스타일을 적용하려면 어떻게 해야 할까?”

그 해답이 바로 **선택자(Selector)**에 있습니다.

선택자는 말 그대로 스타일을 적용할 HTML 요소를 ‘선택’하는 역할을 합니다. 마치 화가가 특정 캔버스 영역에 붓 터치를 하듯, 우리는 선택자를 통해 웹 페이지의 특정 부분을 정확히 지정하여 디자인을 입힐 수 있습니다. 이번 시간에는 가장 기본적이면서도 가장 중요한 핵심 선택자들에 대해 알아보겠습니다.

1. 유형 (태그) 선택자 (Type Selector)

가장 기본적인 선택자로, HTML 태그의 이름을 직접 사용하여 페이지 내의 모든 해당 태그를 선택합니다. 예를 들어, 페이지의 모든 단락(<p>)의 글자 색을 바꾸고 싶을 때 사용합니다.

/* 모든 <p> 태그를 선택 */
p {
  color: #333333;
  line-height: 1.6;
}

/* 모든 <a> 태그를 선택 */
a {
  text-decoration: none; /* 밑줄 제거 */
}

장점: 웹사이트 전체의 기본 스타일(폰트, 색상, 줄 간격 등)을 일관되게 설정할 때 매우 유용합니다.
단점: 너무 광범위하게 적용되기 때문에 세밀한 디자인 제어에는 한계가 있습니다.

2. 클래스 선택자 (Class Selector)

클래스 선택자는 CSS에서 가장 중요하고 가장 많이 사용되는 선택자입니다. 특정 스타일을 여러 요소에 재사용하고 싶을 때 사용하며, 마침표(.) 뒤에 클래스 이름을 붙여서 표시합니다.

1단계: HTML에 class 속성 추가

<h2 class="highlight-text">중요한 제목</h2>
<p>이것은 일반 텍스트입니다.</p>
<p class="highlight-text">이 단락은 강조하고 싶습니다.</p>

highlight-text라는 클래스를 <h2>와 두 번째 <p> 태그에 적용했습니다.

2단계: CSS에서 클래스 이름으로 선택

/* highlight-text 라는 클래스를 가진 모든 요소를 선택 */
.highlight-text {
  background-color: yellow;
  font-weight: bold;
}

이제 class="highlight-text"를 가진 모든 요소는 노란색 배경과 굵은 글씨 스타일을 갖게 됩니다. 이처럼 클래스는 태그 종류에 상관없이 여러 요소에 반복해서 적용할 수 있어 매우 유연합니다.

3. ID 선택자 (ID Selector)

ID 선택자는 웹 페이지 내에서 단 한 번만 등장하는 고유한 요소를 선택할 때 사용합니다. 해시 기호(#) 뒤에 ID 이름을 붙여서 표시합니다.

1단계: HTML에 id 속성 추가

<header id="main-header">
  <h1>My Website</h1>
</header>

웹사이트의 메인 헤더는 보통 페이지에 하나만 존재하므로, id를 사용하기에 적합합니다.

2단계: CSS에서 ID 이름으로 선택

/* main-header 라는 ID를 가진 요소를 선택 */
#main-header {
  padding: 20px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

ID와 클래스, 언제 무엇을 써야 할까? 🤔

클래스 (.class-name):
- 재사용이 필요한 스타일 (버튼, 하이라이트 텍스트, 카드 등)
- 여러 요소에 적용해야 할 때
- 일반적인 스타일링 목적으로는 항상 클래스를 우선 사용하세요.
ID (#id-name):
- 페이지 내 유일한 요소 (메인 헤더, 푸터, 특정 섹션 등)
- JavaScript에서 특정 요소를 쉽게 찾기 위한 ‘이름표’ 역할
- 페이지 내 특정 위치로 이동하는 앵커(<a>) 링크의 목적지

핵심 규칙: ID는 한 페이지에 단 하나의 요소에만 사용할 수 있지만, 클래스는 여러 요소에 자유롭게 사용할 수 있습니다. 따라서 스타일링에는 클래스를, 고유한 식별이 필요할 땐 ID를 사용하는 것이 좋습니다.

요약 및 정리

CSS 선택자는 원하는 요소를 정확히 찾아내 스타일을 적용하는 CSS의 출발점입니다. 오늘 배운 핵심 선택자들을 표로 정리하면 다음과 같습니다.

종류	문법	예시	주요 특징
유형(태그)	`tag`	`p { ... }`	페이지 내 모든 해당 태그를 선택
클래스	`.name`	`.highlight { ... }`	여러 요소에 반복 적용 가능 (가장 중요)
ID	`#name`	`#header { ... }`	페이지 내 고유한 단 하나의 요소만 선택

이 세 가지만 정확히 이해하고 있어도 웹 페이지의 기본적인 디자인을 대부분 제어할 수 있습니다. 특히, 스타일링 작업 시에는 재사용성과 유연성이 높은 클래스 선택자를 주로 활용하는 습관을 들이는 것이 매우 중요합니다.