lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

webLightBasicChapter2Title

lesson14Title

lesson15Title

lesson16Title

lesson17Title

webLightBasicChapter1Title

webLightBasicChapter3Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />
    <title>CSS 선택자 예제</title>
  </head>

  <body>
    <div id="header">
      <h1>페이지 제목</h1>
    </div>
    <p class="highlight">이 단락은 하이라이트 클래스를 가집니다.</p>
    <ul>
      <li>항목 1</li>
      <li>항목 2</li>
      <li>항목 3</li>
    </ul>
  </body>
</html>

# 선택자(Selector): 스타일 적용 대상 지정

`CSS 선택자`(Selector)는 아래와 같이 다양한 방식으로 HTML 요소를 선택합니다.

<br />

**전체 선택자(Universal Selector)**: `*` 기호를 사용하여 모든 HTML 요소 선택

```css title="CSS"
* {
  color: blue; /* 모든 HTML 요소의 글자색을 파란색으로 지정 */
}
```

<br />

**요소 선택자(Element Selector)**: HTML 태그 이름을 사용해 해당 태그를 가진 HTML 요소 선택

```css title="CSS"
p {
  font-size: 16px; /* 모든 p 태그의 글자 크기를 16px로 지정 */
}
```

<br />

**클래스 선택자(Class Selector)**: `.class` 형식으로 클래스 이름을 사용해 특정 클래스를 가진 HTML 요소 선택

```css title="CSS"
.highlight {
  background-color: yellow; /* highlight 클래스를 가진 HTML 요소의 배경색을 노란색으로 지정 */
}
```

<br />

**ID 선택자(ID Selector)**: `#id` 형식으로 특정 ID를 가진 HTML 요소 선택

```css title="CSS"
#header {
  font-weight: bold; /* header ID를 가진 HTML 요소의 글자를 굵게 지정 */
}
```

<br />

**하위 선택자(Descendant Selector)**: 요소 안에 중첩된 하위 요소 선택

```css title="CSS"
ul li {
  list-style: circle; /* ul 태그 안에 있는 li 태그를 선택해 목록 스타일을 원형으로 지정 */
}
```

<br />

## HTML & CSS 활용 예시

다음은 HTML과 CSS를 함께 사용한 예시입니다.

```html title="HTML"
<body>
  <p class="my-class">이 HTML 요소는 `p` 태그를 사용하고 `my-class` 클래스를 가지고 있습니다.</p>
  <h1 id="my-id">이 HTML 요소는 `h1` 태그를 사용하고 `my-id` ID를 가지고 있습니다.</p>
</body>
```

```css title="CSS"
p {
  color: red;
}

.my-class {
  background-color: blue;
}

#my-id {
  font-size: 20px;
}
```

이 CSS는 다음과 같이 출력됩니다.

(빨간색 글자) 이 HTML 요소는 `p` 태그를 사용하고 `my-class` 클래스를 가지고 있습니다.
(파란색 배경) 이 HTML 요소는 `h1` 태그를 사용하고 `my-id` ID를 가지고 있습니다.

다음 수업에서 고급 선택자 구성 방법을 알아보겠습니다.