요소 숨기기

CSS에서 요소를 숨기는 방법

CSS에서 요소를 숨기는 방법에 대해 알아보겠습니다.

---

display: none;

이 속성을 적용하면 요소가 완전히 사라집니다. 요소가 없는 걸로 되기 때문에 접근성이 아예 없습니다. 존재하지 않는 요소이기때문에 공간 또한 차지하지 않습니다.

visibility: hidden;

요소가 보이지 않지만 요소가 있었던 높이값만큼 공간이 남아있습니다. 이 경우 요소가 존재하지만 보이지만 않게 한 것입니다. 요소가 남아있기때문에 접근성은 유지할 수 있지만 불필요한 공간이 생겨버립니다.

width: 0; height: 0;

특정 요소의 너비와 높이를 0으로 설정하여 숨기는 방식입니다.

transform: scale(0);

시각적으로 엘리먼트를 감추지만, 빈 공간이 남습니다. 그러나 스크린 리더에서는 이 요소에 접근할 수가 있습니다.

opacity: 0;

보이는 건 사라지지만 영역은 유지됩니다.

정리

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