CSS로 Toggle Switch만들기💡

지금까지는 toggle스위치를 만들기 위해 JS가 꼭 필요하지 않을까? 하고 생각했으나
우리의 CSS는 생각보다 똑똑하고 영리한 친구다

label로 span(스위치역할)과 input[type=checkbox](토글용)을 묶은 뒤
input:checked+span (체크 된 인풋의 형제 span요소)의 css속성을 활용하여
토글 transition을 적용하였다

어려운 로직은 아닌데 설명을 어떻게 해야할 지 모르겠어서 @.@... 코드펜을 참고해주세용..!

마치며🙌

체크박스를 활용한 토글은 이런 스위치 외에 많은 부분에서 활용 할 수 있을 것 같다!
artbox클론 프로젝트에서 하트를 누르면 빨간색이 되는 기능을 js로 구현했었는데 css만으로 구동되도록 리팩토링해보아도 될 것 같다 !