[CSS]요소 숨기기

728x90

CSS 요소 숨기기

CSS 설정으로 요소들을 숨길 수 있습니다. 오늘은 요소 숨기는 방법 다섯 가지에 대해 알아보겠습니다.

화면상에서 해당 콘텐츠가 안 보이게 되면서 해당 콘텐츠가 가지고 있던 영역 또한 사라지게 됩니다. 애니메이션도 불가하며, 스크린리더기에서 내용을 읽지 못합니다.

.box {
    display: none;    
}

요소의 불투명도를 설정합니다. 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대입니다. 애니메이션 작동 가능하며, 영역도 남아있습니다. 스크린리더기에서 내용을 읽을 수 있습니다.

.box {
    opacity : 0;    
}

문서의 레이아웃을 변경하지 않고 요소를 숨깁니다. 애니메이션은 작동하며 국내 스크린리더기에서는 읽을 수 있으나, 국외 스크린리더기에서는 내용을 읽지 못합니다.

.box {
    visibility : hidden;    
}

transform의 scale로 요소를 확대하거나 축소할 수 있습니다. 애니메이션은 가능하지만 영역은 사라집니다.

.box {
    transform: scale(0);    
}

높이와 너비를 없애 영역에서 사라지게 합니다. 이떄, 애니메이션도 불가능합니다.

.box {
    width: 0; 
    height: 0;    
}

728x90