1. 커서
cursor: auto;
/*
auto: 상황에 맞게 자동 변화 근데 이게 내가 원하지 않는 것일 수 있음 주의
default: 그냥 무조건 화살표
none: 커서 안 보임
zoom-in: 돋보기
pointer: 손가락으로 바뀜.
not-allowed: 금지 표시 나옴.
그 외 more... mdn 문서 확인 바람
*/
2. 요소 감추는 법
opacity: 1;
visibility: hidden;
display: none;
/*
opacity: 불투명도 1 == 잘 보임 (100%), 0 == 안 보임 (0%)
opacity: 0; 이 되면 모습만 감추는 것이기 때문에 해당 태그에 커스터마이징 했던
커서 모양 바뀜, 클릭, 포커스(input 요소가 선택된 것) 전부 다 됨.
visibility: visible or hidden
hidden으로 해놓으면 모습도 안 보이고 커서모양 바뀜, 클릭, 포커스 전부 안됨
하지만 해당 내용이 있던 공간은 그대로 차지함.
display: none;
위의 모든 요소 다 안되고 공간마저 차지 하지 않음.
*/
3. 스스로 해보기
div {
width: 10vw;
height: 10vh;
margin: 0 auto;
padding: 24px;
line-height: 10vh;
background-color: skyblue;
cursor: pointer;
opacity: 1;
visibility: visible;
display: block;
}
div:hover{
color:red;
background-color: pink;
}
p{
cursor:grab;
opacity: 0;
}
<!DOCTYPE html>
<html lang="ko">
<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>
<link rel="stylesheet" href="1_style.css">
</head>
<body>
<div>초특가 세일</div>
<p>-다음 장- </p>
</body>
</html>
