`inert` 전역 특성은 요소와 그 하위 요소들을 비활성 상태로 만들어 포커스를 받거나 클릭할 수 없게 하고, 탭 순서 및 접근성 트리에서 제외합니다.
기준선(Baseline) 널리 사용 가능 *
이 기능은 잘 확립되어 있으며 많은 기기와 브라우저 버전에서 작동합니다. 2023년 4월부터 브라우저 전반에서 사용할 수 있습니다.
inert 전역 특성은 불리언(Boolean) 특성으로, 해당 요소와 그 플랫 트리(flat tree) 상의 모든 자손이 비활성(inert) 상태가 됨을 나타냅니다. inert 특성은 상호작용되면 안 되는 콘텐츠 구역에 추가할 수 있습니다. 요소가 inert이면 그 요소 및 그 모든 자손(링크, 버튼, 폼 컨트롤처럼 보통은 상호작용 가능한 요소 포함)은 포커스를 받을 수 없고 클릭할 수도 없기 때문에 비활성화됩니다. inert 특성은 화면 밖(offscreen)에 있거나 숨겨져야 하는 요소에 추가할 수도 있습니다. inert 요소는 그 자손과 함께 탭 순서와 접근성 트리에서 제거됩니다.
showModal()로 생성된 모달 <dialog>는 inert 상태를 벗어날 수 있습니다. 즉 조상으로부터 inert 상태를 상속받지 않지만, 자기 자신에 inert 특성을 명시적으로 설정하면 inert로 만들 수 있습니다. 다른 어떤 요소도 inert 상태를 벗어날 수는 없습니다.
참고:
inert는 전역 특성이므로 어떤 요소에도 적용할 수 있지만, 일반적으로는 콘텐츠의 구역(section)에 사용합니다. 개별 컨트롤을 “inert”하게 만들고 싶다면, 대신disabled특성과 CSS:disabled스타일을 사용하는 것을 고려하세요.
inert인 HTML 요소와 그 플랫 트리 자손은 다음과 같습니다.
click 이벤트가 발생하지 않습니다.focus 이벤트도 발생시킬 수 없습니다.user-select로 텍스트 선택을 비활성화하는 것과 유사합니다.<input> 필드의 내용, 그리고 contenteditable이 설정된 텍스트 요소 등이 포함됩니다.다음 기능들도 요소 및 그 자손을 inert 상태로 설정하는 데 사용할 수 있습니다.
interactivity 속성.HTMLElement.inert DOM 프로퍼티.inert 특성을 적용할 때는 접근성을 신중하게 고려하세요. 기본적으로는 요소 또는 그 하위 트리가 inert인지 아닌지를 시각적으로 알 수 있는 방법이 없습니다. 웹 개발자로서, 어떤 콘텐츠가 활성 상태인지, 어떤 콘텐츠가 inert인지 명확하게 표시하는 것은 여러분의 책임입니다.
콘텐츠의 inert 상태에 대해 시각적/비시각적 단서를 제공하는 것과 함께, 시각적 뷰포트가 콘텐츠의 일부 구역만 포함할 수도 있다는 점도 기억해야 합니다. 사용자가 콘텐츠의 작은 부분만 확대해 보고 있을 수도 있고, 사용자가 콘텐츠를 전혀 볼 수 없는 상황일 수도 있습니다. inert 구역이 inert하다는 것이 명확하지 않으면, 사용자의 좌절과 좋지 않은 사용자 경험으로 이어질 수 있습니다.
다음 예제에서는 두 번째 <div>와 그 모든 자손이 inert 특성을 통해 inert 상태가 됩니다.
html<div> <label for="button1">Button 1</label> <button id="button1">I am not inert</button> </div> <div inert> <label for="button2">Button 2</label> <button id="button2">I am inert</button> </div>
<dialog> 요소HTMLElement.inert DOM 프로퍼티interactivity 속성