HTML hidden until-found 속성 기준 정리

hidden="until-found"는 접힌 콘텐츠를 화면에서는 숨기되, 페이지 내 검색과 fragment navigation으로는 찾을 수 있게 하는 HTML 속성 값입니다. 일반 hidden과 달리 사용자가 브라우저 검색이나 #id 링크로 해당 영역에 도달하면 브라우저가 숨김을 해제하고 그 위치로 이동할 수 있습니다.

2026년 8월 5일 기준 WHATWG HTML Standard와 MDN 문서에 따르면 hidden은 HTML 전역 속성이며, 값으로 hidden, until-found, 빈 값 또는 값 생략을 가질 수 있습니다. 잘못된 값이나 빈 값은 일반 Hidden 상태로 처리됩니다.

hidden과 until-found는 무엇이 다른가

일반 hidden 상태는 현재 페이지 상태에서 직접 보여줄 필요가 없는 콘텐츠를 사용자에게 표시하지 않는 의미입니다. 브라우저는 보통 이를 display: none처럼 구현할 수 있고, 이 경우 요소는 레이아웃에도 참여하지 않습니다.

hidden="until-found" 상태는 겉으로는 숨겨져 있지만 콘텐츠가 페이지 내 검색과 fragment navigation의 대상에 남는다는 점이 다릅니다. 접힌 FAQ, 긴 문서의 보조 설명, 기본적으로 접어 둔 세부 섹션처럼 사용자가 검색으로 찾아 들어올 수 있어야 하는 콘텐츠에 맞습니다.

이 속성은 보안 기능이 아닙니다. HTML에 포함된 내용은 브라우저가 받은 문서 안에 남아 있으므로 비밀 값, 권한이 필요한 데이터, 사용자에게 절대 보여서는 안 되는 정보를 숨기는 용도로 쓰면 안 됩니다.

사용자가 찾으면 어떤 일이 일어나나

브라우저가 페이지 내 검색이나 fragment navigation으로 hidden="until-found" 하위의 대상 위치로 스크롤하려고 하면, 표준은 해당 조상 요소를 드러내는 절차를 정의합니다. 이 과정에서 beforematch 이벤트가 발생하고, 이후 hidden 속성이 제거되어 요소가 드러납니다.

예를 들어 다음처럼 접힌 섹션에 id를 두면 #details 링크로 이동할 때 브라우저가 해당 섹션을 열 수 있습니다.

<a href="#details">세부 기준으로 이동</a>

<section id="details" hidden="until-found">
  <h2>세부 기준</h2>
  <p>검색이나 fragment navigation으로 찾을 수 있는 내용입니다.</p>
</section>

beforematch 이벤트는 숨겨진 요소가 드러나기 직전에 처리할 작업이 있을 때 사용합니다. 예를 들어 아코디언 버튼 상태, 접힘 아이콘, 내부 UI 상태를 실제 열린 상태와 맞출 수 있습니다.

const section = document.querySelector("#details");

section.addEventListener("beforematch", () => {
  section.dataset.expanded = "true";
});

CSS에서 주의할 조건은 무엇인가

MDN과 HTML 표준은 hidden="until-found"가 보통 content-visibility: hidden 방식으로 구현된다고 설명합니다. 이 때문에 일반 hidden과 달리 요소의 박스는 생성될 수 있고, margin, border, padding, background가 레이아웃에 영향을 줄 수 있습니다.

또한 해당 요소가 드러나려면 레이아웃 containment의 영향을 받을 수 있어야 합니다. 요소의 display 값이 none, contents, inline이면 페이지 내 검색이나 fragment navigation으로 드러나지 않을 수 있습니다. 접힌 섹션 컨테이너에는 블록 레벨 박스를 유지하는 편이 안전합니다.

상태	검색 가능성	레이아웃 영향	대표 용도
hidden	페이지 내 검색으로 찾는 용도에 맞지 않음	보통 박스가 생성되지 않음	현재 상태에서 관련 없는 화면, 재사용용 템플릿
hidden="until-found"	페이지 내 검색과 #id 이동 대상	박스와 여백이 남을 수 있음	검색 가능한 접힌 문서 섹션

언제 쓰면 적합한가

hidden="until-found"는 접힘 UI와 검색 가능성을 함께 만족해야 할 때 적합합니다. 긴 문서에서 선택적으로 펼치는 설명, 기본적으로 접힌 FAQ, 목차 링크로 직접 이동할 수 있어야 하는 보조 섹션이 대표적입니다.

반대로 화면 크기 때문에 일부 표현에서만 숨기고 싶은 경우에는 hidden보다 CSS 반응형 처리나 접근성 상태를 함께 고려하는 UI 패턴이 더 적합합니다. HTML 표준도 hidden을 단순히 한 표현 방식에서만 숨기는 용도로 쓰지 말라고 설명합니다.

• 사용자가 브라우저 검색으로 찾아야 하는 접힌 콘텐츠에는 hidden="until-found"를 검토합니다.
• 찾을 필요가 없는 현재 비활성 화면이나 재사용용 조각에는 일반 hidden을 검토합니다.
• 민감 정보를 감추는 목적이라면 HTML에 내려보내지 않는 서버 측 제어가 필요합니다.
• 아코디언 상태를 별도로 표시한다면 beforematch에서 UI 상태를 동기화합니다.
• 지원하지 않는 브라우저까지 고려해야 한다면 기본적으로 펼친 상태나 별도 토글 경로를 준비합니다.

브라우저 지원은 어떻게 봐야 하나

일반 hidden 속성은 오래된 HTML 전역 속성이지만, until-found 값과 beforematch 이벤트는 별도로 확인해야 합니다. MDN은 beforematch 이벤트를 Baseline 2025로 표시하면서 최신 장치와 브라우저 버전에서는 동작하지만 오래된 환경에서는 동작하지 않을 수 있다고 설명합니다.

따라서 공개 서비스에 적용할 때는 지원하지 않는 브라우저에서도 콘텐츠 접근 경로가 끊기지 않는지 확인해야 합니다. 가장 단순한 fallback은 해당 기능이 꼭 필요한 문서에서 접힌 콘텐츠를 기본적으로 펼쳐 두거나, 사용자가 직접 열 수 있는 버튼을 함께 제공하는 방식입니다.

FAQ

hidden="until-found"는 SEO용으로 써도 되나

이 속성의 핵심 목적은 접힌 콘텐츠를 페이지 내 검색과 fragment navigation으로 찾을 수 있게 하는 것입니다. 검색 엔진 처리 방식은 검색 서비스별 문서와 정책을 따르므로, SEO 효과를 보장하는 속성으로 설명하는 것은 적절하지 않습니다.

display: none으로 접은 아코디언을 그대로 대체할 수 있나

목적이 검색 가능한 접힘이라면 대체 후보가 될 수 있습니다. 다만 display: none을 직접 적용하면 until-found가 드러나지 않을 수 있으므로 기존 CSS와 토글 스크립트를 함께 점검해야 합니다.

aria-hidden과 같은 기능인가

아닙니다. hidden은 HTML 콘텐츠의 표시 상태를 나타내는 전역 속성이고, aria-hidden은 접근성 트리 노출을 제어하는 ARIA 속성입니다. 두 속성은 목적과 영향 범위가 다르므로 같은 의미로 바꿔 쓰면 안 됩니다.