<!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>Document</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
/* transition: width 2s; */
}
div:hover {
width: 300px;
visibility:hidden;
}
</style>
</head>
<body>
<h1>transition 예제</h1>
<p>빨간 네모박스에 마우스를 올려보세요</p>
<div></div>
</body>
</html>
display 와 다르게 visibility 는 디스플레이의 레이아웃을 해치지 않고 숨기기 표시하기가 가능하다 예를들어 버튼의 상태에 따라 버튼의 크기와 상관없이 icon만 보여주고 말고 하고싶다면 visibility 속성을 사용하자
'코딩 공부 > HTML' 카테고리의 다른 글
| 폼 검증을 해보자! (0) | 2023.06.30 |
|---|---|
| [HTML] - iframe을 JS로 제어하고 css를 맘껏 써보자! (0) | 2023.01.04 |
| html 간단한 모션을 만들어보기 -transition (0) | 2022.06.08 |
| html - 반응형 웹 제작을 효율적으로 하는 법 rem (0) | 2022.05.19 |
| css 로 네온사인 효과 주기 (0) | 2022.05.18 |