체크박스 만들기 (input type="checkbox")

체크박스는 웹 페이지에서 여러 항목 중에서 사용자가 선택할 수 있는 옵션을 나타내는 UI 요소입니다. 이 포스팅에서는 체크박스를 만드는 방법과 관련된 내용을 설명하겠습니다.

HTML에서 체크박스 만들기

HTML의 input 요소에서 type 속성을 "checkbox"로 설정하여 체크박스를 만들 수 있습니다. 아래는 체크박스의 예시입니다:

<input type="checkbox" name="option1" value="Option 1"> Option 1
<input type="checkbox" name="option2" value="Option 2" checked> Option 2 (기본으로 선택되어 있는 경우)

위의 코드에서 type="checkbox"는 체크박스를 생성하는 속성이고, name 속성은 해당 체크박스의 이름을 지정하며, value 속성은 체크박스가 전송될 때 해당 값을 가지게 됩니다. 또한 checked 속성을 추가하면 기본으로 선택되어 있는 체크박스가 됩니다.

체크박스 상태 확인하기

JavaScript를 사용하여 체크박스의 상태를 확인할 수 있습니다. 아래는 체크박스의 상태를 확인하는 예시입니다:

const checkbox = document.querySelector('input[name="option1"]');

if (checkbox.checked) {
  console.log("Option 1이 선택되었습니다.");
} else {
  console.log("Option 1이 선택되지 않았습니다.");
}

위의 코드에서 querySelector 메소드를 사용하여 체크박스를 선택하고, checked 속성을 확인하여 체크 여부를 판단합니다.

CSS를 사용하여 체크박스 스타일링하기

체크박스의 스타일을 변경하려면 CSS를 사용할 수 있습니다. 예를 들어, 아래의 CSS 코드는 체크박스에 스타일을 적용하는 방법을 보여줍니다:

input[type="checkbox"] {
  /* 체크박스 스타일링을 위한 코드 작성 */
}

input[type="checkbox"]:checked {
  /* 체크된 상태에서의 스타일링을 위한 코드 작성 */
}

위의 코드에서 체크박스를 선택하기 위해 input[type="checkbox"]를 사용하고, :checked 선택자를 사용하여 체크된 상태에서 스타일을 적용합니다.

이제 체크박스를 만드는 방법과 관련된 기본적인 내용을 알았습니다. 체크박스를 활용하여 사용자가 선택 가능한 옵션을 제공하는 웹 페이지를 만들어보세요.

yynt

체크박스 만들기 (input type="checkbox")