선택자

🎯 학습 목표

이 강을 마치면 여러분은 페이지의 원하는 요소만 정확히 골라 스타일을 줄 수 있게 됩니다. 지난 강에서 p { ... }처럼 태그 이름으로 대상을 골랐는데, 그러면 모든 문단이 똑같이 바뀝니다. 이번 강에서는 '특정 문단만', '이 영역 안의 링크만'처럼 세밀하게 대상을 고르는 다양한 선택자를 배웁니다.

구체적으로는 세 가지를 배웁니다. 첫째, 가장 많이 쓰는 타입·클래스·아이디 선택자를 익힙니다. 둘째, 특정 영역 안의 요소를 고르는 후손·자식 선택자를 살펴봅니다. 셋째, 여러 규칙이 충돌할 때의 우선순위 기초를 파악합니다.

🏷️ 세 가지 기본 선택자 — 타입·클래스·아이디

이 섹션에서는 가장 기본이 되는 세 가지 선택자를 살펴보겠습니다.

첫째, 타입 선택자입니다. 지난 강에서 쓴 방식으로, 태그 이름을 그대로 적어 그 종류의 요소를 모두 고릅니다. 예를 들어 p { color: gray; }는 모든 문단을 회색으로 만듭니다. 간단하지만 대상이 넓다는 특징이 있습니다.

둘째, 클래스 선택자입니다. 특정 요소들에만 스타일을 주고 싶을 때, HTML 태그에 class라는 이름표를 붙이고 CSS에서 점(.)을 앞에 붙여 고릅니다.

<p class="highlight">중요한 문단</p>
<p>평범한 문단</p>

.highlight {
  color: red;
}

여기서 CSS의 .highlight는 'class가 highlight인 요소'를 뜻합니다(점은 클래스라는 표시입니다). 그래서 class를 붙인 첫 번째 문단만 빨갛게 되고, 두 번째는 그대로입니다. 클래스는 여러 요소에 같은 이름을 붙여 재사용할 수 있어, CSS에서 가장 많이 쓰이는 선택자입니다.

셋째, 아이디 선택자입니다. 페이지에서 단 하나뿐인 특정 요소를 고를 때, id 이름표를 붙이고 CSS에서 샵(#)을 앞에 붙입니다.

<div id="header">머리말</div>

#header {
  background: black;
}

여기서 중요한 차이가 있습니다. class는 여러 요소에 반복해 쓸 수 있지만, id는 한 페이지에 하나만 써야 합니다. id는 '이 페이지의 유일한 그것'을 가리키는 이름이기 때문입니다. 실무에서는 재사용이 자유로운 클래스를 주로 쓰고, id는 꼭 필요한 경우에만 씁니다.

👨‍👦 영역 안의 요소 고르기 — 후손·자식 선택자

이 섹션에서는 특정 영역 안에 있는 요소만 고르는 방법을 살펴보겠습니다.

'메뉴 안의 링크만', '본문 안의 문단만'처럼, 어떤 요소 안에 들어 있는 요소를 고르고 싶을 때가 많습니다. 이때 후손 선택자를 씁니다. 두 선택자를 공백(띄어쓰기)으로 이으면, '앞 요소 안에 있는 뒤 요소'를 뜻합니다.

nav a {
  color: white;
}

이 코드는 '<nav> 안에 있는 모든 <a>(링크)'를 고릅니다. 그래서 메뉴 안의 링크만 흰색이 되고, 페이지의 다른 링크는 영향을 받지 않습니다. 여기서 공백은 '~ 안의'라고 읽으면 됩니다. 이때 nav 안에 아무리 깊이 중첩되어 있어도(예: nav 안 ul 안 li 안 a) 모두 골라집니다.

만약 바로 아래 자식만 고르고 싶다면 공백 대신 부등호(>)를 씁니다. 이것을 자식 선택자라 합니다.

nav > a {
  color: white;
}

이 경우 <nav>의 바로 한 단계 아래에 있는 <a>만 고릅니다. 더 깊이 중첩된 링크는 제외됩니다. 정리하면 공백(후손)은 '안의 모든', 부등호(자식)는 '바로 아래'를 뜻합니다. 처음에는 후손 선택자(공백)를 주로 쓰게 되니, 그것부터 익숙해지면 됩니다.

한 가지 더, 여러 요소에 똑같은 스타일을 줄 때는 선택자를 쉼표(,)로 나열하면 됩니다. 이를 그룹 선택자라 합니다. 예를 들어 h1, h2, h3 { color: navy; }라고 쓰면 세 종류의 제목이 모두 한꺼번에 남색이 됩니다. 같은 스타일을 선택자마다 반복해 적는 대신, 쉼표로 묶어 한 번에 적으니 코드가 짧아지고 나중에 고치기도 쉬워집니다. 다만 공백(후손)과 쉼표(그룹)를 헷갈리지 않도록 주의하세요. h1 h2(공백)는 'h1 안의 h2'를 뜻하지만, h1, h2(쉼표)는 'h1과 h2 둘 다'를 뜻하는, 전혀 다른 것입니다.

⚖️ 우선순위 — 규칙이 충돌하면?

이 섹션에서는 여러 규칙이 같은 요소를 가리킬 때 무엇이 이기는지, 즉 우선순위를 살펴보겠습니다.

한 요소에 여러 CSS 규칙이 서로 다른 값을 지정하면 어떻게 될까요? 예를 들어 아래처럼 같은 문단을 타입 선택자와 클래스 선택자가 각각 다른 색으로 지정한다고 합시다.

p { color: black; }
.highlight { color: red; }

이 <p class="highlight">는 무슨 색이 될까요? 답은 빨강입니다. CSS에는 더 구체적인 선택자가 이긴다는 규칙이 있기 때문입니다. 이 '구체성'의 대략적인 순서는 이렇습니다.

즉 아이디 > 클래스 > 타입 순으로 힘이 셉니다. 위 예시에서 클래스(.highlight)가 타입(p)보다 구체적이므로 빨강이 이긴 것입니다. 참고로 지난 강에서 배운 인라인 스타일(태그의 style 속성)은 이보다도 더 셉니다. 이 우선순위 규칙 때문에 스타일이 '왜 안 먹지?'라고 헷갈릴 때가 많은데, 대개 더 구체적인 다른 규칙에 밀린 경우입니다. 지금은 '더 콕 집은 선택자가 이긴다'는 큰 원칙만 기억하면 충분합니다.

⚠️ 자주 하는 실수

이 섹션에서는 선택자를 쓸 때 흔한 실수를 정리하겠습니다.

첫 번째, 점(.)과 샵(#)을 빠뜨리는 것입니다. CSS에서 클래스는 반드시 .highlight처럼 점을, 아이디는 #header처럼 샵을 붙여야 합니다. 이 기호를 빠뜨리면 태그 이름으로 오해되어 스타일이 적용되지 않습니다.

두 번째, id를 여러 곳에 쓰는 것입니다. 같은 id를 여러 요소에 붙이면 안 됩니다. 반복해 쓸 스타일은 반드시 class로 만드세요. '반복=class, 유일=id'로 기억하면 좋습니다.

세 번째, 선택자를 너무 길고 복잡하게 만드는 것입니다. 후손 선택자를 여러 단계로 길게 이으면 나중에 관리가 어렵고 우선순위도 꼬입니다. 되도록 간결한 클래스 선택자 위주로 쓰는 것이 좋은 습관입니다.

📝 핵심 요약

이번 강에서는 CSS 선택자를 배웠습니다.

• 타입·클래스·아이디 — 타입은 태그명으로 모두, 클래스는 점(.)으로 반복 사용, 아이디는 샵(#)으로 유일한 요소를 고릅니다.
• 후손·자식 선택자 — 공백은 '~ 안의 모든', 부등호(>)는 '바로 아래 자식'을 뜻합니다.
• 우선순위 — 규칙이 충돌하면 더 구체적인 선택자가 이깁니다. 아이디 > 클래스 > 타입 순입니다.
• 실무 습관 — 반복 스타일은 class로 만들고, id는 유일한 경우에만, 선택자는 간결하게 씁니다.

이제 원하는 요소를 정확히 고를 수 있게 되었습니다. 다음 강에서는 그 요소들에 실제로 입힐 색상과 크기 단위를 배워, 다양한 방식으로 색을 지정하고 크기를 다루는 법을 익히겠습니다. 다음 강 「색상과 단위」에서 이어가겠습니다.

📚 참고 자료

• CSS 선택자 — MDN Web Docs
• 클래스 선택자 — MDN Web Docs
• 우선순위(Specificity) — MDN Web Docs