HTML 요소 식별자 완벽 비교표

속성	선택	상황	이유/용도	예시	접근 방법	특징	필수성
vlaue	사용자 입력 데이터 활용	실제 데이터 포함	value💾 실제 데이터 - 사용자가 입력한 현재 값 - 폼 제출 시 서버로 전송되는 데이터 - 실시간 상태 관리	value="안녕하세요" value="123" value="korea"	event.target.value input.value select.value	• 항상 문자열로 반환 • 사용자 입력에 따라 실시간 변환 • 읽기/쓰기 가능	폼 요소에서 핵심
type	입력 방식 제어	브라우저 동작 결정	⚙️ 요소 세부 타입 - 입력 요소의 구체적 형태 - 브라우저 동작 제어 - 유효성 검사	type="email" type="password" type="submit"	event.target.type input.type	• 입력 요소에 주로 사용 • 브라우저 기본 동작 결정 • HTML5에서 다양화	일부 요소에서 필수
name	폼 데이터 서버 전송	서버에서 인식	📝 폼 데이터 식별 - 서버로 전송될 데이터의 키 - 폼 요소 그룹핑 - 동적 데이터 처리	name="username" name="color" (radio)	document.getElementsByName() event.target.name	• 폼 제출 시 서버에 전송 • 같은 name으로 그룹 가능 • 개발자가 정의	폼 요소에서 중요
id	특정 요소 하나만 선택	유일성 보장	🎯 고유 식별자 - 페이지 내 유일한 요소 식별 - CSS/JS에서 특정 요소 선택 - 앵커 링크 대상	id="user-profile" id="main-header"	document.getElementById() #user-profile (CSS)	• 페이지 내 유일해야 함 • 대소문자 구 • 공백 불가	선택적
class	여러 요소 같은 스타일	재사용성	🏷️ 그룹 분류 - 여러 요소를 같은 스타일로 묶기 - CSS 스타일링 - 그룹별 동작 처리	class="btn primary" class="card highlight"	document.getElementsByClassName() .btn (CSS)	• 여러 요소가 같은 class 가능 • 공백으로 여러 class 지정 • 재사용성 높음	선택적
tagName	요소 타입 구분	브라우저 제공	🏗️ 요소 타입 식별 - HTML 태그 종류 구분 - 요소별 다른 처리 - 타입 검증	"INPUT" "BUTTON" "DIV"	event.target.tagName element.tagName	• 브라우저가 자동 설정 • 항상 대문자 • 읽기 전용	모든 요소에 존재