체크 타입 설정하기

<div id="slider">
  <div id="slider-thumb">
      <label for="slide-1"><p>Slide One</p></label>
      <label for="slide-2"><p>Slide Two</p></label>
      <label for="slide-3"><p>Slide Three</p></label>
  </div>
  
  <div id="div">
    <input id="slide-1" type="radio" name="slides" checked>
    <input id="slide-2" type="radio" name="slides">
    <input id="slide-3" type="radio" name="slides">
  </div>
</div>

input type="checkbox" type="radio" 이 둘의 차이점은 checkbox는 중복 선택이 가능하며 radio 버튼은 단일 선택만 가능하다. 따라서 checkbox 타입을 사용하였다.
또한 name 값을 설정 해줘야 중복 선택이 안된다.

속성	내용
name	서버로 전송될 라디오 및 체크박스의 이름. key 값에 해당함 라디오 버튼은 동일한 그룹끼리 같은 name 값을 지정함
value	서버로 넘어갈 값을 지정
checked	초깃값으로 기본 선택될 항목을 설정

:checked : 클래스를 활용하여 사용자가 JavaScript 를 사용하지 않고 체크박스 상태에 따라 콘텐츠를 토글할 수 있도록 합니다.

HTML input id
id 값은 일반적으로 CSS나 자바스크립트 등에서 선택자로 사용됩니다. 하지만 id 값은 HTML의 input 태그에서는 label 태그와 연결 할 때도 사용할 수 있습니다.

label for
label 태그는 checkbox, radio와 같은 체크박스 등의 속성에 설명하는 문자를 삽입할 때 사용하는 태그입니다. for 라는 속성을 삽입해서 input의 id값과 일치 시키면 체크 박스의 클릭 범위를 증가시킬 수 있습니다.