CSS 요소 숨기기

CSS 요소 숨기기

CSS를 통하여 요소를 숨길 수 있습니다. 다양한 숨기는 방법을 알아봅시다.

---

display: none; (애니메이션X, 영역X)

영역을 차지하지 않고, 공간을 차지하지 않는다. 요소가 없던 것처럼 표시

display: none;

opacity: 0; (애니메이션O, 영역O)

opacity는 0~1 사이, 0% ~ 100% 사이로 표시 할 수 있습니다. opacity는 불투명도라는 뜻입니다. 숫자가 클수록 불투명하고, 숫자가 작을 수록 투명합니다.

opacity: 0;

visibility: hidden; (애니메이션X, 영역X)

레이아웃에 영향을 미치지 않고 요소를 감춥니다. 사라진 공간은 빈 공간으로 영역이 남게됩니다.

visibility: hidden;

width: 0; height: 0; (애니메이션X, 영역X) : blind

특정 요소의 너비와 높이를 0으로 설정하여 숨기는 방식으로, 스크린리더 또한 이 엘리먼트가 접근 가능하지 않은 것으로 간주하고 건너뜁니다.

width: 0; height: 0;

transform: scale(0); (애니메이션O, 영역X)

scale의 값을 0으로 설정해 주어서 요소를 숨길 수 있습니다. 요소를 확대, 축소를 하고 안보여도 영역은 남습니다.

transform: scale(0);

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