HTML & CSS

Chapter 2-3 선택자 기본편(CSS)

Chansman 2025. 3. 31. 10:20

✅ CSS 기본 선택자 완벽 정리 (초보자 필독!)

안녕하세요 여러분! 오늘은 CSS에서 가장 기초적이고 중요한 선택자(selector)에 대해 쉽게 정리해 보겠습니다. 👩‍💻✨

📌 선택자(Selector)란? CSS에서 특정 HTML 요소를 선택해서 스타일을 적용하기 위한 방식을 의미합니다. 선택자를 어떻게 입력하느냐에 따라 스타일이 적용될 요소가 결정됩니다.

💡 CSS 선택자 주요 유형

  • ✅ 전체 선택자
  • ✅ 태그 선택자
  • ✅ 클래스 선택자
  • ✅ 아이디 선택자
  • ✅ 그룹 선택자

🚩 1. 전체 선택자 (Universal Selector)

  • 의미: 웹 문서 내 모든 요소를 선택
  • 사용 기호: * 예시:

{ margin: 0; padding: 0; } 👉 모든 요소의 여백과 패딩을 초기화할 때 주로 사용

🚩 2. 태그 선택자 (Type Selector)

  • 의미: 특정 HTML 태그로 작성된 모든 요소 선택
  • 사용 기호: 태그 이름 예시: p { color: blue; font-size: 16px; } 👉 모든 문단(p)의 글자색과 크기를 바꿀 때 사용

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

  • 의미: 특정 클래스 값이 지정된 모든 요소 선택
  • 사용 기호: .클래스명 예시: .highlight { background-color: yellow; } 👉 하이라이트 효과 등 특정 스타일을 반복해서 적용할 때 유용

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

  • 의미: 특정 아이디 값이 지정된 요소 선택
  • 사용 기호: #아이디명 예시: #header { background-color: #333; color: white; } 👉 고유한 영역에만 적용될 스타일 정의 시 사용

🚩 5. 그룹 선택자 (Group Selector)

  • 의미: 여러 유형의 선택자를 동시에 선택
  • 사용 기호: 선택자, 선택자, 선택자... 예시: h1, h2, h3 { font-family: Arial, sans-serif; color: green; } 👉 비슷한 스타일을 여러 태그에 동시에 적용할 때 사용

📊 선택자 유형 및 사용 기호 한눈에 정리!

선택자 유형 의미 사용 기호

전체 선택자 모든 요소 선택 *
태그 선택자 특정 태그 요소 선택 태그명
클래스 선택자 특정 클래스 요소 선택 .클래스명
아이디 선택자 특정 아이디 요소 선택 #아이디명
그룹 선택자 여러 선택자 동시 선택 선택자, 선택자

🧠 자주 하는 실수 & 고급 팁 📍 자주 하는 실수

  • 클래스와 아이디를 혼동: 클래스는 반복 사용 가능, 아이디는 고유한 값으로 한 번만 사용 가능

EX)

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible"
        contect="IE=edge"
        >
        <style>
            /* 기존적으로는 쓰여진순서기준으로 마지막에쓴 값이 적용되는게맞지만 아래의기준을 따른다.
             선택자 우선순위: 쓰여진 순서랑 관계없이 적용되는 순위
            1. 아이디 선택자
            2. 클래스 선택자
            3. 태그 선택자 
            */

            *{
                color: red;
            }
            li{
                color: blue;
            }
            .hiphop{
                color: purple;
            }
            li.hiphop{
                color: orange;
            }
            li#belly{
                color: purple;
            }
            h2, p, li{
                color: yellow;
            }

 

/* 기존적으로는 쓰여진순서기준으로 마지막에쓴 값이 적용되는게맞지만 아래의기준을 따른다.
             선택자 우선순위: 쓰여진 순서랑 관계없이 적용되는 순위
            1. 아이디 선택자
            2. 클래스 선택자
            3. 태그 선택자
            */

 

📍 고급 팁

  • 클래스 선택자를 활용하면 유지보수가 용이
  • 아이디 선택자는 고유한 영역에만 제한적으로 사용

✨ 마무리 요약 & 복습 포인트

  • [✅] 전체 선택자(*)는 모든 요소 선택
  • [✅] 태그 선택자는 태그명을 그대로 사용
  • [✅] 클래스 선택자(.)는 여러 요소에 반복 사용 가능
  • [✅] 아이디 선택자(#)는 고유한 요소에만 사용
  • [✅] 그룹 선택자는 여러 선택자를 쉼표로 연결하여 사용

여러분의 CSS 공부를 응원합니다! 💪😄