CSS Grid와 JavaScript를 사용하여 토글 스위치 기능을 구현해보겠습니다.

1. HTML 작성하기

<div class="toggle-switch">
  <div class="circle"></div>
</div>

위의 코드는 토글 스위치를 감싸는 컨테이너와 스위치를 나타내는 원형 요소를 구성합니다.

2. CSS 스타일링하기

.toggle-switch {
  display: grid;
  place-items: center;
  width: 50px;
  height: 25px;
  background-color: #ddd;
  border-radius: 25px;
  cursor: pointer;
}

.circle {
  width: 20px;
  height: 20px;
  background-color: #999;
  border-radius: 50%;
  transition: transform 0.3s;
}

위의 CSS 코드는 토글 스위치와 원형 요소의 스타일을 정의합니다. 컨테이너인 .toggle-switch는 CSS Grid 속성을 사용하여 가운데 정렬되도록 설정되었습니다. 스위치의 색상과 크기, 원형 요소인 .circle의 색상과 크기, 그리고 애니메이션 효과를 정의하였습니다.

3. 자바스크립트로 토글 스위치 기능 구현하기

const toggleSwitch = document.querySelector('.toggle-switch');

toggleSwitch.addEventListener('click', () => {
  toggleSwitch.classList.toggle('active');
});

위의 JavaScript 코드는 .toggle-switch 클래스를 가진 요소를 선택하고 클릭 이벤트를 감지하여 해당 요소에 active 클래스를 토글하도록 설정합니다.

결과 확인하기

위의 코드와 구현 결과를 확인하려면 웹 브라우저에서 HTML 파일을 열어보세요. 클릭할 때마다 토글 스위치가 활성화 상태로 변하는 것을 확인할 수 있습니다.

이제 여러분은 CSS Grid와 JavaScript를 사용하여 토글 스위치 기능을 구현할 수 있습니다. 이 기능은 애플리케이션 UI에서 많이 사용되는 기능 중 하나이므로, 활용할 수 있는 다양한 곳에서 유용하게 사용할 수 있습니다.

#javascript #css #grid #toggle-switch