CSS 로 요소를 숨겨보자 !

CSS 속성 중 요소를 숨기고 싶을 때 사용하는 속성은 대표적으로 세 가지가 있다.

 

첫 번째. overflow : hidden

두 번째. display : none

세 번째. visibility : hidden

 

차근차근 세 가지의 차이가 뭔지 알아보자 📣

---

첫번째. overflow

오버플로우는 요소의 컨텐츠가 요소의 크기보다 넘칠 경우, 컨텐츠의 보여짐을 제어한다.

다시 말해 하위 자식들이 부모의 영역을 침범했을 때 가시성을 제어할 수 있는 속성이다.

 

속성 값은 총 세 가지, 이는 모두 컨텐츠를 담고 있는 부모 요소에게 속성을 부여한다.

 

• hidden : 넘치는 콘텐츠를 부모의 영역만큼 숨김.
• scroll : 상, 하, 좌, 우, 스크롤 영역이 생김. ( 스크롤 할 영역이 없더라도 ! )
• auto : 스크롤이 필요한 부분에만 스크롤이 생성

스크롤과 오토의 차이가 비슷해 보이지만

• 스크롤 :  강제
• 오토 : 자동

아래 테스트 코드를 보자 !

 

See the Pen overflow by kim-Yeji (@yeeed711) on CodePen.

 

---

두 번째. display

 

디스플레이는 다양한 속성을 가지고 있는데 MDN display 이곳에서 확인 가능하다.

다만 여기서 다룰 속성은 단 한 가지

display : none

이 속성을 사용하면 바로 화면상에서 사라지게 된다.

🚫 주의할 점은 접근성 트리에서도 사라지기 때문에 아예 화면 구성 요소에서 사라지게 된다.

이는 스크린리더에 읽히지 않으며 레이아웃 구조영역에서도 사라지게 된다.

 

See the Pen display by kim-Yeji (@yeeed711) on CodePen.

 

보다시피 2번 파랑 박스가 보이지 않는다. 다음 요소에게 자리를 내어주는 것이다. 시각적으로도 사라지고 실제 렌더링 되지 않기 때문에 아예 없는 요소가 되었다고 볼 수 있다.

 

그렇다면 레이아웃은 유지하면서 시각적으로 사라지게 할 수는 없을까?

바로 다음에 나올 visibility 속성 이 바로 그것이다 !

---

세 번째. visibility

visibility 속성은 총 세 가지

• visible : 요소가 보임.
• hidden : 요소가 숨겨짐. 레이아웃에는 숨겨지지 않았을 때와 동일하게 자리를 지키고 있는다. ( 🚫 주의할 점 숨겨진 요소는 키보드 탭키로 포커싱이 되지 않는다.)
• collaspe : <table>의 행, 열 그룹과 열 그룹에 적용하면 dispaly : none 를 적용한 것과 동일하게 요소를 숨기고 영역도 사라진다. 플렉스 요소도 마찬가지. 다른 요소에서는 visibility : hidden 과 동일하다.

이 중에서 우리가 살펴볼 속성은 바로 hidden

 

방금 전과 동일한 코드로 살펴보자

 

See the Pen visibility by kim-Yeji (@yeeed711) on CodePen.

 

두 번째로 위치해있는 2번 파랑은 숨겨졌지만 레이아웃은 그대로 지키고 있는 모습 !! 

하지만 visible 값을 hidden으로 설정한 요소는 접근성 트리에서 제외된다. 즉 해당 요소와 그 모든 자손 요소는 스크린 리더가 읽지 않는다는 것

---

추가 ) 내가 궁금해서 찾아본 접근성 트리 확인하는 방법

시각적으로 사라지는 것은 금방 확인할 수 있다는 것은 OK👌

그렇다면 접근성 트리에서 사라졌다는 말은 무슨 뜻일까?

 

 

개발자 도구를 열어 돔 트리를 확인해보았다.

 

 

 

display : none 값을 주어 화면상에서 사라졌지만 HTML에는 여전히 남아있다. 나는 돔 트리와 접근성 트리가 같은 동의어라고 생각했는데 아니었다...

간단하게 말하자면 DOM은 HTML의 모든 데이터를 보여준다. 접근성 트리는 접근성 데이터만 표시된다.
접근성 트리는 접근성 관련 정보만 표시해주는 필터라고 보면 된다.

그렇다면 접근성 트리에서 사라졌다는 것은 어디서 확인할 수 있을까?

 

 

 

여기 Accessibility(접근성) 탭을 눌러보면

 

 

 

accessibility tree 탭에서 Ignored 라고 표시된 걸 볼 수 있다 !

display : none 속성을 사용할 경우 요소가 접근성 트리에서 무시되는 것이다.

 

 

displau : none 속성을 제거하면 이렇게 요소에 접근이 가능한 상태로 표시되는 걸 확인할 수 있다. 

그렇다면 visibility : hidden 은 어떨까?

 

 

visibility : hidden 속성은 화면상에 여전히 공간은 차지하며 위에서 설명한 대로 접근성 트리에서는 Ignored 라고 표시된다.

결론
접근성에 위배되지 않으면서 요소를 숨기고 싶다면 overflow : hidden , 테스트 목적, 일시적으로 숨겨야 하는 것들은 display : none 을 사용하면 될 것 같다.

---

🚀 새로 안 사실

돔 트리 !== 접근성 트리

 

역시 이론만 보는 것보다 직접 하나하나 확인해보는 게 확실히 이해가 빠른 것 같다.