[html] display:none, visibility: hidden의 차이점

 

 목차

• display: none, visibility: none의 공통점
• display: none, visibility: none의 차이점
  • 영역차이점
  • 스크린리더기의 인식차이점

 

 

 

1. display: none, visibility: none의 공통점

---

두 속성 모두 화면상에서 콘텐츠 영역을 숨기는 역할을 합니다.

 

 

 

 

2. display: none, visibility: none의 차이점

---

2-1.  영역 차이점

 

 두가지의 가장 큰 차이점은 영역이 인식이 되냐, 안되냐의 차이입니다.

 

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

예시

 

위와 같이 탭과 탭에 해당하는 콘텐츠를 마크업할때 vue의 data값과  v-show를 이용하는 등 다양한 방법이 있지만,

active class와 css로 구현을 하게 된다면 display: none 혹은 visibility:hidden을 사용하게 됩니다. 

 

(왼) visibility: hidden, (오) display: none

 

왼쪽 이미지는  강아지 콘텐츠를 "visibility: hidden"을 한것으로 그림에서 확인할  수 있듯이 있었던 콘텐츠 영역은 그대로 유지되며 컨텐츠만 눈에 안보이게 됩니다.

 

오른쪽이미지는 강아지 콘텐츠를 "display: none"한 것으로 그림에서 확인 할 수 있듯이 있었던 콘텐츠 영역도 함께 안보이게 됩니다.

 

 

따라서, display: none으로 해당 탭과 콘텐츠를 구현할 수 있습니다. 

 

 

 

 

2-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이 가장 좋은 것 같습니다.

 

출처:  https://whales.tistory.com/13

 

 

 

 

 

 

잘못된 정보에 대한 피드백은 언제나 환영입니다  (´▽`ʃƪ)♡