탭키를 이용해서 내가 올린 포스트의 글이나 요소를 선택할 수 있다.
그 때 사용하는 tabindex 속성에 대해 알아보자.
tabindex
글로벌 속성으로 속성 값으로 숫자를 값으로 이용할 수 있다. (최대값 = 32767)
그러나 0 이외의 숫자를 이용하면 보조 기구 사용자들이 페이지를 탐색하기 어려우니 권장하지 않는다.
속성 값으로 -1(음수)도 사용하는경우가 있는데 tabindex 만으로 tab키로 요소 선택할 순 없으나 Javascript를 이용하거나 마우스로 클릭하여 요소를 선택할 수 있다.
사용
HTML
<p tabindex="0">Start this thing from the jump</p> 지루한 장면들 안에서 뭔가 다른 계획을 세워 Let 'em know <span tabindex="-1">자 지금부터 우린</span> 어디론가 떠나고 <div tabindex="0">Ayy, 내 맘속에 묶였던</div> 모든 걸 다 잊어가 하나둘씩 다 내려놔 We gon' turn it up We gon' turn it up, 빨라지는 심장 소리 우린 마치 꿈을 꾸듯이 No ceiling where we're goin' now
기본 예시
Start this thing from the jump
지루한 장면들 안에서
뭔가 다른 계획을 세워
Let ’em know
자 지금부터 우린
어디론가 떠나고
Ayy, 내 맘속에 묶였던
모든 걸 다 잊어가
하나둘씩 다 내려놔
We gon’ turn it up
We gon’ turn it up,
빨라지는 심장 소리
우린 마치 꿈을 꾸듯이
No ceiling where we’re goin’ now
참고
MDN Web Docs - tabindex