스위치를 누르면 전환되는 toggle switch를 만들어보자
우선 html의 구조부터 생각해야 한다.
누르면 변화하는 것을 어떤 엘리먼트를 이용해서 만들어야 할까....
input!! input중에서도 checkbox를 이용해서 만들면 좋을것 같다.
checkbox가 누르면 체크되고 다시 누르면 해제되니 비슷한 느낌쓰
그럼 html부터 짜본다
<div class="container">
<input type="checkbox" id="toggle">
<label for="toggle">
<div class="ball"></div>
</label>
</div>input의 checkbox를 설정하고 id를 준다. label의 for와 같아야 눌렀을 때 작동을 하기 때문
그리고 label안에 ball을 만든다. 누르면 공이 움직이게
마지막으로 모든것을 감싸줄 container를 생성한다.
이로써 html은 구성끝
아직은 아무것도 없음...
다음은 css
label {
display: block;
width: 60px;
height: 30px;
background-color: #ddd;
border-radius: 10px;
transition: background-color 0.5s;
}
.ball {
position: relative;
top: 3px;
left: 3px;
width: 24px;
height: 24px;
background-color: #fff;
border-radius: 100%;
transition: translate 2s;
}transition은 일단 무시하고
label의 display를 block으로 꼭 해줘야한다. label이 원래 인라인요소여서 넓이와 높이를 주어도 적용이 안되기 때문이다.
ball에 position: relative를 주어서 약간 위치를 조정한다.
누르면 이런모양 완성!
이제 toggle기능을 하도록 css를 주겠다.
input[type=checkbox] {
display: none;
}
input:checked + label{
background-color: #333;
}
input:checked+label .ball {
transform: translateX(28px);
}input type의 checkbox는 보이지 않게 해야한다.
그리고 가상클래스 :를 이용해서 checkbox가 만약 체크되었다면 label의 ball이 X축방향으로 28px움직이라고 하였다. 여기서 transform의 translate가 사용된다.
transform?translate? 그게 뭔데
transform: 변형효과, 변형속성, 엘리먼트가 이동/확대/회전하게 한다
transition: 전환효과, 변환속성, 변화에 일정시간이 걸리게 해준다
translate: transform에 속해있는 변형함수, 이동담당
아래에서 더 자세히 정리해보도록 하자
다시 switch로 돌아와서 css까지 작성을 마쳤다.
이렇게 작성하면 toggle switch완성이다. input display를 잠깐 삭제하고 보면 
가상클래스에 의해 input checkbox가 checked되었을 때 배경이 바뀌고 ball이 이동하는 것을 알 수 있다. 완성!
그런데 스위치가 너무 딱딱하게 움직이는 것 같다면 바로 이럴때 아까 무시했던 transition을 손봐주어야 한다.
transform, translate, translate를 더 자세히 공부📚
transform은 속성을 줌으로써 객체를 변화할 수 있다.
간단히 보는 transform 함수들
translate(X축, Y축): 특정크기만큼 이동
scale(X, Y): 특정 크기만큼 확대 및 축소
skew(X, Y): 특정 각도만큼 기울임
rotate(X, Y): 특정 각도만큼 회전
＊기울임/회전 할때는 deg라는 단위를 사용
움직임을 이용해 보는 transform
여기서 transition도 사용이 되었다. hover했을때 너무 빨리 변환되지 않도록 trasition을 주어서 서서히 변하게 하였다.
