HTML - 전역 속성

class

공백으로 구분한 요소 클래스의 목록. css나 javascript 에서 (.)으로 접근해서 사용.

 

id

문서 전체에서 유일한 고유식별자를 정의. (#)으로 접근해서 사용.

 

style

요소에 적용할 css를 선언.

 

title

요소의 정보(설명)을 지정. 일종의 툴팁(?).

 

lang

요소의 언어를 지정. *ko(한글), en(영어)..

 

data-*

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

HTML에 javascript에서 이용할 수 있는 데이터(정보)를 저장하는 용도로 사용.

 
<div id="me" data-my-name="wook" data-my-place="031">wook</div>
 
<script>
    const me = document.getElementById('me');
    console.log(me.dataset.myName);    // wook
    console.log(me.dataset.myAge);    // 031
</script>

 

draggable

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

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

 

hidden

요소를 숨김.

 
<p hidden>This paragraph should be hidden.</p>

 

tabindex

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

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

비대화형 컨텐츠에 tabindex="0"을 지정하여 대화형 콘텐츠와 같이 탭 순서를 사용.

tabindex="-1"을 통해 포커스는 가능하지만 탭 순서에서 제외 가능.

 

 

[출처] heropy.blog/2019/05/26/html-elements/