[CSS] 요소 숨기는 방법 : display, opacity, scale, visibility...

CSS를 이용해서 요소 숨기기

여러분은 반응형웹을 하면서 요소를 숨기는 상황이 많지 않나요? 저는 그런 상황이 많더라고요! 그래서 여태까지 display:none만 이용했었는데 이 방법 말고도 더 많은 방법이 있단걸 알고 계신가요?
오늘은 CSS를 이용해서 요소를 숨기는 방법에 대해서 알아보겠습니다.

---

■ display: none;

레이아웃에는 영향을 주지 않습니다. 차지하던 공간자체도 사라지는 개념입니다.

■ visibility: hidden;

차지하던 공간은 유지한채로 컨텐츠만 사라집니다.고로 사라진 공간은 빈 공간으로 남게 됩니다.

■ width: 0; height: 0;

넓이와 높이를 0으로 지정해서 보이지 않게 하는 방법입니다. 제가 실험해보니 안에 텍스트가 들어가면 텍스트는 적용이 안되더라구요? 네... 그런듯합니다. 그래서 이 방법을 사용하되 이 텍스튼 어떻게 없앨까 고민하다가 "overflow:hidden을 사용해서 가로0, 세로0인 이 요소의 영역밖을 안보이게하면 없어지지 않을까?" 싶어서 해보니 잘~ 사라지더군요 ^_^ 여러분도 이 점 참고하시어 공부하시길 바랍니다.

■ opacity: 0

애니메이션 적용 가능합니다.

요소의 불투명도를 0%로 만듭니다. 그냥 이대로도 예상이 가는 가장 직관적인 CSS속성이네요. 차지하던 공간은 유지하고 시야에서 사라집니다. 이 속성은 애니메이션 효과가 부여가능합니다.

■ transform: scale(0)

애니메이션 적용 가능합니다.

요소를 극한의 극한까지 축소한 개념입니다. 그러므로 시각적으로 감출 수 있습니다. transform은 변형과 관련된 속성값인데요. 여기서 'scale'은 요소를 축소/확대 해주는 속성값이에요. 0으로 아예 축소에 축소를 해버리니 당연히 안보이겠죠?그리고 역시나 영역은 사라집니다.

---

■ 함께 하시죠

마우스를 오버해보시면 되겠숨다
(제가 실력이 부족한가봐요. 정확히 대셔야 깔끔하게 동작합니다💦)

✔ display:none;

display:none;

.t_box .disn:hover{
    display : none;
}

✔ visibility: hidden;

visibility: hidden;

.t_box .vis:hover{
    visibility : hidden;
}

✔ width: 0; height: 0;

width: 0; height: 0;

.t_box .wh:hover{
    width: 0;
    height: 0;
    overflow: hidden;
}

✔ opacity: 0

opacity: 0

.t_box .op:hover{
     animation: opacity 1.5s ease forwards;
}
@keyframes opacity {
     0% {opacity: 1;}
    100% {opacity: 0;}
}

✔ transform: scale(0)

transform: scale(0)

.t_box .scale:hover{
     animation: scale 1.5s ease forwards;
}
@keyframes opacity {
     0% {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes scale {
     0%{transform: scale(1);}
    100%{transform: scale(0);}
}