정신과 시간의 방

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>

저작자표시

[CSS] 요소 감추는 방법

1. 커서

2. 요소 감추는 법

3. 스스로 해보기

티스토리툴바