원하는 요소만 집어내기: 선택자 기초

CSS를 배울 때 처음에는 색 바꾸기, 글자 키우기, 배경 넣기가 제일 눈에 들어온다. 그런데 실제로 CSS 실력이 확 달라지는 지점은 따로 있다. 바로 무엇을 꾸밀지 정확하게 고르는 능력이다.

같은 페이지 안에는 제목도 있고, 문단도 있고, 버튼도 있고, 카드도 있다. 이때 원하는 요소만 딱 골라서 스타일을 주지 못하면, 버튼 하나 꾸미려다가 문단까지 같이 변하는 일이 생긴다. 반대로 선택자를 잘 다루면 CSS가 훨씬 덜 엉키고, 수정도 쉬워진다.¹

이번 장에서는 초보자가 가장 먼저 익혀야 할 선택자들을 차근차근 살펴본다. 태그, 클래스, 아이디, 그룹 선택자부터 시작해서, 요소 사이의 관계를 이용해 더 정확하게 고르는 기본 결합자까지 익혀 보자.

선택자는 CSS의 주소다

CSS 규칙은 보통 이렇게 생긴다.

p {
  color: steelblue;
}

여기서 p가 바로 선택자(selector) 다. 브라우저에게 "이 스타일을 누구에게 적용할지" 알려 주는 부분이다.¹

쉽게 말해 선택자는 주소다.

p라고 쓰면 "모든 문단으로 가세요"라는 뜻이고, .card라고 쓰면 "card라는 이름표를 가진 요소로 가세요"라는 뜻이다. 주소를 잘못 쓰면 엉뚱한 집에 택배가 간다. CSS도 똑같다.

태그 선택자: 같은 종류를 한 번에 고르기

가장 기본적인 선택자는 태그 선택자다. HTML 태그 이름을 그대로 쓰면 된다.¹

h1 {
  color: royalblue;
}

p {
  line-height: 1.6;
}

이 코드는 페이지 안의 모든 <h1>과 모든 <p>에 적용된다.

예제를 보자.

<h1>오늘의 공지</h1>
<p>수업은 오전 10시에 시작합니다.</p>
<p>지각하면 커피는 없습니다.</p>

h1 {
  color: tomato;
}

p {
  color: #444;
}

결과는 단순하다. 제목은 토마토색, 모든 문단은 진한 회색이 된다.

태그 선택자는 시작할 때 아주 편하다. 페이지 전체의 기본 분위기를 정할 때 특히 유용하다. 예를 들어 문단 글자색, 모든 제목의 여백, 모든 이미지의 최대 너비처럼 "이 종류는 대체로 이렇게 보였으면 좋겠어"라는 규칙을 만들기 좋다.

다만 단점도 있다. 너무 넓게 선택한다는 점이다. 문단이 20개 있는데 그중 2개만 강조하고 싶다면, 태그 선택자만으로는 부족하다.

클래스 선택자: 반복해서 쓰는 가장 실용적인 선택자

클래스 선택자는 점(.)으로 시작한다. 같은 스타일을 여러 요소에 반복해서 적용하고 싶을 때 가장 많이 쓴다.¹

.highlight {
  background-color: #fff3cd;
}

HTML에서는 이렇게 연결한다.

<p class="highlight">마감일은 금요일입니다.</p>
<p>이 문장은 평범합니다.</p>

그러면 첫 번째 문단만 배경색이 들어간다.

클래스는 옷가게의 라벨 같은 느낌으로 생각하면 쉽다. "이 옷은 세일 상품", "이 상자는 깨지기 쉬움", "이 문장은 중요함"처럼 역할이나 상태를 이름으로 붙이는 방식이다.

실무에서도 클래스는 정말 자주 쓴다. 버튼, 카드, 배지, 경고 문구처럼 여러 곳에서 반복되는 스타일은 대부분 클래스로 관리한다.²

예를 들어 버튼을 여러 개 꾸미고 싶다면 이렇게 할 수 있다.

<button class="btn">저장</button>
<button class="btn">수정</button>
<a href="#" class="btn">자세히 보기</a>

.btn {
  background-color: #2563eb;
  color: white;
  padding: 10px 16px;
}

여기서는 <button>에도, <a>에도 같은 btn 클래스를 붙였다. 태그는 달라도 같은 역할이라면 같은 클래스를 붙일 수 있다. 이게 클래스의 큰 장점이다.

아이디 선택자: 딱 하나를 집어낼 때

아이디 선택자는 샵(#)으로 시작한다. 페이지 안에서 하나의 특별한 요소를 고를 때 사용한다.¹

#main-title {
  color: darkgreen;
}

HTML은 이렇게 쓴다.

<h1 id="main-title">CSS 기초 수업</h1>

아이디는 한 페이지 안에서 고유해야 한다. 즉 같은 페이지에 id="main-title"을 여러 번 쓰는 것은 피해야 한다.²

초보자에게는 이런 비유가 잘 먹힌다. 클래스가 동아리 이름이라면, 아이디는 주민등록번호 같은 것이다. 클래스는 여러 사람이 함께 가질 수 있지만, 아이디는 한 사람만 가져야 한다.

그렇다고 아이디를 CSS에서 마구 쓰는 것은 추천되지 않는다. 아이디는 선택이 너무 강해서 나중에 스타일을 덮어쓰기가 까다로워질 수 있다.³ 그래서 보통은 반복되는 스타일은 클래스, 정말 한 번만 등장하는 특별한 지점은 아이디라는 기준을 잡으면 편하다.

예를 들어 페이지 맨 위 대표 제목이나 특정 구역의 앵커 위치에는 아이디가 어울린다.

<h2 id="contact">문의하기</h2>
<a href="#contact">문의하기로 이동</a>

이렇게 하면 링크를 눌렀을 때 해당 위치로 바로 이동할 수 있다.³

클래스와 아이디, 무엇을 먼저 써야 할까

초보자는 자주 묻는다. "둘 다 비슷해 보이는데, 그냥 아무거나 쓰면 안 되나요?"

겉모습은 비슷하지만 쓰임새는 다르다.

태그 선택자는 "모든 문단", "모든 제목"처럼 넓게 잡는다. 클래스는 "중요 문장", "기본 버튼", "카드 제목"처럼 여러 곳에서 재사용하기 좋다. 아이디는 "이 페이지의 대표 제목", "맨 아래 문의 섹션"처럼 딱 하나를 찍을 때 어울린다.¹²

처음에는 이렇게 기억하면 충분하다.

• 페이지 전체 기본 스타일은 태그 선택자

• 반복되는 꾸밈은 클래스 선택자

• 정말 하나만 있는 특별한 요소는 아이디 선택자

이 기준만 잡아도 CSS가 훨씬 덜 꼬인다.

더 정확하게 고르기: 태그와 클래스를 함께 쓰기

클래스는 강력하지만, 가끔은 "그 클래스가 붙은 모든 요소"가 아니라 "특정 태그이면서 그 클래스를 가진 요소"만 고르고 싶을 때가 있다. 이럴 때는 선택자를 붙여서 쓴다.¹

p.notice {
  color: crimson;
}

이 뜻은 "notice 클래스를 가진 요소 중에서도 p만 선택하라"는 뜻이다.

<p class="notice">문단 공지</p>
<div class="notice">박스 공지</div>

위 상황에서 p.notice는 첫 번째 문단만 선택한다. div.notice는 선택하지 않는다.

이 방식은 선택 범위를 줄여서 더 안전하게 스타일을 줄 때 유용하다. 다만 초보 단계에서는 너무 길고 복잡한 선택자를 남발하기보다, 읽기 쉬운 수준에서 사용하는 것이 좋다.

그룹 선택자: 같은 스타일이면 같이 묶기

h1, h2, h3에 같은 색을 주고 싶다면 규칙을 세 번 쓰는 대신 한 번에 묶을 수 있다. 이것이 그룹 선택자다.¹

h1, h2, h3 {
  color: #1f2937;
}

쉼표로 선택자를 나열하면 된다.

예제를 보자.

<h1>제목 1</h1>
<h2>제목 2</h2>
<p>일반 문단</p>

h1, h2 {
  color: purple;
}

그러면 h1과 h2만 보라색이 되고, 문단은 그대로 남는다.

그룹 선택자는 "이 셋은 늘 같은 모양이어야 해"라는 상황에서 아주 편하다. 코드가 짧아지고, 나중에 수정도 쉽다. 예를 들어 제목 글꼴, 공통 텍스트 색, 입력창 테두리 스타일 같은 것을 묶어 관리할 수 있다.

공백 하나의 힘: 하위 선택자

이제부터는 요소 사이의 관계를 이용해 선택하는 방법을 배운다. 이것이 실전에서 정말 중요하다.

먼저 가장 많이 쓰는 것이 하위 선택자다. 선택자 사이를 한 칸 띄우면 된다.⁴

.card p {
  color: #555;
}

이 뜻은 "card 안에 들어 있는 모든 p를 선택하라"이다. 여기서 p는 꼭 바로 아래에 있을 필요가 없다. 자식, 손자, 증손자여도 card 내부에만 있으면 선택된다.⁴

<div class="card">
  <h2>공지</h2>
  <p>이 문단은 선택됩니다.</p>
  <div>
    <p>이 문단도 선택됩니다.</p>
  </div>
</div>

<p>이 문단은 선택되지 않습니다.</p>

.card p {
  color: seagreen;
}

하위 선택자는 "카드 안 문단", "헤더 안 링크", "폼 안 입력창"처럼 특정 구역 안의 요소만 고르고 싶을 때 자주 쓴다.

바로 아래만 고르기: 자식 선택자 >

하위 선택자는 편하지만 범위가 넓다. 가끔은 너무 많이 잡힌다. 그럴 때 쓰는 것이 자식 선택자다. > 기호를 사용하며, 바로 아래에 있는 직접 자식만 선택한다.⁴

.menu > li {
  list-style: none;
}

예제를 보자.

<ul class="menu">
  <li>홈</li>
  <li>소개</li>
  <li>
    서비스
    <ul>
      <li>웹 제작</li>
      <li>유지보수</li>
    </ul>
  </li>
</ul>

.menu > li {
  color: navy;
}

이 경우 바깥쪽 메뉴 항목만 선택되고, 안쪽 중첩 메뉴의 li는 선택되지 않는다. 만약 .menu li라고 썼다면 안쪽 항목까지 전부 잡힌다.

실전에서는 내비게이션 메뉴, 카드 목록, 댓글 목록처럼 "1단계만 꾸미고 싶을 때" 자식 선택자가 특히 유용하다.

바로 다음 형제 고르기: 인접 형제 선택자 +

이번에는 부모-자식 관계가 아니라 형제 관계를 보자. 형제란 같은 부모를 가진 요소들이다.

+는 바로 다음에 오는 형제 하나만 선택한다.⁴

h2 + p {
  margin-top: 0;
}

뜻은 "h2 바로 다음에 오는 p를 선택하라"이다.

<h2>상품 설명</h2>
<p>이 문단은 선택됩니다.</p>
<p>이 문단은 선택되지 않습니다.</p>

h2 + p {
  color: tomato;
}

첫 번째 문단만 빨갛게 된다. 두 번째 문단은 h2의 바로 다음이 아니기 때문이다.

이 선택자는 제목 바로 아래 문단, 체크박스 바로 옆 라벨, 카드 헤더 바로 아래 요약문처럼 "붙어 있는 다음 요소 하나"를 꾸밀 때 편리하다.

뒤에 오는 형제들 고르기: 일반 형제 선택자 ~

~는 +보다 범위가 넓다. 같은 부모 아래에서 뒤에 오는 형제들 전체를 선택한다.⁴

h2 ~ p {
  color: #666;
}

<h2>공지</h2>
<p>첫 번째 문단</p>
<p>두 번째 문단</p>
<div>중간 박스</div>
<p>세 번째 문단</p>

이 경우 h2 뒤에 나오는 p들은 모두 선택된다. 중간에 다른 요소가 끼어 있어도 상관없다. 다만 h2보다 앞에 있는 문단은 선택되지 않는다.

이 선택자는 "어떤 제목 뒤의 설명들", "체크박스 뒤에 이어지는 안내 문구들"처럼 한 요소 이후의 같은 레벨 요소들을 다루고 싶을 때 유용하다.

네 가지 관계 선택자를 한눈에 이해하기

비슷해 보여서 헷갈린다면 아래 느낌으로 기억하면 좋다.

• .box p 는 .box 안에 들어 있는 모든 p

• .box > p 는 .box의 바로 아래 자식 p

• h2 + p 는 h2 바로 다음의 p 하나

• h2 ~ p 는 h2 뒤에 나오는 형제 p들 전체

선택자를 공부할 때는 기호보다 관계를 먼저 떠올리는 것이 훨씬 쉽다. "안에 있는가?", "바로 아래인가?", "바로 다음인가?", "뒤에 이어지는가?"처럼 말이다.

실전 예제: 카드 안의 요소만 골라 꾸미기

이제 실제 페이지에서 자주 만나는 구조를 하나 보자.

<div class="card">
  <h2 class="title">프론트엔드 입문</h2>
  <p class="desc">HTML, CSS, JavaScript의 기초를 배웁니다.</p>
  <p class="price">월 39,000원</p>
  <button class="btn">신청하기</button>
</div>

<div class="card">
  <h2 class="title">디자인 기초</h2>
  <p class="desc">색상과 레이아웃 감각을 익힙니다.</p>
  <p class="price">월 29,000원</p>
  <button class="btn">신청하기</button>
</div>

이 HTML에 다음 CSS를 적용해 보자.

.card {
  border: 1px solid #ddd;
  padding: 16px;
}

.card .title {
  color: #1d4ed8;
}

.card .desc {
  color: #555;
}

.card .price {
  font-weight: bold;
}

.card .btn {
  background-color: #2563eb;
  color: white;
}

여기서 핵심은 .card .title, .card .desc 같은 형태다. "아무 title이 아니라, card 안에 있는 title"만 선택한다. 같은 클래스 이름이 다른 곳에 있어도 카드 안에 있을 때만 적용되므로 더 안전하다.

이런 방식은 컴포넌트처럼 묶인 UI를 만들 때 매우 자주 쓴다. 카드, 모달, 메뉴, 프로필 박스, 상품 목록이 모두 이런 감각으로 만들어진다.

실전 예제: 메뉴에서 1단계 항목만 선택하기

중첩 메뉴는 자식 선택자의 진가를 보여 주기 좋다.

<ul class="nav">
  <li><a href="#">홈</a></li>
  <li><a href="#">강의</a></li>
  <li>
    <a href="#">자료실</a>
    <ul>
      <li><a href="#">PDF</a></li>
      <li><a href="#">예제 코드</a></li>
    </ul>
  </li>
</ul>

.nav > li {
  margin-bottom: 8px;
}

.nav > li > a {
  color: darkslateblue;
  font-weight: bold;
}

이렇게 하면 바깥쪽 메뉴 링크만 진하게 꾸밀 수 있다. 만약 .nav a라고 썼다면 안쪽 PDF, 예제 코드 링크까지 모두 같은 스타일이 들어간다.

실전에서는 원하는 범위보다 너무 넓게 선택하는 실수가 많다. 그럴 때 자식 선택자를 떠올리면 문제를 꽤 빨리 해결할 수 있다.

자주 하는 실수

선택자를 배우는 초반에는 몇 가지 실수가 반복된다. 한 번 눈에 익혀 두면 디버깅이 훨씬 빨라진다.

첫째, HTML의 class 값에 점을 붙이는 실수다.

<p class=".notice">잘못된 예</p>

점은 CSS에서만 쓴다. HTML에서는 그냥 이름만 적는다.

<p class="notice">올바른 예</p>

.notice {
  color: red;
}

둘째, id 값에 샵을 붙이는 실수다.

<h1 id="#title">잘못된 예</h1>

이 역시 HTML에서는 #를 빼고 적는다.

<h1 id="title">올바른 예</h1>

#title {
  color: blue;
}

셋째, 하위 선택자와 자식 선택자를 혼동하는 실수다.

.box p

와

.box > p

는 전혀 다르다. 첫 번째는 안쪽 깊숙한 곳의 문단까지 전부 포함하고, 두 번째는 바로 아래 문단만 포함한다.⁴

넷째, 아이디를 여러 요소에 반복해서 쓰는 실수다. 브라우저가 겉으로는 적용해 주는 것처럼 보여도, 문서 구조상 바람직하지 않고 나중에 문제가 생길 수 있다.²

선택자를 잘 쓰는 간단한 기준

초보자일수록 선택자를 짧고 읽기 쉽게 유지하는 습관이 중요하다. 너무 길게 이어 붙이면 지금은 뿌듯해도 나중의 내가 울 수 있다.

예를 들어 이런 생각은 좋다.

• 이 스타일은 모든 p에 필요한가?

• 아니면 특정 구역 안의 p만 필요한가?

• 여러 곳에서 반복되나? 그렇다면 클래스가 더 낫지 않을까?

• 진짜 하나뿐인가? 그때만 아이디를 쓰면 되지 않을까?

이 질문을 스스로 던지면 선택자가 훨씬 자연스러워진다.

직접 해 보면 감이 빨라진다

아래 HTML을 보고 어떤 선택자를 써야 할지 스스로 먼저 떠올려 보자.

<section class="profile">
  <h2>김초보</h2>
  <p class="intro">CSS를 열심히 배우는 중입니다.</p>
  <p>좋아하는 것: 커피, 고양이, 깔끔한 코드</p>
</section>

여기서 할 수 있는 연습은 많다.

• 모든 p를 회색으로 만들기

• intro만 파란색으로 만들기

• profile 안의 h2만 크게 만들기

• h2 바로 다음 문단만 굵게 만들기

정답 예시는 이렇게 쓸 수 있다.

p {
  color: #555;
}

.intro {
  color: #2563eb;
}

.profile h2 {
  font-size: 28px;
}

h2 + p {
  font-weight: bold;
}

이렇게 같은 HTML을 두고도 선택자를 여러 방식으로 쓸 수 있다. CSS의 재미는 바로 여기 있다. "무엇을 어떻게 고를까?"를 고민하는 순간부터 페이지가 훨씬 입체적으로 보이기 시작한다.

이번 장의 핵심

CSS에서 중요한 것은 속성을 많이 아는 것만이 아니다. 누구를 꾸밀지 정확히 고르는 능력이 훨씬 중요하다.

태그 선택자는 같은 종류의 요소를 한꺼번에 다룰 때 편하고, 클래스 선택자는 반복되는 스타일을 재사용할 때 가장 실용적이다. 아이디 선택자는 하나의 특별한 요소를 찍을 때 쓰지만, 스타일링에서는 남용하지 않는 편이 좋다.¹²³

그룹 선택자는 같은 스타일을 여러 대상에 한 번에 적용하게 해 주고, 결합자는 요소 사이의 관계를 이용해 선택 범위를 좁혀 준다. 공백은 "안에 있는 것", >는 "바로 아래", +는 "바로 다음", ~는 "뒤에 이어지는 형제들"이라고 기억하면 된다.⁴

선택자를 잘 쓰면 CSS는 덜 지저분해지고, 원하는 부분만 정확하게 바꿀 수 있다. 다시 말해 CSS 실전력은 예쁜 색을 아는 데서 끝나지 않는다. 정확히 집어내는 손끝에서 시작된다.

참고

¹Basic CSS selectors - Learn web development  MDN

²CSS Selectors

³CSS Selectors  CSS-Tricks

⁴CSS selectors and combinators - CSS  MDN