체크박스, 라디오 버튼, 토글 스위치의 차이점

 

설문조사를 만들 때, 가장 먼저 알아야 할 체크박스, 라디오 버튼, 토글의 차이점과 활용법에 대해 알아봅시다.

체크박스, 라디오 버튼, 토글 스위치는 모두 웹 폼에서 사용자 인터페이스 요소로 사용되지만, 그 사용 목적과 동작 방식은 다릅니다.

 

1. 체크박스 (Checkbox)

- 체크박스는 하나 이상의 옵션을 선택할 수 있는 경우에 사용
- 각 체크박스는 독립적이므로 여러 개의 체크박스를 동시에 선택하거나 해제할 수 있음

예시 질문: "관심 있는 주제를 모두 선택하세요."와 같은 질문에 여러 개의 답변을 제공할 때.

 

예시 코드:

<label class="custom-checkbox">옵션 1
    <input type="checkbox">
    <span class="checkmark"></span>
</label>
<label class="custom-checkbox">옵션 2
    <input type="checkbox">
    <span class="checkmark"></span>
</label>

 

옵션 1 옵션 2

 

 

2. 라디오 버튼 (Radio Button)

- 라디오 버튼은 상호 배타적인 선택을 제공할 때 사용됩니다.
- 같은 그룹에 속한 라디오 버튼 중 하나만 선택할 수 있습니다.
- 하나의 라디오 버튼을 선택하면 같은 그룹의 다른 라디오 버튼은 자동으로 해제됩니다.

예시 질문: "성별을 선택하세요."와 같은 질문에 하나의 답변을 제공할 때.

예시 코드:

<label class="custom-radio">옵션 1
    <input type="radio" name="group1">
    <span class="radiomark"></span>
</label>
<label class="custom-radio">옵션 2
    <input type="radio" name="group1">
    <span class="radiomark"></span>
</label>

 

옵션 1 옵션 2

 

 

3. 토글 스위치 (Toggle Switch)

- 토글 스위치는 이진 상태를 나타내는 데 사용됩니다. 예를 들어, 켜짐/꺼짐(On/Off) 상태입니다.
- 일반적으로 활성화/비활성화 기능을 시각적으로 표현하는 데 사용됩니다.
- 토글 스위치는 한 번에 한 상태만 가질 수 있으며, 사용자가 스위치를 클릭하면 상태가 변경됩니다.

예시: "알림을 켜거나 끄세요."와 같은 설정을 제공할 때.

예시 코드: 일반 적인 토글 버튼

<label class="switch">
 	<input type="checkbox">
	<span class="slider round"></span>
</label>

 

Toggle Switch

추가 설명:

*'name' 속성: 라디오 버튼 그룹을 정의할 때 사용되며, 동일한 'name' 값을 가지는 라디오 버튼은 하나의 그룹으로 묶입니다.
*'checked' 속성: 체크박스나 라디오 버튼이 기본적으로 선택된 상태로 시작할지 여부를 결정합니다.

이러한 UI 요소들은 각기 다른 상황에서 사용자 입력을 수집하는 데 유용합니다. 개발자는 요구 사항에 따라 적절한 요소를 선택하여 사용자 경험을 최적화할 수 있습니다.

 

 

다음에는 각각의 체크박스, 라디오 버튼, 토글 스위치를 더 정교하게 스타일을 지정하는 법을 배워봅시다 •ᴗ•