[CSS] CSS를 활용한 내용 숨기기

HTML

<label>내용 숨기기</label>
    <input type="checkbox" />

    <div>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum nisi
        voluptatum atque quos magni non, deleniti vero, dolore distinctio
        suscipit, nam voluptate incidunt! Dolore, quam. Eligendi soluta animi
        quae et.
      </p>
    </div>

CSS

input[type="checkbox"]:checked + div {
  height: 0px;
}

div {
  overflow: hidden;
  width: 650px;
  height: 300px;
  transition-duration: 0.5s;
}

💡 속성 선택자 + 상태 선택자 + 동위선택자

 input[type="checkbox"](속성선택자):checked(상태선택자) + div(동위 선택자)

= input의 checkbox가 체크되어지면 input과 동위관계에 있는 div의 height를 0으로

📌결과

🚨주의할 점

+ 동위 선택자 : 동위 관계에 있는 요소 중 바로 뒤에 있는 요소

input[type="checkbox"]:checked + div로 적었을 시 input 바로 뒤에 div가 있어야 적용됨

<input type="checkbox" />
<label>내용 숨기기</label>
    <div>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum nisi
        voluptatum atque quos magni non, deleniti vero, dolore distinctio
        suscipit, nam voluptate incidunt! Dolore, quam. Eligendi soluta animi
        quae et.
      </p>
    </div>

-> 작동하지 않음❌