CSS 요소 숨기기

CSS 요소 숨기기

CSS를 통하여 요소를 숨길 수 있습니다. 숨기는 방법은 다양하지만, 각각의 방법마다 접근성, 레이아웃, 애니메이션, 성능 및 영향이 다르게 적용됩니다.

---

display

display: none;

display: none; 방식은 가장 많이 사용되는 요소 숨기기 방법입니다. 눈에 보이지 않으며 영역도 차지 하지 않습니다. 이 속성은 애니메이션을 적용할 수 없으며, 페이지 레이아웃을 트리거 합니다.

opacity

opacity: 0;

opacity는 0에서1 사이의 숫자나 0 ~ 100% 사이의 백분율로 표시 할 수 있습니다. opacity는 불투명도를 주는 것이기에 애니메이션을 적용 할 수 있으며, 영역도 그대로 존재하게 됩니다. 0은 완전 투명을 뜻하며, 1은 완전 불투명을 뜻합니다.

visibility

visibility: hidden;

visibility속성은 박스는 보이지 않지만, 그 공간은 확보하기 때문에 여전히 레이아웃에 영향을 미칩니다. 하지만, display:none의 속성과 마찬가지로 애니메이션은 적용이 되지 않습니다.

width, height

width: 0; height: 0;

width와 height는 가로와 세로길이 이므로, 이값들을 0으로 지정해주면 값들이 지정되지 않으므로 영역이 숨겨지게 됩니다. 이때, 영역은 잡히지 않으며 애니메이션효과도 사용할 수 없습니다.

transform

transform: scale(0);

transform은 여러 효과를 부여하기 위한 함수가 사용되어집니다. 애니메이션 효과를 사용할 수 있지만, 효과를 사용하기 위해서는 트랜지션 속성을 사용해줘야 합니다. scale 속성은 대상의 크기를 확대/축소 시키는 속성입니다. scale(0)일 경우, 0곱하기 속성이기 때문에 사라지게 됩니다.

속성	영역	애니메이션
display: none;	X	X
opacity: 0;	O	O
visibility: hidden;	X	X
width: 0; height: 0;	X	X
transform: scale(0);	X	O