HTML
-
[돌다리 두들기기] IOS 스타일의 토글 스위치개발/HTML CSS 2024. 5. 23. 16:40
React로만 프론트엔드를 다루다 보니까 바닐라 JavaScript의 기본도 어색해져 가는 것 같다.그래서 되짚어보는 IOS 스타일의 토글 스위치다. 설명은 코드에 주석으로 달았다(box-shadow는 적용 안 함). .switch { position: relative; /* 이렇게 하면 slider에서 absolute로 내부 위치를 편리하게 조정 가능 */ display: inline-block; /* inline이지만 높이와 길이를 가질 수 있다 */ width: 50px; height: 24px;}/* 체크박스를 안 보이게 한다 */.switch input { opacity: 0; width: 0; height: 0;}/* - 실제 스타일링은 여기에서 이루어진다- 토글의 원..