CSS 선택자(Selector) : 자식선택자, '>'

자식선택자 (child selector) '>'

'>' 선택자는 첫 번째 요소의 바로 아래 자식들을 선택함

❗️주의 : 자식의 자식들은 선택되지 않는다

 

예제 홈페이지의 top-header 부분만 간단히 구현 해 보자.

 

예제

하나은행 홈페이지  header

 

 

그림처럼 top-header 부분을 1, 2, 3 번 으로 나누어 생각한다.

 

 

 

HTML 코드

<div id="top-header">
  <div class="left">
    <a href="">기업뱅킹</a>
    <a href="">하나카드</a>
    <a href="">은행소개</a>
  </div>
  <div class="right">
    <div>
      <a href="">로그인</a>
      <a href="">인증센터</a>
    </div>
    <div>
      <a href="">
        Language
        <i class="fa fa-solid fa-angle-down"></i>
      </a>
    </div>
  </div>
</div>
<div id="nav-header">
</div>

 

CSS 코드

#top-header .left {
  float: left;
}

#top-header .right {
  float: right;
}

 

 

우선 

• 1번에 class="right" 를 부여하여 float: left 
• 2, 3 번을 묶어 class="right"를 부여하여 float: right

하였더니 이런 화면이 나왔다.

 

 

display: inline-block 적용 전

 

2, 3번(div)의 display 속성이 block 이기 때문에 각각 다른 줄을 차지하고 있는 것이다.

다음과 같이 '>' 선택자를 사용하여 2, 3번 요소만 inlilne-block 으로 바꿔주면 2, 3번 div가 한 줄 안에 있게된다!

 

 

CSS 추가

#top-header .left {
  float: left;
}

#top-header .right {
  float: right;
}


/* 추가된 코드 */
#top-header .right > div {
  display: inline-block;
}

 

 

#top-header .right > div 의미

 - id가 top-header인 요소

 - 의 자식 중 (바로 밑이 아니어도 됨) class가 right인 요소

 - 의 바로 밑 div 요소를 선택하라

 

 

결과화면

display: inline-block 적용 후

 

 

 

참고) 자식의 자식은 선택되지 않는다

HTML 코드

<div id="top-header">
  <div class="left">
    <a href="">기업뱅킹</a>
    <a href="">하나카드</a>
    <a href="">은행소개</a>
  </div>
  <div class="right">
    <div>
      <a href="">로그인</a>
      <a href="">인증센터</a>
      <div>hello1</div>            // 확인용 1 
    </div>

    <div>
      <a href="">
        Language
        <i class="fa fa-solid fa-angle-down"></i>
      </a>
      <div>hello2</div>            // 확인용 2
    </div>
  </div>
</div>

 

 

 

CSS 코드

#top-header .left {
  float: left;
}

#top-header .right {
  float: right;
}

#top-header .right > div {
  display: inline-block;
}

 

 

 

결과화면

'>' 결합자는 바로 아래의 자식만 선택한다

 

 

 

결과를 보면 hello1, hello2를 감싼 div 요소는 inline-block 속성이 적용되지 않은 것을 알 수 있다.

 

 

 

 

 

 

 

 

 

* 더 좋은 구현방법이 있거나 궁금한점은 언제든지 댓글로 남겨주세요. 댓글 환영합니다. *