[새싹x코딩온] CSS 완벽 정리 2부 - 선택자 종류와 활용법

CSS 완벽 정리 2부 - 선택자 종류와 활용법!

웹사이트에서 HTML 요소에 스타일을 적용하려면 CSS 선택자(Selector) 를 잘 활용해야 합니다.
CSS 선택자는 특정 HTML 요소를 선택하여 원하는 스타일을 적용하는 역할을 합니다.

이 글에서는 기본 선택자부터 복합 선택자, 가상 클래스, 가상 요소, 속성 선택자까지
자세한 설명과 예제 코드와 함께 알아보겠습니다. 😊

---

✅ 1. CSS 선택자란?

✔ CSS 선택자(Selector)란?

• CSS에서 특정 HTML 요소를 찾아서 스타일을 적용하는 기능
• 효율적인 스타일 적용과 유지보수를 위해 필수적인 개념

✔ CSS 기본 문법

선택자 {
  속성: 값;
}

 

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

 

✔️ 설명

• h1 → 선택자 (어떤 요소에 적용할지 결정)
• color: blue; → 속성(Property) (적용할 스타일 종류)
• font-size: 24px; → 값(Value) (적용할 속성의 구체적인 값)

---

✅ 2. CSS 선택자 – 기본 선택자

CSS에는 가장 많이 사용하는 기본 선택자 4가지가 있습니다.

1) 전체 선택자 (*)

💡 모든 HTML 요소에 스타일을 적용할 때 사용

* {
  margin: 0;
  padding: 0;
}

 

✔️ 설명

• 페이지 내 모든 요소의 기본 여백(margin, padding)을 제거
• 기본 스타일을 초기화할 때 유용

---

2) 태그(요소) 선택자

💡 특정 HTML 태그에 스타일을 적용

p {
  color: green;
  font-size: 18px;
}

 

✔️ HTML 코드

<p>이 문장은 초록색으로 표시됩니다.</p>
<p>모든 <p> 태그에 동일한 스타일이 적용됩니다.</p>

 

✔️ 결과: 모든 <p> 태그가 초록색, 18px 크기로 표시

태그(요소) 선택자 결과

 

---

3) 클래스 선택자 (.)

💡 같은 스타일을 여러 요소에 적용할 때 사용

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

 

✔️ HTML 코드

<p class="text">이 문장은 빨간색이며 볼드체입니다.</p>
<p>이 문장은 기본 스타일입니다.</p>

 

✔️ 결과: class="text"을 가진 요소만 스타일 적용

클래스 선택자 (.) 결과

 

---

4) ID 선택자 (#)

💡 특정 하나의 요소에만 스타일 적용 (ID는 유일해야 함)

#main-title {
  text-align: center;
  font-size: 30px;
}

 

✔️ HTML 코드

 

<h1 id="main-title">이 문장은 가운데 정렬됩니다.</h1>

✔️ 결과: id="main-title" 요소만 가운데 정렬 및 크기 30px 적용

ID 선택자 (#) 결과

🚫 주의:

• ID는 한 페이지에서 유일하게 사용해야 함
• 여러 요소에 동일한 ID 사용 ❌ (스타일 충돌 가능)

---

✅ 3. CSS 선택자 – 복합 선택자

복합 선택자는 여러 개의 조건을 조합하여 특정 요소를 선택하는 방법입니다.

1) 일치 선택자 (A.B)

💡 특정 태그 + 특정 클래스가 적용된 요소만 선택

p.notice {
  color: red;
}

 

✔️ HTML 코드

<p class="notice">이 문장만 빨간색이 됩니다.</p>
<p>이 문장은 기본 스타일입니다.</p>

✔️ 결과: 

일치 선택자 결과

---

2) 자식 선택자 (>)

💡 직계 자식 요소만 선택

div > p {
  color: blue;
}

 

✔️ HTML 코드

<div>
  <p>이 문장은 파란색입니다.</p>
  <section>
    <p>이 문장은 스타일이 적용되지 않습니다.</p>
  </section>
</div>

✔️ 결과: <div>의 직계 자식 <p> 태그만 스타일 적용

자식 선택자 (>) 결과

---

3) 후손 선택자 (공백)

💡 하위 요소 전체를 선택

div p {
  font-size: 18px;
}

✔️ HTML 코드

<div>
  <p>이 문장은 폰트 18px 입니다..</p>
  <section>
    <p>이 문장도 폰트 크기가 18px 적용됩니다.</p>
  </section>
</div>

✔️ 결과: <div> 내부에 있는 모든 <p> 태그에 스타일 적용

후손 선택자 (공백) 결과

---

4) 인접 형제 선택자 (+)

💡 바로 다음 형제 요소만 선택

h1 + p {
  color: orange;
}

 

✔️ HTML 코드

 

<h1>제목</h1>
<p>이 문장만 주황색이 됩니다.</p>
<p>이 문장은 적용 안 됨</p>

 

✔️ 결과: <h1> 바로 다음 <p> 태그만 주황색

인접 형제 선택자 (+) 결과

---

✅ 4. CSS 선택자 – 가상 클래스

 

CSS 가상 클래스는 3가지 유형으로 나눌 수 있습니다.

 

가상 클래스 유형	설명	대표 선택자
사용자 행동 기반 선택자	마우스 오버, 클릭, 포커스 등의 동작에 반응	:hover, :active, :focus, :visited
요소의 구조 기반 선택자	특정 위치(첫 번째, 마지막, N번째 요소) 선택	:first-child, :last-child, :nth-child(n), :nth-of-type(n)
부정 선택자	특정 요소를 제외하고 스타일 적용	:not(선택자)

---

📌 1) 사용자 행동에 따라 스타일이 변하는 가상 클래스 선택자

사용자가 요소와 상호작용하면(:hover, :active, :focus, :visited) 스타일이 변화하는 선택자입니다.

✅ (1) :hover – 마우스를 올렸을 때 스타일 변경

사용자가 특정 요소 위에 마우스를 올리면 스타일이 변경됩니다.

 

button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: darkblue;
}

 

✔️ HTML 코드

 

<button>마우스를 올려보세요!</button>

 

✔️ 결과:

• 기본 버튼 색상은 파란색
• 마우스를 올리면 버튼이 어두운 파란색(darkblue)으로 변경됨

See the Pen Untitled by KIM (@JINKYOUNG) on CodePen.

🚀 Tip!

• transition: background-color 0.3s ease; → 부드러운 색상 변경 효과 추가
• :hover는 모든 요소에 적용 가능 (예: <a>, <div>, <p> 등)

---

✅ (2) :active – 버튼 클릭 시 스타일 변경

사용자가 버튼을 클릭하는 동안 스타일이 변합니다.

 

button:active {
  background-color: red;
  transform: scale(0.95);
}

 

✔️ 결과:

• 클릭하는 동안 배경색이 빨간색으로 변경
• 버튼 크기가 살짝 작아짐 (0.95배 축소)

See the Pen Untitled by KIM (@JINKYOUNG) on CodePen.

 

🚀 Tip!

• :active는 클릭한 상태에서만 적용되며, 클릭을 떼면 원래 스타일로 돌아감

---

✅ (3) :focus – 입력 필드에 포커스될 때 스타일 변경

사용자가 입력 필드를 클릭하면 테두리 색상이 변경됨

 

input {
  padding: 8px;
  border: 2px solid gray;
  outline: none;
}

input:focus {
  border-color: blue;
  box-shadow: 0 0 5px blue;
}

 

✔️ HTML 코드

 

<input type="text" placeholder="이곳을 클릭해보세요!">

✔️ 결과:

• 기본적으로 회색 테두리
• 클릭하면 파란색 테두리 + 블루 그림자 효과 추가

See the Pen Untitled by KIM (@JINKYOUNG) on CodePen.

🚀 Tip!

• outline: none; → 기본 브라우저 스타일 제거 (테두리 깜빡임 방지)

---

✅ (4) :visited – 사용자가 방문한 링크 스타일 변경

사용자가 클릭하여 방문한 적이 있는 링크만 특정 스타일 적용

a {
  color: blue;
  text-decoration: none;
}

a:visited {
  color: purple;
}​

✔️ HTML 코드

<a href="https://www.naver.com">네이버 방문하기</a>
<a href="https://www.google.com">구글 방문하기</a>​

✔️ 결과:

• 처음에는 파란색 링크
• 방문한 링크는 보라색으로 변경됨

See the Pen Untitled by KIM (@JINKYOUNG) on CodePen.

 

🚫 주의:

• 보안상의 이유로 :visited는 색상 변경만 가능 (배경색 변경 불가)

---

📌 2) 요소의 위치에 따라 스타일이 변하는 가상 클래스 선택자

HTML 문서에서 특정 위치(첫 번째, 마지막, N번째 요소 등)에 있는 요소만 선택하여 스타일을 적용할 때 사용합니다.

✅ (1) :first-child – 첫 번째 자식 요소 선택

부모 요소의 첫 번째 자식 요소에만 스타일 적용

p:first-child {
  color: red;
  font-weight: bold;
}

✔️ HTML 코드

<div>
  <p>첫 번째 문장 (빨간색 적용)</p>
  <p>두 번째 문장</p>
</div>

✔️ 결과:

See the Pen Untitled by KIM (@JINKYOUNG) on CodePen.

---

✅ (2) :last-child – 마지막 자식 요소 선택

부모 요소의 마지막 자식 요소만 선택

 

p:last-child {
  color: blue;
  font-style: italic;
}

 

✔️ HTML 코드

<div>
  <p>첫 번째 문장</p>
  <p>마지막 문장 (파란색 + 기울어짐 적용)</p>
</div>

✔️ 결과:

See the Pen Untitled by KIM (@JINKYOUNG) on CodePen.

---

✅ (3) :nth-child(n) – N번째 자식 요소 선택

부모 요소의 N번째 자식 요소만 스타일 적용

li:nth-child(2) {
  color: green;
}

✔️ HTML 코드

<ul>
  <li>첫 번째 아이템</li>
  <li>두 번째 아이템 (초록색 적용)</li>
  <li>세 번째 아이템</li>
</ul>

✔️ 결과:

See the Pen Untitled by KIM (@JINKYOUNG) on CodePen.

 

---

📌 3) 특정 요소를 제외하고 스타일 적용 – :not(선택자)

✅ 클래스가 special이 아닌 모든 <p> 태그에 스타일 적용

p:not(.special) {
  color: gray;
}​

✔️ HTML 코드

<p class="special">이 문장은 스타일 적용 안 됨</p>
<p>이 문장은 회색으로 표시됨</p>

✔️ 결과:

See the Pen Untitled by KIM (@JINKYOUNG) on CodePen.

 

---

✅ 5. CSS 선택자 – 가상 요소 (::before, ::after)

가상 요소는 HTML에 실제로 존재하지 않는 요소를 추가할 때 사용합니다.

h1::before {
  content: "🔥 ";
}

h1::after {
  content: " 💡";
}

✔️ HTML 코드

<h1>중요한 내용</h1>

 

 

✔️ 결과: 🔥 중요한 내용 💡

See the Pen Untitled by KIM (@JINKYOUNG) on CodePen.

---

✅ 6. CSS 선택자 – 속성 선택자

속성 선택자는 특정 속성을 가진 요소만 선택하여 스타일을 적용합니다.

input[type="password"] {
  background-color: lightgray;
}

 

 

✔️ HTML 코드

<input type="password" />

 

✔️ 결과: 

See the Pen Untitled by KIM (@JINKYOUNG) on CodePen.

---

🎯 정리 – CSS 선택자 활용법

✔ 기본 선택자 → 전체(*), 태그, 클래스(.), ID(#)
✔ 복합 선택자 → 자식(>), 후손( ), 형제(+) 

 

✔ 가상클래스

- 사용자 행동 선택자 → :hover, :active, :focus, :visited
- 요소 위치 선택자 → :first-child, :last-child, :nth-child(n)
- 부정 선택자 → :not(선택자)

📌 실제 프로젝트에서는 :hover, :focus, :nth-child()를 가장 많이 사용합니다! 🚀

✔ 가상 요소 → ::before, ::after
✔ 속성 선택자 → [속성], [속성^="값"], [속성$="값"]

📌 실제 프로젝트에서는 태그 선택자보다 "클래스 선택자"를 주로 사용합니다! 🚀