휘몰아치는 잡생각

웹사이트를 돌아다니면 쉽게 볼 수 있는 이 스위치 버튼. 나는 이번에 처음 만들었다. 코드펜 뒤져보니 저 쪼끄만 거에 들어가는 코드의 양이 무수하던데 나중에 내가 수습하기 어려울까봐 최대한 줄여서 구현했다. 웬만하면 자바스크립트도 안 쓰고 싶어서 html과 css만 사용했다. 스위치도 만드는 데에 버튼이나 태그를 활용하는 등 여러 방법이 있지만, 나는 일단 태그의 type="checkbox" 를 활용해서 만들어 보려고 한다! 기본 구조는 이렇다. 크게는 input과 label, 스위치 가운데에 움직이는 버튼을 그려줄 span 태그도 넣었다. div를 기준으로 둘의 위치도 고정해두려고 묶어놨다. .wrapper { position: relative; } #switch { position: absolute;..