HTML DOM display 속성 완벽 정리 – 요소 표시 방식 설정과 주요 값 총정리

HTML DOM의 Style display 속성은 요소의 표시 유형(display type)을 설정하거나 현재 설정된 값을 반환할 때 사용합니다. 웹 문서의 요소는 대부분 블록(block) 또는 인라인(inline) 방식으로 표시되며, display:none을 지정하면 해당 요소를 화면에서 완전히 숨길 수도 있습니다.

기본 문법

display 속성을 설정하는 기본 문법은 다음과 같습니다.

object.style.display = value

display 속성 값 종류

아래 표는 display 속성에 사용할 수 있는 값과 각 값의 동작 방식을 정리한 것입니다.

값	설명
inline	요소를 인라인 요소로 표시합니다. 이 경우 width와 height 속성은 적용되지 않습니다.
block	요소를 새 줄에서 시작하며 전체 너비를 차지하는 블록 요소로 표시합니다.
contents	자식 요소만 표시하고 부모 요소 자체는 사라지게 하여, 자식 요소들이 DOM의 직계 자식처럼 동작하도록 만듭니다.
flex	요소를 블록 수준의 플렉스(flex) 컨테이너로 표시합니다.
grid	요소를 블록 수준의 그리드(grid) 컨테이너로 표시합니다.
inline-block	inline과 동일하게 배치되지만, width와 height 값을 적용할 수 있습니다.
inline-flex	요소를 인라인 수준의 플렉스 컨테이너로 표시합니다.
inline-grid	요소를 인라인 수준의 그리드 컨테이너로 표시합니다.
inline-table	요소를 인라인 수준의 테이블로 표시합니다.
list-item	요소가 <li> 요소처럼 동작하도록 합니다.
run-in	문맥에 따라 블록 또는 인라인으로 표시합니다.
table	요소가 <table> 요소처럼 동작하도록 합니다.
table-caption	요소가 <caption> 요소처럼 동작하도록 합니다.
table-column-group	요소가 <colgroup> 요소처럼 동작하도록 합니다.
table-header-group	요소가 <thead> 요소처럼 동작하도록 합니다.
table-footer-group	요소가 <tfoot> 요소처럼 동작하도록 합니다.
table-row-group	요소가 <tbody> 요소처럼 동작하도록 합니다.
table-cell	요소가 <td> 요소처럼 동작하도록 합니다.
table-column	요소가 <col> 요소처럼 동작하도록 합니다.
table-row	요소가 <tr> 요소처럼 동작하도록 합니다.
none	해당 요소를 화면에서 완전히 제거합니다.
initial	속성을 기본(initial) 값으로 설정합니다.
inherit	부모 요소의 속성 값을 상속받습니다.

예제: 버튼 클릭으로 display 변경하기

다음 예제는 플렉스(flex) 레이아웃으로 배치된 div와 내부 span 요소의 display 속성을 버튼 클릭 한 번으로 block으로 변경하는 코드입니다.

<!DOCTYPE html>
<html>
<head>
<style>
    #DIV1 {
        padding: 10px;
        background-color: lightblue;
        display: flex;
    }
    .flexSpan {
        width: 70px;
        background-color: red;
        margin: 20px;
        padding: 10px;
    }
</style>
<script>
    function changeDisplay() {
        document.getElementById("DIV1").style.display = "block";
        var spans = document.getElementsByClassName("flexSpan");
        for (var i = 0; i < spans.length; i++) {
            spans[i].style.display = "block";
        }
        document.getElementById("Sample").innerHTML = "div와 내부 span 요소 모두 display가 block으로 변경되었습니다.";
    }
</script>
</head>
<body>
    <div id="DIV1">
        <span class="flexSpan">WORLD1</span>
        <span class="flexSpan">WORLD2</span>
    </div>
    <p>아래 버튼을 클릭하면 위 div와 내부 요소들의 display 속성이 변경됩니다.</p>
    <button onclick="changeDisplay()">Change Display</button>
    <p id="Sample"></p>
</body>
</html>

코드 설명

#DIV1에는 display:flex가 적용되어 두 개의 span이 가로로 나란히 배치됩니다.
버튼을 클릭하면 changeDisplay() 함수가 실행되어 div와 span 요소의 display 값이 block으로 바뀝니다.
변경 결과는 id가 Sample인 <p> 요소에 메시지로 출력됩니다.

실행 결과

페이지를 처음 열면 두 개의 빨간색 박스(WORLD1, WORLD2)가 플렉스 컨테이너 안에 나란히 표시됩니다.

HTML DOM display 속성 완벽 정리 – 요소 표시 방식 설정과 주요 값 총정리

[Change Display] 버튼을 클릭하면 div와 내부 span 요소 모두 display가 block으로 전환되어 각각 새 줄에 표시됩니다.

HTML DOM display 속성 완벽 정리 – 요소 표시 방식 설정과 주요 값 총정리

참고: display:none과 visibility:hidden의 차이

display:none은 요소를 렌더링에서 완전히 제거하므로 화면상의 공간까지 함께 사라집니다. 반면 visibility:hidden은 요소가 눈에 보이지 않을 뿐 원래 차지하던 공간은 그대로 유지됩니다. 따라서 요소를 완전히 숨기고 싶다면 display:none을, 레이아웃을 유지한 채 숨기고 싶다면 visibility:hidden을 사용하는 것이 좋습니다.