2019. 11. 24. 17:42ㆍ웹/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
'웹 > HTML' 카테고리의 다른 글
HTML - 컨텐츠 부문 HEADER / FOOTER / H1~H6 / MAIN (0) | 2019.12.11 |
---|---|
메타데이터 - LINK / STYLE / MIME Type / BASE (0) | 2019.11.24 |
메타데이터 - META 태그 (0) | 2019.11.24 |
HTML 구조 (0) | 2019.11.24 |