1. draggable
요소가 Drag and Drop API를 사용 가능한지 여부를 지정.
<div draggable="true">The element to drag.</div>만약에 true 및 false를 작성하지 않으면 auto가 작동한다. 즉, 이것은 drag할수있는지 없는지 브라우저가 알아서 판단하게 하는 것이다.
2. hidden
요소를 숨김.
<form id="hidden-form" action="/form-action" hidden>
<input type="text" name ="id" value = "Heropy">
</form>
<button form="hidden-form" type="submit">전송</button>
즉 특정한 부분도 숨길 수 있지만, 실질적으로 html은 동작 할 수 있다는 걸 알 수 있다.
3. tabindex
Tab키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 지정.
- 대화형 콘텐츠(Interactive Content)는 기본적으로 코드 순서대로 탭 순서가 지정됨.
- 비대화형 콘텐츠에 tabindex="0"을 지정하여 대화형 콘텐츠와 같이 탭 순서를 사용.
- tabindex="-1"을 통해 포커스는 가능하지만 탭 순서에서 제외 가능.
- tabindex="1" 이상의 양수 값은 논리적 흐름을 방해하기 때문에 사용을 추천하지 않음. (즉, 임의로 index순서를 바꾸지 않고 순서대로 만들어서 브라우저가 알아서 이동하게 만드는것이 좋다.)
1. tabindex를 이용해서 순서를 임의로 바꾸기 (이렇게 사용하는걸 추천하지 않는다.)
<body>
<input type="text" value = "1 (2)" tabindex = "2">
<input type="text" value = "2">
<input type="text" value = "3 (1)" tabindex = "1">
<input type="text" value = "4">
<input type="text" value = "5 (3)" tabindex = "3">
</body>
2. tab index를 사용하지 않으면 알아서 순차적으로 옮겨진다.
<body>
<input type="text" value = "1">
<input type="text" value = "2">
<input type="text" value = "3">
<input type="text" value = "4">
<input type="text" value = "5">
</body>
3. 태그가 달라도 tabindex속성으로 "0"을 지정하면 함께 순차적으로 tab이 옮겨지게 할 수 있다.
<body>
<input type="text" value = "1">
<input type="text" value = "2">
<div tabindex = "0">2.5</div>
<input type="text" value = "3">
<input type="text" value = "4">
<input type="text" value = "5">
</body>
4. tabindex속성으로 "-1"을 지정하면 그 칸은 옮겨지지않고 뛰어 넘는다.
<body>
<input type="text" value = "1">
<input type="text" value = "2">
<div tabindex = "0">2.5</div>
<input type="text" value = "3">
<input type="text" value = "4" tabindex="-1">
<input type="text" value = "5">
</body>
'HTML > 요소' 카테고리의 다른 글
| 특수기호문자 (0) | 2021.01.06 |
|---|---|
| 전역속성 - LANG, DATA (0) | 2021.01.06 |
| 전역 속성 - STYLE, TITLE (0) | 2021.01.06 |
| 전역 속성 - CLASS와 ID (0) | 2021.01.06 |
| 양식 - PROGRESS (0) | 2021.01.06 |