2022.04.07 Today I Learned📚

화면에 특정 영역을 보이지 않게 하기 위해 몇 가지 CSS 속성을 적용시킬 수 있다.

위의 예시에서 볼 수 있듯, 컨텐츠가 박스의 크기를 넘어가더라도 넘어간 그대로 출력되는 것을 확인할 수 있다.

overflow: hidden

박스에 overflow: hidden 을 주었다. 박스를 넘어가는 부분이 스크롤 없이 잘린 것을 확인할 수 있다.

display: none

이번엔 박스에 display: none을 주었다. 아무것도 출력되지 않음을 확인할 수 있다.

display: none 과 visibility: hidden

display: none 과 비슷하게 visibility: hidden도 컨텐츠를 숨길 수 있지만, 둘에는 차이점이 있다.

두 번째 문장에 display: none;을 주었다. 두 번째 문장이 차지했던 공간 자체가 사라진 것을 볼 수 있다.

두 번째 문장에 visibility: none을 주었다. 두 번째 문장은 보이지 않지만 공간은 차지하고 있다는 것을 알 수 있다.

📌 overflow: hidden은 스크린 리더로 읽는 것이 가능하다. visibility: none은 해외 스크린 리더로는 읽을 수 없지만 국내 스크린 리더로는 읽는 것이 가능하다. display: none은 국내, 해외 스크린 리더 모두 읽을 수 없기 때문에 웹 접근성에 좋지 않을 수 있다.