웹사이트에서 특정요소를 안보이게 하는 방법
안녕하세요.
이번 시간에는 웹사이트에서 어떤 특정요소를 안보이게 하는 방법에 대해서 알아보겠습니다.
.
웹사이트에서 특정요소를 안보이게 하는 방법에는 여러가지가 있습니다.
.
display: none
.hide {
display: none;
}.
웹사이트에 존재하지 않는 요소처럼 만든다.
Visible to screenreader – X
Occupy space – X
Capture keyboard events – X
Capure mouse events – X
Animatable – X
visibility: hidden
.hide {
visibility: hidden
}.
특정 요소가 안보이게 변경되지만 요소가 있던 공간을 차지하며 어떤것도 할 수 없다.
Visible to screenreader – X
Occupy space – O
Capture keyboard events – X
Capure mouse events – X
Animatable – X
opacity: 0
.hide {
opacity: 0
}.
특정 요소가 안보이게 변경되지만 있던 공간을 차지하며 해당 요소를 가지고 무엇이든 할 수 있다.
Visible to screenreader – O
Occupy space – O
Capture keyboard events – O
Capure mouse events – O
Animatable – O
transform: scale(0)
.hide {
transform: scale(0)
}.
특정 요소가 안보이게 되지만 있던 공간을 차지하며 마우스 이벤트를 제외한 모든 것을 할 수 있다.
Visible to screenreader – O
Occupy space – O
Capture keyboard events – O
Capure mouse events – X
Animatable – O
transform: translateX(-9999px)
.hide {
transform: translateX(-9999px)
}.
특정 요소가 안보이게 되지만 있던 공간을 차지하며 마우스 이벤트를 제외한 모든 것을 할 수 있다.
Visible to screenreader – O
Occupy space – O
Capture keyboard events – O
Capure mouse events – X
Animatable – O
clip-path: circle(0)
.hide {
clip-path: circle(0)
}.
특정 요소가 안보이게 되지만 있던 공간을 차지하며 마우스 이벤트를 제외한 모든 것을 할 수 있다.
Visible to screenreader – O
Occupy space – O
Capture keyboard events – O
Capure mouse events – X
Animatable – O
position: absolute; left: -9999px
.hide {
position: absolute;
left: -9999px
}.
특정 요소가 있던 공간이 없어지고 마우스 이벤트를 제외한 모든 것을 할 수 있다.
Visible to screenreader – O
Occupy space – X
Capture keyboard events – O
Capure mouse events – X
Animatable – O
.
.
.
이렇게 웹사이트에서 어떤 특정요소를 안보이게 하는 방법에 대해서 알아봤습니다.
감사합니다.