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

과제를 진행하던 도중, transition을 적용하는데에 문제가 생겨서 찾아보게된 부분이다.

Visibility: hidden, display: none, opacity: 0은 모두 화면 상에서 해당 요소가 보이지 않게 하는 속성들이다.
그러나, 둘의 차이점들로 인해서 사용하는 순간이 달라진다.

1. Visibility: hidden

사용자의 눈에 보이지 않도록 하는 코드이다.
그러나, 시각적으로 존재하지 않는 것 처럼 보일 뿐, 실제로는 해당 요소의 크기를 그대로 가지고 있어서 같은 공간에 있는 다른 레이아웃들의 위치가 변경되지 않는다.
또한, 해당 요소 뒤에 있는 공간을 클릭할 수 있다.

2. display: none 또한 사용자의 눈에 보이지 않게 하는 코드이다.

시각적 뿐만 아니라 실제 레이아웃 내에서도 그 공간에 아무것도 존재하지 않았던 것으로 인식한다.
DOM 트리에서는 해당 요소를 인식하고 있지만, 렌더 트리에서 렌더링 될 때 레이아웃으로써는 인식되지 않는다. 따라서, 명시적으로만 DOM에 그 자리를 차지하고 있을 뿐이다.

3. opacity: 0은 해당 요소의 투명도를 조정하여 보이지 않게 하는 것이다.

시각적으로만 보이지 않을 뿐, 실제로 공간에 투명도를 100%로 가진 요소가 존재하고 있는 것이다. 또한 하나의 요소이기 때문에 요소의 공간 뒤로 접근할 수 없다.

	visibility	display	opacity
공간 차지	O	X	O
후방 요소 접근	O	X	X
transition	O	X	O

출처 : mdn