HTML CSS

CSS 선택자 (기본 선택자)

jiyoon12 2025. 5. 29. 12:29

1. CSS 선택자란?

  • CSS 선택자는 HTML 문서에서 스타일을 적용하고 싶은 특정 요소를 "선택"하는 도구입니다. 마치 가게에서 물건을 고를 때 "이거 주세요!"라고 손으로 가리키는 것처럼, 선택자는 "이 요소에 스타일을 입히고 싶어요!"라고 CSS에게 알려주는 역할을 합니다.
  • 예를 들어, HTML에 <p> 태그가 여러 개 있을 때, "모든 문단을 파란색으로 만들자"거나 "특정 클래스가 붙은 문단만 굵게 하자" 같은 작업을 선택자가 가능하게 해줍니다
  • <h1> 태그를 선택해서 제목을 크게 만들기.
  • .warning 클래스를 가진 요소를 빨간색으로 강조하기.
  • #header라는 ID를 가진 부분에 배경색 추가하기.

선택자의 중요성

  • 웹 페이지의 디자인과 레이아웃을 제어하는 첫 단계.

 

기본 문법

  • 선택자 { 속성: 값; } 형태

 

기본 선택자 정리

 

 

 

2. 선택자의 종류

 

2.1 전체 선택자 ( * )

전체 선택자는 HTML 문서에 있는 모든 요소를 한꺼번에 선택합니다. 이름 그대로 "모두 다!"라는 뜻이에요. CSS에서 * 기호를 사용하며, 특정 태그나 조건 없이 페이지의 모든 요소에 스타일을 적용할 때 유용합니다.

  • 주로 초기화 작업에 사용됩니다. 예를 들어, 브라우저마다 기본적으로 설정된 여백(margin)이나 패딩(padding)이 달라서 디자인에 혼란이 올 수 있는데, 이걸 한 번에 없애줄 때 많이 써요.
* {
    margin: 0;
    padding: 0;
}

 

 

2.2 태그 선택자

태그 선택자는 HTML 태그 이름을 직접 써서 해당 태그를 가진 모든 요소를 선택합니다. 예를 들어, <p> 태그를 선택하면 페이지에 있는 모든 문단에 스타일을 줄 수 있어요.

  • 특정 "종류"의 요소를 한꺼번에 다루고 싶을 때 유용합니다.
p {
    color: blue;
    font-size: 16px;
}

: 이 코드는 모든 <p> 태그의 글자를 파란색으로 만들고, 크기를 16픽셀로 설정합니다.

 

 

2.3 클래스 선택자 (.class)

클래스 선택자는 HTML 요소의 class 속성을 기준으로 선택합니다. . 뒤에 클래스 이름을 붙여서 사용하며, 같은 클래스를 가진 여러 요소에 동시에 스타일을 적용할 수 있어요.

  • 개발자가 직접 요소에 "이름표"를 붙이는 셈이라, 원하는 대상을 더 구체적으로 골라낼 수 있습니다.
<p class="highlight">중요한 문단</p>
<div class="highlight">중요한 박스</div>

.highlight {
    background-color: yellow;
    font-weight: bold;
}

 

 

2.4 ID 선택자 (#id)

ID 선택자는 HTML 요소의 id 속성을 기준으로 선택합니다. # 뒤에 ID 이름을 붙여서 사용하며, ID는 문서에서 고유해야 하므로 단 하나의 요소만 선택합니다.

  • 클래스와 달리 "이거 하나만!"이라는 특수한 상황에 쓰입니다.
<div id="header">헤더 영역</div>

#header {
    background-color: gray;
    padding: 20px;
}

 

  • 실습하기 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>기본 선택자 실습</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        /* 전체 초기화 */
      }
      h1 {
        font-size: 24px;
      }
      .content {
        color: purple;
      }

      #special-box {
        background-color: yellow;
        border: 2px solid blue;
      }

    </style>
    

  </head>
  <body>
    <h1 class="title">제목</h1>
    <p class="content">내용1</p>
    <p class="content">내용2</p>
    <div id="special-box">특별한 박스</div>
  </body>
</html>

 

 

  • 도전 문제

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 문제 1: 모든 요소 글자 색상 회색 */
      * {
        color: gray;
      }

      /* 문제 2: 모든 <span> 태그 배경색 연한 파란색 */
        span {
            background-color: lightblue;
        }

      /* 문제 3: note 클래스 스타일링 */
      .note {
        color: brown;
        font-size: 30px;
      }

      /* 문제 4: main-content ID 를 선택해서 원하는 대로 스타일링 */
      #main-content {
        color: palevioletred;

      }

      /* 문제 5: 모든 <header> 태그를 선택해서 원하는 대로 스타일링 */
        header {
            font-size: 30px;
            text-align: center;
            border: 5px solid lightseagreen ;
        }
    </style>
  </head>
  <body>
    <header>헤더 영역입니다</header>
    <h2>제목입니다</h2>
    <span class="note">중요한 메모입니다</span>
    <p>일반 문단입니다</p>
    <span class="note">또 다른 메모입니다</span>
    <section id="main-content">메인 콘텐츠입니다</section>
  </body>
</html>