HTML에서 `<input>` 태그의 checked 속성은 어떻게 사용하나요?

Q1: HTML에서 `` 태그의 checked 속성은 무엇인가요?
A1: `checked` 속성은 `` 태그 중에서 라디오 버튼(`type="radio"`)이나 체크박스(`type="checkbox"`)의 기본 선택 상태를 지정할 때 사용합니다. 이 속성이 포함되면 해당 체크박스나 라디오 버튼이 페이지 로드 시 기본적으로 선택된 상태로 표시됩니다.

---

Q2: checked 속성을 어떻게 작성하나요?
A2: `` 태그 내에 `checked`를 속성 이름만 단독으로 작성합니다. 예를 들어:
```html

```
또는
```html

```

---

Q3: checked 속성의 값으로 true 나 false를 넣어야 하나요?
A3: 아니요. `checked`는 불리언 속성이므로, 속성 이름만 쓰면 true로 간주되고, 없으면 false로 간주됩니다. 따라서 `checked="checked"`나 `checked="true"`를 써도 동작하지만, 일반적으로는 단순히 `checked`만 작성하는 것이 표준적이고 간결합니다.

---

Q4: checked 속성은 자바스크립트로도 설정할 수 있나요?
A4: 네, 자바스크립트에서는 다음과 같이 input 요소의 `checked` 프로퍼티를 조작해서 선택 상태를 변경할 수 있습니다.
```javascript
document.getElementById('myCheckbox').checked = true;
```
---

Q5: checked 속성이 여러 라디오 버튼에 모두 있으면 어떻게 되나요?
A5: 같은 `name` 값을 가진 라디오 버튼 그룹에서 둘 이상의 라디오 버튼에 `checked`가 지정되면, 브라우저는 첫 번째 `checked` 속성을 가진 버튼만 선택 상태로 표시합니다.

---

Q6: checked 속성이 없으면 기본 상태는 무엇인가요?
A6: `checked` 속성이 없으면 기본적으로 체크박스나 라디오 버튼은 선택되지 않은 상태로 렌더링됩니다.

---

Q7: `` 와 `` 에서 checked 속성의 차이점은?
A7: 동작 방식은 동일하지만, 체크박스는 여러 개 선택 가능하고, 라디오 버튼은 같은 그룹(name)이면 오직 한 개만 선택됩니다. checked 속성은 두 타입에서 초기 선택 상태만 설정합니다.

---

Q8: 폼 제출 시 checked 상태가 전송되지 않을 수도 있나요?
A8: 체크된 체크박스 또는 라디오 버튼의 `name`과 `value`가 폼 제출 시 함께 전송됩니다. 선택되지 않은 경우 전송되지 않습니다.

---

요약:
- `checked`는 `` 또는 `` 태그에서 기본 선택을 나타내는 불리언 속성입니다.
- 단순히 `checked` 속성명을 쓰면 선택된 상태, 없으면 선택되지 않은 상태로 동작합니다.
- 자바스크립트로도 `checked` 프로퍼티를 조작할 수 있습니다.
- 라디오 버튼 그룹에서는 하나의 요소만 `checked` 상태가 되도록 주의합니다.

HTML에서 `<input>` 태그의 `checked` 속성은 주로 체크박스(`type="checkbox"`)와 라디오 버튼(`type="radio"`)에 사용됩니다. 이 속성은 해당 입력 요소가 선택되었는지를 나타내며, 기본적으로 페이지가 로드될 때 어떤 체크박스나 라디오 버튼이 기본적으로 선택되어 있어야 하는지를 설정하는 데 유용합니다. 체크박스에서의 사용 체크박스는 사용자가 여러 개의 옵션 중에서 하나 이상을 선택할 수 있도록 하는 입력 요소입니다. `checked` 속성을 사용하면 체크박스가 페이지가 로드될 때 기본적으로 선택된 상태로 표시됩니다. 예제: ```html <form> <label> <input type="checkbox" name="option1" checked> 옵션 1 </label> <label> <input type="checkbox" name="option2"> 옵션 2 </label> <label> <input type="checkbox" name="option3" checked> 옵션 3 </label> </form> ``` 위의 예제에서 "옵션 1"과 "옵션 3" 체크박스는 페이지가 로드될 때 기본적으로 선택된 상태로 표시됩니다. 사용자가 체크박스를 클릭하면 선택 상태가 변경됩니다. 라디오 버튼에서의 사용 라디오 버튼은 사용자가 여러 옵션 중에서 하나만 선택할 수 있도록 하는 입력 요소입니다. `checked` 속성을 사용하여 페이지가 로드될 때 어떤 라디오 버튼이 기본적으로 선택되어 있는지를 설정할 수 있습니다. 예제: ```html <form> <label> <input type="radio" name="color" value="red" checked> 빨강 </label> <label> <input type="radio" name="color" value="green"> 초록 </label> <label> <input type="radio" name="color" value="blue"> 파랑 </label> </form> ``` 위의 예제에서 "빨강" 라디오 버튼은 기본적으로 선택된 상태로 표시됩니다. 사용자가 다른 라디오 버튼을 선택하면 이전에 선택된 버튼은 자동으로 선택 해제됩니다. JavaScript와의 상호작용 `checked` 속성은 JavaScript를 사용하여 동적으로 변경할 수 있습니다. 예를 들어, 사용자가 체크박스를 클릭할 때 다른 요소의 상태를 변경하고 싶다면 다음과 같이 할 수 있습니다. ```html <form> <label> <input type="checkbox" id="option1" onclick="toggleOptions()"> 옵션 1 </label> <label> <input type="checkbox" id="option2" d<a href='https://sangseek.com/sangseeks/isabled/ko'>isabled</a>> 옵션 2 </label> </form> <script> function toggleOptions() { const option2 = document.getElementById('option2'); option2.disabled = !document.getElementById('option1').checked; } </script> ``` 위의 코드에서 "옵션 1" 체크박스를 클릭하면 "옵션 2" 체크박스의 활성화 여부가 변경됩니다. `option1`이 선택되면 `option2`가 활성화되고, 선택 해제되면 비활성화됩니다. 결론 `checked` 속성은 HTML에서 체크박스와 라디오 버튼의 기본 선택 상태를 설정하는 데 매우 유용합니다. 이를 통해 사용자 인터페이스를 보다 직관적으로 만들 수 있으며, JavaScript와 결합하여 동적인 사용자 경험을 제공할 수 있습니다. 사용자는 이러한 입력 요소를 통해 여러 옵션 중에서 선택할 수 있으며, 웹 애플리케이션의 상호작용을 더욱 풍부하게 만들어 줍니다.