기록 ＞ 기억
[CSS] visibility : hidden 과 display : none 의 차이 본문
visibility : hidden 과 display : none 의 차이
| 속성명 | 속성값 | 설명 |
| visibility | hidden | 화면에서 요소를 숨김, 실제로 공간은 차지하고 있음 |
| display | none | 화면에서 요소를 숨김, 공간을 차지하지 않음 |
예제 )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>visibility, display</title>
<style type="text/css">
.parent {
width: 100px;
border: 1px solid gray;
}
.child_a {
background-color: lightblue;
}
.child_b {
background-color: lightgreen;
/* 보이지 않지만 공간은 그대로 차지 */
/* visibility: hidden; */
/* 보이지도 않고 공간도 차지하지 않음 */
/* display: none; */
}
.child_c {
background-color: lightpink;
}
</style>
</head>
<body>
<div class="parent">
<div class="child_a">A</div>
<div class="child_b">B</div>
<div class="child_c">C</div>
</div>
</body>
</html>
'IT국비지원' 카테고리의 다른 글
| [JavaScript] 연산자 (0) | 2021.09.07 |
|---|---|
| [JavaScript] 작성위치, 변수와 상수 (0) | 2021.09.06 |
| [CSS] 반응형 웹 (0) | 2021.09.06 |
| [CSS] 2단 메뉴 (0) | 2021.09.03 |
| [CSS] position 속성 / z-index 속성 (0) | 2021.09.02 |
| [CSS] display 속성 (block / inline / inline-block) (0) | 2021.09.01 |
| [CSS] float 속성 (0) | 2021.08.31 |
'IT국비지원' Related Articles
more
Comments