HTML hidden 전역 특성: 요소 숨기기

HTML hidden 전역 특성은 브라우저가 요소의 콘텐츠를 렌더링 하지 않도록 지정하는 열거형 특성입니다. 예를 들어, 로그인하기 전에는 사용할 수 없는 요소를 숨길 때 사용할 수 있습니다.

설명

hidden 특성은 사용자에게 요소를 보이지 않도록 지정하며, 다음과 같은 값 중 하나를 사용할 수 있습니다.

• 빈 문자열
• hidden 키워드
• until-found 키워드

hidden 특성에는 숨겨진 (hidden) 상태와, 찾기 전까지 숨겨진 (hidden until tound) 상태 두 가지가 있습니다.

• 빈 문자열이나 hidden 키워드는 요소를 숨겨진 상태로 지정합니다. 기타 유효하지 않은 값을 사용한 경우에도 숨겨진 상태가 됩니다.
• until-found 키워드는 요소를 찾기 전까지 숨겨진 상태로 지정합니다.

아래의 세 <span> 요소는 모두 숨겨진 상태가 됩니다.

<span hidden>숨겨진 요소</span>
<span hidden="">숨겨진 요소</span>
<span hidden="hidden">숨겨진 요소</span>

아래의 <span> 요소는 찾기 전까지 숨겨진 상태가 됩니다.

<span hidden="until-found">찾기 전까지 숨겨진 요소</span>

hidden 특성을 지정한 요소는 모든 표현 형태에서 숨겨집니다. 예컨대 스크린 리더에서도 요소를 “볼” 수 없다는 뜻입니다. 따라서 화면에는 보이지 않아야 하지만 스크린 리더로는 읽을 수 있어야 하는 것과 같은 요소에는 적합하지 않습니다.

숨겨지지 않은 링크가 숨겨진 요소를 가리켜선 안됩니다. href 특성이 hidden 특성을 가진 요소를 가리키는 건 유효하지 않습니다. 콘텐츠가 문서의 현재 상태와 관련이 없거나 적용되지 않는 경우, 링크가 가리킬 이유도 없습니다.

그러나 ARIA aria-describedby는 숨겨진 요소를 설명으로서 가리킬 수 있습니다. 설명만 놓고 보면 유용하지 않지만, aria-describedby를 적용한 요소의 맥락에서는 유용할 수 있다면 이렇게 사용할 수 있습니다.

비슷한 용례로, <canvas> 요소에 hidden 특성을 지정해서 그래픽 엔진의 오프스크린 버퍼로 활용하거나, 양식 컨트롤의 form 특성으로 숨겨진 <form> 요소를 가리킬 수 있습니다.

요소와 그 자손들은 숨겨지더라도 활성 상태입니다. 즉 <script> 요소는 실행되고, <form> 요소는 제출할 수 있습니다.

숨겨진 상태

숨겨진 상태는 현재 이 요소가 페이지와 관련이 없거나, 다른 부분에서 참조할 용도로서 사용자에게 직접 보여서는 안된다는 것을 나타냅니다. 브라우저는 숨겨진 요소를 렌더링하지 않습니다.

브라우저들은 hidden 특성의 동작을 CSS display: none 속성으로 구현하므로 숨겨진 상태의 요소는 페이지 레이아웃에 참여하지 않습니다. 반대로 말하면, 요소의 CSS display 속성을 바꾼 경우 hidden 특성을 지정해도 화면에 표시될 수 있습니다. 예를 들어 display: block 스타일을 적용한 요소는 hidden 특성을 지정해도 화면에 그려집니다.

찾기 전까지 숨겨진 상태

찾기 전까지 숨겨진 상태의 요소는 브라우저의 검색 (“페이지에서 찾기”) 기능이나 프래그먼트 링크 탐색에 의해 드러나는 요소입니다. 찾기의 결과가 이 상태의 요소 하위 트리 내 콘텐츠에 포함돼있거나, 프래그먼트 링크가 하위 트리 내의 요소를 가리키는 경우, 브라우저는 다음과 같은 순서로 동작합니다.

• 숨겨진 요소에서 beforematch 이벤트 발송
• 숨겨진 요소의 hidden 특성 제거
• 대상 요소로 스크롤

찾기 전까지 숨겨진 상태를 활용하면 콘텐츠를 접어두되 검색이나 프래그먼트 링크로 접근은 가능하게 할 수 있습니다.

참고로, 브라우저들은 찾기 전까지 숨겨진 상태의 요소를 content-visibility: hidden으로 구현합니다. 따라서 찾기 전까지 숨겨진 상태의 요소는 CSS 박스를 생성하며, 일반적인 숨겨진 상태의 요소와 달리 다음과 같이 동작합니다.

• 페이지 레이아웃에 참여
• 요소의 바깥 여백, 테두리, 안쪽 여백, 배경이 렌더링 됨

또한 이 상태의 요소가 드러나려면 레이아웃 차폐의 영향을 받을 수 있어야 합니다. 즉, 요소의 display 속성이 none, contents, 또는 inline이면 검색이나 프래그먼트 링크로 드러나지 않습니다.

예제

hidden="until-found"로 지정한 <div> 요소의 내용이 보이지 않다가, 이 요소를 가리키는 프래그먼트 링크를 클릭하면 나타나는 것을 확인할 수 있습니다. 또한 테두리와 배경, 안팎의 여백이 렌더링 되는 것도 확인할 수 있습니다.

반면 hidden=""을 지정한 <div> 요소는 프래그먼트 링크를 클릭해도 나타나지 않고, 아무것도 렌더링 되지 않는 모습을 볼 수 있습니다.

<a href="#hidden">숨겨진 요소로 가기</a>
<br>
<a href="#hidden-until-found">찾기 전까지 숨겨진 요소로 가기</a>

<div>
  보이는 내용입니다.
</div>
<div hidden="" id="hidden">
  볼 수 없는 내용입니다.
</div>
<div hidden="until-found" id="hidden-until-found">
  곧 나타날 내용입니다.
</div>

div {
  background: lightgray;
  border: 2px dashed black;
  margin-top: 1em;
  padding: 0.5em;
}

body > astro-island > div {
  background: #fff;
  border: none;
  margin-top: 0;
  padding: 0;
}

명세

HTML Standard

브라우저 호환성