HEROPY Tech 블로그를 참고하여 작성된 글입니다.
HTML-ENTITIES
🔗CLASS
▪JS나 CS에서 접근하게 하기 위한 별명이라고 생각하면 쉽다
▪여러 요소에 중복되게 사용 가능
<p class="p-class">1</p>
<p class="p-class">2</p>
<p class="p-class">3</p>
🔗ID
▪JS나 CS에서 접근하게 하기 위한 별명이라고 생각하면 쉽다
▪하나의 요소만 사용가능
<p id="p-id">1</p>
🔗STYLE
▪요소에 적용할 CSS를 선언 할 수 있다.
<div style="background: #ffe7e8; border: 2px solid #e66465;">
🔗TITLE
▪요소의 정보(설명)을 지정.
<abbr title="Hypertext Markup Language">HTML</abbr>▪위와 같을 경우 화면에 출력된 HTML에 마우스를 올리면 툴팁 창에 Hypertext Markup Language 가 나온다.
🔗LANG
▪요소의 언어 ISO 639-1(국가별 언어 코드) 를 지정.
<p lang="en">This paragraph is English</p>
<p lang="ko">이 단락은 한글입니다.</p>
<p lang="fr">Ce paragraphe est défini en français.</p>
🔗DATA-*
▪사용자 정의 데이터 속성을 지정.
HTML에 JavaScript에서 이용할 수 있는 데이터(정보)를 저장하는 용도로 사용.
<!-- data-custom-data-attributes -->
<div id="me" data-my-name="Hoon" data-my-age="851">Hoon</div>// dataset.customDataAttributes
const $me = document.getElementById('me');
console.log($me.dataset.myName); // "Hoon"
console.log($me.dataset.myAge); // "851"
🔗DRAGGABLE
▪요소가 Drag and Drop API를 사용 가능한지 여부를 지정.
<div draggable="true">The element to drag.</div>
🔗HIDDEN
▪요소를 숨김
<form id="hidden-form" action="/form-action" hidden>
<!-- 숨겨진 양식들.. -->
</form>
<button form="hidden-form" type="submit">전송</button>
🔗TABINDEX
▪Tab키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 지정.
- 대화형 콘텐츠(Interactive Content)는 기본적으로 코드 순서대로 탭 순서가 지정됨.
- 비대화형 콘텐츠에 tabindex="0"을 지정하여 대화형 콘텐츠와 같이 탭 순서를 사용.
- tabindex="-1"을 통해 포커스는 가능하지만 탭 순서에서 제외 가능.
- tabindex="1" 이상의 양수 값은 논리적 흐름을 방해하기 때문에 사용을 추천하지 않음.
<h1 tabindex="0">Sign In</h1>
<label>Username: <input type="text"></label>
<label>Password: <input type="password"></label>
<label>PS: <input type="text" tabindex="-1"></label>
<input type="submit" value="Sign In">
댓글