HTML hidden 속성 – 올바른 이해와 사용 방법

`hidden` 속성의 정의 및 사용법

hidden 속성은
해당 요소가 시각적으로 보이지 않고 스크린 리더에서도 접근할 수 없도록 숨겨진(hidden) 요소임을 나타내는 속성입니다.

이 속성은 요소의 콘텐츠가 사용자에게 표시되어서는 안 됨을 나타낼 때 사용됩니다.

이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML

<style>
    p {
        padding: 1em;
        border: 1px solid #cdcd4c;
        border-radius: 0.5em;
        background-color: beige;
    }
</style>
<p>
    이 내용은 중요하므로 지금 당장 읽어야 합니다.
    <br>
    찾아보실 수 있어서 정말 기뻐요! 😃
</p>

 <!--
    부울 속성으로
    값을 별도로 작성하지 않고 속성만 작성합니다.
-->
<p hidden>
    이 콘텐츠는 현재 이 페이지와 관련이 없으므로 표시되어서는 안 됩니다.
    <br>
    여기는 볼게 없어요. 😥
</p>

웹 페이지에서 이모지(이모티콘) 사용하기

`hidden` 속성의 주요 특징

브라우저에서는 hidden 속성이 설정된 요소를 렌더링하지 않습니다. 이렇게 hidden 속성이 설정된 요소는 다음과 같은 특징이 있습니다.

화면에서 표시되지 않습니다.
화면에서 공간을 차지하지 않습니다.
시각적 방식 외에도 스크린 리더 등 다른 모든 표시 방식에서 숨겨집니다.

hidden 속성이 설정된 요소는 브라우저에서 CSS 스타일로 display: none;을 초깃값으로 적용합니다.

요소에 HTML의 `hidden` 속성을 사용하지 않고 CSS의 `display: none;`을 사용하는 것과의 차이점

요소에 HTML의 hidden 속성을 설정하지 않고 CSS의 display: none;을 사용해도 브라우저에서는 거의 동일한 방식으로 처리합니다.
화면에서 표시되지 않고, 공간도 차지하지 않고, 스크린 리더에서도 숨겨집니다.

하지만, HTML의 hidden 속성을 사용한다는 것은 CSS의 display: none;을 사용하는 것과 중요한 차이점이 있습니다.
사용의 목적에 그 차이점이 있습니다.

HTML hidden 속성과 CSS의 display: none;과의 차이점
HTML의 `hidden`	해당 요소의 중요한 정보인 콘텐츠가 사용자에게 표시되어서는 안 됨을 HTML로 명시하는 데 사용합니다. (정보의 중요성)
CSS의 `display: none;`	해당 요소를 시각적으로 보이지 않게 하는데 주된 목적으로 사용합니다. (스타일의 중요성)

참고 사항

요소에 HTML의 hidden 속성을 설정했더라도 CSS의 display 속성으로 화면에 표시되는 것을 재정의할 수 있습니다.
hidden 속성이 설정된 요소는 브라우저에서 CSS 스타일로 display: none;이 초깃값으로 적용되어 있는데, 이를 재정의하는 하는 것입니다.

다음의 예시를 통해 살펴보겠습니다.

HTML

<style>
    p {
        padding: 1em;
        border: 1px solid #cdcd4c;
        border-radius: 0.5em;
        background-color: beige;
    }
</style>
<p>
    이 내용은 중요하므로 지금 당장 읽어야 합니다.
    <br>
    찾아보실 수 있어서 정말 기뻐요! 😃
</p>
<p hidden style="display: block;">
    이 콘텐츠는 현재 이 페이지와 관련이 없으므로 표시되어서는 안 됩니다.
    <br>
    여기는 볼게 없어요. 😥
</p>

위 예제처럼 display: block;이나 display: flex; 등으로 초깃값인 display: none;을 재정의할 수 있습니다.

활용 예제

hidden 속성이 설정된 요소는 브라우저에서 랜더링하지 않는데 불필요하게 해당 요소 자체를 마크업하지 않고 웹페이지를 작성하면 될 것이라고 생각할 수도 있습니다.

하지만, 많은 웹페이지는 자바스크립트를 함께 사용해서 동적인 콘텐츠를 구현합니다.
동적으로 구현되는 웹페이지의 콘텐츠에 hidden 속성은 꽤나 유용하게 사용될 수 있습니다.

예제를 통해 살펴보겠습니다.

해당 예제는 MDN - HTMLElement: hidden property의 내용을 참조해서 재구성한 것임을 미리 밝힙니다.

다음은 사용자가 요청 메시지에 동의한 후 표시되는 '감사합니다' 메시지를 포함하기 위해 숨겨진 블록을 사용하는 예입니다.

CSS 예제를 위한 스타일을 지정합니다.

.card {
    text-align: center;
    padding: 1.5em;
    background: rgba(251, 233, 235, 0.5);
    border: 1px solid red;
    border-radius: 0.5em;
    max-width: 300px;
    margin: auto;
}
#agree.card {
    border-color: green;
    background: rgba(235, 250, 235, 0.6);
}

HTML에는 두 개의 카드가 포함되어 있습니다. 사용자에게 멋진 콘텐츠를 볼 수 있게 동의하도록 요청하는 환영 카드와 처음에는 hidden 설정으로 숨겨지는 다음 카드가 있습니다.

HTML

<div role="dialog" class="card" id="welcome">
    <h3>환영합니다.</h3>
    <p>'동의'버튼을 클릭하면 우리의 멋진 콘텐츠를 볼 수 있습니다.</p>
    <button type="button" id="agreeButton">동의</button>
</div>
<div class="card" id="agree" hidden>
    <h3>감사합니다.</h3>
    <p>오늘도 멋진 하루 되시길 바라겠습니다.</p>
</div>

HTML role 속성

'동의'버튼을 클릭하면 사용자에게 멋진 콘텐츠를 볼 수 있게 동의하도록 요청하는 환영 카드에 hidden 속성이 설정되어 숨겨지게 하고, hidden 속성이 설정되어 있어 숨겨져 있던 '멋진 콘텐츠' 카드의 hidden 속성을 제거하여 화면에 보여지게 하는 자바스크립트 코드입니다.

JavaScript

const agreeButton = document.getElementById("agreeButton");

agreeButton.addEventListener("click", () => {
    document.getElementById("welcome").hidden = true;
    document.getElementById("agree").hidden = false;
});

실제 적용된 모습을 통해 확인해 볼 수 있습니다.