CSS 스타일을 활용하면 자바스크립트(JavaScript)만으로도 HTML 요소를 손쉽게 숨기거나 다시 표시할 수 있습니다. 핵심은 CSS의 display 속성입니다. 값을 none으로 설정하면 요소가 화면에서 사라지고, block으로 설정하면 다시 나타납니다.
1. HTML 요소 숨기기
요소를 숨기려면 해당 요소를 선택한 뒤 style.display 값을 'none'으로 지정하면 됩니다.
예제 코드
아래 예제에서는 "Hideme" 버튼을 클릭하는 순간, <p> 태그에 들어 있던 텍스트가 화면에서 사라집니다.
<html>
<body>
<p id="hide">자바스크립트로 HTML 요소를 숨깁니다.</p>
<input type="button" onclick="document.getElementById('hide').style.display='none'" value="Hideme">
</body>
</html>
위 코드를 실행하면 다음과 같은 초기 화면이 표시됩니다.
여기서 "Hideme" 버튼을 클릭하면 블록 안의 텍스트가 즉시 사라지고 버튼만 남게 됩니다. 이는 클릭 이벤트 발생 시 자바스크립트가 해당 문단의 display 값을 'none'으로 바꾸었기 때문입니다.
실행 결과
2. 숨겨진 HTML 요소 표시하기
반대로, 처음부터 숨겨져 있던 요소를 보이게 하려면 style.display 값을 'block'으로 변경하면 됩니다. 요소를 미리 숨겨 두려면 HTML에서 인라인 스타일로 display:none을 지정합니다.
예제 코드
아래 예제에서는 문단 텍스트가 초기에는 숨겨져 있다가, "Showme" 버튼을 클릭하면 화면에 나타납니다.
<html>
<body>
<p id="show" style="display:none">자바스크립트로 숨겨진 HTML 요소를 표시할 수 있습니다.</p>
<input type="button" onclick="document.getElementById('show').style.display='block'" value="Showme">
</body>
</html>
위 코드를 실행하면 텍스트 없이 버튼만 있는 화면이 나타납니다.
"Showme" 버튼을 클릭하면 숨겨졌던 문단이 아래와 같이 화면에 표시됩니다.
실행 결과
마무리 정리
자바스크립트에서 HTML 요소의 표시 여부를 제어하는 방법을 정리하면 다음과 같습니다.
- 요소 숨기기:
element.style.display = 'none' - 요소 표시하기:
element.style.display = 'block' - 초기 숨김 처리: HTML 태그에
style="display:none"추가
참고로 display:none은 요소가 공간까지 차지하지 않고 완전히 사라지는 반면, visibility:hidden은 요소가 보이지 않을 뿐 원래 자리와 공간은 유지된다는 차이점이 있습니다. 상황에 맞게 적절한 방식을 선택해 사용하시기 바랍니다.