[CSS] opacity / visibility / display 차이점

[CSS] opacity / visibility / display 차이점

요소를 표시할 수 있으나 공간을 차지하고 클릭을 함에 따라 다르다.

property	occupies space(공간 차지)	consumes clicks(클릭 이벤트)
opacity: 0	O	O
visibility: hidden	O	X
display: none	X	X

클릭이벤트는 ondbclick, onmousedown, onmousemove 등과 같은 다른 포인터 이벤트도 사용한다.

본질적으로 visiblity: hidden은 opacity: 0와 pointer-events: none의 조합처럼 동작한다.

 

출처 :: visibility:hidden vs display:none vs opacity:0

 

---

display,visibility는animate()를 하지 못한다. 이럴 때opacity 함께 사용한다.

출처 :: Fading visibility of element using jQuery

$('선택자').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 400);

👎단점 :: 다시 안보이게 이벤트 걸 때, opacity: 1이 animate되기전에 hidden되서 좋지 않다.

 

[jQuery] :visibility + opacity animation 같이 거는 방법.