CSS visibility 속성, visibility:hidden과 display:none 차이점

CSS visibility 속성, visibility:hidden과 display:none 차이점

visibility 속성을 사용하면 HTML 문서의 특정 요소를 보이게 하거나 보이지 않게 처리할 수 있습니다. 그리고 대부분은 자바스크립트 내에서 visibility 속성을 활용하여 요소를 보이게 하거나 보이지 않게 처리를 합니다. 그럼 visibility 속성에 대해서 알아보고 visibility:hidden과 display:none의 차이점에 대해서도 알아보겠습니다.

※ display 속성에 대해서는 이전 게시글을 참고하시면 됩니다.

1. visibility 속성

1. visibility 속성의 값

속성 값설명
visible해당 요소를 화면에 보이게 합니다.
hidden해당 요소를 화면에 보이지 않게 합니다. 레이아웃은 그대로 존재합니다.
collapse테이블 요소를 보이지 않게 합니다. 테이블에서만 사용이 가능합니다.


2. 사용 예제 (visibility 속성)

<!DOCTYPE html>
<html>
<head>
<title>visibility</title>
<style>
div { 
    border: 1px solid black; background-color: orange;
    width: 150px; height: 100px; margin: 10px; 
    line-height: 100px; text-align: center;
}
#box1 {
    visibility: visible;   /* 화면 보이게 처리 */
}    
#box2 {
    visibility: hidden;   /* 화면에 보이지 않게 처리 */
}    
</style>
<script>
function fnc(int) {
    if (int==1) {  /* 박스 숨기기 */
        document.getElementById("box3").style.visibility = "hidden";
    } else {   /* 박스 보이게 */
        document.getElementById("box3").style.visibility = "visible";
    }   
}
</script>
</head>
<body>
    <div id="box1">box1</div>
    <div id="box2">box2</div>
    <div id="box3">box3</div>
    <button onclick="fnc(1);">box3 숨기기</button>
    <button onclick="fnc(2);">box3 보이기</button>
</body>
</html>


3. 실행 결과 화면 (visibility 속성)

▼ [숨기기], [보이기] 버튼 클릭 시 자바스크립트에서 visibility 속성을 사용하여 보이게 또는 보이지 않게 처리

visibility 속성 사용 예제 실행 결과 화면입니다.

2. visibility:hidden과 display:none 차이점

1. 사용 예제 (visibility:hidden과 display:none 차이점)

<!DOCTYPE html>
<html>
<head>
<title>display:none vs visibility:hidden</title>
<style>
div { border: 1px solid black; margin: 10px; padding: 10px; }
div { display: inline-block; }
.dis div { background-color: orange; width: 50px; }
.vis div { background-color: blueviolet; width: 50px; }

#box2 {
    /* 화면에 보이지 않게 처리 - 레이아웃 제거 */
    display: none;   
}
#box5 {
    /* 화면에서 숨김 처리 - 레이아웃은 그대로 */
    visibility: hidden;   
}
</style>
</head>
<body>
    <h2>display</h2>
    <div class="dis">
        <div id="box1">box1</div>
        <div id="box2">box2</div>
        <div id="box3">box3</div>
    </div>
    <h2>visibility</h2>
    <div class="vis">
        <div id="box4">box4</div>
        <div id="box5">box5</div>
        <div id="box6">box6</div>
    </div>
</body>
</html>


2. 실행 결과 화면 (visibility:hidden과 display:none 차이점)

① display: none → 화면에 보이지 않게 처리하고 차지하고 있는 공간도 없어집니다.

② visibility: hidden → 화면에 보이지 않게 처리하지만 차지하고 있는 공간은 그대로 둡니다.

visibility:hidden과 display:none 차이점 사용 예제 실행 결과 화면입니다.

관련 이전 게시글


이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!

동일 카테고리 게시글

위로 스크롤