-
체크박스를 이용해 토글 스위치(ON/OFF)만들기CSS 2022. 12. 23. 10:44
기본 개념은,
체크박스를 레이블로 감싸주고 레이블로 스위치 배경을, 가상요소로 토글 버튼과 글씨의 모양을 잡아줍니다.
CSS속성은 크게 6가지를 사용합니다.
<HTML>
<body> <input type="checkbox" id="chk1"/><label for="switch"></label> </body>HTML작성은 간단합니다.
<CSS> // 스위치의 배경
label { display: block; position: relative; width: 100px; height: 45px; background: #d3d3d3; border-radius: 60px; transition: background 0.4s; }레이블 요소를 이용하여 스위치의 전체적인 틀을 잡아줍니다.
<CSS> // 레이블 가상요소(스위치의 버튼)
label::after { content: ""; position: absolute; left: 2.5px; top: 50%; width: 40px; height: 40px; border-radius: 100%; background-color: #fff; transform: translateY(-50%); box-shadow: 1px 3px 4px rgba(0,0,0,0.1); transition: all 0.4s; }"::after"속성을 활용하여 가상요소를 생성합니다.
이 가상요소를 스위치의 버튼으로 활용합니다.
<CSS> // 레이블 가상요소(스위치의 ON, OFF글씨)
label::before { content: "OFF"; font-size: 24px; font-family: Arial, Helvetica, sans-serif; position: absolute; left: 45px; top: 50%; transform: translateY(-50%); transition: all 0.4s; }"::before"속성을 활용하여 가상요소를 생성합니다.
이 가상요소를 스위치 내부의 ON, OFF글씨를 표현합니다.
기본 상태(체크되지 않았을 때)는 OFF입니다.
<CSS> // 스위치(체크박스)가 토글(체크)되었을 때 배경
#chk1:checked + label { background:rgba(109, 104, 107) }":checked"속성을 사용하여 체크박스가 체크 되었을 때의 색상을 넣어줍니다.
<CSS> // 스위치(체크박스)가 토글(체크)되었을 때 버튼
#chk1:checked + label::after { left: calc(100% - 42.5px); }":checked"속성을 사용하여 체크박스가 체크 되었을 때의 버튼의 위치를 조정합니다.
<CSS> // 스위치(체크박스)가 토글(체크)되었을 때 글씨(ON/OFF)
#chk1:checked + label::before { content: "ON"; color: #fff; left: 15px; }":checked"속성을 사용하여 체크박스가 체크 되었을 때 OFF글씨를 ON으로 변경해줍니다.
**Reference
https://www.youtube.com/watch?v=KVUy9i26kiI
'CSS' 카테고리의 다른 글
체크박스를 이용해 슬라이드 메뉴 만들기(뒷 배경 블러효과) (0) 2023.02.13