자바스크립트 이벤트 없이 오직 CSS만으로 작동하는 상태 변환 UI(스위치, 햄버거 메뉴 등)를 만드는 전설적인 "체크박스 해킹(Checkbox Hack)" 기법입니다.
눈에 보이지 않는 <input type="checkbox">의 :checked 상태 가상 클래스와 형제 선택자(+)를 연결하여 클릭 이벤트를 CSS로 감지합니다. 이를 활용하면 쫀득하게 움직이는 고품질 토글 스위치를 완성할 수 있습니다.
<div class="toggle-wrapper">
<!--
실제 체크박스는 화면에서 숨겨져 있지만,
label과 연결(id, for)되어 있어 label을 클릭하면 체크 상태가 변합니다.
-->
<input type="checkbox" id="myToggle" class="toggle-checkbox">
<label for="myToggle" class="toggle-label"></label>
</div>