topic★★★★★난이도 · 약 15분

셀렉터의 세계

요소, 클래스, ID 셀렉터를 구별하고 우선순위(특이성)를 이해한다.

#셀렉터#클래스#ID#우선순위

왜 배우는가

웹 페이지에는 수십 개의 p, h2 태그가 있다. 그중 특정 문단만 빨갛게, 특정 제목만 크게 만들려면 셀렉터를 정확히 알아야 한다.

요소, 클래스, ID — 세 가지로 모든 것을 선택합니다

css

/* 1. 요소 셀렉터 — 모든 p 태그 */
p { color: gray; }

/* 2. 클래스 셀렉터 — .으로 시작 */
.highlight { background: yellow; }

/* 3. ID 셀렉터 — #으로 시작 */
#main-title { font-size: 2.5rem; }

요소(p), 클래스(.highlight), ID(#main-title) 세 종류의 셀렉터.

html

<!-- HTML에서 class와 id 사용 -->
<h1 id="main-title">김짓의 홈페이지</h1>
<p class="highlight">중요한 내용입니다.</p>
<p>일반 문단입니다.</p>
<p class="highlight">이것도 중요합니다.</p>

class는 여러 요소에 재사용, id는 페이지에서 딱 하나만 사용.

class = 여러 요소에 재사용 (`.highlight`를 여러 곳에) id = 페이지에서 딱 하나 (`#main-title`은 유일) 대부분의 경우 class를 사용하는 것이 좋습니다.

같은 요소에 여러 규칙이 겹치면 누가 이길까?

1. 요소 — p { } — 가장 약함 2. 클래스 — .class { } — 중간 3. ID — #id { } — 강함 4. 인라인 — style="" — 가장 강함

우선순위: 인라인 > ID > 클래스 > 요소 같은 우선순위면 나중에 작성된 규칙이 이긴다 (Cascade).

홈페이��에 클래스를 추가하고 스��일을 적용해봅시다

css

.section-title {
  color: #1A1A2E;
  font-size: 1.5rem;
  border-bottom: 2px solid #4ECDC4;
  padding-bottom: 8px;
  margin-top: 24px;
}

.card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 16px;
  margin-top: 12px;
}

클래스 셀렉터로 section-title과 card 스타일을 정의한 예시.

셀렉터	설명
태그 셀렉터	태그 이름으로 선택 — p, h1, div
클래스 셀렉터	점(.)으로 시작 — .highlight, .card
ID 셀렉터	샵(#)으로 시작 — #header, #main

조합	설명
자손 셀렉터	공백으로 구분 — div p (div 안의 모든 p)
그룹 셀렉터	쉼표로 구분 — h1, h2 (둘 다 선택)

클래스는 여러 요소에 재사용, ID는 페이지당 하나만 사용하세요.

실기 드릴 3문항

edit실기 드릴 · 단답형

CSS에서 클래스 셀렉터의 올바른 표기법은?

check_circle실기 드릴 · OX

하나의 HTML 요소에 여러 class를 동시에 적용할 수 있다.

check_circle실기 드릴 · OX

color 속성은 글자 색이 아니라 배경 색을 바꾼다.