CSS 선택자 총정리 – 클래스, 아이디, 태그 선택자 차이

CSS 선택자 총정리 – 클래스, 아이디, 태그 선택자 차이

지난 글에서는 CSS의 기본 문법과 HTML에 CSS를 적용하는 세 가지 방법을 알아보았습니다. 그런데 실습을 하다 보면 한 가지 고민이 생깁니다. p { color: gray; }라고 적으면 페이지의 모든 문단이 회색이 되는데, 만약 특정 문단 하나만 빨간색으로 바꾸고 싶다면 어떻게 해야 할까요? 이 문제를 해결해 주는 것이 바로 선택자(Selector)입니다. 오늘은 CSS에서 가장 중요한 개념 중 하나인 선택자를 태그·클래스·아이디 선택자부터 자손 선택자, 가상 클래스까지 예제와 함께 차근차근 정리해 보겠습니다.

1. 선택자란 무엇인가요?

선택자는 CSS 규칙에서 중괄호 앞에 적는 부분으로, “어떤 요소에 스타일을 적용할지” 정하는 역할을 합니다. 학교에 비유하면 이해가 쉽습니다. 교장 선생님이 “전교생 운동장으로 모이세요”라고 하면 모든 학생이 대상이 되고, “3학년 2반 모이세요”라고 하면 그 반 학생들만, “출석번호 15번 김철수 학생”이라고 하면 딱 한 명만 대상이 됩니다. CSS 선택자도 이렇게 넓게 또는 좁게 대상을 고를 수 있습니다.

• 태그 선택자 → “전교생” : 같은 태그 전체
• 클래스 선택자 → “3학년 2반” : 같은 이름표를 단 여러 요소
• 아이디 선택자 → “출석번호 15번” : 단 하나의 요소

2. 태그 선택자 (Type Selector)

태그 선택자는 태그 이름을 그대로 적어, 문서 안의 해당 태그 전체에 스타일을 적용합니다. 지난 글에서 계속 사용했던 방식입니다.

p {
  color: gray;
  line-height: 1.8;
}

h2 {
  color: #264de4;
}

태그 선택자는 사이트 전체의 기본 스타일을 정할 때 유용합니다. “모든 문단은 줄 간격 1.8”, “모든 링크는 주황색”처럼 공통 규칙을 한 번에 지정할 수 있습니다. 하지만 같은 태그 중 일부만 다르게 꾸밀 수는 없다는 한계가 있습니다.

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

클래스 선택자는 HTML 요소에 class 속성으로 이름표를 붙이고, CSS에서 그 이름 앞에 점(.)을 찍어 선택합니다.

<!-- HTML -->
<p>일반 문단입니다.</p>
<p class="notice">중요한 공지 문단입니다.</p>
<p>일반 문단입니다.</p>
<p class="notice">또 다른 공지 문단입니다.</p>

/* CSS */
.notice {
  color: #d62828;
  font-weight: bold;
}

클래스의 가장 큰 장점은 여러 요소에 반복해서 사용할 수 있다는 것입니다. 또한 태그 종류와 상관없이 p에도, div에도, span에도 같은 클래스를 붙일 수 있습니다. 한 요소에 여러 클래스를 동시에 붙이는 것도 가능한데, 이때는 띄어쓰기로 구분합니다.

<p class="notice big">크고 빨간 공지</p>

.notice { color: #d62828; }
.big    { font-size: 24px; }

이렇게 기능별로 작은 클래스를 만들어 조합하면, 레고 블록처럼 필요한 스타일을 골라 붙일 수 있어 매우 효율적입니다. 실무에서 가장 많이 사용하는 선택자가 바로 클래스 선택자입니다.

4. 아이디 선택자 (ID Selector)

아이디 선택자는 HTML 요소에 id 속성으로 고유한 이름을 붙이고, CSS에서 그 이름 앞에 샵(#)을 붙여 선택합니다.

<!-- HTML -->
<header id="top-banner">사이트 상단 배너</header>

/* CSS */
#top-banner {
  background-color: #264de4;
  color: white;
  padding: 20px;
}

아이디는 주민등록번호처럼 한 페이지에 단 하나만 존재해야 합니다. 같은 id를 두 요소에 붙이면 브라우저에 따라 화면은 정상으로 보일 수도 있지만, HTML 규칙 위반이며 자바스크립트를 사용할 때 문제가 생깁니다.

아이디는 CSS보다는 다른 용도로 더 자주 쓰입니다. 대표적으로 자바스크립트에서 특정 요소를 찾을 때, 폼 편에서 배운 label의 for와 input을 연결할 때, 그리고 페이지 안에서 특정 위치로 이동하는 링크를 만들 때입니다. 예를 들어 <a href="#top-banner">맨 위로</a>라고 적으면 클릭 시 해당 id를 가진 요소로 화면이 이동합니다.

5. 태그·클래스·아이디 선택자 한눈에 비교

실무에서 통용되는 원칙은 간단합니다. 기본 스타일은 태그 선택자, 디자인은 클래스 선택자, 아이디는 꼭 필요할 때만 사용하는 것입니다. 아이디로 스타일을 지정하면 뒤에서 설명할 우선순위가 너무 높아져 나중에 수정하기 어려워지기 때문입니다.

6. 알아두면 편리한 기타 선택자

① 전체 선택자 (*)
별표(*)는 페이지의 모든 요소를 선택합니다. 브라우저가 기본으로 넣는 여백을 없애고 시작할 때 자주 사용합니다.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

② 그룹 선택자 (,)
여러 선택자에 같은 스타일을 적용할 때 쉼표로 묶습니다. 같은 코드를 반복해서 적지 않아도 됩니다.

h1, h2, h3 {
  font-family: 'Noto Sans KR', sans-serif;
  color: #222;
}

③ 자손 선택자 (띄어쓰기)
선택자 사이에 띄어쓰기를 하면 “A 안에 있는 B“를 선택합니다. 예를 들어 nav 안의 링크만 꾸미고 싶을 때 사용합니다.

nav a {
  color: white;
  text-decoration: none;  /* 밑줄 제거 */
}

이렇게 하면 본문의 링크는 그대로 두고 메뉴의 링크만 흰색이 됩니다. 클래스를 일일이 붙이지 않아도 구조를 이용해 원하는 요소를 고를 수 있어 매우 자주 쓰입니다.

④ 자식 선택자 (>)
A > B는 A의 바로 아래 단계에 있는 B만 선택합니다. 자손 선택자는 손자, 증손자까지 모두 포함하지만, 자식 선택자는 한 단계 아래만 선택한다는 차이가 있습니다.

ul > li {
  list-style: square;
}

⑤ 조합 선택자
태그와 클래스를 띄어쓰기 없이 붙여 쓰면 “이 태그이면서 이 클래스인 요소“를 선택합니다. p.notice는 notice 클래스를 가진 p 태그만 선택하고, 같은 클래스를 가진 div는 제외합니다. 띄어쓰기 하나로 의미가 완전히 달라지니 주의해야 합니다.

7. 가상 클래스 선택자 – 상태에 따라 꾸미기

가상 클래스는 요소의 특정 상태나 위치를 선택합니다. 선택자 뒤에 콜론(:)을 붙여 사용합니다.

/* 마우스를 올렸을 때 */
a:hover {
  color: #e44d26;
  text-decoration: underline;
}

/* 입력창을 클릭해 선택했을 때 */
input:focus {
  border-color: #264de4;
  outline: none;
}

/* 첫 번째 항목 */
li:first-child {
  font-weight: bold;
}

/* 짝수 번째 행 */
tr:nth-child(even) {
  background-color: #f4f6fb;
}

특히 :hover는 버튼이나 메뉴에 마우스를 올렸을 때 색이 바뀌는 효과를 줄 때 거의 항상 사용합니다. :nth-child(even)는 표 편에서 짝수 행에 배경색을 넣을 때 이미 한 번 사용해 본 선택자입니다. 홀수 번째를 고르려면 odd, 세 번째만 고르려면 nth-child(3)처럼 숫자를 넣으면 됩니다.

8. 선택자 우선순위 (명시도)

지난 글에서 “가까울수록, 나중일수록 우선한다”는 원리를 배웠습니다. 여기에 한 가지가 더 추가됩니다. 같은 요소를 여러 선택자가 동시에 가리킬 때는 더 구체적인 선택자가 이깁니다. 이것을 명시도(Specificity)라고 합니다.

<p id="intro" class="text">무슨 색일까요?</p>

#intro { color: red; }
.text  { color: blue; }
p      { color: green; }

정답은 빨간색입니다. 작성 순서와 상관없이 아이디 선택자가 가장 강하기 때문입니다. 우선순위를 간단히 정리하면 다음과 같습니다.

명시도가 같다면 지난 글에서 배운 대로 나중에 작성한 스타일이 적용됩니다. 또한 nav .menu a처럼 여러 선택자를 조합하면 그만큼 점수가 더해져 우선순위가 높아집니다.

참고로 값 뒤에 !important를 붙이면 모든 우선순위를 무시하고 강제로 적용됩니다. 하지만 이를 남발하면 나중에 어떤 스타일이 왜 적용되는지 추적하기 매우 어려워지므로, 다른 사람이 만든 코드를 어쩔 수 없이 덮어써야 하는 경우처럼 정말 필요할 때만 사용하는 것이 좋습니다.

9. 클래스 이름 잘 짓는 법

클래스를 많이 쓰게 되면 이름 짓는 것도 중요한 실력이 됩니다. 다음 원칙을 지키면 나중에 코드를 봤을 때 훨씬 이해하기 쉽습니다.

• 모양보다 역할로 짓기 : .red-text보다 .warning이 좋습니다. 나중에 경고 색을 주황으로 바꾸면 red-text라는 이름은 거짓말이 되기 때문입니다.
• 영어 소문자와 하이픈 사용 : .main-title, .btn-primary처럼 소문자와 하이픈으로 단어를 연결하는 방식이 가장 널리 쓰입니다.
• 숫자로 시작하지 않기 : .1st-box처럼 숫자로 시작하는 이름은 CSS에서 정상적으로 선택되지 않습니다.
• 너무 짧은 약어 피하기 : .a, .bx1 같은 이름은 작성할 때는 편해도 일주일 뒤에는 무슨 뜻인지 알기 어렵습니다.

10. 실습: 선택자로 강의 목록 카드 꾸미기

오늘 배운 선택자들을 활용해 강의 목록을 꾸며 보겠습니다. 아래 코드를 selector.html로 저장해 브라우저에서 열어보세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>선택자 실습</title>
  <style>
    /* 전체 선택자: 기본 여백 초기화 */
    * { box-sizing: border-box; }

    /* 태그 선택자: 기본 스타일 */
    body {
      font-family: sans-serif;
      background: #f5f7fb;
      padding: 20px;
    }

    /* 아이디 선택자: 페이지 제목 */
    #page-title {
      color: #264de4;
      text-align: center;
    }

    /* 클래스 선택자: 카드 */
    .card {
      background: white;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 12px;
    }

    /* 조합 선택자: 추천 카드만 강조 */
    .card.best {
      border: 2px solid #e44d26;
    }

    /* 자손 선택자: 카드 안의 제목 */
    .card h2 {
      font-size: 18px;
      margin: 0 0 6px;
    }

    /* 클래스 선택자: 작은 꼬리표 */
    .tag {
      font-size: 12px;
      color: white;
      background: #e44d26;
      padding: 2px 8px;
      border-radius: 10px;
    }

    /* 가상 클래스: 마우스를 올리면 */
    .card:hover {
      background: #eef2ff;
    }
  </style>
</head>
<body>
  <h1 id="page-title">웹 코딩 기초 강의 목록</h1>

  <div class="card best">
    <h2>HTML 기초 완벽 정리 <span class="tag">추천</span></h2>
    <p>웹페이지의 기본 구조와 태그를 배웁니다.</p>
  </div>

  <div class="card">
    <h2>CSS 기초 완벽 정리</h2>
    <p>HTML에 CSS를 적용하는 방법을 배웁니다.</p>
  </div>

  <div class="card">
    <h2>CSS 선택자 총정리</h2>
    <p>원하는 요소만 골라 꾸미는 방법을 배웁니다.</p>
  </div>
</body>
</html>

완성된 화면은 대략 다음과 같습니다. 실제 파일에서는 카드에 마우스를 올리면 배경이 연한 파란색으로 바뀝니다.

코드의 주석을 보면 전체·태그·아이디·클래스·조합·자손·가상 클래스 선택자가 각각 어디에 쓰였는지 확인할 수 있습니다. 특히 .card.best처럼 클래스를 조합해 같은 카드 중 하나만 강조한 부분을 눈여겨보세요. 클래스 하나를 추가하는 것만으로 디자인을 바꿀 수 있다는 것이 클래스 선택자의 가장 큰 장점입니다.

11. 선택자를 쓸 때 자주 하는 실수

• 점(.)이나 샵(#)을 빠뜨림 : CSS에서 notice { }라고 쓰면 notice라는 태그를 찾게 되어 아무것도 선택되지 않습니다. 클래스는 반드시 .notice로 적어야 합니다.
• HTML에 점을 붙임 : 반대로 HTML에서는 class=".notice"가 아니라 class="notice"처럼 점 없이 적습니다.
• 띄어쓰기 실수 : p.notice(notice 클래스인 p)와 p .notice(p 안에 있는 notice)는 완전히 다른 의미입니다.
• 대소문자 불일치 : 클래스 이름은 대소문자를 구분합니다. HTML의 Notice와 CSS의 .notice는 서로 연결되지 않습니다.
• 스타일이 안 바뀌어요 : 대부분 더 강한 선택자가 이미 적용되어 있는 경우입니다. 브라우저에서 F12를 눌러 개발자 도구를 열고 요소를 선택하면, 어떤 스타일이 적용되고 어떤 스타일이 취소선으로 무시되었는지 확인할 수 있습니다.

마무리하며

오늘은 CSS로 원하는 요소를 골라내는 선택자에 대해 알아보았습니다. 태그 선택자는 전체 기본 스타일에, 클래스 선택자는 대부분의 디자인에, 아이디 선택자는 단 하나뿐인 요소나 자바스크립트용으로 사용한다는 구분을 꼭 기억해 두세요. 여기에 그룹·자손·자식 선택자와 :hover 같은 가상 클래스까지 익히면 웬만한 웹페이지는 원하는 대로 꾸밀 수 있습니다. 스타일이 예상대로 적용되지 않을 때는 명시도를 떠올리고, 개발자 도구로 확인하는 습관을 들이면 문제를 훨씬 빠르게 해결할 수 있습니다.

다음 글에서는 모든 HTML 요소를 감싸고 있는 보이지 않는 상자, CSS 박스 모델에 대해 알아보겠습니다. margin, padding, border의 차이를 이해하면 여백 때문에 고생하는 일이 크게 줄어들 것입니다. 궁금한 점은 댓글로 남겨 주세요!