HTML Academy · 강의

체크박스 및 라디오 버튼 그룹

그룹에서 사용자가 하나 이상의 옵션을 선택하도록 만들기

체크박스 및 라디오 버튼 그룹은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

체크박스

체크박스를 사용하면 사용자가 옵션을 0개, 1개 또는 여러 개 선택할 수 있습니다:

<label>
  <input type="checkbox" name="terms" value="agreed"> I agree to the Terms
</label>

<!-- Each checkbox is independent -->
<!-- checked attribute = pre-checked -->
<input type="checkbox" name="newsletter" value="yes" checked>

체크박스 제출

체크박스는 선택된 경우에만 제출됩니다:

<form>
  <input type="checkbox" name="hobby" value="reading"> Reading<br>
  <input type="checkbox" name="hobby" value="coding"> Coding<br>
  <input type="checkbox" name="hobby" value="gaming"> Gaming<br>
</form>
<!-- If reading and coding are checked:
     hobby=reading&hobby=coding -->
<!-- Unchecked boxes send nothing -->

fieldset을 사용하는 체크박스 그룹

fieldset과 legend로 관련 체크박스를 그룹화하십시오:

<fieldset>
  <legend>Select your interests</legend>

  <label><input type="checkbox" name="interest" value="html"> HTML</label>
  <label><input type="checkbox" name="interest" value="css"> CSS</label>
  <label><input type="checkbox" name="interest" value="js"> JavaScript</label>
  <label><input type="checkbox" name="interest" value="python"> Python</label>
</fieldset>

라디오 버튼

라디오 버튼을 사용하면 사용자가 그룹에서 정확히 하나의 옵션을 선택할 수 있습니다:

<fieldset>
  <legend>Preferred plan</legend>

  <label><input type="radio" name="plan" value="free"> Free</label>
  <label><input type="radio" name="plan" value="pro"> Pro</label>
  <label><input type="radio" name="plan" value="enterprise"> Enterprise</label>
</fieldset>
<!-- All radios in a group share the same name attribute -->
<!-- Selecting one deselects the others -->

checked 속성

checked 속성으로 라디오 버튼이나 체크박스를 미리 선택하십시오:

<fieldset>
  <legend>Skill level</legend>
  <label><input type="radio" name="level" value="beginner" checked> Beginner</label>
  <label><input type="radio" name="level" value="intermediate"> Intermediate</label>
  <label><input type="radio" name="level" value="advanced"> Advanced</label>
</fieldset>

체크박스 및 라디오 버튼 스타일 지정

레이블 기법을 사용하여 체크박스를 사용자 지정 스타일로 만드십시오:

<label class="custom-check">
  <input type="checkbox" name="agree">
  <span class="checkmark"></span>
  I agree
</label>

/* Hide native input, style the span: */
.custom-check input { opacity: 0; width: 0; }
.checkmark {
  width: 1.25rem; height: 1.25rem;
  border: 2px solid #ddd; border-radius: 3px;
  display: inline-block; vertical-align: middle;
}
.custom-check input:checked + .checkmark { background: #0070f3; }

불확정 상태

체크박스는 선택되지도 선택 해제되지도 않은 불확정 상태가 될 수 있습니다:

<input type="checkbox" id="select-all">

<script>
// Set via JavaScript only -- no HTML attribute
document.getElementById('select-all').indeterminate = true;
// Visually shown as a dash (−) in most browsers
// Used for "select all" when some children are checked
</script>

기본 선택이 없는 라디오 버튼

라디오 버튼을 미리 선택하지 않는 편이 더 나은 경우도 있습니다:

미리 선택하면 해당 옵션이 권장된다는 의미가 됩니다
명확한 기본값이 없는 필수 선택 항목(성별, 요금제)의 경우 선택하지 않은 상태로 두십시오
사용자가 명시적으로 선택하도록 required를 추가하십시오

<fieldset>
  <legend>Gender</legend>
  <label><input type="radio" name="gender" value="m" required> Male</label>
  <label><input type="radio" name="gender" value="f" required> Female</label>
  <label><input type="radio" name="gender" value="nb" required> Non-binary</label>
  <label><input type="radio" name="gender" value="prefer_not" required> Prefer not to say</label>
</fieldset>

체크박스: checked와 값 비교

체크박스 제출에 관한 두 가지 중요한 사항:

<!-- The value sent when checked: -->
<input type="checkbox" name="subscribe" value="yes">
<!-- Submits: subscribe=yes when checked -->
<!-- If value is omitted, default value is 'on' -->

<!-- JavaScript checked state: -->
const cb = document.querySelector('input[name="subscribe"]');
console.log(cb.checked);    // true or false
console.log(cb.value);      // 'yes' (always, even when unchecked)

라디오 그룹의 키보드 탐색

라디오 그룹의 키보드 동작:

Tab 키를 누르면 선택된 라디오 버튼이나 첫 번째 라디오 버튼으로 그룹에 포커스가 들어갑니다
화살표 키(↑/↓ 또는 ←/→)로 옵션을 순환합니다
Tab 키를 누르면 그룹 밖의 다음 포커스 가능 요소로 이동합니다

모두 선택 패턴

모든 체크박스를 선택하거나 선택 해제하는 패턴:

<label>
  <input type="checkbox" id="select-all"> Select all
</label>
<fieldset id="items">
  <label><input type="checkbox" class="item" value="1"> Item 1</label>
  <label><input type="checkbox" class="item" value="2"> Item 2</label>
  <label><input type="checkbox" class="item" value="3"> Item 3</label>
</fieldset>
<script>
document.getElementById('select-all').addEventListener('change', function() {
  document.querySelectorAll('.item').forEach(cb => cb.checked = this.checked);
});
</script>

빠른 확인

라디오 버튼이 같은 그룹에 속하도록 만드는 name 속성 규칙은 무엇인가요?

복습: 체크박스 및 라디오 버튼

체크박스와 라디오 버튼 핵심 사항:

체크박스 — 여러 항목을 선택하며, 선택된 경우에만 제출됩니다
라디오 버튼 — 정확히 하나를 선택하며, name으로 그룹화합니다
둘 다 미리 선택할 때 checked 속성을 사용합니다
<fieldset> + <legend>로 감싸십시오
화살표 키로 라디오 그룹 안을 탐색합니다

자주 묻는 질문

“체크박스 및 라디오 버튼 그룹” 강의는 무료인가요?

네 — “체크박스 및 라디오 버튼 그룹” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“체크박스 및 라디오 버튼 그룹”에서 뭘 배우나요?

그룹에서 사용자가 하나 이상의 옵션을 선택하도록 만들기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“체크박스 및 라디오 버튼 그룹” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← HTML Academy(으)로 돌아가기