| CSS | display:none, overflow:hidden, visibility: hidden의 차이점

< 요소를 보이지 않게 하는 속성> 

🙈 display: none

: 해당 콘텐츠를 숨길뿐만 아니라 콘텐츠의 영역이 사라진다.

🙈 visibility: hidden

: 눈에는 보이지는 않지만 화면에 렌더링 되어 공간을 가지고 있어서 다른 요소들의 위치에도 영향을 줄 수 있다.

🙈 overflow: hidden

: 내부의 요소가 부모의 영역을 벗어나는부분을 보이지 않게 만드는 속성이다.

 

그 밖에 요소를 숨기는 속성: opacity:0 , IR기법

 

---

✏️ 정 리

display: none과 visibility: hidden 차이

: UI적으로 볼 때 완전히 다르다. display:none은 화면상 어떤 영역을 차지하지 않고 완전히 삭제된 것처럼 보이게 하지만, visibility:hidden은 해당 요소가 보이지 않을 뿐 요소가 존재하는 영역은 확실히 보이게 한다. 

display: none과 overflow: hidden 차이

:  큰 차이점은 접근성이다. 스크린리더가 읽는지 안 읽는지 display:none은 내용이 눈에만 보이지 않을 뿐만 아니라 스크린리더가 읽지 못한다. 만약 내용이 있지만 보여주고 싶지 않은 경우라면 display:none을 사용하면 안 된다는 것이다. overflow:hidden은 스크린리더가 내용은 읽지만 부모 영역에 벗어나느 부분을 숨기고 싶을 때 사용한다.