실행 가능한 CSS 문서: 클래스 선택자

Q: CSS에서 클래스는 어떻게 선택하나요?

점 뒤에 클래스 이름을 적어요. .card { ... }는 class="card"인 모든 요소를 꾸며요. 점은 CSS에만 쓰고, HTML 속성에는 점이 없어요.

Q: 요소에 클래스 두 개는 어떻게 주나요?

속성 하나에 이름을 공백으로 구분해서 적어요. class="btn primary" 요소에 class를 두 번 쓰면 동작하지 않아요. 브라우저는 첫 번째 속성만 남겨요.

Q: 클래스 두 개를 모두 가진 요소는 어떻게 선택하나요?

클래스 선택자를 공백 없이 이어 써요. .btn.primary는 두 클래스를 모두 가진 요소와 일치해요. 공백이 있는 .btn .primary는 .btn 요소 안에 있는 .primary 요소라는 뜻이에요.

Q: CSS 클래스 이름을 숫자로 시작할 수 있나요?

HTML에서는 되지만, 선택자는 이스케이프하지 않은 숫자로 시작할 수 없어서 .1col은 잘못된 CSS예요. 숫자를 이스케이프하거나(.\31 col), 더 좋은 방법으로 클래스 이름을 글자로 시작하세요.

클래스 선택자

클래스 선택자는 점 뒤에 클래스 이름을 붙인 거예요. 요소 종류와 상관없이 class 속성에 그 이름이 들어 있는 모든 요소를 꾸며요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Class selector</title>
  <style>
    .badge {
      background: #2563eb;
      color: white;
      padding: 2px 10px;
      border-radius: 999px;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <p>New <span class="badge">beta</span></p>
  <h2>Release <span class="badge">v2</span></h2>
  <a class="badge" href="#">a link with the class</a>
</body>
</html>

점은 CSS에만 나와요. HTML에서 속성은 점 없이 class="badge"예요. 클래스 이름은 대소문자를 구분해요. .Badge는 class="badge"와 일치하지 않아요.

한 요소에 여러 클래스

요소는 공백으로 구분해서 클래스를 몇 개든 가질 수 있어요. 각 클래스가 자기 규칙을 가져오기 때문에 작은 조각을 조합해서 변형을 만들 수 있어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple classes</title>
  <style>
    .btn {
      border: 2px solid #2563eb;
      background: white;
      color: #2563eb;
      padding: 8px 14px;
      border-radius: 6px;
    }
    .primary { background: #2563eb; color: white; }
    .large { font-size: 20px; }

    /* chained: only elements with BOTH classes */
    .btn.danger { border-color: #f59e0b; color: #111827; background: #f59e0b; }
  </style>
</head>
<body>
  <button class="btn">Default</button>
  <button class="btn primary">Primary</button>
  <button class="btn primary large">Primary large</button>
  <button class="btn danger">Danger</button>
  <span class="danger">.danger alone: no style</span>
</body>
</html>

공백 없는 .btn.danger는 두 클래스를 모두 가진 요소와 일치해요. 마지막 span은 danger는 있지만 btn이 없어서 연결한 규칙이 건너뛰어요.

클래스 선택자 변형

선택자	일치하는 것
`.note`	클래스가 `note`인 모든 요소
`p.note`	클래스가 `note`인 `<p>` 요소만
`.btn.primary`	`btn`과 `primary`를 모두 가진 요소
`.card .title`	`.card` 안 어딘가의 `.title`
`.card > .title`	부모가 `.card`인 `.title`
`.a, .b`	`a` 또는 `b`를 가진 요소

공백이 있을 때와 없을 때의 차이는 다른 결합자와 함께 CSS 선택자 페이지에서 다뤄요.

ID 선택자

ID 선택자는 해시 뒤에 id를 붙인 거예요. #site-header는 id="site-header"인 요소를 꾸며요. id는 페이지에서 유일해야 하니 ID 선택자는 정확히 요소 하나를 대상으로 해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ID selector</title>
  <style>
    #summary {
      border: 2px solid #16a34a;
      padding: 10px;
      border-radius: 6px;
    }
    #details { margin-top: 8px; background: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <div id="summary">Styled by #summary</div>
  <div id="details">Styled by #details</div>
</body>
</html>

id는 꾸미는 것 말고도 역할이 있어요. href="#details"는 그 요소로 스크롤하고, <label for="email">은 입력 요소의 id를 가리키고, JavaScript는 document.getElementById('details')로 찾아요. 요소에 id를 주는 흔한 이유가 이거예요. 꾸미는 데는 클래스가 더 좋은 도구예요.

클래스와 ID 비교

	클래스 `.name`	ID `#name`
페이지당	여러 요소	요소 하나
요소당	여러 개, 공백으로 구분	하나
명시도	(0,1,0)	(1,0,0)
링크 대상 (URL의 `#name`)	안 돼요	돼요
어울리는 용도	스타일링	앵커, label, JavaScript 연결

명시도 차이가 클래스로 꾸며야 하는 실질적인 이유예요. ID 하나가 클래스 몇 개보다도 이기기 때문에, ID로 쓴 규칙은 다른 ID, 인라인 스타일, !important로만 덮어쓸 수 있어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Specificity</title>
  <style>
    #promo { background: #e5e7eb; padding: 10px; }
    .card.featured.highlight { background: #f59e0b; } /* three classes */
  </style>
</head>
<body>
  <div id="promo" class="card featured highlight">
    Still gray: the ID beats three classes.
  </div>
</body>
</html>

JavaScript로 클래스 추가하고 제거하기

JavaScript가 모양을 바꾸는 보통의 방법은 클래스예요. CSS가 상태를 정의하고, 스크립트는 상태만 전환해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>classList</title>
  <style>
    .panel { border: 2px solid #e5e7eb; padding: 10px; border-radius: 6px; }
    .panel.open { border-color: #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <button id="toggle">Toggle .open</button>
  <div class="panel" id="panel">The panel.</div>
  <script>
    const panel = document.getElementById('panel');
    document.getElementById('toggle').addEventListener('click', () => {
      panel.classList.toggle('open');
      panel.textContent = 'class="' + panel.className + '"';
    });
  </script>
</body>
</html>

classList에는 add, remove, contains, replace도 있어요. className에 직접 값을 넣는 건 피하세요. 요소가 가진 모든 클래스를 바꿔 버려요.

클래스 이름 짓기

글자, 숫자, 하이픈, 밑줄은 안전해요. card, card-title, card__title, is-open.
선택자를 숫자나 하이픈 뒤 숫자로 시작하지 마세요. .2col은 잘못된 CSS예요. 글자로 시작하거나(.cols-2) 숫자를 이스케이프하세요(.\32 col).
모양이 아니라 목적으로 이름을 지으세요. .error는 디자인을 바꿔도 살아남지만 .red-text는 그렇지 않아요.
큰 프로젝트에서는 이름 규칙이 도움이 돼요. BEM은 block__element--modifier처럼 써요. 예를 들면 .card__title--large예요.

자주 하는 실수

HTML에 점 넣기. class=".badge"는 .badge와 절대 일치하지 않아요.
class 속성 두 개. <p class="a" class="b">는 a만 남아요. class="a b"를 쓰세요.
두 클래스를 뜻했는데 공백 넣기. .btn .primary는 안쪽 요소를 찾고, .btn.primary는 같은 요소예요.
id 재사용. 중복된 id는 CSS가 동작하는 것처럼 보여도 getElementById, 앵커 링크, label 연결을 망가뜨려요.
모든 것을 id로 꾸미기. 명시도 때문에 나중에 덮어쓰기가 괴로워져요. 클래스를 쓰세요.

자주 묻는 질문

CSS에서 클래스는 어떻게 선택하나요?

점 뒤에 클래스 이름을 적어요. .card { ... }는 class="card"인 모든 요소를 꾸며요. 점은 CSS에만 쓰고, HTML 속성에는 점이 없어요.

CSS에서 클래스와 id는 무엇이 다른가요?

클래스는 몇 개의 요소에든 쓸 수 있고 한 요소가 여러 개를 가질 수 있어요. id는 페이지에서 유일해야 하고 한 요소는 최대 하나만 가져요. CSS에서 #id는 .class보다 명시도가 훨씬 높아서 ID 규칙은 덮어쓰기 어려워요.

요소에 클래스 두 개는 어떻게 주나요?

속성 하나에 이름을 공백으로 구분해서 적어요. class="btn primary" 요소에 class를 두 번 쓰면 동작하지 않아요. 브라우저는 첫 번째 속성만 남겨요.

클래스 두 개를 모두 가진 요소는 어떻게 선택하나요?

클래스 선택자를 공백 없이 이어 써요. .btn.primary는 두 클래스를 모두 가진 요소와 일치해요. 공백이 있는 .btn .primary는 .btn 요소 안에 있는 .primary 요소라는 뜻이에요.

CSS 클래스 이름을 숫자로 시작할 수 있나요?

HTML에서는 되지만, 선택자는 이스케이프하지 않은 숫자로 시작할 수 없어서 .1col은 잘못된 CSS예요. 숫자를 이스케이프하거나(.\31 col), 더 좋은 방법으로 클래스 이름을 글자로 시작하세요.

CSS 클래스 선택자와 ID 선택자 (.class와 #id)