| None | |
| 요소를 화면에 표시하지 않는다 공간 조차 부여되지 않음 |
| 평상시 | None type 적용 |
 |
 |
개발자 도구를 보면, 코드가 존재하고 있기는 하다.
그런데 그냥 화면에서 사라진 것일 뿐이다.
나중에 반응형 웹사이트를 만들 때, 사용하게 된다.
디바이스의 크기가 작아지면, 레이아웃의 일부 영역이 사라지게 해야한다.
레이아웃을 바꿀 때, display none을 활성화시키면서 이 display를 없애고
감싸고 있던 다른 display를 보여주게 되는 것이다.
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: rgb(253, 188, 47);
border: 2px solid black;
}
.none {
/* display: none; */
}
</style>
</head>
<body>
<div class="box"> box1 </div>
<div class="box none"> box2 - None </div>
<div class="box"> box3 </div>
</body>
</html>'WEB > CSS_ concepts' 카테고리의 다른 글
| [CSS Flexbox] 관련된 용어 (0) | 2024.03.10 |
|---|---|
| [CSS] 배치 _ inline type의 수평 정렬 ( a, img, span ) (0) | 2024.03.10 |
| [CSS] 배치 _ BLOCK type의 수평 정렬 ( h1~h6, p, div) (0) | 2024.03.10 |
| [CSS] Inline box type _ 다른 요소를 수평방향으로 밀어낼 수 있지만, 위아래로는 못한다. (0) | 2024.03.10 |
| [CSS] Normal Flow (0) | 2024.03.10 |