문의하기
CSS visibility 속성, visibility:hidden과 display:none 차이점
visibility 속성을 사용하면 HTML 문서의 특정 요소를 보이게 하거나 보이지 않게 처리할 수 있습니다. 그리고 대부분은 자바스크립트 내에서 visibility 속성을 활용하여 요소를 보이게 하거나 보이지 않게 처리를 합니다. 그럼 visibility 속성에 대해서 알아보고 visibility:hidden과 display:none의 차이점에 대해서도 알아보겠습니다.
※ display 속성에 대해서는 이전 게시글을 참고하시면 됩니다.
[참고] CSS display 속성 (none, block, inline, inline-block)
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 속성을 사용하여 보이게 또는 보이지 않게 처리
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 → 화면에 보이지 않게 처리하지만 차지하고 있는 공간은 그대로 둡니다.
이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!
관련 이전 게시글
CSS 박스 모델 구성 요소 및 box-sizing 속성
CSS 여백 조절하는 방법 – margin, padding 속성
CSS 테두리 속성 지정 (스타일, 두께, 색, 둥글게)
CSS display 속성 (none, block, inline, inline-block)
