[CSS] display:none, visibility:hidden, opacity:0 차이

display:none

• 영역 사라짐
• 이벤트(ex.클릭) 작동 안함
• tab focus 안됨

visibility:hidden

• 영역 있음
• 이벤트(ex.클릭) 작동 안함
• tab focus 안됨
• 뒤에 있는 요소 클릭 가능

opacity:0

• 영역 있음
• 이벤트(ex.클릭) 작동 함
• tab focus 됨
• 뒤에 있는 요소 클릭 불가능

위를 살펴보면, opacity: 0;와 visibility: hidden;는 적용이 되어도 그 div가 차지하고 있는 영역이 그대로 유지되는 것을 볼 수 있다. 반면 display: none;은 영역이 사라진 것을 알 수 있다.

다른 차이점은 아래 표로 정리한다.

속성	collapse	이벤트 적용	tab-order 적용
opacity: 0;	X	O	O
visibility: hidden;	X	X	X
display: none;	O	X	X