lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

webIntroCssChapter3Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter4Title

webIntroCssChapter5Title

<!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>
    <h1 id="my-id" class="my-class">제목 1 - my-id와 my-class를 가짐</h1>
    <p class="my-class">내용 - my-class를 가짐</p>
    <h1 class="your-class">제목 1 - your-class를 가짐</h1>
    <p id="your-id" class="your-class">내용 - your-id와 your-class를 가짐</p>
  </body>
</html>

# 결합자(Combinator)

결합자는 CSS 선택자를 결합하여 보다 복잡한 선택자를 생성하는 방법입니다.

이전에 배운 결합자를 복습해 보겠습니다.

<br />

1. **타입 결합자**: 여러 타입의 요소를 선택합니다.

   - 예: `p, h1`

   ```css title="CSS"
   p,
   h1 {
     font-weight: bold;
   }
   ```

2. **클래스 결합자**: 여러 클래스를 가진 요소를 선택합니다.

   - 예: `.my-class, .your-class`

   ```css title="CSS"
   .my-class,
   .your-class {
     color: blue;
   }
   ```

3. **인접 형제 결합자**: 한 요소 바로 다음의 형제 요소를 선택합니다.

   - 예: `p + h1`

   ```css title="CSS"
   p + h1 {
     margin-top: 10px;
   }
   ```

4. **일반 형제 결합자**: 한 요소 뒤의 모든 형제 요소를 선택합니다.
   - 예: `p ~ h1`
   ```css title="CSS"
   p ~ h1 {
     text-decoration: underline;
   }
   ```

<br />

## 결합자 코드 예시

```html title="HTML"
<body>
  <p>첫 번째 문단</p>
  <h1>제목 1</h1>
  <h1 class="my-class">제목 2</h1>
  <p class="your-class">두 번째 문단</p>
  <div id="my-id">내 ID</div>
  <div id="your-id">너의 ID</div>
</body>
```

```css title="CSS"
.my-class {
  color: red;
}

#my-id {
  font-size: 24px;
}

p + h1 {
  background-color: lightblue;
}

h1.your-class {
  font-weight: bold;
}

#your-id {
  text-decoration: underline;
}
```

이 예시에서 CSS는 다음과 같이 적용됩니다.

- 모든 `<p>` 및 `<h1>` 요소는 굵게 표시됩니다.

- `my-class`와 `your-class` 클래스를 가진 요소는 파란색으로 표시됩니다.

- `my-id` 및 `your-id` ID를 가진 요소의 글꼴 크기는 18px입니다.

- `<p>` 바로 다음에 오는 `<h1>`은 위쪽 여백이 10px입니다.

- `<p>` 뒤에 있는 모든 `<h1>`은 밑줄이 있습니다.

<br />

코드의 별표로 강조된 부분을 따라 입력해 보세요.