lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

webIntroCssChapter3Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter4Title

webIntroCssChapter5Title

# 결합자(Combinator)

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

아래 예시를 통해 결합자를 분석해 보겠습니다.

<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는 다음과 같이 적용됩니다.

- *my-class* : 해당 클래스를 가진 요소의 글자색은 빨간색입니다.

- *#my-id* : 해당 ID를 가진 요소의 글자 크기는 24px입니다.

- *p + h1* : `<p>` 바로 다음에 오는 `<h1>`은 배경색이 연한 파란색입니다.

- *h1.your-class* : h1 태그 중 클래스가 `your-class`인 요소의 글자 두께는 굵은 글씨체입니다.

<br />

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