[HTML 1] id, name, class 비교

김헤일리·2022년 11월 25일

html 항해99

HTML의 태그 사용 중, 태그 시작 부분에 id, name, class 등을 첨부하는데, 각 식별자들의 역할 이해
식별자를 어디에 어떻게 사용하는지, CSS, JS와의 연관성 이해

1. HTML5 Semantic Tag

HTML에서 사용하는 태그들은 브라우저의 레이아웃을 생성한다. (뼈대 만들기)
각 태그는 페이지 내에서 갖고 있는 정보의 역할이 있다.
- ex. h1 태그를 사용해서 제목을 작성한 것과, 글씨를 굵고 크게 만들어서 "제목처럼 보이는" 제목을 작성하는 것은 다르다. (feat. SEO)
해당 태그가 페이지내에서 어떤 역할 의미 중요.

❗️ 블럭 태그 (Block Tag)

자신의 내용과 앞뒤 태그의 내용을 다른 라인에 출력하는 태그
자신의 내용만으로 한 라인을 독점해서 출력하는 태그(*)
영역(구조)을 만들때 사용 > 컨테이너 역할 > 레이아웃 구성(틀 만들기)
내용물의 크기와 상관없이 너비는 항상 100%, 높이는 내용물의 크기에 맞춰 변화
대표적인 블럭 태그의 예시:
- div
- h1 ~ h6
- header
- footer
- ul 등

❗️ 인라인 태그 (Inline Tag)

자신의 내용과 앞뒤 태그의 내용을 같은 라인에 출력하는 태그
구성 요소 역할을 한다.(출력 내용 역할)
내용물의 크기가 태그의 영역이 된다.
대표적인 인라인 태그의 예시:
- span
- a
- input
- label
- button 등

2. HTML 식별자 종류

❗️ id 식별자

고유한 식별을 목적으로 하는 경우. HTML 하나당 하나의 id 식별자를 사용한다. (중복 불가)
JS에서 문서 객체에 접근하기 위해 사용하는 식별자 중 하나
사용 시:
- document.getElementById를 사용해서 JS에서 HTML
- HTML 내부의 요소도 조작할 수 있게 만드는 용도로 사용한다.
  - 예시:
```
<div class="form-control">
  <label for="email">이메일</label>
  <input type="email" id="email"> 
</div>
```
  1. label 태그 사용 시, label 태그와 연결되는 input 태그에 id 값을 label의 이름과 동일하게 부여해서 label와 input 필트를 조작할 수 있다.
  2. 이때 label 태그에도 input 필드와 연결된다는 의미에서 for = 아이디명을 포함해야 한다.
  - 또 다른 예시:
```
<p hidden id="table-desc">표 설명(요약)</p>

<table aria-describedby="table-desc">
  <caption>표 제목</caption>
  ...
</table>
```
  - 표와 표 설명을 연결하기 위한 식별자로서도 사용할 수 있다.

❗️ name 식별자

form 전송 시, 서버에 데이터 이름으로서 요소의 값(value)을 전달하기 위해 사용하는 식별자
중복 설정이 가능함

사용 시:

name 속성은 자바스크립트에서 querySelector()를 이용해서 HTML 요소를 참조할 수 있음.

예시:

**HTML**
<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>

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

var form = document.querySelector('form'); // querySelector를 이용해서 html의 "form" 요소에 접근
var formData = new FormData(form);

formData.get('source-of-info'); 
// name="source-of-info" 정보 값을 출력 => 인스타그램
// form 태그 안에 있는 select 태그의 name 값을 이용해서 접근함

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

❗️ class 식별자

CSS에서 디자인 할 때 자주 사용하는 식별자
중복 설정이 가능함

사용 시:

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

<button type="button" class="button">읽기</button>

<input type="button" class="button" value="읽기">

<a href class="button">읽기</a>

요소의 유형과 상관 없이 class="button" 설정 되면 일관된 디자인이 반영.

또 다른 예시: 한 영역에서 여러개 정의를 허용하여 재사용이 가능한 식별자

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

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