display:none과 visibility:hidden의 차이

 

우리는 CSS의 속성을 이용하여 화면에 특정 영역을 보이지 않게 처리할 때 display:none과 visibility:hidden 속성을 사용하게 됩니다. 두 속성 모두 화면에 정의하면 결과는 똑같이 화면에서 콘텐츠가 사라지게 되지만 이 둘의 속성을 사용하는 목적은 명확하게 다릅니다.

 

지금부터 이 둘의 차이점을 같이 알아보도록 해요.

 

1. 영역의 인식

display:none과 visibility:hidden의 속성에서 가장 큰 차이점은 바로 영역의 인식입니다.

두 속성 모두 화면상에서 콘텐츠 영역을 동일하게 숨기는 역할을 하지만 그 둘에는 엄청난 차이가 있습니다.

display:none 속성을 이용하면 해당 콘텐츠가 안 보이게 되면서 해당 콘테츠가 가지고 있던 있던 영역 또한 사라지게 됩니다. 하지만 visibility:hidden은 콘텐츠는 안 보이게 되는 것은 display:none과 동일하지만 display:none 과는 다르게 해당 콘테츠가 인지하고 있던 영역은 그대로 유지하게 됩니다.

 

display:none 속성을 사용한 예

 

visibility:hidden 속성을 사용한 예

2. 스크린 리더기의 인식

CSS를 사용해 내용을 숨기려 할 때 사용하는 방법으로는

• display:none
• visibility:hidden
• overflow:hidden

3가지 속성을 이용하여 영역을 숨김 처리할 수 있는데 각 특성마다 스크린리더에서도 차이점을 보입니다.

• display:none 속성은센스리더(국내 스크린 리더기), Jaws, NVDA에서 모두 내용을 읽지 못합니다.
• visibility: hidden는 센스리더(국내 스크린 리더기)에서는 내용을 읽을 수 있었으나 Jaws, NVDA는 모두 내용을 읽지 못합니다.
• overflow:hidden의 경우 센스리더(국내 스크린 리더기), Jaws, NVDA 모두 내용을 읽을 수 있습니다.

국내 스크린리더만을 생각한다면 visibility: hidden 만 적용시켜도 내용을 읽는데 문제가 없으나 국외 스크린리더 사용자까지 생각을 한다면 overflow:hidden이 가장 좋은 것 같습니다.