css - 모달 팝업창

* 자바스크립트 없이 css로 만든 모달 팝업

1. html

<div class="wrap">
  <label for="modal" class="button">모달 팝업</label>
</div>

<input type="checkbox" id="modal" class="hidden">
<div class="box_modal">
  <label for="modal" class="closer">x</label>
  <div class="text">
    <h3>모달 팝업창</h3>
    <p>팝업창 문구</p>
  </div>
</div>

2. css

input#modal[type=checkbox]:checked ~ .box_modal {
  visibility: visible;
}

참고 사이트
https://allthatcode.com/entry/%EC%88%9C%EC%88%98-CSS%EB%A7%8C%EC%9C%BC%EB%A1%9C-%EB%AA%A8%EB%8B%AC-%EC%9C%88%EB%8F%84%EC%9A%B0%ED%8C%9D%EC%97%85-%EB%A0%88%EC%9D%B4%EC%96%B4-%EB%A7%8C%EB%93%A4%EA%B8%B0