CSS 선택자 101

Source: Dev.to

위의 링크에 있는 텍스트를 번역하려면, 번역할 내용을 제공해 주세요. 현재는 소스 링크만 포함되어 있어 번역할 본문이 없습니다. 번역이 필요한 전체 텍스트를 알려주시면 한국어로 번역해 드리겠습니다.

왜 CSS 선택자가 필요할까요?

교실에 있다고 상상하고 지시를 내리고 싶다고 가정해 보세요:

선택자 없이:

“모두 일어나!”

선택자와 함께:

“빨간 셔츠를 입은 학생들, 일어나!"
"존이라는 이름의 학생, 일어나!"
"3열에 있는 학생들, 일어나!”

CSS 선택자는 같은 방식으로 작동합니다. 특정 HTML 요소를 타깃으로 하여 스타일을 적용할 수 있게 해줍니다.

• 선택자 없이: 아무것도 스타일링할 수 없습니다.
• 선택자와 함께: 정확히 어떤 것이 스타일링될지 제어할 수 있습니다.

예제용 기본 HTML

<div>
  <h2>Welcome</h2>

  <p>This is a paragraph.</p>

  <p class="highlight">This is highlighted.</p>

  <p id="special">This is special.</p>

  <div class="box">
    <p>Paragraph inside box</p>
  </div>
</div>

1. 요소 선택자

요소 선택자는 특정 유형의 모든 요소를 대상으로 합니다.

구문

tagname {
  /* styles */
}

예시

p {
  color: blue;
}

이것이 하는 일: 모든 <p> 요소를 대상으로 하며 텍스트를 파란색으로 만듭니다.

결과

• “This is a paragraph.” → 파란색
• “This is highlighted.” → 파란색
• “This is special.” → 파란색
• “Paragraph inside box” → 파란색

사용 시기: 특정 유형의 모든 요소를 스타일링하고 싶을 때.

추가 예시

모든 제목 스타일링

h1 {
  font-size: 32px;
  color: darkblue;
}

모든 <div> 요소 스타일링

div {
  background-color: lightgray;
  padding: 10px;
}

2. 클래스 선택자

The class selector targets elements that share a specific class. → 클래스 선택자는 특정 클래스를 공유하는 요소들을 대상으로 합니다.

Syntax

.classname {
  /* styles */
}

(Note the dot . before the class name.)
(클래스 이름 앞에 점 .이 있다는 점에 유의하세요.)

Example

.highlight {
  background-color: yellow;
}

What this does: Only the element with class="highlight" receives a yellow background.
동작 설명: class="highlight"인 요소에만 노란색 배경이 적용됩니다.

Result
결과

• “This is highlighted.” → Yellow background
  • “This is highlighted.” → 노란색 배경
• Other paragraphs → No yellow background
  • 다른 문단 → 노란색 배경 없음

Use when: You want to style a group of elements that share a purpose or visual style.
사용 상황: 목적이나 시각적 스타일을 공유하는 요소 그룹에 스타일을 적용하고 싶을 때.

Multiple Classes

An element can have more than one class:
요소는 둘 이상의 클래스를 가질 수 있습니다:

<p class="highlight bold">Text</p>

Target each class
각 클래스를 대상으로 지정

.highlight {
  background-color: yellow;
}

.bold {
  font-weight: bold;
}

Both styles apply to the same element.
두 스타일이 동일한 요소에 모두 적용됩니다.

Classes vs. Elements

Element selector (all paragraphs)
요소 선택자 (모든 단락)

p {
  color: blue;
}

Every <p> becomes blue.
모든 <p>가 파란색이 됩니다.

Class selector (specific paragraphs)
클래스 선택자 (특정 단락)

.highlight {
  color: red;
}

Only elements with class="highlight" become red.
class="highlight"인 요소만 빨간색이 됩니다.

Source: …

3. ID 선택자

ID 선택자는 단일, 고유한 요소를 대상으로 합니다.

구문

#idname {
  /* styles */
}

(ID 이름 앞에 해시 #가 붙는 것을 주의하세요.)

예시

#special {
  font-size: 20px;
  color: red;
}

동작 설명: id="special"인 요소만 빨간색이며 글자 크기가 커집니다.

결과

• “This is special.” → 빨간색, 20 px 글꼴
• 다른 단락들 → 변화 없음

중요: ID는 고유해야 하며, 하나의 ID는 하나의 요소에만 사용되어야 합니다.

클래스 vs. ID

HTML 예시

<button class="btn">Click</button>
<button id="main-content">Submit</button>

CSS

.btn {
  background-color: blue;
}

#main-content {
  width: 80%;
}

4. 그룹 선택자

그룹 선택자는 여러 선택자에 동시에 같은 스타일을 적용할 수 있게 합니다.

구문

selector1, selector2, selector3 {
  /* styles */
}

(선택자는 쉼표로 구분합니다.)

예시

h1, h2, h3 {
  color: navy;
  font-family: Arial;
}

모든 <h1>, <h2>, <h3> 요소는 네이비 색 텍스트와 Arial 폰트를 적용받습니다.

다른 예시

p, .highlight, #special {
  line-height: 1.5;
}

모든 단락, 클래스 highlight를 가진 요소, 그리고 ID가 special인 요소는 줄 높이(line‑height) 1.5를 적용받습니다.

사용 시기: 서로 다른 선택자들이 동일한 스타일링이 필요할 때.

5. 자손 선택자

자손 선택자는 다른 요소 안에 중첩된 요소를 대상으로 합니다.

구문

parent child {
  /* styles */
}

(선택자 사이의 공백은 “자식”을 의미합니다.)

예시

div p {
  color: green;
}

이것이 하는 일: <div> 안에 있는 <p> 요소를 선택합니다.

다음 HTML을 보면

<div>
  <p>Outside div</p>
</div>

<div class="box">
  <p>Inside div</p>
</div>

• 첫 번째 <p> ( <div> 밖에 있는)는 영향을 받지 않습니다.
• 두 번째 <p> ( <div> 안에 있는)는 초록색이 됩니다.

요약

이러한 선택자를 이해하고 숙달하면 HTML의 모양을 정밀하게 제어할 수 있어 CSS를 강력하고 유지보수하기 쉽게 만들 수 있습니다. 즐거운 스타일링 되세요!

결과

• “Outside div” → 녹색이 아님 ( <div> 안에 있지 않음)
• “Inside div” → 녹색 ( <div> 안에 있음)

더 많은 예시

내비게이션 안의 링크 대상

nav a {
  color: white;
  text-decoration: none;
}

특정 클래스 내부의 단락 대상

.box p {
  font-size: 14px;
}

더 깊은 중첩

div ul li {
  list-style: square;
}

<div> 안의 <ul> 안의 <li> 요소를 대상으로 합니다.

선택자 결합

정밀한 선택을 위해 다양한 선택자 유형을 결합할 수 있습니다.

요소 내부의 클래스

div .highlight {
  background-color: yellow;
}

<div> 내부에 클래스 highlight가 있는 요소를 대상으로 합니다.

클래스가 있는 요소

p.highlight {
  color: red;
}

클래스 highlight가 있는 <p> 요소를 대상으로 합니다 (p와 .highlight 사이에 공백이 없습니다).

요소 내부의 ID

section #special {
  font-weight: bold;
}

선택자 우선순위 (특이성)

간단한 규칙: 더 구체적인 선택자가 승리합니다.

우선순위 순서 (낮음 → 높음)

1. 요소 선택자 (p)
2. 클래스 선택자 (.highlight)
3. ID 선택자 (#special)

예시

<p id="intro" class="text">Hello</p>

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

결과: 텍스트는 빨간색이며, ID 선택자가 가장 높은 우선순위를 가지기 때문입니다.

빠른 기억법

• ID는 클래스보다 우선합니다
• 클래스는 요소보다 우선합니다
• 더 구체적인 것이 덜 구체적인 것을 이깁니다

실용적인 예시

예제 1 – 간단한 블로그 포스트

/* All paragraphs */
p {
  line-height: 1.6;
  color: #333;
}

/* Main heading */
h1 {
  font-size: 36px;
  color: #000;
}

/* Highlighted quotes */
.quote {
  background-color: #f0f0f0;
  border-left: 4px solid blue;
  padding: 10px;
}

/* Author section */
#author {
  font-style: italic;
  color: gray;
}

예제 2 – 내비게이션 메뉴

/* Style all nav links */
nav a {
  color: white;
  text-decoration: none;
  padding: 10px;
}

/* Active link */
.active {
  background-color: blue;
}

예제 3 – 카드 레이아웃

/* All cards */
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
}

/* Card titles */
.card h2 {
  color: #333;
  margin-bottom: 10px;
}

/* Card paragraphs */
.card p {
  color: #666;
  line-height: 1.5;
}

전후 예시

HTML

<h1>My Website</h1>
<p>Welcome to my site.</p>
<p class="important">This is important!</p>

CSS 적용 전 (스타일 없음)

My Website
Welcome to my site.
This is important!

CSS 적용 후

h1 {
  color: blue;
  font-size: 32px;
}

p {
  color: gray;
}

.important {
  color: red;
  font-weight: bold;
}

결과

• “My Website” → 파란색, 32 px
• “Welcome to my site.” → 회색
• “This is important!” → 빨간색, 굵게

빠른 참고

일반 초보자 실수

1. 클래스에 점(.)을 빼먹기

/* Wrong */
highlight {
  color: red;
}

/* Right */
.highlight {
  color: red;
}

2. ID에 해시(#)를 빼먹기

/* Wrong */
header {
  width: 100%;
}

/* Right */
#header {
  width: 100%;
}

3. 여러 요소에 ID 사용하기

<div id="box">Box 1</div>
<div id="box">Box 2</div>

ID는 고유해야 합니다; 반복되는 요소에는 클래스를 사용하세요.

요약

• CSS 선택자는 HTML 요소를 스타일링하기 위해 대상화하는 방법입니다.
• 주요 유형
  • 요소 → p (모든 단락)
  • 클래스 → .highlight (해당 클래스를 가진 요소)
  • ID → #special (고유한 하나의 요소)
  • 그룹 → h1, h2, h3 (여러 선택자)
  • 자손 → div p (div 안의 p)
• 우선순위: ID > Class > Element
• 기억하세요
  • 클래스에는 .을 사용하세요.
  • ID에는 #을 사용하세요.
  • 자손 선택자에는 공백을 사용하세요.
  • 그룹 선택자에는 쉼표를 사용하세요.

선택자는 CSS의 기본입니다. 이를 마스터하면 어떤 것이든 스타일링할 수 있습니다!