[CSS] 요소 숨기는 방법 알아보기

CSS 요소 숨기는 방법

CSS에서 특정 요소를 숨기는 방법에 대해 설명하는 포스팅입니다.

---

display로 요소 숨기기

차지하던 영역을 제거해 존재 자체가 사라진다고 이해하면 된다.
애니메이션 적용 불가능.

display: none;

opacity로 요소 숨기기

투명도를 0으로 설정하는 것이기 때문에 영역은 남아있다.
애니메이션 적용 가능.

opacity: 0;

visibility로 요소 숨기기

차지하던 공간은 그대로 유지하지만 콘텐츠가 숨겨지는 방식이다.
애니메이션 적용 불가능.

visibility: hidden;

transform으로 요소 숨기기

scale 값을 0으로 설정하여 요소를 안 보이게 하는 방식이다.
애니메이션 적용 가능.

transform: scale(0);

width, height 값 설정으로 요소 숨기기

요소의 width 값과 height 값을 0으로 설정하면 요소가 보이지 않게 된다.
영역을 사라지게 하고 애니메이션 적용도 불가능하다.

width: 0;
height: 0