우리는 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이 가장 좋은 것 같습니다.
'IT > HTML & CSS' 카테고리의 다른 글
| box-sizing 이해하기 (0) | 2021.03.11 |
|---|---|
| 가로 세로 비율 유지가 되는 박스(feat. Youtube) (0) | 2021.03.10 |
| "text-indent" : -9999px 코드 대체하기 (3) | 2021.03.09 |
| 사파리(Safari) 브라우저에서 폰트가 깨지는 현상 해결하기 (0) | 2021.03.09 |
| 모바일에서 caption 속성 처리 시 유의점 (0) | 2021.03.09 |
제 블로그의 모든 글은 제가 직접 작성 하고 다른 글을 참고할 때는 이전 글보다 읽기 편하게 수정해서 작성하고 있습니다. 커피 한잔 사먹고 더 열심히 좋은글로 보답하겠습니다.
오늘도 제 블로그에 와 주셔서 감사합니다. :)
