멋쟁이사자처럼FE 2기/일일과제

22.04.07_overflow : hidden vs display:none 차이

(범) 2022. 4. 7. 18:04

우선

overflow:hidden 은 HTML5이고, 

display:none은 CSS이다.

 

관련 내용은 스택오버플로우의 내용을 참고했다.

실제로 웹브라우저에 보여지는 부분에서는 hidden이나 display:none이 차이가 없다고 한다.

하지만 유일한 차이점은 "접근성"이다.

 

display:none의 경우 스크린리더로 읽을 때, 읽히지 않지만, hidden 같은 경우는 읽힐 수 있다는 것이다.

 

https://stackoverflow.com/questions/6708247/what-is-the-difference-between-the-hidden-attribute-html5-and-the-displaynone

 

What is the difference between the hidden attribute (HTML5) and the display:none rule (CSS)?

HTML5 has a new global attribute, hidden, which can be used to hide content. <article hidden> <h2>Article #1</h2> <p>Lorem ipsum ...</p> </article> CS...

stackoverflow.com

 

따라서 네이버의 blind_class나 다음 screen_out이  overflow:hidden로 된 이유는 스크린리더에도 읽혀야 될만한 내용이다.

하지만 네이버의 _nx_kbd가 정확히 어떤 기능인지는 잘 모르겠지만, 예상을 해보건데 이건 화면에서 보이는 키보드이다.

따라서 보는데 어려움을 가진 분들에게 필요없는 요소라 스크린 리더에 읽히지 않도록, display:none으로 하지 않았을까 추측해본다.