[HTML] attribute란?

작성이유

jsp 작업을 하다 문득 내가 html에 대해 너무 모르고 그냥 하고 있다는 생각이 들었다.

옛날에 대충 훍기만 하였던 서적을 다시 보다 가장 많이 접하는 attribute 부분부터 보는 게

공부의 효율이 좋아 보여 이 부분을 다시 정리 차원에서 독서 후 블로그로 정리하였다.

attribute란?

HTML 어트리뷰트(attribute)는 웹 개발에서 중요한 역할을 합니다.

어트리뷰트는 웹 페이지의 요소(element)에 대한 추가적인 정보를 제공

 

1) 요소의 속성 설정: 어트리뷰트를 사용하여 HTML 요소의 다양한 속성을 설정할 수 있습니다.

<input> 요소의 type 어트리뷰트는 입력 필드의 유형(텍스트, 비밀번호 등)을 지정하는 데 사용

 

2) 스타일 지정: style 어트리뷰트를 통해 개별 HTML 요소에 직접 CSS 스타일을 적용

 

3) 요소 식별: id와 class 어트리뷰트는 요소를 식별하고 분류하는 데 사용됩니다.

id는 유일한 식별자를 제공하며, class는 여러 요소를 동일한 스타일이나 동작 그룹으로 분류할 때 사용

 

4) 동작 제어: 어트리뷰트를 사용하여 요소의 동작을 제어할 수 있습니다.

ex)<form> 요소의 action 어트리뷰트는 폼 데이터가 제출될 때 데이터를 처리할 서버의 URL을 지정

 

5) 데이터 저장: data-* 어트리뷰트를 사용하여 요소에 관련된 추가 데이터를 저장할 수 있습니다.

사용자 정의 데이터는 페이지의 JavaScript에서 활용될 수 있으며, 페이지의 동적인 동작을 구현하는 데 도움

 

6) 접근성 향상: 일부 어트리뷰트는 웹 사이트의 접근성을 향상하는 데 사용됩니다.

ex) alt 어트리뷰트는 이미지가 로드되지 않거나 시각 장애가 있는 사용자를 위해 이미지의 대체 텍스트를 제공

 

7) 상호작용 구현: 이벤트 핸들러 어트리뷰트(onclick, onchange 등)를 사용하여 요소에 대한

사용자 상호작용을 감지하고 처리가능

 

---

어트리뷰트의 종류

1. 글로벌 어트리뷰트
2. 특정 요소에 사용되는 어트리뷰트
3. 이벤트 어트리뷰트
4. data 어트리뷰트

 

글로벌 어트리뷰트

글로벌 어트리뷰트는 모든 HTML 요소에 공통적으로 사용될 수 있는 어트리뷰트입니다.

• class: 요소를 하나 이상의 클래스명과 연결. CSS와 JavaScript에서 해당 요소를 선택하기 위해 사용.
• id: 문서 내에서 고유해야 하는 식별자. CSS와 JavaScript에서 특정 요소를 지정하기 위해 사용.
• style: 요소에 직접적인 CSS 스타일을 적용.
• title: 요소에 대한 추가 정보를 제공하는 텍스트. 사용자가 요소 위에 마우스를 올렸을 때 표시됨.
• data-*: 사용자 정의 데이터 어트리뷰트. 페이지의 JavaScript에서 이 데이터를 활용할 수 있음.

특정 요소에 사용되는 어트리뷰트

다음은 특정 HTML 요소에만 적용되는 주요 어트리뷰트의 예입니다.

• href (<a>, <link>, <base>): 링크의 목적지 URL을 지정.
• src (<img>, <script>, <iframe>): 외부 리소스의 위치(URL)를 지정.
• alt (<img>, <area>): 이미지를 대체하는 텍스트를 제공.
• disabled (<button>, <input>, <select>, <textarea>): 폼 요소를 비활성화.
• selected (<option>): 드롭다운 목록에서 특정 옵션을 기본값으로 선택.
• checked (<input type="checkbox">, <input type="radio">): 체크박스나 라디오 버튼이 선택된 상태를 지정.
• placeholder (<input>, <textarea>): 필드에 입력하기 전에 표시되는 힌트 또는 가이드 텍스트.
• readonly (<input>, <textarea>): 사용자가 수정할 수 없는 입력 필드를 생성.
• type (<input>): 입력 필드의 유형(텍스트, 비밀번호, 이메일 등)을 지정.

*HTML 요소 기준 사용 가능한 주요 attribute 

<a>	href, target, download, rel	링크의 대상 URL, 링크가 어떻게 열릴지, 다운로드할 리소스, 링크와 관련된 옵션을 지정합니다.
<img>	src, alt, width, height	이미지의 소스 URL, 대체 텍스트, 이미지의 너비와 높이를 지정합니다.
<form>	action, method, enctype, autocomplete	폼을 제출할 서버의 URL, 제출 방식(GET/POST), 데이터 인코딩 타입, 자동 완성 옵션을 지정합니다.
<input>	type, value, name, placeholder, required, autocomplete	입력 필드의 유형, 초기 값, 필드 이름, 힌트 텍스트, 필수 입력 여부, 자동 완성 옵션을 지정합니다.
<button>	type, disabled	버튼의 유형(submit, reset, button 중 하나), 버튼 활성화/비활성화 여부를 지정합니다.
<script>	src, async, defer	외부 스크립트 파일의 URL, 스크립트 비동기 로드 여부, 문서 해석이 완료된 후 스크립트 실행 여부를 지정합니다.
<link>	rel, href, type, media	연결된 리소스와의 관계, 연결된 리소스의 URL, 리소스 타입, 미디어 유형을 지정합니다.
<meta>	name, content, charset	메타데이터 유형, 메타데이터 값, 문자 인코딩 방식을 지정합니다.
<style>	type, media	스타일 시트의 MIME 타입, 스타일이 적용될 미디어 유형을 지정합니다.
<select>	name, multiple, required	선택 목록의 이름, 다중 선택 가능 여부, 선택이 필수인지 여부를 지정합니다.
<option>	value, selected	옵션의 값, 옵션이 선택되었는지 여부를 지정합니다.

이벤트 어트리뷰트

이벤트 어트리뷰트는 사용자의 특정 행동(클릭, 마우스 오버, 키보드 입력 등)에 반응하여

JavaScript 함수를 실행하도록 요소를 설정

• onclick: 사용자가 요소를 클릭했을 때 실행될 JavaScript 코드.
• onmouseover: 마우스 포인터가 요소 위로 이동했을 때 실행.
• onchange: 요소의 값이 변경되었을 때 실행(주로 <input>, <select>, **<textarea>**에 사용).
• onsubmit: 폼 제출 시 실행(<form> 요소에 사용).

*이벤트 타입 설명

click	요소를 클릭했을 때 발생합니다.
dblclick	요소를 더블 클릭했을 때 발생합니다.
mousedown	마우스 버튼을 요소 위에서 눌렀을 때 발생합니다.
mouseup	마우스 버튼을 요소 위에서 놓았을 때 발생합니다.
mousemove	마우스 포인터가 요소 위를 이동할 때 발생합니다.
mouseover	마우스 포인터가 요소의 경계로 들어올 때 발생합니다.
mouseout	마우스 포인터가 요소의 경계를 벗어날 때 발생합니다.
mouseenter	마우스 포인터가 요소 위로 들어오지만 버블링이 발생하지 않습니다.
mouseleave	마우스 포인터가 요소를 떠나지만 버블링이 발생하지 않습니다.
keydown	키보드의 키를 누르고 있을 때 발생합니다.
keyup	키보드의 키를 놓았을 때 발생합니다.
keypress	키를 누른 상태에서 문자가 입력될 때 발생합니다. (현대 브라우저에서는 keydown에 주로 의존)
focus	요소가 포커스를 받았을 때 발생합니다. (버블링이 발생하지 않음)
blur	요소가 포커스를 잃었을 때 발생합니다. (버블링이 발생하지 않음)
change	<input>, <select>, <textarea> 등의 요소의 값이 변경되었을 때 발생합니다.
submit	폼 제출 시 발생합니다.
load	요소의 로딩이 완료되었을 때 발생합니다 (예: 이미지, 페이지 로딩 완료).
unload	문서나 리소스가 언로드될 때 발생합니다.
resize	브라우저 윈도우의 크기가 변경될 때 발생합니다.
scroll	스크롤할 때 발생합니다.
input	사용자가 입력 필드로 데이터를 입력할 때 발생합니다.

 

 

---

 

data-* 어트리뷰트

• 정의: data-* 어트리뷰트는 사용자 정의 데이터를 HTML 요소에 저장하기 위해 사용됩니다. 여기서 **``**는 사용자가 정의할 수 있는 이름을 의미합니다.
• 목적: HTML 요소와 관련된 추가 정보를 저장할 수 있으며, 이 정보는 CSS나 JavaScript에서 사용할 수 있습니다.
• 사용법: HTML 요소에 data-* 형식으로 어트리뷰트를 추가합니다. 예를 들어, data-index="3" 또는 **data-user-id="user123"**과 같이 사용할 수 있습니다.

dataset 프로퍼티

• 정의: dataset 프로퍼티는 요소의 data-* 어트리뷰트에 저장된 모든 사용자 정의 데이터에 접근할 수 있는 방법을 제공하는 JavaScript 객체입니다.
• 목적: HTML 요소에 저장된 data-* 어트리뷰트 값을 쉽게 읽거나 수정할 수 있습니다.
• 사용법: JavaScript에서 요소의 dataset 프로퍼티를 통해 data-* 어트리뷰트에 접근합니다. 어트리뷰트 이름의 **data-**는 생략되고, 하이픈(-) 뒤에 오는 문자는 카멜케이스로 변환됩니다. 예를 들어, HTML의 **data-user-id**는 JavaScript에서 **dataset.userId**로 접근할 수 있습니다.

예제

HTML 요소에 data-* 어트리뷰트를 사용한 예제입니다:

htmlCopy code
<div id="userProfile" data-user-id="user123" data-user-role="admin">
    사용자 프로필
</div>

JavaScript에서 dataset 프로퍼티를 사용하여 위의 data-* 어트리뷰트에 접근하는 방법:

javascriptCopy code
var userProfile = document.getElementById("userProfile");
console.log(userProfile.dataset.userId); // "user123"
console.log(userProfile.dataset.userRole); // "admin"

// 데이터 수정
userProfile.dataset.userRole = "editor";
console.log(userProfile.dataset.userRole); // "editor"

data-* 어트리뷰트와 dataset 프로퍼티를 사용하면, HTML 요소와 연관된 추가 정보를 HTML 마크업 내에서 직접 정의할 수 있고

이 정보를 JavaScript에서 쉽게 활용 가능

 

 

---

 html 어트리뷰트 와 DOM 프로퍼티의 차이점

	HTML 어트리뷰트	DOM 프로퍼티
정의	HTML 요소에 직접 쓰여진 이름-값 쌍입니다.	HTML 요소에 대한 JavaScript 객체의 속성입니다.
타입	언제나 문자열입니다.	다양한 타입을 가질 수 있습니다(문자열, 불리언, 객체 등).
접근 방법	HTML 마크업을 통해 초기 값 설정에 사용됩니다.	JavaScript를 통해 동적으로 값을 읽거나 수정할 수 있습니다.
사용 사례	요소의 초기 상태나 고정값을 설정할 때 사용됩니다.	요소의 현재 상태를 조작하거나 변경사항을 반영할 때 사용됩니다.
동적/정적	정적인 정보로, 페이지 로드 시 설정되고 일반적으로 변경되지 않습니다.	동적인 정보로, 스크립트를 통해 언제든지 변경할 수 있습니다.
예시	<input type="text" value="Hello">	document.getElementById("input").value = "Hello";
값의 동기화	일부 어트리뷰트와 프로퍼티 사이에서는 자동 동기화됩니다.	어트리뷰트 값이 변경되면 프로퍼티 값도 변경될 수 있으나, 반대의 경우는 항상 그렇지 않을 수 있습니다.
값의 업데이트	직접 HTML 코드를 수정하지 않는 한 업데이트되지 않습니다.	사용자의 입력이나 스크립트 실행 등으로 실시간으로 업데이트됩니다.