🌐WEB
[CSS] display: none 과 visibility: hidden의 차이
Cocoon_
2022. 2. 17. 12:24
반응형
display와 visibility속성은 둘 다 적용된 태그를 안 보이게 하는 속성입니다.
display : none
- 아예 없애버리는 것
- 차지하고 있던 공간도 존재하지 않게 됨
visibility : hidden
- 보이지는 않지만 width와 height값을 할당해주면 해당 공간에는 존재
📋 코드
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
font-size: 60px;
color: black;
}
.div1 {
width: 300px;
height: 100px;
background-color: red;
}
.div2 {
width: 300px;
height: 100px;
background-color: blue;
/* display: none; */
/* visibility: hidden; */
}
.div3 {
width: 300px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="div1">red</div>
<div class="div2">blue</div>
<div class="div3">green</div>
</body>
</html>
📋 코드 (div2에 display : none 적용)
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
font-size: 60px;
color: black;
}
.div1 {
width: 300px;
height: 100px;
background-color: red;
}
.div2 {
width: 300px;
height: 100px;
background-color: blue;
display: none;
/* visibility: hidden; */
}
.div3 {
width: 300px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="div1">red</div>
<div class="div2">blue</div>
<div class="div3">green</div>
</body>
</html>
📋 코드 (div2에 visibility: hidden 적용)
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
font-size: 60px;
color: black;
}
.div1 {
width: 300px;
height: 100px;
background-color: red;
}
.div2 {
width: 300px;
height: 100px;
background-color: blue;
/* display: none; */
visibility: hidden;
}
.div3 {
width: 300px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="div1">red</div>
<div class="div2">blue</div>
<div class="div3">green</div>
</body>
</html>
반응형