[CSS] overflow:hidden과 display:none의 차이점 알아보기
먼저 overflow와 display 태그부터 알아보자.
overflow 는 요소의 콘텐츠가 너무 클 경우 요소를 어떻게 처리할지 지정한다.
계층구조에서 하위요소가 상위요소보다 클 때, 하위요소의 가시성을 제어할 수 있다.
- 가시성 : 요소를 화면에서 보이거나 감출 수 있다.
넘치는 부분을 감추려면 hidden,
넘치는 부분을 스크롤로 만드려면 scroll,
가로 세로 중 넘치는 부분만 스크롤을 주려면 auto 속성을 사용한다.
display 는 요소를 어떻게 보여줄지를 결정한다.
box1에 display:none을 지정하면 이 박스는 보이지 않으며, box1이 있던 자리를 box2가 차지한다.
display:none을 사용해서 텍스트를 숨길 수 있으나,
스크린리더가 읽지 못하고 건너뛰기 때문에 시각장애인의 웹 접근성을 고려하지 않은 방법이다.
opacity:0, text-indent:-9999, font-size:0 역시 좋은 방법은 아니다.
웹 접근성을 항상 생각하고 모든 사용자를 고려할 수 있도록 노력해야 한다.✏️ 정리
overflow:hidden은 콘텐츠를 요소의 크기만큼 맞추기 위해 넘치는 영역을 잘라낸다!
display:none은 화면에서 아예 사라진다. 영역 자체를 차지하지 않는다! display 요소의 자리를 내어주면서 다음 요소가 자리를 차지한다.
Author And Source
이 문제에 관하여([CSS] overflow:hidden과 display:none의 차이점 알아보기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sooyyyoung/CSS-hidden-none저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
