[HTML & CSS] on off switch(스위치) 만들기

d예시 이미지

 웹사이트를 돌아다니면 쉽게 볼 수 있는 이 스위치 버튼. 나는 이번에 처음 만들었다. 코드펜 뒤져보니 저 쪼끄만 거에 들어가는 코드의 양이 무수하던데 나중에 내가 수습하기 어려울까봐 최대한 줄여서 구현했다. 웬만하면 자바스크립트도 안 쓰고 싶어서 html과 css만 사용했다.

<div class="wrapper">
  <input type="checkbox" id="switch">
  <label for="switch" class="switch_label">
    <span class="onf_btn"></span>
  </label>
</div>

 스위치도 만드는 데에 버튼이나 <span> 태그를 활용하는 등 여러 방법이 있지만, 나는 일단 <input> 태그의 type="checkbox" 를 활용해서 만들어 보려고 한다! 기본 구조는 이렇다. 크게는 input과 label, 스위치 가운데에 움직이는 버튼을 그려줄 span 태그도 넣었다.
 div를 기준으로 둘의 위치도 고정해두려고 묶어놨다.

.wrapper { position: relative; }
#switch {
  position: absolute;
  /* hidden */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

 구조를 짰으면 일단 임의로 wrapper의 위치를 잡고, 체크박스는 숨긴다. 체크박스에 크기 지정도 했었는데 크게 의미는 없는 듯해서... 레이블 위치에 지장가지 않게 position을 absolute로 해주었다. 저렇게 안 해놓으면 안 보이는 무언가가 공간을 차지하고 있게 된다.

.switch_label {
  position: relative;
  cursor: pointer;
  display: inline-block;
  width: 58px;
  height: 28px;
  background: #fff;
  border: 2px solid #daa;
  border-radius: 20px;
  transition: 0.2s;
}
.switch_label:hover {
  background: #efefef;
}
.onf_btn {
  position: absolute;
  top: 5px;
  left: 5px;
  display: inline-block;
  width: 19px;
  height: 19px;
  border-radius: 20px;
  background: #daa;
  transition: 0.2s;
}

 구조가 잡혀있으니 그 다음엔 스타일. <span>과 <label>의 경우 인라인 요소라 디스플레이를 inline-block으로 변경해줘야 모양을 만들 수 있다. 이제 자유롭게 레이블을 꾸미면 된다. 크기는 얼마나, 색깔은 어떻게... 여기서 꾸미는 레이블의 모습은 버튼이 'off' 상태일 때의 모양이다. 아직 체크박스에 체크가 안 되어 있으니까.

 제일 위에 올린 이미지처럼 배경은 흰색에 외곽선과 버튼 색을 연한 단풍색으로 넣어 비활성화된 버튼의 모습을 살렸다. 이때 사용된 색은 활성화 됐을 때  원하는 색보다 더 흐린 색이다.

 버튼을 흰색으로 하고 무채색 계열의 배경을 깔아도 될 것 같고... 꾸밀 방법은 많다.

* 참고
 - cursor: pointer: 마우스를 올렸을 떄 커서 모양을 포인터로 바꿔두면 사용자 입장에서 편하지 않을까 싶어 한줄 넣어보았다.
 - transition: 0.2s: 애니메이션을 조금 더 부드럽게 연출하기 위함.
 - :hover 스타알은 선택! 마우스 올릴 때 자연스러우라고 넣었다.

/* checking style */
#switch:checked+.switch_label {
  background: #c44;
  border: 2px solid #c44;
}

#switch:checked+.switch_label:hover {
  background: #e55;
}

/* move */
#switch:checked+.switch_label .onf_btn {
  left: 33px;
  background: #fff;
  box-shadow: 1px 2px 3px #00000020;
}

 마지막으로 체크했을 때(on)의 모습. 배경색을 원하는 색으로 바꾸고, 가운데에 있는 원모양도 움직여준다. 위치를 지정해줄 때 체크 전이 left: 5px이었다면 체크 후에는 right: 5px이 아닌 left: 33px와 같이... 같은 기준에서 픽셀을 조정해주어야 했다.
 off일때 모습이 숨겨져있는 것처럼 플랫한 느낌이었다면 on일 때는 원에 box-shadow를 넣어 활성화해서 빡 튀어나온 듯한 모습을 강조시켰다.

See the Pen by yee0 (@yee0) on CodePen.

완성본~