요소 숨기기

오늘은 요소 숨기기 방법에 대해 알아보겠습니다.

display: none은 렌더링트리와 접근성 트리에서 사라지게 합니다.
애니메이션도 안되고 영역도 사라진다.

{
    .button {
        display: none;
    }
}

opacity: 0은 엘리먼트의 요소를 안보이게 하지만, 빈공간이 남아 있게 된다.
애니메이션이 되고 , 영역도 존재함

{
    .button {
        opacity: 0;
    }
}

visibility: hidden은 레이아웃에 영향을 미치지 않고 엘리먼트를 감춘다. 사라진 공간은 빈 공간으로 남으며, 리플로우가 일어나지 않는다.
애니메이션도 안되고 영역도 사라진다.

{
    .button {
        visibility: hidden;
    }
}

시각적으로 엘리먼트를 감추지만, 빈공간이 남는다. 그러나 스크린 리더에서는 이 요소에 접근할 수가 있다.
애니메이션은 되지만 영역은 사라진다.

{
    .button {
        transform: scale(0);
    }
}

특정 요소의 너비와 높이를 0으로 설정하여 숨기는 방식으로, 스크린리더 또한 이 엘리먼트가 접근 가능하지 않은 것으로 간주하고 건너뛴다. 별로 좋지 못한 방법이다.
애니메이션도 안되고 영역도 사라진다.

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

코딩대원