수정하기 - HTML에서 `<input>` 태그의 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와 결합하여 동적인 사용자 경험을 제공할 수 있습니다. 사용자는 이러한 입력 요소를 통해 여러 옵션 중에서 선택할 수 있으며, 웹 애플리케이션의 상호작용을 더욱 풍부하게 만들어 줍니다.