ON/OFF 표시되는 토글 버튼 만들기

ON/OFF 토글 버튼

토글 버튼은 사용자가 특정 기능이나 설정을 활성화(ON) 또는 비활성화(OFF)할 수 있도록 하는 UI 요소입니다. 일반적으로 스위치 형태로 디자인되며, 상태에 따라 시각적으로 변화를 줘 사용자가 현재 상태를 쉽게 인식할 수 있도록 돕습니다.

예를 들어, 모바일 기기에서 Wi-Fi나 Bluetooth 설정을 켜고 끌 때 사용하는 스위치가 대표적인 토글 버튼입니다. 이 버튼은 간단한 클릭만으로 설정을 빠르게 조정할 수 있는 장점을 가지고 있습니다. 토글 버튼은 사용자 경험을 향상하는 중요한 요소로, 직관적인 인터페이스를 제공하여 사용자가 원하는 기능을 손쉽게 조정할 수 있도록 합니다.

이번 글에서는 HTML과 CSS만을 사용하여 간단하면서도 효과적인 토글 버튼을 만드는 방법을 소개하겠습니다.

토글 버튼 HTML 코드

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

위의 코드는 간단한 토글 버튼을 생성하기 위한 HTML 구조입니다. 각 요소에 대해 자세히 살펴보겠습니다.

input type="checkbox":
- 이 요소는 체크박스를 생성합니다. 사용자가 클릭하여 체크를 하거나 해제할 수 있는 인터페이스를 제공합니다. id="chk1" 속성은 이 체크박스를 고유하게 식별하기 위한 것입니다. 이 ID는 나중에 ~~label~~ 요소와 연결하는 데 사용됩니다.
label:
- ~~label~~ 요소는 사용자가 체크박스를 클릭할 수 있도록 돕는 역할을 합니다. 이 요소를 클릭하면 해당 체크박스의 상태가 변경됩니다. for="chk1" 속성은 이 ~~label~~이 앞서 정의한 체크박스와 연결된다는 것을 명시합니다. 즉, 사용자가 이 레이블을 클릭하면 체크박스가 활성화되거나 비활성화됩니다.

이 구조는 기본적인 토글 버튼을 만드는 데 필요한 최소한의 HTML 요소로 구성되어 있습니다. 다음 단계에서는 CSS를 사용하여 이 버튼을 스타일링하고, 시각적으로 더 매력적이고 사용자 친화적인 토글 버튼으로 디자인해 보겠습니다.

토글 버튼 기본 CSS 코드

label { /*토글 버튼 배경*/
  display: block;
  position: relative;
  width: 100px;
  height: 45px;
  background: #d3d3d3;
  border-radius: 60px;
  transition: background 0.4s;
}

label::after { /*토글 버튼*/
  content: "";
  position: absolute;
  left: 2.5px;
  top: 50%;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: #fff;
  transform: translateY(-50%);
  box-shadow: 1px 3px 4px rgba(0,0,0,0.1);
  transition: all 0.4s;
}

label::before { /*토글 버튼 ON, OFF 텍스트*/
  content: "OFF";
  font-size: 24px;
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  left: 45px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.4s;
}

위의 CSS 코드는 토글 버튼의 시각적 요소를 스타일링하는 데 사용됩니다. 각 스타일 규칙에 대해 자세히 살펴보겠습니다:

label: 토글 버튼의 배경을 정의합니다.
- display: block;: 레이블을 블록 요소로 설정하여 전체 너비를 차지하게 합니다.
- position: relative;: 내부 요소(예: 버튼)의 위치를 설정할 기준이 됩니다.
- width와 height: 버튼의 크기를 지정합니다.
- background: 버튼의 기본 배경색을 연한 회색으로 설정합니다.
- border-radius: 버튼의 모서리를 둥글게 만들어 부드러운 느낌을 줍니다.
- transition: 배경색이 변경될 때 애니메이션 효과를 주어 부드럽게 전환됩니다.
label::after: 실제 토글 버튼을 생성합니다.
- content: "";: 요소가 비어 있지만 생성되도록 합니다.
- position: absolute;: 레이블 내에서 위치를 설정합니다.
- left와 top: 버튼의 위치를 설정합니다.
- width와 height: 버튼의 크기를 정의합니다.
- border-radius: 100%;: 버튼을 원형으로 만듭니다.
- background-color: 버튼의 배경색을 흰색으로 설정합니다.
- transform: translateY(-50%);: 버튼을 수직 중앙에 정렬합니다.
- box-shadow: 버튼에 약간의 그림자를 추가하여 입체감을 줍니다.
- transition: 버튼의 위치나 색상이 변경될 때 애니메이션 효과를 적용합니다.
label::before: 버튼의 ON/OFF 텍스트를 표시합니다.
- content: "OFF";: 기본 상태에서 표시되는 텍스트를 설정합니다.
- font-size와 font-family: 텍스트의 크기와 글꼴을 설정합니다.
- position: absolute;: 텍스트의 위치를 설정합니다.
- left와 top: 텍스트의 위치를 조정합니다.
- transform: translateY(-50%);: 텍스트를 수직 중앙에 정렬합니다.
- transition: 텍스트가 변경될 때 애니메이션 효과를 적용합니다.

이 CSS 코드는 토글 버튼을 시각적으로 매력적이고 직관적으로 만들어 사용자가 쉽게 인식할 수 있도록 하였습니다.

텍스트 설정 CSS 코드

#chk1:checked + label { /*체크박스가 선택된 버튼의 배경*/
  background:rgba(109, 104, 107)
}

#chk1:checked + label::after { /*체크박스가 선택된 버튼 설정*/
 left: calc(100% - 42.5px);
}

#chk1:checked + label::before { /*체크박스 선택된 텍스트(ON/OFF)로 변경*/
  content: "ON";
  color: #fff;
  left: 15px;
}

체크박스가 선택되었을 때 토글 버튼의 스타일을 변경하는 CSS 규칙에 대해 설명하겠습니다. 이 코드는 버튼의 배경색, 위치, 그리고 표시되는 텍스트를 변경하여 사용자가 선택한 상태를 명확하게 나타내도록 합니다.

#chk1:checked + label: 체크박스가 선택되었을 때 적용되는 스타일입니다.
- 이 규칙은 체크박스(chk1)가 체크된 상태일 때, 바로 다음에 있는 ~~label~~ 요소의 배경색을 변경합니다.
- 설정된 배경색은 어두운 회색으로, 버튼의 상태가 ON임을 시각적으로 나타냅니다.
#chk1:checked + label::after: 체크박스가 선택되었을 때 토글 버튼의 위치를 조정하는 규칙입니다.
- 버튼의 위치를 오른쪽으로 이동시켜 체크박스가 활성화된 상태를 나타냅니다.
- calc(100% - 42.5px)를 사용하여 버튼의 너비와 여백을 고려하여 정확한 위치에 배치합니다.
#chk1:checked + label::before: 체크박스가 선택되었을 때 표시되는 텍스트를 변경하는 규칙입니다.
- 기본적으로 "OFF"로 설정된 텍스트를 "ON"으로 변경합니다.
- 텍스트 색상은 흰색으로 설정하여 배경색과의 대비를 높이고 가독성을 향상합니다.
- left: 15px; 속성으로 텍스트의 위치를 조정하여 디자인을 완성합니다.