반응형
tabindex
- tabindex는 키보드의 Tab 키를 눌렀을 때 요소가 포커스를 받을 수 있도록 설정하거나, 포커스 순서를 제어하는 속성
tabindex의 3가지 값 유형
| 유형 | 설명 |
| tabindex="0" | - 포커스를 받을 수 없는 요소에 포커스가 가능하도록 만들고 싶을 때 사용. - button, input, a 등은 기본적으로 포커스를 받을 수 있는 요소지만, div, span 등도 값을 주면 포커스 가능. |
| tabindex="-1" | - 요소를 탭 키로는 포커스할 수 없지만, JavaScript로는 포커스 가능. - 주로 스크립트나 접근성 목적으로 사용됨. |
| tabindex="1" 이상의 양수 | - 웹 문서에서 Tab키로 이동 시 가장 먼저 포커스를 받음 - 탭 키 순서를 명시적으로 우선 지정. - 숫자가 작을수록 먼저 포커스됨 - 논리적을 마크업한 이동 순서에 영향을 줄 수 있어 주의해서 사용 필요 |
각 tabindex 값의 동작 예
<!--
탭 키를 누르면 포커스 순서는:
tabindex="1"
tabindex="2"
tabindex="0"
기본적으로 포커스 가능한 요소들 (<a> 등)
tabindex="-1"은 탭 순서에는 포함되지 않음
-->
<a href="#">기본 a 태그 (기본적으로 포커스 가능)</a>
<div tabindex="0">탭으로 포커스 가능</div>
<div tabindex="-1">탭으로는 불가능 (스크립트로는 가능)</div>
<div tabindex="2">두 번째 포커스</div>
<div tabindex="1">첫 번째 포커스</div>반응형