CSS에서 요소를 숨기는 방법

 

CSS 속성 및 값구조	공간차지 여부	투명도 조절	애니메이션
display: none;	공간 차지 ❌ (요소가 완전히 사라짐)	❌ 불가능	❌ 불가능
visibility: hidden;	공간 차지 ⭕ (보이지만 않을 뿐 공간 유지됨)	❌ 불가능	✔️ 가능
opacity: 0;	공간 차지 ⭕ (보이지만 않을 뿐 공간 유지됨)	✔️ 가능	✔️ 가능

 

추가 설명:

• display: none;
  요소가 페이지 레이아웃에서 완전히 제거되어 공간을 차지하지 않습니다. 애니메이션이나 투명도 조절도 불가능합니다.
• visibility: hidden;
  요소는 화면에서 보이지 않지만, 요소가 차지하는 공간은 유지됩니다. 애니메이션 적용이 가능합니다.
• opacity: 0;
  요소의 투명도가 0이 되어 보이지 않지만, 요소는 실제로 존재하며 공간도 차지합니다. 투명도 조절과 애니메이션이 가능합니다.