Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

CSS만으로 토글 스위치(ON/OFF 버튼) 만드는 방법

CSS만으로 토글 스위치(켜기/끄기 버튼)를 만들 수 있습니다. JavaScript 없이 체크박스(input[type="checkbox"])와 CSS의 :checked 선택자를 활용하면, 부드러운 애니메이션 효과가 적용된 토글 스위치를 손쉽게 구현할 수 있습니다.

토글 스위치의 핵심 원리

토글 스위치는 다음과 같은 구조로 동작합니다.

  • 숨겨진 체크박스: 실제 ON/OFF 상태 값은 체크박스가 담당하며, opacity: 0으로 화면에서 숨깁니다.
  • 스타일링된 span: 스위치의 트랙(배경)은 span, 손잡이(원형 버튼)는 ::before 가상 요소로 만듭니다.
  • :checked 선택자: 체크박스가 선택되면 인접 형제 선택자(+)로 span의 배경색을 변경하고, 손잡이를 translateX()로 이동시킵니다.
  • transition: 0.4초의 전환 효과를 적용해 자연스러운 애니메이션을 구현합니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
   .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
   }
   .switch input {
      opacity: 0;
      width: 0;
      height: 0;
   }
   span {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;
   }
   span:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
   }
   input:checked + span {
      background-color: rgb(85, 21, 138);
   }
   input:focus + span {
      box-shadow: 0 0 1px rgb(255, 77, 211);
   }
   input:checked + span:before {
      transform: translateX(26px);
   }
   span.round {
      border-radius: 34px;
   }
   span.round:before {
      border-radius: 50%;
   }
</style>
</head>
<body>
<h1>Toggle Switch Example</h1>
<label class="switch">
<input type="checkbox">
<span class="round"></span>
</label>
<label class="switch">
<input type="checkbox" checked>
<span class="round"></span>
</label>
</body>
</html>

코드 설명

  • .switch 클래스는 스위치 전체 영역을 정의하며, position: relative로 내부 요소의 기준점 역할을 합니다.
  • .switch input은 체크박스를 투명하게 만들어 화면에서 감추지만, 여전히 클릭 및 키보드 포커스를 받을 수 있어 접근성이 유지됩니다.
  • span은 회색(#ccc) 트랙을 그리며, cursor: pointer로 마우스 커서가 손 모양으로 바뀌어 클릭 가능함을 알려줍니다.
  • input:checked + span은 체크 시 배경을 보라색(rgb(85, 21, 138))으로 변경하고, input:checked + span:before는 손잡이를 오른쪽으로 26px 이동시킵니다.
  • .round 클래스는 트랙과 손잡이에 둥근 모양(border-radius)을 적용해 iOS 스타일의 토글 스위치를 완성합니다.

실행 결과

위 코드를 실행하면 두 개의 둥근 토글 스위치가 나타납니다. 왼쪽 스위치는 기본적으로 꺼진(OFF) 상태이고, 오른쪽 스위치는 checked 속성이 설정되어 켜진(ON) 상태로 시작합니다. 스위치를 클릭하면 보라색 배경으로 전환되면서 손잡이가 오른쪽으로 부드럽게 이동하는 것을 확인할 수 있습니다.

CSS만으로 토글 스위치(ON/OFF 버튼) 만드는 방법

커스터마이징 팁

  • 색상 변경: input:checked + span의 background-color 값을 원하는 색상으로 수정하세요.
  • 크기 조절: .switch의 width와 height, 그리고 span:before의 크기와 translateX() 값을 함께 조정하면 비율이 유지됩니다.
  • 사각형 스타일: .round 클래스를 제거하면 각진 사각형 토글 스위치가 됩니다.