태그·클래스·ID 선택자

선택자(selector)는 CSS 규칙이 닿을 요소를 요소 나무에서 고르는 글자입니다. 태그 이름으로 고르는 태그 선택자, 점(.)으로 클래스를 고르는 클래스 선택자, # 기호로 아이디를 고르는 ID 선택자가 기본 셋입니다.

규칙이 안 먹을 때 먼저 볼 곳이 선택자입니다. 선택자가 고른 요소가 없으면 브라우저는 오류 없이 그 규칙을 아무 데도 대지 않습니다. 이 레슨은 기본 선택자 셋과 선택자 목록이 무엇을 고르는지 나무에서 짚어 봅니다.

이 단원(선택자)은 관계 · 조건 · 상태 · 자리 · 안에 든 것으로 요소를 고르는 길을 넓힙니다. 이 단원을 마치면 레시피 노트의 내비게이션 링크 · 지금 페이지 표시 · 폼 칸의 포커스 표시 · 마지막 재료 줄을 선택자로 꾸밉니다. 이 단원(선택자)을 이미 안다면 단원 연습 문제부터 풀고 틀린 레슨만 보세요. 건너뛸지 볼 때는 힌트를 펴지 않고 풉니다.

<h1>김치볶음밥</h1><span class="badge">한식</span><a href="#ingredients">재료로</a><h2>재료</h2><p id="ingredients">밥 · 김치</p>

1기본 선택자 셋 — 태그 · 클래스 · ID

아래 규칙 셋은 선택자 꼴이 저마다 다릅니다.

<h1>김치볶음밥</h1>
<p class="badge">한식</p>
<h2>재료</h2>
<ul id="ingredients">
  <li>밥 2공기</li>
  <li>김치 1컵</li>
</ul>

h2 {
  color: #005bb5;
}

.badge {
  color: #6e6e73;
}

#ingredients {
  font-size: 18px;
}

규칙은 고른 요소에만 닿습니다(브라우저 규칙 4). 어느 선택자도 고르지 않은 h1은 기본 스타일 그대로입니다. 태그 선택자는 자료에 따라 유형 선택자 · 요소 선택자라고도 부릅니다.

점과 # 기호는 CSS에서 '클래스' · '아이디'라는 표시일 뿐 이름에 들지 않습니다. HTML에는 이름만(class="badge"), CSS에는 표시를 붙여(.badge) 씁니다.

JavaScript도 같은 글자로 요소를 고릅니다. querySelector('#ingredients')⁠는 위 페이지에서 ul을 찾습니다. 할 일 화면의 #count · .delete도 CSS와 JavaScript가 함께 쓰는 선택자입니다.

2선택자 목록 — 쉼표로 여럿을 한 번에

같은 모양을 여러 요소에 줄 때는 선택자를 쉼표로 잇습니다. 이것을 선택자 목록(selector list)이라고 부릅니다.

<h1>김치볶음밥</h1>
<h2>재료</h2>
<h2>조리 순서</h2>
<p>15분이면 됩니다.</p>

h1,
h2 {
  color: #005bb5;
}

선택자 목록은 선택자마다 고른 요소를 모두 고릅니다. 규칙 둘을 쓰는 것과 같습니다. 이 과목은 쉼표 뒤에서 줄을 바꿔 선택자를 한 줄에 하나씩 씁니다. 쉼표를 빠뜨리면 뜻이 달라지기 때문입니다(다음 레슨).

3이름은 역할로 짓는다

클래스 이름은 브라우저에는 아무 뜻이 없습니다. 모양은 그 이름을 고른 규칙의 선언이 정합니다. 그래서 이름은 모양이 아니라 그 요소가 하는 일로 짓습니다 — 분류 표시는 .badge, 지금 페이지 표시는 .current, 할 일 화면의 삭제 단추는 .delete입니다. 색을 바꿔도 이름이 거짓말이 되지 않고, JavaScript가 같은 이름으로 요소를 찾을 때도 뜻이 맞습니다.

꾸밀 때는 클래스 선택자를 기본으로 씁니다. 같은 클래스를 여러 요소에 붙여 같은 모양을 다시 쓸 수 있기 때문입니다. id는 링크의 # 자리처럼 페이지에서 하나를 가리킬 때 씁니다.

예제

고를 요소를 선택자로 — 배지만 파랑으로

레시피 둘의 분류 배지만 파랑으로 칠합니다. 규칙 쓰기 세 걸음을 주석으로 달면 이렇습니다.

<h2>김치볶음밥</h2>
<span class="badge">한식</span>
<span>15분</span>
<h2>떡볶이</h2>
<span class="badge">한식</span>
<span>20분</span>

/* 1. 고를 요소 */
.badge {
  /* 2. 바꿀 속성과 값 */
  color: #005bb5;
}

• 1. 고를 요소: 칠할 것은 배지 둘입니다. span은 시간까지 넷을 고르니, 배지에만 붙인 .badge를 씁니다.
• 2. 바꿀 속성과 값: 글자색 color를 진한 파랑 #005bb5로 냅니다.
• 3. 개발자 도구로 확인: Elements 패널에서 배지를 고르면 Styles 창에 .badge 규칙이 보입니다. 시간 span을 고르면 이 규칙이 없습니다 — 찾는 차례 3번 '그 요소에 규칙이 닿았나'를 보는 법입니다.

자주 틀리는 곳

틀린 생각: HTML의 class 값에도 점을 붙여야 CSS가 찾는다.

<span class=".badge">한식</span>

.badge {
  color: #005bb5;
}

클래스 이름이 점까지 든 .badge가 되었습니다. CSS의 .badge는 이름이 badge인 요소를 고르므로 이 span을 못 고릅니다. 오류는 뜨지 않고 배지만 검정 그대로입니다.

맞는 규칙: HTML에는 이름만(class="badge"), CSS에는 점을 붙여(.badge) 씁니다. 반대로 CSS에서 점을 빠뜨린 badge는 badge라는 태그를 찾는 태그 선택자가 됩니다(브라우저 규칙 4).

틀린 생각: CSS가 틀리면 알아듣지 못한 글자만 버려진다 — 선택자 목록에서도 알아듣지 못한 선택자 하나만 빠진다.

<h1>김치볶음밥</h1>
<h2>재료</h2>
<p>15분이면 됩니다.</p>

h1,
h2,
{
  color: #005bb5;
}

p {
  color: #6e6e73;
}

목록 끝에 쉼표가 남아 빈 선택자가 생겼습니다. 브라우저는 h1 · h2만 남기지 않고 첫 규칙을 통째로 버립니다. 다음 p 규칙은 그대로 먹습니다.

맞는 규칙: 선택자 목록에 알아듣지 못한 선택자가 하나라도 있으면 그 규칙 전체가 버려집니다. 다른 규칙은 그대로 먹습니다(브라우저 규칙 4).

틀린 생각: 클래스 이름이 모양을 정한다 — 그러니 모양대로 이름을 지으면 알기 쉽다.

<p class="red-text">한식</p>

.red-text {
  color: #005bb5;
}

디자인을 바꿔 배지를 파랑으로 칠하자 이름 red-text가 거짓말이 되었습니다. 이름이 빨강이라고 말해도 색은 선언이 정합니다.

맞는 규칙: 이름에는 모양이 없고, 모양은 그 이름을 고른 규칙의 선언이 정합니다(브라우저 규칙 4). 이름은 역할로 짓습니다(.badge).

틀린 생각: 꾸밀 요소에 id를 붙여 ID 선택자로 칠하면 확실하다.

<p id="time" class="muted">
  조리 15분
</p>

#time {
  color: #005bb5;
}

.muted {
  color: #6e6e73;
}

나중에 회색 .muted를 더했는데 글자는 파랑 그대로입니다. 클래스 규칙은 뒤에 와도 ID 선택자로 준 모양을 이기지 못합니다. 까닭은 9단원 명시도에서 봅니다.

맞는 규칙: 꾸밀 때는 클래스 선택자를 기본으로 씁니다. ID 선택자로 칠하면 뒤에서 바꾸기 어렵습니다.

확인 문제

1. 예제의 CSS에서 .badge를 .badges로 바꿨습니다. 파랑으로 칠해지는 요소를 모두 고르세요. 기호를 다 쓰세요.

<h2>김치볶음밥</h2>
<span class="badge">한식</span>
<span>15분</span>

.badges {
  color: #005bb5;
}

• ㉠ h2 김치볶음밥
• ㉡ span 한식
• ㉢ span 15분
• ㉣ 없음

<h2>김치볶음밥</h2>
<span class="badge">한식</span>
<span>15분</span>

 {
  color: #005bb5;
}

2. 배지 문단과 시간 문단을 한 규칙으로 회색으로 칠하려 합니다. ____ 자리에 시간 문단을 고르는 선택자를 쓰세요.

<p class="badge">한식</p>
<p id="time">조리 15분</p>

.badge,
____ {
  color: #6e6e73;
}

<p class="badge">한식</p>
<p id="time">조리 15분</p>

.badge,
#time {
  color: #6e6e73;
}

3. 동아리 공지 페이지입니다. 급한 공지 둘만 빨갛게 하려고 아래 규칙을 썼더니 공지 넷이 모두 빨개졌습니다. CSS의 선택자를 어떻게 고치면 될까요?

<h1>동아리 공지</h1>
<p class="urgent">
  회의실 바뀜
</p>
<p>모임은 수요일</p>
<p class="urgent">
  발표 자료 제출
</p>
<p>간식은 각자</p>

p {
  color: #d70015;
}

<h1>동아리 공지</h1>
<p class="urgent">
  회의실 바뀜
</p>
<p>모임은 수요일</p>
<p class="urgent">
  발표 자료 제출
</p>
<p>간식은 각자</p>

.urgent {
  color: #d70015;
}

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 예제의 HTML과 CSS를 style 요소로 한 파일에 담아 select.html로 저장해 엽니다. CSS의 .badge에서 점을 지우면 어떻게 될지 먼저 적고, 저장하고 새로고침해 맞춰 봅니다. 그다음 Elements 패널에서 배지를 골라 Styles 창에 그 규칙이 있는지 봅니다.