모든 태그에 작성 가능한 전역 어트리뷰트들이 존재합니다. 앞에서 살펴본 aria-label, aria-hidden 어트리뷰트도 전역 어트리뷰트에 해당합니다.
1. aria-*
aria-label
aria-label 어트리뷰트는 스크린 리더가 읽을 내용을 작성할 수 있습니다.
요소의 Content 영역에 작성된 텍스트가 아닌 aria-label 어트리뷰트에 작성된 값을 스크린 리더가 읽어줍니다.
aria-hidden
aria-hidden 어트리뷰트 값으로 true 작성시 스크린 리더가 해당 요소를 탐색하지 않도록 설정할 수 있습니다.
2. class
class 어트리뷰트는 CSS나 JS에서 요소를 선택하기 위해 사용하는 일종의 별명입니다.
다른 요소와 중복되는 클래스 이름을 가질 수 있으며, 공백 문자를 통해 여러 클래스 이름을 가질 수도 있습니다.
3. id
id 어트리뷰트는 class 어트리뷰트와 식별자 역할을 한다는 점이 유사하지만 차이점이 존재합니다. id 어트리뷰트 값은 HTML 문서 내 유일해야 합니자.
즉, 다른 요소의 id 어트리뷰트 값과 중복된 값을 작성할 수 없습니다. 또한 공백 문자를 사용하여 여러 값을 작성할 수 없습니다.
참고로 id 어트리뷰를 작성한 경우 id 어트리뷰트 값을 변수 이름으로 전역 변수가 선언되고, 변수에는 해당 요소 노드 객체가 할당됩니다.
만약 동일한 이름의 전역 변수가 존재하는 경우 요소 노드가 재할당되는 부수효과는 없습니다.
4. style
style 어트리뷰트는 요소의 인라인 스타일을 적용하기 위해 사용할 수 있습니다.
style 속성 값으로 CSS 코드를 작성합니다. 이때 선택자를 작성하지 않고 CSS 프로퍼티와 값만 작성하여 스타일을 적용합니다.
5. title
title 어트리뷰트는 요소에 대한 부가적인 설명을 작성할 수 있는 어트리뷰트입니다.
title 어트리뷰트를 작성한 요소에 마우스 커서를 올려두면 title 어트리뷰트에 작성된 값이 화면에 표시됩니다.
6. lang
lang 어트리뷰트는 요소의 언어를 설정하는 요소입니다.
일반적으로 html 태그의 어트리뷰트로 작성하여 문서 전체 언어를 설정하며, 개별적인 요소에 작성하여 언어를 설정할 수도 있습니다.
<!DOCTYPE html>
<!-- 페이지는 기본적으로 한국어 콘텐츠 -->
<html lang="ko">
<head>
<!-- 웹 페이지 메타 정보 -->
</head>
<body>
<!-- 웹 페이지 구조 -->
<p lang="en">
<!-- 영어 콘텐츠 -->
</p>
</body>
</html>7. data-*
data-* 어트리뷰트를 통해 HTML과 JS간 데이터를 주고 받을 수 있습니다.
<tagname data-데이터이름="데이터"></tagname> 형식으로 사용합니다.
자바스크립트에서는 HTMLElement#dataset 접근자 프로퍼티를 참조시 DOMStringMap 객체를 반환하게 되는데 이 객체에 data- 접두사 뒤에 작성한 데이터 이름을 카멜 케이스로 변환한 값을 프로퍼티 키, 값을 프로퍼티 값으로 갖고 있습니다.
<!-- html -->
<span id="name"
data-name="kim"
data-age="20"
data-dev-role="front"
>Kim</span>// JavaScript
const p = document.getElementById('name');
const name = p.dataset.name; // -> 'kim'
const age = p.dataset.age; // -> '20'
const role = p.dataset.devRole; // -> 'front'8. draggable
draggable 어트리뷰트는 요소를 Drag and Drop API 사용 여부를 설정하는 어트리뷰트입니다.
기본값으로 auto가 설정되어 있으며 auto 값은 브라우저가 판단하게 됩니다. true 작성시 사용 가능하도록 설정 되며, false 작성시 사용되지 못하도록 설정합니다.
9. hidden
hidden 어트리뷰트는 요소를 화면에서 숨길 때 사용하는 어트리뷰트 입니다. 불린 속성으로 사용합니다.
hidden 어트리뷰트 적용시 display: none;처럼 렌더링 자체가 되지 않습니다.
