디스플레이
웹 페이지의 레이아웃을 선택하는 속성
block, inline, inline-block, none
✔visibility : hidden -> visibility :visible
숨김 , 나타내기
●디스플레이 none -> 보이지 않고 자리도 존재하지 않는다.
●visibility: hidden -> 자리는 있는데 보이지는 않음
차이를 예시를 통해 알아보자
HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>디스플레이</title>
<style>
div{background-color: deepskyblue;
border: 3px solid red;
margin-bottom: 30px;
}
p#none{display: none;}
p#hidden{visibility: hidden;}
</style>
</head>
<body>
<h2>디스플레이</h2>
<div>
<p>display 속성값을 none으로 설정</p>
<p id="none">display 속성값을 none으로 설정</p>
</div>
<div>
<p>visibility 속성을 hidden으로 설정</p>
<p id="hidden">visibility 속성을 hidden으로 설정</p>
</div>
</body>
</html>
none으로 설정한 값은 아예 보여지지 않지만
hidden속성으로 만든 값은 자리는 차지하는 모습을 볼 수 있다.
'코딩공부 > HTML,CSS,JavaScript' 카테고리의 다른 글
| CSS_z-index (0) | 2023.03.30 |
|---|---|
| CSS_Position (0) | 2023.03.30 |
| CSS_박스 모델 (0) | 2023.03.30 |
| CSS_배경 문법 (1) | 2023.03.30 |
| CSS_텍스트 문법 (1) | 2023.03.30 |
