[돌다리 두들기기] IOS 스타일의 토글 스위치

React로만 프론트엔드를 다루다 보니까 바닐라 JavaScript의 기본도 어색해져 가는 것 같다.

그래서 되짚어보는 IOS 스타일의 토글 스위치다. 설명은 코드에 주석으로 달았다(box-shadow는 적용 안 함).

<!--
- 토글 스위치가 사실상 체크박스와 동일한 기능
- 기능은 살리면서 스타일을 통해 디폴트 스타일을 없애고 새로운 스타일을 추가
- 체크박스로 하면 스타일링 때도 조금 더 편리함
-->
<label for="ios-toggle" class="switch">
  <input type="checkbox" id="ios-toggle" />
  <span class="slider"></span>
</label>
    
.switch {
  position: relative; /* 이렇게 하면 slider에서 absolute로 내부 위치를 편리하게 조정 가능 */
  display: inline-block; /* inline이지만 높이와 길이를 가질 수 있다 */
  width: 50px;
  height: 24px;
}

/* 체크박스를 안 보이게 한다 */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* 
- 실제 스타일링은 여기에서 이루어진다
- 토글의 원형 요소를 감싸는 배경
*/
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4px; // before로 렌더링할 원형 요소의 위치 조정
  background-color: #ccc;

  /* 
  - slider::before의 transition과 같은 시간으로 맞춰준다
  - 토글하면 배경색과 원형 요소의 위치가 동시에 변한다
  */
  transition: 0.4s;
  border-radius: 24px;
}

/*
- 원형 요소 렌더링
- 앞뒤 순서가 의미 있는 경우가 아니라면 before을 쓰든 after을 쓰든 상관 없다
*/
.slider::before {
  position: absolute;
  content: '';
  height: 17px;
  width: 17px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

/* checked 상태일 때 .slider에 적용할 스타일 */
input:checked + .slider {
  background-color: #4caf50;
}

/* checked 상태일 때 .slider::before에 적용할 스타일 */
input:checked + .slider::before {
  transform: translateX(26px);
}