개요
JavaScript에서 요소의 표시 유형(display type)을 변경하려면 display 속성을 사용합니다. 이 속성은 CSS의 display 스타일 속성과 동일한 값을 가지며, 요소를 화면에 표시하거나 숨기는 데 활용할 수 있습니다.
특히 요소를 완전히 숨기고 싶다면 display 값을 none으로 설정하면 됩니다. 이렇게 하면 해당 요소가 레이아웃에서도 제거되어 화면에 나타나지 않습니다.
주요 display 값 정리
- none – 요소를 화면에서 완전히 숨깁니다 (레이아웃 공간도 사라짐)
- block – 요소를 블록 레벨로 표시합니다 (div, p 등이 기본값)
- inline – 요소를 인라인으로 표시합니다 (span, a 등이 기본값)
- inline-block – 인라인 배치 + 블록처럼 크기 지정 가능
참고:display: none은 요소가 차지하던 공간까지 사라지지만,visibility: hidden은 요소를 숨겨도 원래 자리와 공간은 유지됩니다.
예제 코드
아래 코드를 실행하고 버튼을 클릭하면, JavaScript의 style.display 속성을 통해 초록색 영역이 화면에서 사라지는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#myID {
width: 250px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<button onclick="display()">Set display as none</button>
<div id="myID">
<h1>Heading Level 1 for Demo</h1>
This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text.
</div>
<script>
function display() {
document.getElementById("myID").style.display = "none";
}
</script>
</body>
</html>코드 설명
getElementById("myID")– ID가myID인 div 요소를 선택합니다..style.display– 해당 요소의 인라인 스타일 중 display 속성에 접근합니다.= "none"– display 값을none으로 설정하여 버튼 클릭 시 요소를 숨깁니다.
요소를 다시 보이게 하려면?
숨긴 요소를 다시 표시하고 싶다면 display 값을 원래대로 되돌리면 됩니다.
document.getElementById("myID").style.display = "block";이처럼 style.display 속성 하나만으로도 요소의 표시 여부를 자유롭게 제어할 수 있으며, 탭 메뉴, 드롭다운, 모달 창 등 다양한 UI 구현에 널리 활용됩니다.