JavaScript에서 HTML 요소를 표시하려면 visibility 속성을 사용하면 됩니다. 이 속성을 visible로 설정하면 요소가 화면에 나타나고, hidden으로 설정하면 요소가 숨겨집니다.
visibility 속성이란?
visibility는 요소를 화면에 표시할지 여부를 결정하는 CSS 속성입니다. JavaScript에서는 style.visibility에 접근해 이 값을 동적으로 변경할 수 있습니다.
- visible: 요소를 정상적으로 화면에 표시합니다.
- hidden: 요소를 숨기지만, 원래 차지하던 레이아웃 공간은 그대로 유지됩니다.
display: none과 달리 visibility: hidden은 요소가 있던 자리의 공간을 유지한다는 점이 큰 차이입니다. 따라서 페이지 레이아웃이 밀리지 않으면서 요소만 잠깐 감추고 싶을 때 유용합니다.
예제
다음 코드를 실행하면 버튼 클릭 한 번으로 visibility 속성을 이용해 요소를 숨기고 다시 표시하는 동작을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<p id="pid">Demo Text</p>
<button type = "button" onclick = "displayHide()"> Hide </button>
<button type = "button" onclick = "displayShow()"> Show </button>
<script>
function displayHide() {
document.getElementById("pid").style.visibility = "hidden";
}
function displayShow() {
document.getElementById("pid").style.visibility = "visible";
}
</script>
</body>
</html>
코드 설명
displayHide() 함수는 getElementById()로 id가 "pid"인 문단을 찾아 visibility 값을 hidden으로 설정해 요소를 숨깁니다. 반대로 displayShow() 함수는 같은 요소의 visibility를 visible로 설정해 다시 화면에 나타나게 합니다. 각 버튼은 onclick 이벤트 핸들러를 통해 이 두 함수를 호출하며, 이 방식을 응용하면 메뉴, 팝업, 알림 창 등 다양한 UI 요소의 표시와 숨김을 손쉽게 제어할 수 있습니다.