HTML - 요소 전역 속성

전역 속성(Global Attributes)

모든 HTML 요소에서 공통적으로 사용 가능한 속성

 

class

공백으로 구분된 요소의 별칭을 지정

CSS / Javascript 의 요소 선택기를 통해서 요소 선택하거나 접근

 

id

문서에서 고유한 식별자를 정의

CSS / Javascript 의 요소 선택기를 통해서 요소 선택하거나 접근

 

style

요소에 적용할 CSS 선언

 

title

요소의 정보를 지정 

마우스 오버시 툴팁 출력

 

lang

요소의 언어(ISO 639-1)를 지정

 

data-*

사용자 정의 데이터 속성을 지정

HTML에 Javascript에서 이용할 수 있는 데이터를 저장하는 용도

<div id="test" data-my-name="test" dat-my-age="29">TEST</div>

const test = document.getElementById("test");
console.log(test.dataset.myName);    // test
console.log(test.dataset.myAge);     // 29

 

draggable

요소가 Drag and Drop API 를 사용 가능한지 여부를 지정

Default : auto, 브라우저가 판단

<div draggable="true">TEST</div>

 

hidden

요소를 숨김

 

tabindex

Tab 키를 이용해 요소를 순차적으로 포커스 탐색할때 순서를 지정

대화형 컨텐츠는 기본적으로 코드순서대로 탭 순서가 지정됨

비대화형 콘텐츠에 tabindex=“0”을 지정하여 대화형 컨텐츠와 같이 탭 순서를 사용 가능(기본적으로 대화형 컨텐츠는 tabindex=“0”)

tabindex=“-1”을 지정하여 순서에서 제외 가능

<input type="text" value="1" tabindex="2">
<input type="text" value="2">
<input type="text" value="3" tabindex="1">
<input type="text" value="4">
<input type="text" value="5" tabindex="3">

설명

Tab 키 누를 시 3 -> 1 -> 5 -> 2 -> 4 순으로 이동

 

※ 주의 사항

tabindex=“1” 이상의 양수 값은 논리저 흐름을 방해하기 때문에 사용 권장 X

HTML이 작성된 순서대로 동작하도록 인위적으로 수정하는 것은 권장 X

 

※ 대화형 컨텐츠

사용자와 상호작용을 위해 특별하게 설계된 요소

<a>, <button>, <details>, <iframe>, <keygen>, <label>, <select>, <textarea> 등

 

 

 

출처 : heropy.org