CSS 요소숨기기

요소 숨기기

안녕하세요. 오늘은 css를 이용해서 요소를 안보이게 하는방법을 알려드리겠습니다.

display: none 는 렌더링트리와 접근성 트리에서 사라지게 합니다.

.button {
    display : none;
}

visibility: hidden은 렌더링트리와 접근성 트리에서 사라지게 합니다. hidden은 별도의 CSS가 없이도 HTML을 통해서 완전히 마스킹할 수 있어서 편리한 점이 있습니다.

.button {
    visibility: hidden;
}

opacity: 0은 엘리먼트의 요소를 안보이게 하지만, visibility: hidden과 마찬가지로 빈공간이 남아 있게 됩니다. 이 콘텐츠에 접근할 수 있는지 여부는 접근성 기술에 따라 다릅니다. 따라서 일관되게 숨기려면 이것을 사용하지 않는 것이 좋습니다.

.button {
    opacity: 0;
}

transform: scale(0)시각적으로 엘리먼트를 감추지만, opacity: 0과 마찬가지로 빈공간이 남습니다. 그러나 스크린 리더에서는 이 요소에 접근할 수가 있습니다.

.button {
    transform: scale(0);
}

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

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