ON/OFF 토글 버튼 — 단계별 가이드

HTML

HTML의 경우 클릭 시 토글() 기능을 트리거하는 원과 "FF"텍스트가 "N"으로 변경되거나 그 반대로 변경됩니다.

<div class="container">
    <div class="toggle" onclick="toggle()">
        <div class="circle"></div>
    </div>
    <span class="text">FF</span>
</div>

자바스크립트

자바스크립트의 경우 먼저 토글 상태를 저장할 변수를 만듭니다.

지금은 false로 설정하겠습니다.

let active = false

이제 우리는 원을 클릭할 때 트리거되는 토글 기능을 만들 것입니다.

처음에는 querySelector 메서드를 사용하여 토글 및 텍스트 요소를 선택합니다.

그런 다음 앞에 느낌표("!")를 설정하여 활성 상태를 현재 값의 반대(!active)로 변경합니다. 활성이 참이면 이제 거짓이 되고 그 반대도 마찬가지입니다.

이제 활성이 참이면 활성 클래스를 토글 요소에 추가하고 "FF"텍스트를 "N"으로 변경합니다.

false이면 토글 요소에서 활성 클래스를 제거하고 텍스트를 "FF"로 설정합니다.

function toggle() {
    let toggle = document.querySelector('.toggle')
    let text = document.querySelector('.text')
    active = !active
    if (active) {
        toggle.classList.add('active')
        text.innerHTML = 'N'
    } else {
        toggle.classList.remove('active')
        text.innerHTML = 'FF'
    }
}

CSS

CSS의 경우 글꼴 크기와 색상을 텍스트 요소로 설정하는 것으로 시작합니다.

.text {
    font-size: 23px;
    color: #494949;
}

토글 요소는 40x20px 크기(원의 너비의 두 배 — 나중에 설정함)를 기준으로 배치됩니다.

토글이 꺼진 것처럼 둥근 테두리를 어두운 색으로 설정합니다.
그런 다음 flexbox를 사용하여 중앙에 모든 것을 표시합니다.

마지막으로 커서를 포인터로 설정합니다. 이 요소는 클릭할 수 있고 켜기/끄기 버튼을 트리거하며 전환을 추가하여 전환이 매끄럽고 원활하게 이루어지도록 합니다.

.toggle {
    position: relative;
    width: 40px;
    height: 20px;
    border: 2px solid #494949;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .3s;
}

원은 왼쪽이 0으로 설정된 절대 위치에 배치됩니다. 이것이 꺼진 상태입니다. 너비와 높이를 20픽셀(부모 너비의 절반)로 설정합니다.

이제 테두리 반경을 추가하고 배경색을 진한 회색으로 설정합니다. 토글을 클릭하면 이 색상이 녹색이 ​​됩니다.

전환을 잊지 마십시오.

.circle {
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background-color: #494949;
    transition: .3s;
}

이제 활성 클래스의 스타일을 지정합니다. 이 클래스는 활성 상태일 때 토글 요소에 추가됩니다.

테두리 색상을 녹색으로 설정합니다.

.active {
    border-color: rgb(85, 227, 180);
}

이제 더하기 선택기("+")를 사용하여 형제를 선택하고 색상을 녹색으로 설정합니다. 여기서는 "N"텍스트에 대해 이야기하고 있습니다.

.active + .text {
    color: rgb(85, 227, 180);
}

마지막으로 활성 상태일 때 원의 스타일을 지정합니다.

왼쪽 속성을 100%로 설정하고 X를 -100%로 변환하여 컨테이너의 오른쪽으로 이동합니다.

또한 배경색을 녹색으로 변경하고 일부 전환을 추가합니다.

.active .circle {
    left: 100%;
    transform: translateX(-100%);
    transition: .3s;
    background-color: rgb(85, 227, 180);
}

그리고 그게 다야.

비디오 자습서 및 소스 코드here를 찾을 수 있습니다.

읽어 주셔서 감사합니다. ❤️