HTML CSS1 배경 애니메이션 적용된 Toggle Switch 만들기 1. input tag > checkbox 이용 w3school에 들어가면 'How to create a toggle switch'라는 글이 있습니다. 이 글에서 rounded버전과 rectangular 버전을 참고해 만들 수 있습니다. 라운드를 구현해봅시다! 예제와 달리 여기서 만들어볼 토글은 클릭하는 순간 배경색이 왼쪽부터 오른쪽 끝까지 채워지는 애니메이션 효과를 주기로 했어요. 토글 버튼과 별개로 배경처리를 해줘야 해서 span class를 2개 만들어줍니다. 2. CSS 1) ToggleInner CSS 기존의 input checkbox는 dipslay를 없애주고 기능만 남겨놓아야 합니다. label클래스로 버튼 모양을 잡고, toggleInner와 switch를 배치해줍니다. 가장 신경써야 하는.. 2023. 4. 16. 이전 1 다음
