탭 순서에 요소 삽입
tabindex="0"
를 사용하여 일반적인 탭 순서에 요소를 삽입합니다. 예를 들면 다음과 같습니다.
<div tabindex="0">Focus me with the TAB key</div>
요소에 포커스를 맞추려면 Tab
키를 누르거나 요소의 focus()
메서드를 호출합니다.
탭 순서에서 요소 삭제
tabindex="-1"
를 사용하여 요소를 삭제합니다. 예를 들면 다음과 같습니다.
<button tabindex="-1">Can't reach me with the TAB key!</button>
이렇게 하면 일반적인 탭 순서에서 요소가 삭제되지만 focus()
메서드를 호출하여 여전히 요소에 포커스를 둘 수 있습니다.
요소에 tabindex="-1"
을 적용해도 하위 요소에는 영향을 미치지 않습니다. 자연스럽게 또는 tabindex
값으로 인해 탭 순서에 있는 경우 하위 요소는 탭 순서로 유지됩니다.
탭 순서에서 요소와 요소의 모든 하위 요소를 삭제하려면 WICG의 inert
폴리필을 사용해 보세요.
polyfill은 제안된 inert
속성의 동작을 에뮬레이션하여 보조 기술이 요소를 선택하거나 읽을 수 없게 합니다.
멋지게 꾸미세요!
.loader {
animation: spin 0.75s infinite steps(var(--count));
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
올바른 효과를 얻으려면 steps(var(--count))
를 사용하세요. ✨