[HTML] Hidden 활용으로 숨기기

 

"이 요소는 왜 안 보일까?"

브라우저에서 요소가 사라졌다고 무조건 display: none;일까요? 그럴 수도 있지만…

HTML만으로도 콘텐츠를 숨길 수 있다면?

그게 바로 오늘 이야기할 hidden 속성입니다.

간단해 보이지만, 활용하기에 따라 UX, 접근성, SEO까지 좌우하는 태그 알아두면 꽤 유용합니다.

오늘 배울 건
HTML의 hidden 속성입니다.

<p hidden>이 문장은 사용자에게 보이지 않습니다.</p>

 

hidden 속성은 HTML 요소를 브라우저 화면에서 감추는 표준 속성입니다.

CSS 없이도 요소를 숨길 수 있으며, DOM에는 남아 있지만 사용자는 볼 수 없습니다.

기본적으로 display: none;과 유사하게 동작합니다. 다만, HTML 레벨에서 선언되므로 가독성과 유지보수에 유리한 경우가 많죠.

 

 

<button onclick="document.getElementById('notice').hidden = false;">
  공지 보기
</button>

<p id="notice" hidden>
  점검 시간은 오늘 밤 10시부터입니다.
</p>

 

hidden은 자바스크립트로 제어할 수 있어 조건부 렌더링에 많이 활용됩니다.

예시처럼 버튼 클릭 시 hidden = false로 설정하면 감춰진 콘텐츠가 자연스럽게 나타나죠.
이건 modal, tooltip, alert 등 다양한 UI에도 응용 가능합니다.

 

<input type="text" aria-hidden="true" hidden value="숨겨진 값">

 

aria-hidden="true"는 스크린 리더에서 요소를 무시하게 하고, hidden은 브라우저에서 감춥니다.

둘을 조합하면 시각적으로도, 접근성 측면에서도 완전한 숨김이 가능합니다.

특히 백엔드와 데이터 교환 시 불필요한 입력값 노출을 방지하는 데 유용합니다.

 

728x90

 

<form>
  <input type="hidden" name="session_token" value="ABC123">
</form>

 

 

사실 진짜 많이 쓰이는 건 input의 hidden 타입입니다.

화면에는 표시되지 않지만 서버로 데이터를 전송할 때 꼭 필요한 정보를 넣을 수 있죠.

예: CSRF 토큰, 사용자 ID, 이전 페이지 등.
폼 전송의 숨은 실세입니다.

 

<div hidden data-hidden-content>
  이 콘텐츠는 JavaScript로만 제어합니다.
</div>

 

 

특정 콘텐츠를 초기 로딩 시 감춰두고, 동작 시 노출하려는 경우에 hidden은 매우 깔끔한 선택입니다.

display: none;처럼 CSS에 흩어져 있지 않고 HTML 구조 안에서 바로 확인할 수 있으니 유지보수도 편하죠.

 

// 팁: JavaScript로 hidden 토글
const el = document.querySelector('[data-hidden-content]');
el.hidden = !el.hidden;

 

반응형

hidden 속성은 자바스크립트에서 불리언(Boolean)처럼 다루면 됩니다.

true면 숨김, false면 표시.
토글도 쉬워서 UI 전환 효과 줄 때 아주 잘 쓰입니다.

불필요한 DOM 조작 없이 속성 하나로 깔끔하게 처리할 수 있어요.

 

 

💡 CSS와 hidden의 차이점?

display: none;은 스타일이니까 브라우저에서 우선순위 문제나 override 가능성이 있습니다.

hidden은 HTML 속성이라 코드 흐름과 더 가깝습니다.
둘을 혼용하기보다는 목적에 맞게 구분해서 사용하는 것이 좋습니다.

마무리하며 🌿

hidden 속성은 작지만 꽤 전략적인 역할을 할 수 있는 도구입니다.

조건부 렌더링, 접근성 보완, 정보 보호 등 많은 UI/UX 흐름에서 보이진 않지만 존재하는 것의 힘을 보여줍니다.

단순히 숨기는 게 아니라, 언제 보여줄지 결정하는 능력이 바로 hidden의 진짜 의미예요.

👉 더 많은 HTML 팁은 제 블로그에서 확인해보세요 https://jjaeho.tistory.com

배웠다 말았다 다시 시작했다😎