> 사용 여부에 따라 스타일이 달라지는 css

1. 자식 선택자 사용 (>)

.parent의 직접적인 자식인 .child 요소만 선택합니다.

2. 자식 선택자 미사용

자식 선택자를 사용하지 않으면, 모든 .child 요소가 선택됩니다.

3. 손자 선택자 사용

손자 요소를 선택하려면, 자식 선택자 없이 모든 하위 요소를 선택할 수 있습니다.

• code

  <p>** > 사용여부 ** ----------------------------</p>
  <div class="parent">
    <div class="child">
      <p>첫 번째 자식</p>
      <div class="grandchild">
        <p>손자</p>
      </div>
    </div>
    <div class="child">
      <p>두 번째 자식</p>
    </div>
  </div>

  /* > 사용여부에 따라 스타일 */
  /* .parent > .child {
    background-color: lightblue;
  } */
  
  /* 
  .child {
    background-color: lightgreen;
  } */
  
  .parent > .child p {
    background-color: rgb(21, 197, 255);
    color: white;
  }
  
  .parent .grandchild p {
    background-color: rgb(226, 176, 255);
    color: gray;
  }

요약

> 기호를 사용하면 특정 요소의 직접적인 자식만 선택할 수 있습니다.

>를 사용하지 않으면 해당 요소의 모든 하위 요소가 선택됩니다.

레이아웃과 스타일을 세밀하게 조정할 수 있다.