CSS combination
CSS는 HTML 요소(elements)의 스타일을 적용하는 역할을 한다. 이 때 HTML 요소들을 특정할 때 선택자(selector)를 통해 해당 요소의 스타일을 지정한다.
콤비네이터는 선택자(selector) 간의 관계를 설명하는 것이다.
CSS 선택자는 둘 이상의 단순 선택자를 포함할 수 있다. 단순 선택자 사이에 결합기를 포함할 수 있다.
CSS에는 다음과 같은 네 가지 콤비네이터가 있다:
- descendant selector (space)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)
Descendant Selector(space)
descendatn selector는 지정된 요소의 하위 요소인 모든 요소와 일치한다.
다음 예제에서는 <div> 요소 내부의 모든 <p> 요소를 선택한다:
| <!DOCTYPE html> <html> <head> <style> div p { background-color: yellow; } </style> </head> <body> <h2>Descendant Selector</h2> <p>descendant selector는 지정된 요소의 하위 요소인 모든 요소와 일치합니다.</p> <div> <p>div내의 단락1.</p> <p>div내의 단락2.</p> <section><p>div내의 단락3.</p></section> </div> <p>div안이 아닌 단락4.</p> <p>div안이 아닌 단락5.</p> </body> </html> |
div요소 내 하위 요소들은 배경색이 노랑색으로 지정되며 위의 코드를 실행한 결과 화면은 아래 그림과 같다.
child selector(>)
자식 선택자는 지정된 요소의 자식인 모든 요소를 선택한다.
다음 예제에서는 <div> 요소의 하위 요소인 모든 <p> 요소를 선택한다:
| <!DOCTYPE html> <html> <head> <style> div > p { background-color: yellow; } </style> </head> <body> <h2>Child Selector</h2> <p>자식 선택자(>)는 지정된 요소의 자식인 모든 요소를 선택합니다.</p> <div> <p>div내의 단락1.</p> <p>div내의 단락2.</p> <section> <!-- not Child but Descendant --> <p>div내의 단락3.(inside a section element).</p> </section> <p>div내의 단락4.</p> </div> <p>div안이 아닌 단락4.</p> <p>div안이 아닌 단락5.</p> </body> </html> |
div > p로 div의 자식 선택자는 div요소에 배경색을 노랑색으로 설정한다. 단락1, 단락2, 단락 4는 div에 자식 선택자로 배경색이 노랑색이지만 '단락3'은 descendant이지만 child는 아니기에 배경색이 노랑색으로 설정되지 않는다. 위의 코드를 실행한 결과 화면은 아래 그림과 같다.
인접한 형제 선택자(+)
인접한 형제 선택자는 다른 특정 요소 바로 뒤에 있는 요소를 선택하는 데 사용된다.
형제 요소는 동일한 부모 요소를 가져야 하며, "인접(adjacent)"은 "즉각 따라감(immediatly following)"을 의미합니다.
다음 예제에서는 <div> 요소 바로 뒤에 배치되는 첫 번째 <p> 요소를 선택합니다:
| <!DOCTYPE html> <html> <head> <style> div + p { background-color: yellow; } </style> </head> <body> <h2>인접한 형제 선택자(Adjacent Sibling Selector)</h2> <p>+ 선택기는 다른 특정 요소 바로 뒤에 있는 요소를 선택하는 데 사용됩니다.</p> <p>다음 예제에서는 div 요소 바로 뒤에 배치되는 첫 번째 p 요소를 선택합니다:</p> <div> <p>div요소내에 단락1.</p> <p>div요소내에 단락2.</p> </div> <p>div이후에 단락3</p> <p>div이후에 단락4</p> <div> <p>div요소내에 단락5.</p> <p>div요소내에 단락6.</p> </div> <p>div이후에 단락7</p> <p>div이후에 단락8</p> </body> </html> |
div 요소 다음에 바로 인접한 p요소 '단락3'이 배경색 노랑으로 설정되는 것을 알 수 있다.
다시 div 요소 다음에 인접한 p요소 '단락7'이 배경색 노랑으로 설정되는 것을 알 수 있다. 위의 코드를 실행한 결과 화면은 아래 그림과 같다.
형제선택자(sibling selecot)(~)
일반 형제 선택wk는 지정된 요소의 다음 형제인 모든 요소를 선택한다.
다음 예제에서는 <div> 요소의 다음 형제인 모든 <p> 요소를 선택한다:
| <!DOCTYPE html> <html> <head> <style> div ~ p { background-color: yellow; } </style> </head> <body> <h2>일반 형제 선택자(General Sibling Selector)</h2> <p>일반 형제 선택기(~)는 지정된 요소의 다음 형제인 모든 요소를 선택합니다.</p> <p>단락 1.</p> <div> <p>단락 2.</p> </div> <p>단락 3.</p> <code>Some code.</code> <p>단락 4.</p> </body> </html> |
'div ~ p'는 형제 선택자로 단락3, 단락4가 형제 선택자로 배경색이 노랑색으로 설정되며 아래 그림과 같다.
CSS combinator selector
| 선택자 | 예제 | 설명 |
| element element | div p | <div> 요소 내부의 모든 <p> 요소를 선택합니다 |
| element > element | div > p | 부모가 <div> 요소인 모든 <p> 요소를 선택합니다 |
| element + element | div + p | <div> 요소 바로 뒤에 배치되는 첫 번째 <p> 요소를 선택합니다 |
| element ~ element | div ~ ul | <p> 요소 앞에 오는 모든 <ul> 요소를 선택합니다 |
지금까지 선택자의 조합으로 descendant, child, adjacent sibling, general sibling에 따라 요소의 스타일이 어떻게 적용되는지 살펴보았다.
모두 손으로 눈으로 머리로 실습하며 꼭 따라하기를 바란다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > CSS문법' 카테고리의 다른 글
| CSS pseudo-elements (1) | 2023.08.30 |
|---|---|
| CSS pseudo-classes (0) | 2023.08.29 |
| CSS 수평, 수직 정렬 (0) | 2023.08.27 |
| CSS float 예제 (0) | 2023.08.25 |
| CSS clear, clearfix 속성 (0) | 2023.08.24 |
댓글