[CSS] "요소 숨기는 방법" 에 대해 알아봅시다!

CSS 요소 숨기는 방법에 대해 알아봅시다!

📎 CSS 요소 숨기기 종류

1. display :none; (애니메이션 X, 영역X)
2. opacity : 0; (애니메이션 O, 영역O)
3. visibility: hidden; (애니메이션 X, 영역X)
4. transform: scale(0); (애니메이션 O, 영역X)
5. width: 0; height: 0; (애니메이션 X, 영역X) : blind

➰display :none;

객체를 안 보이게 하는 첫번째 방법으로, display에 none을 넣어주면 눈에도 안 보이고 자리도 차지하지 않고 숨어있게 합니다.
※ 객체를 안 보이게 하는 display방법 중에 hidden도 있습니다.
none과 hidden 의 차이는 공간부분에서 차이가 있는데 none은 눈에 안보이게 감추어 있으며 공간의 크기도 0으로 처리되어 아래에 있던 그림이나 글자들이 위로 올라와 붙습니다.
반면 hidden은 눈에 안 보이게 사라지게 하지만 그 자리가 그대로 빈 공간이 됩니다. 쉽게 말해, 워드 작성할 때 글자를 삭제하지 않고 하얀색으로 바꿔서 모니터에 안보이게 하는 것과 같은 것입니다.

➰opacity : 0;

opacity는 요소의 투명도를 지정하는 것입니다. 속0부터 1사이의 소수점 단위의 숫자 값을 지정하며 기본값은 1이며 소수점 값을 입력할 시 0은 생략이 가능합니다(0.8 = .8).
opacity: 0; 은 요소가 화면상에 존재하지만 단지 보이지 않는 것입니다. 그러나 자리는 차지하고 있는 것이 특징입니다.

➰visibility: hidden;

visibility는 요소에 의해 생선된 박스를 렌더링할 것인지를 결정합니다. 기본적으로 이 값은 상속되지 않습니다.
요소를 숨기는 방법으로는 visibility: hidden;이 있습니다.
박스가 보이지 않지만 공간을 확보하기 때문에 레이아웃에 영향을 미치는 특징이 있습니다.

➰transform: scale(0);

transform은 변형과 관련된 기능으로 scale과 함께 쓰면 평면에서의 확대 또는 축소 효과를 줄 수 있습니다.
transform: scale(0);을 해주면 요소를 감춥니다. 그러나 이것 역시 그 자리는 그대로 차지하게 됩니다.

➰width: 0; height: 0;

width는 너비이며 height는 높이이니깐 둘다 0의 값으로 설정해줬을 때 박스가 0*0이므로 차지하는 부분이 없어져 숨겨집니다.
0*0으로 부피도 0이므로 자리는 당연히 차지 하지 않고 아예 숨겨집니다.
이 때 텍스트가 있는데 같이 숨기고 싶다면 웹 접근성을 위해서 blind를 적어주고 blind 스타일을 overflow: hidden;으로 처리해주면 됩니다.