책에 포함된 노트비개발자를 위한 CSS 입문: 눈으로 이해하고 바로 고치는 쉬운 스타일링

원하는 요소를 정확히 고르는 선택자

2026-07-09Views 3약 7분생성형 AI 활용

Summary

선택자는 '어디를 꾸밀지' 정하는 표시입니다

CSS 문장은 크게 두 질문으로 나누어 읽으면 편합니다.

무엇을 고를까?
어떻게 바꿀까?

여기서 첫 번째 질문에 답하는 부분이 선택자입니다. 선택자는 식당에서 주문 번호표를 부르는 것과 비슷합니다. 12번 손님에게만 음식을 전달하려면 12번을 정확히 불러야 합니다. CSS도 마찬가지입니다. 버튼을 꾸미고 싶은지, 카드 안의 글만 꾸미고 싶은지, 페이지 전체의 문단을 꾸미고 싶은지 먼저 골라야 합니다.

.notice {
  color: red;
}

위 코드에서 .notice가 선택자입니다. 뜻은 "notice라는 class가 붙은 요소를 골라라"입니다. 그다음 { } 안에 있는 color: red;는 "글자 색을 빨간색으로 바꿔라"라는 지시입니다.

선택자를 알면 CSS에서 자주 만나는 혼란을 줄일 수 있습니다.

왜 이 버튼만 바뀌지?
왜 모든 문단이 한꺼번에 바뀌었지?
왜 내가 고치려던 배너가 아니라 다른 배너가 바뀌었지?

이 장에서는 화면 요소를 고르는 가장 기본적인 방법을 익힙니다.

원하는 요소를 정확히 고르는 선택자 AI 생성 이미지

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

태그 선택자는 HTML 태그 이름을 그대로 쓰는 선택자입니다. 태그는 웹페이지의 재료 이름입니다. h1, p, img, button처럼 제목, 문단, 이미지, 버튼을 나타냅니다.

예를 들어 페이지 안의 모든 문단 글자 색을 바꾸고 싶다면 이렇게 씁니다.

p {
  color: #555;
}

이 코드는 페이지 안의 모든 p 문단에 적용됩니다. 블로그 글의 본문 문단, 회사 소개 페이지의 설명 문단, 카드 안의 짧은 설명 문단까지 모두 바뀔 수 있습니다.

제목 전체의 분위기를 맞출 때도 태그 선택자가 유용합니다.

h2 {
  font-size: 28px;
  color: #222;
}

이 코드는 모든 h2 제목의 글자 크기와 색을 바꿉니다. 사이트 전체에서 중간 제목 스타일을 통일하고 싶을 때 좋습니다.

다만 태그 선택자는 범위가 넓습니다. button이라고 쓰면 모든 버튼이 바뀝니다. 구매 버튼, 취소 버튼, 로그인 버튼이 모두 같은 스타일을 갖게 될 수 있습니다.

button {
  background-color: black;
  color: white;
}

이 코드는 빠르게 효과를 볼 수 있지만, 특정 버튼만 바꾸고 싶을 때는 너무 넓게 선택한 것입니다. 이럴 때 필요한 것이 class 선택자입니다.

class 선택자: 원하는 요소에 붙이는 공용 스티커

class는 HTML 요소에 붙이는 이름표입니다. 같은 이름표를 여러 요소에 붙일 수 있습니다. 스티커를 떠올리면 쉽습니다. 행사 상품에는 'event' 스티커를 붙이고, 중요한 안내문에는 'notice' 스티커를 붙이는 식입니다.

HTML에서는 이렇게 class를 붙입니다.

<button class='primary-button'>구매하기</button>
<button>취소</button>

CSS에서는 class 이름 앞에 점 .을 붙입니다.

.primary-button {
  background-color: #2563eb;
  color: white;
}

이 코드는 primary-button이라는 class가 붙은 버튼만 고릅니다. 그래서 '구매하기' 버튼은 파란색이 되고, '취소' 버튼은 그대로 남습니다.

class 선택자는 실제 CSS 작업에서 가장 자주 사용합니다. 이유는 단순합니다.

같은 스타일을 여러 곳에 반복해서 적용할 수 있습니다.
태그 선택자보다 범위를 좁힐 수 있습니다.
id 선택자보다 부담 없이 수정할 수 있습니다.

예를 들어 안내문만 따로 꾸미고 싶다면 HTML에 class를 붙입니다.

<p class='notice'>배송은 영업일 기준 2일 정도 걸립니다.</p>
<p>상품 색상은 화면 설정에 따라 다르게 보일 수 있습니다.</p>

그리고 CSS에서 .notice를 고릅니다.

.notice {
  background-color: #fff7cc;
  padding: 12px;
}

이제 첫 번째 문단만 노란 안내 박스처럼 보입니다. 두 번째 문단은 일반 문단으로 남습니다.

class 이름은 화면에서 맡은 역할이 드러나게 짓는 것이 좋습니다.

.notice: 안내문
.primary-button: 중요한 버튼
.product-card: 상품 카드
.hero-banner: 페이지 상단 큰 배너

이름을 지을 때는 띄어쓰기 대신 하이픈 -을 많이 씁니다. .product card처럼 띄어 쓰면 다른 의미가 되므로 주의해야 합니다. 보통은 .product-card처럼 이어서 씁니다.

id 선택자: 꼭 하나만 고르는 강한 이름표

id는 한 페이지에서 특정 요소 하나를 가리키는 이름입니다. class가 여러 장 붙일 수 있는 스티커라면, id는 한 사람에게만 부여하는 고유 번호에 가깝습니다.

HTML에서는 이렇게 씁니다.

<section id='main-banner'>
  <h2>여름 세일</h2>
</section>

CSS에서는 id 이름 앞에 #을 붙입니다.

#main-banner {
  background-color: #dbeafe;
}

이 코드는 main-banner라는 id를 가진 요소만 고릅니다.

id는 특정 위치로 이동하는 링크나, 자바스크립트가 특정 요소를 찾을 때 자주 사용됩니다. CSS에서도 사용할 수 있지만, 스타일링에는 class를 더 많이 쓰는 편이 안전합니다.

이유는 두 가지입니다.

첫째, id는 한 페이지에서 하나만 쓰는 것이 원칙입니다. 같은 스타일을 여러 카드에 적용하고 싶다면 id보다 class가 맞습니다.

둘째, id 선택자는 힘이 강합니다. CSS에는 여러 스타일이 겹칠 때 어떤 규칙을 우선할지 정하는 기준이 있습니다. 이 내용을 나중에 더 자세히 배우겠지만, 지금은 "id로 꾸미면 나중에 다른 CSS로 덮어쓰기가 어려울 수 있다" 정도로 기억하면 충분합니다.

실무에서는 이렇게 생각하면 편합니다.

여러 요소에 반복해서 쓸 디자인: class
페이지에서 딱 하나를 가리켜야 하는 특별한 위치: id
CSS 수정이 목적이라면 우선 class부터 찾기

쉼표와 띄어쓰기로 선택자를 조합하기

선택자는 하나씩만 쓰지 않습니다. 몇 가지 간단한 조합만 알아도 훨씬 정확하게 고를 수 있습니다.

쉼표: 여러 대상을 같은 스타일로 묶기

쉼표 ,는 "이것도 고르고, 저것도 고르라"는 뜻입니다.

h2,
h3 {
  color: #111;
}

이 코드는 h2와 h3 제목을 함께 고릅니다. 회사 소개 페이지에서 큰 제목과 작은 제목의 색을 통일하고 싶을 때 사용할 수 있습니다.

버튼 두 종류에 같은 둥근 모서리를 주고 싶을 때도 쓸 수 있습니다.

.primary-button,
.secondary-button {
  border-radius: 8px;
}

이렇게 하면 주요 버튼과 보조 버튼이 모두 같은 정도로 둥글어집니다.

띄어쓰기: 특정 영역 안에서만 고르기

선택자 사이의 띄어쓰기는 "앞의 요소 안에 있는 뒤의 요소를 고르라"는 뜻입니다.

.product-card p {
  color: #666;
}

이 코드는 페이지 전체의 모든 문단이 아니라, .product-card 안에 들어 있는 p 문단만 고릅니다.

예를 들어 이런 HTML이 있다고 해 봅시다.

<div class='product-card'>
  <h3>무선 키보드</h3>
  <p>조용한 타건감의 사무용 키보드입니다.</p>
</div>

<p>고객센터 운영 시간은 평일 오전 10시부터입니다.</p>

.product-card p라고 쓰면 상품 카드 안의 설명 문단만 바뀝니다. 고객센터 안내 문단은 바뀌지 않습니다.

이 방식은 쇼핑몰 카드, 블로그 글, 배너 안 문구처럼 특정 영역 안의 요소만 조정할 때 자주 사용합니다.

주의할 점은 점과 띄어쓰기입니다.

.product-card p

이것은 "product-card 안의 모든 p"입니다.

.product-card-p

이것은 "product-card-p라는 class가 붙은 요소"입니다.

비슷해 보이지만 완전히 다릅니다. CSS가 생각대로 적용되지 않을 때는 선택자에 띄어쓰기가 들어갔는지, class 이름을 정확히 썼는지 먼저 확인해 보세요.

검사 도구로 class 이름 찾기

웹사이트를 수정할 때는 HTML을 처음부터 다 알고 있지 않은 경우가 많습니다. 워드프레스, 쇼피파이, 웹빌더, 템플릿을 쓰면 class 이름이 이미 정해져 있습니다. 이때 브라우저의 검사 도구를 사용합니다. 검사 도구는 화면 뒤쪽의 HTML과 CSS를 보여 주는 돋보기 같은 기능입니다.

기본 흐름은 다음과 같습니다.

바꾸고 싶은 요소 위에서 마우스 오른쪽 버튼을 누릅니다.
검사 또는 Inspect를 선택합니다.
브라우저 아래나 옆에 개발자 도구가 열립니다.
선택된 HTML 줄에서 class='...' 부분을 찾습니다.
그 class 이름 앞에 점 .을 붙여 CSS 선택자로 사용합니다.

예를 들어 버튼을 검사했더니 이런 HTML이 보였다고 해 봅시다.

<a class='shop-button primary'>구매하기</a>

이 요소에는 class가 두 개 있습니다.

shop-button
primary

CSS에서는 둘 중 하나를 골라 쓸 수 있습니다.

.shop-button {
  padding: 14px 20px;
}

조금 더 좁게 고르고 싶다면 두 class를 붙여 쓸 수도 있습니다.

.shop-button.primary {
  background-color: #2563eb;
}

여기서 .shop-button.primary는 shop-button과 primary class를 모두 가진 요소를 고릅니다. 중간에 띄어쓰기가 없습니다. 띄어쓰기를 넣으면 의미가 달라지므로 조심해야 합니다.

처음에는 class 이름이 길고 복잡해 보일 수 있습니다. 그래도 겁먹을 필요는 없습니다. 검사 도구에서 바꾸고 싶은 요소를 클릭하고, class 이름을 찾아, CSS에 점을 붙여 써 보는 흐름만 익히면 됩니다.

자주 생기는 실수 체크리스트

선택자는 작은 기호 하나로 결과가 크게 달라집니다. CSS가 원하는 대로 적용되지 않을 때 아래 항목을 확인하세요.

class 선택자 앞에 점 .을 붙였나요?
- notice가 아니라 .notice입니다.
id 선택자 앞에 #을 붙였나요?
- main-banner가 아니라 #main-banner입니다.
너무 넓게 고르지는 않았나요?
- p는 모든 문단을 바꿉니다.
특정 영역 안에서만 고르고 싶다면 부모 선택자를 붙였나요?
- .card p처럼 쓸 수 있습니다.
쉼표와 띄어쓰기의 의미를 헷갈리지 않았나요?
- h2, h3는 둘 다 고르기입니다.
- .card p는 card 안의 p만 고르기입니다.
class 이름을 HTML과 똑같이 썼나요?
- .primary-button과 .primarybutton은 다른 이름입니다.

작은 실습: 카드 안 버튼만 바꾸기

이번 실습의 목표는 간단합니다.

페이지의 모든 버튼이 아니라, 이벤트 카드 안의 신청 버튼만 파란색으로 바꿉니다.

먼저 HTML이 이렇게 있다고 생각해 봅시다.

<div class='event-card'>
  <h3>CSS 입문 특강</h3>
  <p>비개발자를 위한 온라인 강의입니다.</p>
  <button class='apply-button'>신청하기</button>
</div>

<button>문의하기</button>

처음에 이렇게 쓰면 어떻게 될까요?

button {
  background-color: #2563eb;
  color: white;
}

이 코드는 모든 버튼을 고릅니다. 그래서 신청하기 버튼도, 문의하기 버튼도 함께 파란색이 됩니다.

원하는 결과가 "이벤트 카드 안의 신청 버튼만 바꾸기"라면 선택자를 더 좁혀야 합니다.

.event-card .apply-button {
  background-color: #2563eb;
  color: white;
}

이 선택자는 이렇게 읽으면 됩니다.

.event-card: event-card라는 영역 안에서
.apply-button: apply-button이라는 버튼을 골라라

수정 전후 비교

수정 전:

button {
  background-color: #2563eb;
  color: white;
}

결과: 페이지의 모든 버튼이 파란색으로 바뀝니다.

수정 후:

.event-card .apply-button {
  background-color: #2563eb;
  color: white;
}

결과: 이벤트 카드 안의 신청 버튼만 파란색으로 바뀝니다.

이 차이가 선택자의 힘입니다. CSS를 잘한다는 것은 멋진 속성을 많이 외우는 것만이 아닙니다. 먼저 "어디를 바꿀 것인가"를 정확히 고르는 감각이 필요합니다.

이번 장에서 기억할 핵심은 세 가지입니다.

태그 선택자는 같은 종류를 한꺼번에 고릅니다.
class 선택자는 원하는 요소를 골라 꾸밀 때 가장 자주 씁니다.
id 선택자는 꼭 하나만 가리켜야 할 때 조심해서 씁니다.

다음 장부터는 이렇게 고른 요소의 글자, 색, 배경을 직접 바꾸며 첫 스타일링을 만들어 보겠습니다.

책 목록

비개발자를 위한 CSS 입문: 눈으로 이해하고 바로 고치는 쉬운 스타일링

전체 목차 보기