CodePen

탭 순서에 요소 삽입

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))를 사용하세요. ✨