CSS를 사용하여 사용자 지정 토글 스위치를 만드는 방법

10134 단어 csstutorialtoggleswitch
CSS를 사용하여 간단한 맞춤형 토글 스위치를 만들어 봅시다. 처음에 이것을 만들려고 했을 때 많은 개발자들이 이 버튼을 만들었지만 이것이 어떻게 작동하는지 설명하는 사람이 없었기 때문에 매우 혼란스러웠습니다.

그래서 약간의 고심 끝에 이것을 만드는 방법을 배웠고 여러분 모두와 공유하고 싶습니다.

나는 이 기술을 그의Codepen에서 확인할 수 있습니다. 더 많은 흥미로운 펜이 있습니다.


전제 지식

HTML , CSS (특히 Pseudo Elements )의 기초


작동 방식





입력에 레이블을 할당할 때 모두 알고 있듯이 레이블도 클릭하여 입력을 대상으로 지정할 수 있습니다.

이것이 우리가 활용할 것이며 이를 통해 레이블을 확인란과 동일하게 작동하는 사용자 지정 스위치로 변환할 수 있습니다.


시작하자





다음은 이 버튼을 만들기 위해 따라야 할 단계입니다.


1. HTML 구조 만들기





이 단계에서는 입력 확인란인 html 요소와 여기에 할당된 레이블을 생성하지만 내부 콘텐츠는 비어 있어야 합니다.


참조 코드는 다음과 같습니다.




<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>

<body>

<input type="checkbox" name="switch" id="switch">
<label for="switch"></label>

</body>

</html>



2. 입력 요소 숨기기



이제 이전에 말했듯이 입력 요소를 숨길 것입니다. 레이블 요소로 스위치를 만들어 확인란이 필요하지 않습니다.


input[type="checkbox"] {
  width: 0;
  height: 0;
  visibility: hidden;
}



3. 버튼 본체 스타일 지정





우리는 공이 움직일 스위치의 몸체나 바깥쪽 부분을 만들 것입니다.


참조 코드는 다음과 같습니다.




label {
  display: block;
  width: 500px;
  height: 150px;
  background-color: #477a85;
  border-radius: 100px;
  position: relative;
  cursor: pointer;
  transition: 0.5s;
  box-shadow: 0 0 20px #477a8550;
}



4. 토글 볼 만들기





이제 유사 요소::after를 사용하여 토글 볼을 생성합니다.


참조 코드는 다음과 같습니다.




label::after {
  content: "";
  width: 120px;
  height: 120px;
  background-color: #e8f5f7;
  position: absolute;
  border-radius: 70px;
  top: 15px;
  left: 15px;
  transition: 0.5s;
}


이 단계에서 작업의 80%가 완료되었습니다. 이제 스위치가 작동하도록 애니메이션을 추가하기만 하면 됩니다.


5. 애니메이션 추가



레이블을 전환할 때 알 수 있듯이 확인란도 전환됩니다.
  • 이제 조건을 추가하겠습니다. 확인란을 선택하면 공이 오른쪽으로 이동해야 합니다.


    •    input:checked + label:after {
   left: calc(100% - 10px);
   transform: translateX(-100%);
   }


  • 버튼 토글에서 배경을 변경하려면


    • 
   input:checked + label {
   background-color: #243d42;
   }


  • 이제 보다 부드러운 자기 효과를 원할 경우. 볼이 활성화되면 볼의 너비가 잠시 증가해야 합니다. 클릭하면 요소가 활성화됩니다. :active 선택자를 사용하여 이를 수행할 수 있습니다.

    •     label:active:after {
    width: 160px;
    }



    출력 미리보기






    데모 사용해보기






    나를 찾아줘

    When gem 및 Cron 작업을 사용하여 Rails에서 월별 업데이트 캘린더 만들기
    Laravel 8에서 SweetAlert2를 사용하는 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage