[HTML/CSS] id/class/name 태그 속성

현채은·2024년 1월 23일

1️⃣ id 속성

: 고유한 식별 (= 중복 불가능) 을 목적으로 하는 경우에 사용된다.

1. 고유 영역 식별자

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

<section id = 'front-end-news'>
  <h1>프론트엔드 뉴스</h1>
  ...
</section>
<section id = 'front-end-heros'>
  <h1>프론트엔드 개발 히어로즈</h1>
  ...
</section>

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

<label for = 'name' > 이름 : </label>
<input id = 'name' type = 'text'>

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

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

2️⃣ class 속성

: css 쿼리문 및 재사용을 목적으로 하는 경우 사용

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

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

<input type = 'button' class = 'button' value = '읽기'>
  
<a href = 'http:/...' class = 'button'> 읽기 </a>

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

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

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

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

3️⃣ name 속성

: form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성

1. ⭐️ 폼 전송 이벤트 발생 시 서버에게 데이터 이름으로써 전달하기 위한 식별자

name 속성은 자바스크립트에서 요소를 참조할 수 있게 한다.
<select> 요소에 설정된 값을 식별하기 위한 이름

<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);

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