id 속성

1. 고유 영역 식별자

   document.getElementId()를 통해 고유 영역을 참조할 수 있다.

   태그에 유일한 이름을 붙이고 싶을 때 사용한다. (전체 페이지에서 단 하나의 요소에만 지정할 수 있다.)

2. Label과 input 컨트롤을 연결하기 위한 식별자

   label과 연관되기 위해 input 태그는 id 속성이 필요하다.

   <div class="form-control">
     <label for="email">이메일</label>
     <input type="email" id="email"> <!--'이메일' 레이블 텍스트와 연결된 이메일 인풋 컨트롤-->
   </div>
   

3. 표와 표 설명을 연결하기 위한 식별자

   <p hidden id="table-desc">표 설명(요약)</p>
   <!--표 요소의 aria-describedby 속성과 연결된 표 설명-->
   <table aria-describedby="table-desc">
     <caption>표 제목</caption>
     ...
   </table>
   

   aria-describedby 는 웹 접근성을 개선하기 위해 사용되는 WAI-ARIA 속성이다.

   이 속성은 문자열로 구성된 고유 id 값을 가진다. 해당 id 값은 추가 정보를 제공하는 id 속성과 일치해야 한다.

class 속성

1. 여러 영역에서 중복 정의를 허용하여 재사용이 가능한 식별자

   <button type="button" class="button">읽기</button>
   
   <input type="button" class="button" value="읽기">
   
   <a href class="button">읽기</a>
   

   요소의 유형에 상관없이 CSS에선 일관된 디자인이 반영된다.

2. 한 영역에서 여러 개 정의를 허용하여 재사용이 가능한 식별자

<!-- 고정 너비를 가진 컨테이너 스타일을 반영하기 위한 식별자 -->
<div class="container">
  ...
</div>

<!-- 컨테이너 요소의 너비를 유연(fluid)하게 변경하는 식별자 추가 -->
<div class="container is-fluid">
  ...
</div>

name 속성

폼 전송 이벤트 발생 시 서버로 데이터 이름으로써 전송하기 위한 식별자

name 속성은 자바스크립트에서 요소를 참조할 수 있게 한다.

<form>
  <div class="select">
    <label for="source-of-info">정보 출처</label>
    <select 
      name="source-of-info" id="source-of-info"> <!--<select> 요소에 설정된 값을 식별하기 위한 이름-->
      <option>정보 출처를 선택해주세요.</option>
      <option>페이스북</option>
      <option>트위터</option>
      <option selected>인스타그램</option>
    </select>
  </div>
</form>

// name은 요소를 하여금 자바스크립트에서 접근할수 있게 하는 고유 식별자 이다.

var form = document.querySelector('form');
var formData = new FormData(form);

formData.get('source-of-info'); // name="source-of-info" 정보 값을 출력 => 인스타그램

// 이벤트 핸들러일 경우 이런식으로 접근도 가능하다.
e.target.source-of-info