overflow와 display

overflow

• overflow 란?

  CSS 속성 중 하나로 컨텐츠가 요소보다 커서 요소의 범위를 벗어나는 경우 이를 어떻게 처리 할지 결정해준다.

  • values

    • visible: default 값으로 넘칠 경우 컨텐츠가 상자 밖으로 보여짐

      • hidden: 넘치는 부분을 잘라서 감춤
      • scroll: 스크롤바가 추가되어 스크롤로 넘치는 부분을 확인 가능. 스크롤할 영역이 없어도 스크롤이 추가된다.
      • auto: 컨텐츠 양에 따라 스크롤바를 추가할지 자동으로 결정함. 스크롤할 영역이 없다면 스크롤을 추가하지 않는다.

display

• display 란?

  요소를 어떻게 보여줄지 결정하는 속성.

  • values
    • none: 요소를 렌더링하지 않도록 설정. 영역을 차지하지 않는다.
    • block: 요소를 block level 요소로 보이게 함
    • inline: 요소를 inline level 요소로 보이게 함
    • inline-block: inline level 요소의 특징과 block level 요소의 특징을 갖은 inline-block level 요소로 보이게 함

      block, inline, inline-block 참고 링크

overflow:hidden VS display:none

두 속성 모두 요소를 숨길 수 있는 기능을 한다. 이 둘의 차이가 존재하는 지에 대해 알아보자.

위 코드를 보면 알 수 있듯이 overflow:hidden은 넘치는 부분을 숨기는 기능을 하기 때문에 요소의 크기를 0으로 하지 않는 이상 요소가 그대로 보이는 것을 확인할 수 있고, display:none의 경우 요소를 렌더링하지 않도록 설정하는 것이기 때문에 요소가 사라졌으면서 영역을 차지하지 않는 것을 확인 할 수 있다.

overflow:hidden을 사용해 요소를 숨기기 위해 width:0px height:0px 속성을 부여했다.

• 차이점

  display:none은 용어 그대로 정보를 표기하지 않겠다는 의미다. 요소가 아예 표시가 되지 않게 되는데, 문제는 정보를 표기하지 않는 것이기 때문에 스크린리더 같은 보조기기에도 정보를 전달하지 않도록 처리된다. 하지만, overflow:hidden은 넘친 컨텐츠를 숨기기만 해 스크린리거가 숨긴 요소를 읽을 수 있다.

그렇다면 display:none은 무조건 쓰지 않는 것이 좋을까?

네이버와 다음이 display:none과 overflow:hidden을 사용한 사례를 보며 이를 살펴보자

• 네이버

  • overflow:hidden
    

    "네이버" 라는 텍스트를 span의 content로 넣고 blind class를 지정해 보이지 않게 한 것을 확인 할 수 있다.

    

    "한글 입력기" 라는 텍스트를 span의 contetn로 넣고 blind class를 지정해 보이지 않게 한 것을 확인 할 수 있다.

    

    blind class의 경우 overflow:hidden을 사용해 요소를 숨겨주는 class이다.

    blind class를 사용해 숨긴 요소들의 공통점은 주변 요소의 기능, 특징에 대한 설명을 content로 하는 것을 확인할 수 있고 웹 접근성을 높여, 시각 장애인들이 스크린리더를 활용해 웹을 사용하는데 도움을 주기 위해 사용된다.

  • display:none
    

    div#nx_kbd에 style로 display:none을 지정한 것을 확인할 수 있다.

    

    div#autoFrame의 경우 검색어를 입력하면 드롭다운되는 메뉴를 나타내는 요소이다. 드롭다운 메뉴가 없을 때는 display:none으로 지정되어 있지만, 드롭다운 메뉴가 있는 경우 dispaly:block 속성으로 바뀌게 된다.

    

div#nx_kbd의 경우 네이버 페이지에서 별다른 의미를 갖고 있지 않다. 그렇기 때문에 이러한 요소들까지 스크린리더가 읽게 된다면 사용자 입장에서 오히려 더 불편한 상황을 겪게 될 것이기 때문에 요소를 랜더링하지 않는 display:none을 사용한다.
div#autoFrame의 경우 자동완성 메뉴가 드롭다운 되기 전에도 내부에 있는 내용들을 스크린리더가 읽게 된다면 다른 요소까지 접근하는데 많은 시간을 소모할 것이기에 이 또한 사용자 입장에서 더 불편한 상황을 겪게 될 것이기 때문에 해당 기능을 사용 전에는 요소를 랜더링 하지 않게 한다.

• 다음

  • overflow:hidden
    

    네이버와 마찬가지로 주변 요소를 설명하기 위해 "검색","인기 검색어" 라는 text를 screen_out class를 통해 숨겼다.

    

    screen_out class의 경우 overflow:hidden을 사용해 요소를 숨겨주는 class이다.

  • display:none
    없음

  다음은 display:none을 사용하지 않는 것을 확인할 수 있었다. 저번주 수업 때 네이버보다 다음이 웹 접근성이 좋다고 들었던 것 처럼 다음이 웹 접근성에 대해서 신경을 많이 쓰는 것 같다는 생각이 들었다.

  결론

  overflow:hidden은 웹 접근성을 높이기 위해 주로 사용되고 display:none은 스크린리더가 불필요한 정보를 읽지 않도록 필요없는 요소들을 아예 랜더링하지 않기 위해 사용된다. display:none을 사용하는 많은 사례를 찾아보지 못했기 때문에 display:none을 사용하는 것을 지양해야 할 것 같지만, 네이버에서 드롭다운 메뉴가 나타나기 전에 스크린리더가 이를 읽지 않도록 지정해 놓은 것 처럼 웹을 개발할때 알맞은 상황마다 유연하게 사용되어야 한다고 생각한다.