id, class, name 속성 비교
id
: 고유한 식별을 목적으로 하는 경우 사용
class
: css 쿼리문 밑 재사용을 목적으로 하는 경우 사용
name
: form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성
# id 속성 🪪
1. 고유 영역 식별자
document.getElementID()
를 통해 고유 영역을 참조할 수 있다.
<section id="front-end-news">
<h1>프론트엔드 개발 뉴스</h1>
...
</section>
<section id="front-end-heroes">
<h1>프론트엔드 개발 히어로즈</h1>
...
</section>
<div class="form-control">
<label for="email">이메일</label>
<input type="email" id="email">
</div>
3. 표와 표 설명을 연결하기 위한 식별자
<p hidden id="table-desc">표 설명(요약)</p>
<table aria-describedby="table-desc">
<caption>표 제목</caption>
...
</table>
# class 속성 🧺
1. 여러 영역에서 중복 정의를 허용하여 재사용이 가능한 식별자
- 요소의 유형과 상관 없이 class="button" 설정 되면 일관된 디자인이 반영된다.
<button type="button" class="button">읽기</button>
<input type="button" class="button" value="읽기">
<a href class="button">읽기</a>
2. 한 영역에서 여러 개의 정의를 허용하여 재사용이 가능한 식별자
<div class="container">
...
</div>
<div class="container is-fluid">
...
</div>
# name 속성 📦
- name 속성은 js에서 요소를 참조할 수 있게 한다.
<form>
<div class="select">
<label for="source-of-info">정보 출처</label>
<select
name="source-of-info" id="source-of-info">
<option>정보 출처를 선택해주세요.</option>
<option>페이스북</option>
<option>트위터</option>
<option selected>인스타그램</option>
</select>
</div>
</form>
var form = document.querySelector('form');
var formData = new FormData(form);
formData.get('source-of-info');
e.target.source-of-info
reference
[HTML] 📚 태그 속성 id / class / name 차이 및 사용처