첫 코딩테스트를 진행하게 되었다.
제시되는 모바일 사이트를 HTML / CSS / JS (바닐라)를 사용하여 2시간이라는 시간 내에 완성시켜야 했었다.
( 바닐라 자바스크립트는 더 공부해야겠다 ㅜ)

결과는 참담했고, 자신있던 마크업과 CSS에서도
내 스스로에게 한심하다 느꼈다.

그 중에서 input checkbox와 radoi 설정을 오랫동안 쓰질 않아 까먹은 내 자신이 열받아, 이렇게 공부할겸 정리해두려고 한다.

---

<fieldset>
  <legend>관심사를 선택해주세요</legend>
  <div>
    <input type="checkbox" id="coding" ✨name="interest" value="coding" />
    <label for="coding">개발</label>
  </div>
  <div>
    <input type="checkbox" id="music" ✨name="interest" value="music" />
    <label for="music">음악</label>
  </div>
</fieldset>

✅ name

위 예제를 보면 두 개의 체크박스에 모두 같은 name을 지정한 것을 확인할 수 있다. 두 개의 checkbox를 하나로 분류해줄 수 있는 속성으로, 같은 이름을 가진 checkbox는 동일한 그룹을 묶이게 된다.

✅ label

간단히 말하면 label은 input태그와 라벨링을 시키는 태그로 위 예제에서는
개발이란 텍스트를 클릭해도 input태그가 선택이 되도록 하는 것이다
라벨링을 하는 방법은 input의 id값과 label 태그의 for속성 값을 동일하게 해주면 그 둘은 라벨링이 완료가 된것이다.

<input type="checkbox" ✨id="music" >
<label ✨for="music">음악</label>

✅ total

네이버에 적용했던 total 선택박스 참고

---

느낀점

기초가 단단해야 한다.