복합 선택자(Combinators)
HTML 요소에 스타일을 적용하기 위해 CSS 선택자를 사용합니다. CSS 선택자는 요소를 선택하는 데 사용되는 패턴 또는 표현식입니다. 복합 선택자는 둘 이상의 선택자를 결합하여 특정 요소를 선택하는 방법을 제공합니다. 다섯 가지 타입의 복합 선택자인 일치(combinator), 자식(combinator), 후손(combinator), 인접 형제(combinator), 일반 형제(combinator)에 대해 알아보겠습니다.
일치(combinator)
일치 combinator는 두 개의 선택자 사이에 공백이 들어가며, 첫 번째 선택자의 모든 요소 중에 두 번째 선택자와 일치하는 요소를 선택합니다. 예를 들어, div p 선택자는 문서 내의 모든 <p> 요소를 선택합니다.
```css
div p {
color: blue;
}자식(combinator)
자식 combinator는 첫 번째 선택자의 직접적인 자식 요소 중에서 두 번째 선택자와 일치하는 요소를 선택합니다. > 기호를 사용하여 표시됩니다. 예를 들어, div > p 선택자는 <div> 요소의 직계 자식인 <p> 요소만 선택합니다.
```css
div > p {
color: blue;
}후손(combinator)
후손 combinator는 첫 번째 선택자의 하위 요소 중에서 두 번째 선택자와 일치하는 요소를 선택합니다. 일치 combinator와 동일한 기능을 수행하지만, 선택자 사이에 공백이 있는 것이 다릅니다. 예를 들어, div p 선택자는 문서 내의 모든 하위 <p> 요소를 선택합니다.
```css
div p {
color: blue;
}인접 형제(combinator)
인접 형제 combinator는 두 번째 선택자와 일치하는 요소 중에서 첫 번째 선택자의 바로 뒤에 있는 요소를 선택합니다. + 기호를 사용하여 표시됩니다. 예를 들어, h1 + p 선택자는 <h1> 요소 다음에 있는 <p> 요소만 선택합니다.
```css
h1 + p {
color: blue;
}일반 형제(combinator)
일반 형제 combinator는 두 번째 선택자와 일치하는 요소 중에서 첫 번째 선택자의 뒤에 있는 모든 요소를 선택합니다. ~ 기호를 사용하여 표시됩니다. 예를 들어, h1 ~ p 선택자는 <h1> 요소 다음에 오는 모든 <p> 요소를 선택합니다.
```css
h1 ~ p {
color: blue;
}복합 선택자를 사용하면 HTML 요소 선택을 더욱 세분화하고 특정 요소에 스타일을 적용하는 데 유용한 다양한 기능을 수행할 수 있습니다. 이를 통해 웹 페이지의 레이아웃과 디자인을 더욱 다양하게 제어할 수 있습니다.
댓글