JavaScript에서 웹 페이지의 특정 요소를 숨기거나 다시 보이게 하려면 CSS의 visibility 속성을 활용하면 됩니다. 이 속성을 hidden으로 설정하면 해당 요소가 화면에서 사라지고, visible로 설정하면 다시 나타납니다.
visibility 속성의 특징
visibility: hidden을 사용하면 요소가 보이지 않게 되지만, display: none과 달리 원래 차지하던 공간은 그대로 유지됩니다. 따라서 레이아웃이 밀리는 현상 없이 요소를 잠시 감추고 싶을 때 유용합니다.
예제 코드
아래 예제는 버튼 클릭 시 문단 요소를 숨기거나 다시 보이게 하는 코드입니다. 직접 실행해 보면서 동작 방식을 확인해 보세요.
<!DOCTYPE html>
<html>
<body>
<p id = "pid">데모 텍스트</p>
<button type = "button" onclick = "displayHide()"> 숨기기 </button>
<button type = "button" onclick = "displayShow()"> 보이기 </button>
<script>
function displayHide() {
document.getElementById("pid").style.visibility = "hidden";
}
function displayShow() {
document.getElementById("pid").style.visibility = "visible";
}
</script>
</body>
</html>코드 설명
위 예제의 동작 방식은 다음과 같습니다.
- 숨기기 버튼:
displayHide()함수가 호출되어getElementById("pid")로 문단 요소를 가져온 뒤,style.visibility를"hidden"으로 변경해 요소를 감춥니다. - 보이기 버튼:
displayShow()함수가 호출되어 같은 요소의visibility값을"visible"로 되돌려 요소를 다시 표시합니다.
참고 사항
요소를 완전히 제거하고 공간까지 비우고 싶다면 display: none을 사용하는 것이 좋습니다. 반대로 공간을 유지한 채 내용만 숨기고 싶다면 visibility: hidden이 적합합니다. 상황에 맞게 두 속성을 선택하여 사용하세요.