부트스트랩 - 체크박스와 라디오 버튼: 초보자 가이드

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 부트스트랩의 폼 컨트롤을 탐구하는 흥미로운 세계로 뛰어들어 보겠습니다. 특히 체크박스와 라디오 버튼에 대해 이야기하겠습니다. 이 작은 상호작용 요소들은 간단해 보일 수 있지만, 사용자 입력을 수집하는 데 아주 강력합니다. 그麼, 손을 놓고 시작해 보겠습니다!

부트스트랩 폼 컨트롤 소개

자세한 내용에 들어가기 전에, 부트스트랩을 배우는 이유를 잠시 생각해 보겠습니다. 집을 짓는 것을 상상해 보세요. 모든 벽돌을 스스로 만들 수도 있고, 미리 만들어진 부품을 사용할 수도 있습니다. 부트스트랩은 웹사이트에 대한 미리 만들어진 부품의 보물상자입니다. 시간을 절약하고 일관성을 유지합니다. 이제 첫 번째 컴포넌트를 탐구해 보겠습니다!

체크박스: 다중 선택의 기적

기본 체크박스

체크박스는 사용자가 여러 가지 옵션을 선택할 수 있는 작은 정사각형 상자입니다. 사용자가 목록에서 여러 항목을 선택하고 싶을 때 완벽합니다. 첫 번째 체크박스를 만들어 보겠습니다:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
기본 체크박스
</label>
</div>

이 예제에서 우리는 부트스트랩 클래스를 사용하여 체크박스를 스타일링하고 있습니다. form-check 클래스는 래퍼를 만들고, form-check-input 클래스는 체크박스 자체를 스타일링합니다. 레이블의 for 속성은 입력의 id와 일치하여 그들을 연결합니다.

선택 상태

occasionally, you might want a checkbox to be pre-checked. It's as easy as adding the checked attribute:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
선택된 체크박스
</label>
</div>

미정 상태

이제 재미있는 사실을 알려드리겠습니다: 체크박스는 '미정'이라는 세 번째 상태를 가질 수 있습니다. 마치 청소년이 방을 청소할 때처럼 - 깨끗하지는 않지만 완전히 더러운 것도 아닙니다. 이 상태는 HTML로 설정할 수 없지만, JavaScript로 설정할 수 있습니다:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckIndeterminate">
<label class="form-check-label" for="flexCheckIndeterminate">
미정 체크박스
</label>
</div>

<script>
document.getElementById('flexCheckIndeterminate').indeterminate = true;
</script>

비활성화된 체크박스

occasionally, you might want to display a checkbox but not allow users to interact with it. That's where the disabled attribute comes in handy:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckDisabled" disabled>
<label class="form-check-label" for="flexCheckDisabled">
비활성화된 체크박스
</label>
</div>

라디오 버튼: 단일 선택의 챔피언

기본 라디오 버튼

라디오 버튼은 체크박스의 사촌입니다. 외관은 비슷하지만 동작은 다릅니다. 체크박스는 여러 선택을 허용하지만, 라디오 버튼은 그룹 내에서 단일 선택을 강제합니다. 라디오 버튼 세트를 만들어 보겠습니다:

<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
기본 라디오
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
기본 선택된 라디오
</label>
</div>

이제 두 라디오 버튼이 동일한 name 속성을 가지고 있습니다. 이는 그들을 하나의 그룹으로 만들어, 동시에 하나만 선택될 수 있도록 합니다.

비활성화된 라디오 버튼

체크박스와 마찬가지로 라디오 버튼을 비활성화할 수 있습니다:

<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
<label class="form-check-label" for="flexRadioDisabled">
비활성화된 라디오
</label>
</div>

스위치: 현대적인 토글

스위치는 체크박스의 스타일리시한 대안입니다. On/off 설정에 완벽합니다. 하나를 만들어 보겠습니다:

<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">기본 스위치 체크박스 입력</label>
</div>

form-switch 클래스는 체크박스를 멋진 토글 스위치로 변환합니다.

레이아웃 옵션

기본 (Stacked)

기본적으로 체크박스와 라디오는 수직으로 쌓입니다:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="stackedCheck1">
<label class="form-check-label" for="stackedCheck1">쌓인 체크박스 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="stackedCheck2">
<label class="form-check-label" for="stackedCheck2">쌓인 체크박스 2</label>
</div>

Inline

옵션을 옆에 배치하고 싶다면 form-check-inline 클래스를 사용합니다:

<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>

Reverse

레이블을 체크박스 앞에 배치하고 싶다면 form-check-reverse를 사용합니다:

<div class="form-check form-check-reverse">
<input class="form-check-input" type="checkbox" id="reverseCheck1">
<label class="form-check-label" for="reverseCheck1">반대 체크박스</label>
</div>

레이블 없음

occasionally, you might want a checkbox or radio button without a label:

<div>
<input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>

접근성을 위해 aria-label을 사용해야 합니다!

토글 버튼

토글 버튼은 체크박스와 라디오 버튼을 사용하는 퓨전 방법입니다. 정규 버튼처럼 보이지만 체크박스나 라디오의 기능을 합니다:

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">단일 토글</label>

테두리 스타일

보다 부드러운 외관을 원하신다면 테두리 스타일을 사용합니다:

<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">단일 토글</label>

결론

축하합니다! 부트스트랩의 체크박스와 라디오 버튼에 대한 대단한 여행을 마친 것입니다. 이 작은 컴포넌트들은 간단해 보일 수 있지만, 상호작용 폼의 기초입니다. 연습이 완벽을 만듭니다. 이 요소들을 다양한 방법으로 결합하여 사용자에게 흥미로운 폼을 만들어 보세요.

이제 우리가 다루었던 방법의 빠른 참조 표를 제공합니다:

방법	설명
기본 체크박스	<input class="form-check-input" type="checkbox">
선택된 체크박스	checked 속성 추가
미정 체크박스	JavaScript로 설정
비활성화된 체크박스	disabled 속성 추가
기본 라디오	<input class="form-check-input" type="radio">
비활성화된 라디오	disabled 속성 추가
스위치	form-switch 클래스 사용
Inline 레이아웃	form-check-inline 클래스 사용
Reverse 레이아웃	form-check-reverse 클래스 사용
레이블 없음	레이블 생략, aria-label 사용
토글 버튼	btn-check 클래스 사용
테두리 스타일	btn-outline-* 클래스 사용

계속 실험하고, 배우고, 가장 중요한 것은 놀라운 웹 폼을 만들면서 즐거움을 느끼세요!

Credits: Image by storyset