HTML DOM style visibility 속성 완벽 정리 – 요소 표시 여부 제어하기

HTML DOM의 style visibility 속성은 HTML 문서에서 특정 요소를 화면에 표시할지 여부를 확인하거나 변경하는 데 사용되는 속성입니다. 이 속성을 활용하면 자바스크립트만으로도 요소를 동적으로 숨기거나 다시 나타나게 할 수 있습니다.

문법(Syntax)

visibility 속성의 기본 문법은 다음과 같습니다.

visibility 값 반환하기

object.style.visibility

visibility 값 설정하기

object.style.visibility = "value"

속성 값(Value)

visibility 속성에 사용할 수 있는 값은 아래와 같습니다.

값	설명
initial	해당 속성 값을 기본(default) 값으로 설정합니다.
inherit	부모 요소로부터 속성 값을 상속받습니다.
hidden	요소가 화면에 보이지 않지만, 레이아웃상 자리는 그대로 유지됩니다.
visible	요소가 화면에 정상적으로 표시됩니다.
collapse	테이블의 행(row) 또는 열(column)에 적용 시 해당 요소가 보이지 않지만, 레이아웃에는 여전히 영향을 줍니다.

예제(Example)

다음 예제를 통해 HTML DOM style visibility 속성의 실제 사용 방법을 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem 0;
    }
</style>
</head>
<body>
<h1>DOM Style visibility Property Example</h1>
<p>I'm paragraph element with some dummy text</p>
<button onclick="add()" class="btn">Set visibility</button>
<script>
    function add() {
        document.querySelector('p').style.visibility = "hidden";
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 아래와 같은 화면이 출력됩니다.

HTML DOM style visibility 속성 완벽 정리 – 요소 표시 여부 제어하기

여기서 “Set visibility” 버튼을 클릭하면, 문단(p) 요소의 visibility 값이 hidden으로 설정되어 해당 문단이 화면에서 사라집니다.

HTML DOM style visibility 속성 완벽 정리 – 요소 표시 여부 제어하기

정리

visibility 속성은 CSS의 display:none과 달리 요소를 숨겨도 공간이 유지된다는 점이 특징입니다. 버튼 클릭과 같은 이벤트와 함께 활용하면 요소를 자유롭게 보이거나 숨기는 인터랙티브한 웹 페이지를 쉽게 구현할 수 있습니다.