CSS 속성 중 하나로 컨텐츠가 요소보다 커서 요소의 범위를 벗어나는 경우 이를 어떻게 처리 할지 결정해준다.
visible
: default 값으로 넘칠 경우 컨텐츠가 상자 밖으로 보여짐
hidden
: 넘치는 부분을 잘라서 감춤scroll
: 스크롤바가 추가되어 스크롤로 넘치는 부분을 확인 가능. 스크롤할 영역이 없어도 스크롤이 추가된다.auto
: 컨텐츠 양에 따라 스크롤바를 추가할지 자동으로 결정함. 스크롤할 영역이 없다면 스크롤을 추가하지 않는다.display 란?
요소를 어떻게 보여줄지 결정하는 속성.
none
: 요소를 렌더링하지 않도록 설정. 영역을 차지하지 않는다.block
: 요소를 block level 요소로 보이게 함inline
: 요소를 inline level 요소로 보이게 함inline-block
: inline level 요소의 특징과 block level 요소의 특징을 갖은 inline-block level 요소로 보이게 함두 속성 모두 요소를 숨길 수 있는 기능을 한다. 이 둘의 차이가 존재하는 지에 대해 알아보자.
위 코드를 보면 알 수 있듯이
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
을 사용하는 것을 지양해야 할 것 같지만, 네이버에서 드롭다운 메뉴가 나타나기 전에 스크린리더가 이를 읽지 않도록 지정해 놓은 것 처럼 웹을 개발할때 알맞은 상황마다 유연하게 사용되어야 한다고 생각한다.