Css visibility: hidden, display: none, opacticy: 0️⃣

개발을 하던중 css에서 dom 요소를 화면에서 보이지 않게 해주는 속성들을 사용하게 될때가 있습니다.

visibility, diasplay, opactity를 제어하는 것이 대표적인 방법입니다.

이 요소들 간에 어떤 차이가 있을지 궁금중이 생겨 포스팅을 합니다.

 

	layout paint	add Event
visibility: hidden	0	x
display: none	x	x
opacity: 0	0	0

 

세개의 속성 전부 dom 요소에는 포함이 됩니다.

opacity: 0과 visibility: hidden은 화면상에 공간을 차지합니다. 

하지만 display: none은 화면에서 공간을 차지하지 않습니다.

 

opacity: 0은 eventHandler를 등록할 수 있지만

visibility: hidden은 eventHandler를 등록할 수 없었습니다. (visibility: visible 이면 eventHandler는 정상적으로 등록되어집니다.)

 

visibility: hidden일때 eventHandler가 등록되지 않는 것과 

opacity: 0 일때 eventHandler가 등록되는 것이 가장 인상깊었습니다.

기획에 따라 알맞은 도구를 선택하는 것이 중요할 듯 합니다.

 

아래는 예시들 입니다!!