Switch
-
체크박스를 이용해 토글 스위치(ON/OFF)만들기CSS 2022. 12. 23. 10:44
기본 개념은, 체크박스를 레이블로 감싸주고 레이블로 스위치 배경을, 가상요소로 토글 버튼과 글씨의 모양을 잡아줍니다. CSS속성은 크게 6가지를 사용합니다. HTML작성은 간단합니다. // 스위치의 배경 label { display: block; position: relative; width: 100px; height: 45px; background: #d3d3d3; border-radius: 60px; transition: background 0.4s; } 레이블 요소를 이용하여 스위치의 전체적인 틀을 잡아줍니다. // 레이블 가상요소(스위치의 버튼) label::after { content: ""; position: absolute; left: 2.5px; top: 50%; width: 40px; h..