CodePen

bookmark_border 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

탭 순서에 요소 삽입

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 폴리필을 사용하는 것이 좋습니다. 폴리필은 제안된 inert 속성의 동작을 에뮬레이션하여 보조 기술에서 요소를 선택하거나 읽지 못하도록 합니다.

시작하세요.

.loader {
  animation: spin 0.75s infinite steps(var(--count));
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

적절한 효과를 얻기 위해 steps(var(--count))를 사용합니다. ✨