[CSS] 토글 스위치 버튼 만들기 (Toggle Swtich)

오직 CSS만을 사용해 제작한 토글과 JavaScript 코드로 토글을 제작할 수 있습니다.

 

전체 코드

 

코드 풀이

<input type="checkbox" id="toggle" hidden> 

<label for="toggle" class="toggleSwitch">
  <span class="toggleButton"></span>
</label>

JavaScript를 사용하지 못하기 때문에 checkbox의 체크 여부로 토글의 상호작용 기능을 제작하였습니다.

 

.toggleSwitch {
  width: 100px;
  height: 50px;
  display: block;
  position: relative;
  border-radius: 30px;
  background-color: #fff;
  box-shadow: 0 0 16px 3px rgba(0 0 0 / 15%);
  cursor: pointer;
}

 /* 토글 버튼 */
.toggleSwitch .toggleButton {
  /* 버튼은 토글보다 작아야함  */
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #f03d3d;
}

width, height 속성으로 크기를 지정해 주고, 토글을 감싼 버튼의 크기를 감싼 토글보다 작게 지정하여 버튼의 느낌을 내줍니다.

 

position 속성을 이용해서 토글 버튼을 이동시켜줄 것입니다.

 

 

/* 체크박스가 체크되면 변경 이벤트 */
#toggle:checked ~ .toggleSwitch {
  background: #f03d3d;
}

#toggle:checked ~ .toggleSwitch .toggleButton {
  left: calc(100% - 44px);
  background: #fff;
}

.toggleSwitch, .toggleButton {
  transition: all 0.2s ease-in;
}

이제 기본 토글 구조를 잡았으니 클릭했을 시 상호작용되는 ON, OFF 기능을 제작하여야 합니다.

checkbox가 체크되었을 시(checked), 각 요소의 색상을 변경시켜 주고 버튼의 위치를 토글의 끝 위치로 이동시켜 줍니다.

 

 

• 토글의 끝 위치인 left의 100%는 왼쪽의 꼭짓점이 기준이므로, 토글을 뚫고 밖으로 나가게 됩니다.
• 해당 문제를 해결하기 위해서는 버튼의 크기와 초기 left 위치를 뺀 만큼 이동시켜 주어야 합니다.

 

JavaScript를 사용한 여러 개의 토글

 

여러 개의 toggle를 관리하기 위해서 CSS만을 사용하게 되면, 토글 개수의 따른 checkbox를 만들어야 하고 그에 따른 다른 id를 지정해야 하는 단점이 존재합니다.

 

const toggleList = document.querySelectorAll(".toggleSwitch");

toggleList.forEach(($toggle) => {
  $toggle.onclick = () => {
    $toggle.classList.toggle('active');
  }
});

위와 같은 각 토글 요소마다 onclick 이벤트를 걸어주고, 클릭 시 해당 토글에만 클래스를 걸어 상호작용 기능을 동작시킬 수 있습니다.

 

/* checked 부분을 active란 클래스가 포함되어있는지 여부로 바꾸기 */
.toggleSwitch.active {
  background: #f03d3d;
}

.toggleSwitch.active .toggleButton {
  left: calc(100% - 44px);
  background: #fff;
}

checked 부분을 active 클래스가 함께 포함되어 있는지 판단하도록 바꿔줍니다.