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

 <!--
    부울 속성으로
    값을 별도로 작성하지 않고 속성만 작성합니다.
-->
<p hidden>
    이 콘텐츠는 현재 이 페이지와 관련이 없으므로 표시되어서는 안 됩니다.
    <br>
    여기는 볼게 없어요. 😥
</p>
실제 적용된 모습
<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>
실제 적용된 모습
.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);
}
<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>
const agreeButton = document.getElementById("agreeButton");

agreeButton.addEventListener("click", () => {
    document.getElementById("welcome").hidden = true;
    document.getElementById("agree").hidden = false;
});
실제 적용된 모습 '동의'버튼을 클릭해 보세요!

caniuse.com에서 더 자세한 정보를 확인해 보세요.