HTML, CSS로 토글 버튼 만들기

 

 

🤩 완성본 먼저 보기

CSS 수업을 들으며 transition 속성을 가지고 여러 응용 실습을 해봤는데 그중 토글 버튼은 따로 기록하고자 한다! 프로젝트 할 때 팀원 언니가 토글버튼 만들었어서 나도 만들어 보고 싶었다 ㅎㅎ HTML과 CSS만으로 정적으로 만든 버튼이라 실제로 데이터를 내보내려면 자바스크립트가 들어가고 다소 복잡해지겠지만 궁금했던 버튼 구현 하나 해봤다는 것에 의의를.. 💪🏻

 

 

 

1. HTML 작성

<input type="checkbox" id ="toggle-slider">
<label for="toggle-slider">on/off</label>

아무런 스타일이 입혀지지 않은 화면은 위와 같이 체크박스와 라벨 태그 뿐이다. CSS로 모양을 잡아주는 것!

 

 

2. CSS 작성

/* 체크박스 */
#toggle-slider {
    display: none;
}

label {
    text-indent: -999em; 
    cursor: pointer;
    width: 100px;
    height: 50px;
    background-color: #e0e0e0;
    border-radius: 25px;
    position:relative;
    transition: 0.5s ease-out;
}

 

CSS 적용

 

토글의 온/오프는 체크박스 체크 유무로 판별된다.

체크박스에 아이디로 접근하여 display: none을 주어 화면에서 보여지지 않게 처리했다.

 

HTML을 작성할 때 라벨 태그로 시맨틱하게(?) on/off 라는 글자를 써줬는데 글자를 가리기 위해 text-indent 속성을 사용했다.

text-indent는 들여쓰기 속성이지만 화면에서 안 보이도록 글자를 멀~~~리 보내버릴 때 사용하기도 한다.

토글 디자인은 타원형의 바탕 위에 원 도형이 올라간 형태이기 때문에 원활한 조작을 위해 position은 relative로 설정했다.

ㅎㅎ

 

👉 바탕 위에 원 올리기

label::after {
    content: ''; 
    width: 40px; 
    height: 40px;
    background-color: #fff;
    position: absolute;
    border-radius: 50%;
    top: 5px;
    left: 5px;
    transition: 0.5s ease-out;
}

 

CSS 적용

 

원 도형은 ::after 선택자를 사용해 만들었다.

::after는 선택한 요소 뒤에 텍스트 요소를 삽입하는 역할을 한다. content 속성에 삽입할 내용을 입력해야 하는데 여기선 텍스트는 필요없기 때문에 공백으로 남겨뒀다.

width와 height로 요소의 크기를 설정하고 border-radius를 50%를 줘 원형으로 만들었다.

바탕인 라벨 태그를 기준으로 위치가 이동되어야 하기 때문에 position은 absolute로 설정하고 top 속성과 left 속성을 사용해 위치를 지정해줬다.

transition: 0.5s ease-out 을 분석하자면 0.5초에 걸쳐 느리게 끝나도록 전환효과를 지정한 것이다.

 

 

👉 전환 스타일 입히기

#toggle-slider:checked + label {
    background-color: #20d51a;
}

#toggle-slider:checked + label::after {
    left:calc(100% - 45px);
    background-color: #fff;
}

체크박스의 아이디로 접근하여 '+' 선택자를 사용해 체크박스가 체크되어야만 바탕(label)과 원형(label::after)에 전환될 스타일을 각각 설정해줬다.

 

체크박스가 체크되면 바탕색은 그린 컬러로 바뀐다.

원 도형은 흰색으로 바뀌고 calc() 함수로 좌측에서부터 이동될 위치가 계산돼 지정된다.

calc() 함수는 영역의 100%(바탕)에서 45px(자신 크기 40px + 마진 영역 5px)을 뺀 만큼이 계산되어 이동하게 된다.

 

 

여기까지 하면 완성!

쉽고 간단하고 재미있게 토글 버튼을 만들어보았다 😀🥳

 

 

---