능히 할수있다!

[CSS]연결자(Combinators) 본문

STUDY/HTML, CSS

[CSS]연결자(Combinators)

능히버섯와나 2023. 6. 5.

 

CSS 연결자는 결합자 또는 복합 선택자 등으로도 불리며,

두개의 선택자를 사용할 때 선택자 간의 관계를 설명하는 역할을 한다.

크게 4가지(자식/후손 선택자와, 일반/인접 형제 선택자)로 나뉜다.

 

 

∙자식 선택자(Child Selector)

    '선택자1 > 선택자2'

    - 선택자1(자신)보다 한 단계 아래 존재하는 선택자2(자식)를 선택

div > p{
     color: blue;
     text-align: center;
     }
/* div의 자식(자손)요소 중 p요소를 선택함 */

 

∙후손 선택자(Descendant Selector)

    '선택자1  선택자2'

    - 선택자1(자신)보다 아래 존재하는 모든 선택자2(후손)을 선택

div p{
     color: red;
     background-color: yellow;
     }
/* div요소 내 모든 p요소를 선택함 */

 

 

 

예시를 통해 '자식 선택자'와 '후손 선택자'의 차이를 확인해 보려고 한다.

우선 아래와 같이 '자식 선택자(>)'를 이용해 코드를 작성한 뒤 결과를 확인해보면,

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Child Selector</title>
    <style>
      div > p{
              color: blue;
              font-weight: bold;
              font-size: 20px;
              }
    </style>
  </head>
  <body>
    <div>
      <p>first</p>
      <p>second</p>
    </div>
    <div>
      <span><p>thrid</p></span>
      <p>fourth</p>
    </div>
      <p>fifth</p>
  </body>
</html>

 

위와 같이 <div>아래 있으나 <span>을 거쳐 존재하는 후손요소 <p>와

<div>의 바깥에 존재하는 <p>는 효과가 적용되지 않은 모습이다.

 

 

 

같은 코드를 선택자만 '후손 선택자( )'로 바꾸어 다시 적용해보면,

위에서는 적용되지 않았던 후손요소를 포함하여 효과가 적용 된 것을 볼 수 있다.

 

 

 

 

∙인접 형제 선택자(Adjacent Sibling Selector)

    '선택자1 + 선택자2'

    - 선택자1의 바로 뒤에 있는 선택자2를 선택하며, 선택자1과 선택자2 사이에 다른 요소가 있을 시 선택되지 않음

div + p{
     color: yellow;
     background-color: blue;
     }
/* div요소의 바로 뒤에 있는 p요소를 선택함 */

 

∙일반 형제 선택자(General Sibling Selector)

    '선택자1 ~ 선택자2'

    - 선택자1의 뒤에 있는 모든 선택자2를 선택하며, 선택자1과 선택자2 사이에 다른 요소가 있어도 선택 함

div ~ p{
     background-color: blue;
     font-size: 45px;
     }
/* div요소의 뒤에 있는 모든 p요소를 선택함 */

 

 

또 다시 예시를 통해 '인접 형제 선택자'와 '일반 형제 선택자'의 차이를 확인해보자

먼저 '인접 형제 선택자(+)'를 이용하여 결과를 확인해보면,

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Adjacent Sibling Selector</title>
    <style>
      div + p{
              color: red;
              font-weight: bold;
              font-size: 20px;
              }
            h3{
              color: blue;
              }
    </style>
  </head>
  <body>
   /* 첫번째 div */
    <div>
      <p>Monday</p>
      <p>Tuesday</p>
    </div>
      <h3>No Holiday</h3>
      <p>Wednesday</p>
      <p>Thursday</p>
    /* 두번째 div */
    <div>
      <p>Friday</p>
    </div>
      <p>Saturday</p>
      <p>Sunday</p>
  </body>
</html>

위의 문서 내 첫번째 <div>가 등장한 후 <p>가 등장하지만 <h3>가

가로막고 있어 효과가 적용되지 않았고,

두번째 <div>가 등장한 후 바로 뒤에 있는 <p>값에 해당하는

'Saturday'는 효과가 적용된 모습을 볼 수 있다.

 

 

같은 코드를 선택자만 '일반 형제 선택자(~)'로 적용시킨 모습.

태그 여부에 관계없이 <div>뒤에 오는 모든<p>에게  효과가 적용 된 것을 볼 수 있다.

 

형제 선택자는 특정선택자 자신의 '뒤에' 오는것이 공통 된 조건이기 때문에

특정선택자 자신의 '내부에' 포함된 태그는 선택되지 않으며,

그것이 자식/자손 선택자와 다른 점이다.

 

'STUDY > HTML, CSS' 카테고리의 다른 글

[CSS]container와 wrapper의 차이  (0) 2023.06.06
[CSS]선택자(Selector)의 종류-2(속성)  (0) 2023.06.05
[CSS]선택자(Selector)의 종류-1(전체, 태그, 클래스, ID)  (0) 2023.06.05
[HTML]<img> src 속성  (0) 2023.06.05
생활코딩 WEB1 - HTML강좌 속 태그 정리  (0) 2023.06.05
'STUDY/HTML, CSS' Related Articles more
Comments