반응형
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>
반응형
'🌐WEB' 카테고리의 다른 글
| [CSS] CSS, SASS, SCSS 차이점, 사용방법 (2) | 2022.03.18 |
|---|---|
| [HTML/CSS] 텍스트가 넘칠 때 생략하는 방법 (... 말줄임 표시) (2) | 2022.03.11 |
| [CSS] 선택자에서 꺽쇠 > 의 의미는? (자식 선택자, 하위 선택자) (4) | 2022.02.10 |
| [CSS] 하단바, 하단영역 고정하는 방법 (1) | 2022.01.31 |
| [WEB] 회원가입 창 만들기 (HTML, CSS, JS / 입력형식체크, 문자인증 기능추가) (12) | 2021.10.23 |