CSS - 안보이는 요소

display : none;
opacity : 0;
visivility : hidden;

display : none; 존재자체가 사라짐.
opacity : 0; 존재자체는 유지한채 투명도 조절로 보이지않게 한다.
visibility : hidden; 자기 자리의 크기와 위치는 유지한채 사라지게함.

ex) dropdown menu를 만들때 display : none 을 하게 되면 transition 같은 효과를 줄 수 없다.

opacity와 visibility 차이
opacity : 0 으로 안보이게 한 경우 dropdown menu 아래 쪽에 커서를 가져다 댔을 경우 커서 모양이 변하게 된다.
but visibility : hidden; 로 안보이게 한경우에는 커서가 변하지 않는다.

.div {
	opacity :0;
    visibility : hidden;
}
.div:hover {
	opacity:1;
    visibility:visible;
}

2번째 방법
.div {
	pointer-events : none;
}
.div:hover {
	pointer-events : all;
}