CSS display:none VS overflow:hidden
어떠한 요소를 숨기거나 보이지 않게 하고 싶을 때에 사용하는 css property가 있다.
위 예제와 같이 div로 박스 6개를 만들고, wrapper라는 class name의 div태그에 flex를 주어 배치하였다.
만약 이 박스들 중 하나를 안보이게 처리하고 싶다면 어떻게 해야 할까?
한 번 알아보자!
1. display: none;
(display 프로퍼티에는 외부 디스플레이 유형과 내부 디스플레이 유형이 존재 하는데, 이에 대해서는 조만간 글을 작성하여 링크를 첨부하겠다.
mdn에는 none value는 박스 유형이라고 나와 있는데, 이것이 내부인지 외부인지는 알아봐야 할 듯 하다.)
Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off. To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.
2. visibility: hidden
요소가 숨겨지지만, 레이아웃에는 숨겨지지 않았을 때와 동일한 영향을 준다. 한마디로 보이지는 않지만 렌더링 되어 화면에 공간을 가지고 있다.
숨겨진 요소는 포커스(탭 인덱스로 탐색 등)를 받을 수 없다.
접근성 고려사항
visibility 값을 hidden으로 설정한 요소는 접근성 트리에서 제외된다. 즉 해당 요소와 그 모든 자손 요소는 스크린 리더가 읽지 않는다.
3. overflow: hidden
- visible : overflow 속성의 기본값이다. 컨텐츠가 넘칠 경우 상자 밖으로 보여진다.
- scroll : 넘치는 요소가 보여지지 않으며 스크롤바가 생긴다. 가로, 세로 스크롤바가 둘 다 생기며 스크롤바를 없애려면 이를 따로 설정해주어야 한다. (::-webkit-scrollbar, scrollbar-width)
- hidden : 요소의 컨텐츠가 너무 커서 상자의 크기에 맞출 수 없을 때 사용 가능한 속성이다. 넘치는 부분은 잘라내며 상자 밖으로 보여지지 않으며 스크롤바를 제공하지 않는다.
- auto : 넘치는 요소가 보여지지 않으며 컨텐츠의 크기에 따라 가로, 세로 스크롤바를 추가할지 자동으로 결정된다.
이 overflow: hidden 속성은 넘치는 요소를 가리는 용도 뿐 아니라 요소를 숨기기 위해서도 사용된다.
요소를 가리기 위해 width: 0; height: 0;을 주고 overflow: hidden; 을 사용해서 숨길 수 있다.
하지만 요소를 가리는 것 이지 요소를 없애는 것이 아니기 때문에
margin과 padding값은 (영역을 차지하지는 않지만) 남아있다.
flex에서는 display속성의 특성 때문인지 box1과 box2 사이에 margin값이 남아있음을 알 수 있다.
- overflow:hidden은 넓이와 높이가 설정되지 않으면 자식요소를 포함하여 보여줌
- 부모요소에 고정된 height나 width속성이 있을 경우 넘치는 자식요소의 넘친 부분을 보이지 않게 하고, 그렇지 않은 경우 넘치는 자식요소를 포함하도록 크기를 늘린다.
이 overflow 속성을 사용해 마진 병합현상을 해결할 수도 있다. 궁금하다면 아래 링크 클릭!
margin collapsing 마진 병합, 상쇄 현상
4. display:none과 overflow:hidden의 차이, 쓰임새
웹 접근성 이미지 표현, IR기법 - 참고하면 좋을 블로그 글 첨부
https://velog.io/@wltnrms0629/HTMLCSS-%EC%9B%B9-%EC%A0%91%EA%B7%BC%EC%84%B1%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%91%9C%ED%98%84-IR%EA%B8%B0%EB%B2%95
display: none 과 visibility: hidden은 둘 다 콘텐츠를 숨길 수는 있지만, 스크린 리더로도 읽을 수 없기 때문에 접근성이 좋지 않다. 하지만 overflow:hidden은 요소는 숨겨지지만 스크린 리더가 읽을 수 있기 때문에 접근성을 고려한다면 이 속성을 사용하는 게 좋다.(overflow: hidden이 읽히지 않는 스크린리더도 있다고 한다.)
naver나 daum에서는 이 overflow: hidden 속성을 어떻게 활용하고 있는지 알아보자.
4-1. naver의 .blind
naver의 .blind
position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;
4-2. daum의 .screen_out
daum의 screen_out
overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px;
'naver'는 width, height를 1px로 설정한 후 clip 속성으로 이를 또 다시 숨겼고, 'daum'은 width, height를 0으로 설정 하여 요소를 숨겼다는 차이가 있다.
하지만 둘 다 공통적으로 검색창, 네비게이션 바, 이미지로 대신한 로고등의 텍스트 컨텐츠를 overflow:hidden 속성을 사용하여 요소를 숨겨, 스크린리더가 이를 읽을 수 있게 되어있다.
찾아보니 스크린 리더는 width, height 사이즈가 0인 요소를 읽을 수 없으니 요소의 사이즈는 최소 1px 이상으로 적용해야 한다고 하는데, 맥에서 크롬브라우저로 스크린리더(voice over) 테스트 결과, width, height가 0 이어도 정삭적으로 작동했다. (브라우저나 스크린리더 종류에 따라 다를 수 있을 듯 하다.)
(text-indent 사용하는거 추천하지 않음
이유는 1. 성능이 좋지 않다. 2. 불필요한 높이와 폭을 가질 수 있어서
->그래서 다음에서는 width,height,line-height 등으로 크기를 없애줬구나?)
4-3. naver가 사용한 clip 속성은 무엇일까?
Adobe Illustrator 의 클리핑 마스크 기능과 같다고 생각하면 된다.
clip의 value
- auto : 기본(default) 값
clip을 적용한 대상의 원래 크기와 동일하게 적용
clip이 적용 안된 상태와 동일- shape : rect(top, right, bottom, left)형식으로 지정
이는 네변에서의 거리를 말하며 음수값 지정이 가능- initial : 기본값으로 설정
- inherit : 부모 요소의 속성값을 상속 받음
shape 사용법
rect( <top>, <right>, <bottom>, <left> )top: 위를 기준으로 시작하는 위치
right: 왼쪽을 기준으로 끝나는 위치
bottom: 위를 기준으로 끝나는 위치
left: 왼쪽을 기준으로 시작하는 위치
position의 속성값이 absolute 또는 fixed 일 때만 적용된다.
출처 - https://want-itschool.tistory.com/29
5. 그 외 values
display의 values
- inline
- block
- contents
- flex
- grid
- inline-block
- table
- none
- initial
- inherit
그 외 참조 https://www.w3schools.com/cssref/pr_class_display.asp
visibility의 values
- visible
- hidden
- collapse
- initial
- inherit
그 외 참조 https://www.w3schools.com/cssref/pr_class_visibility.asp
overflow의 values
- visible
- hidden
- clip
- scroll
- auto
- overlay
그 외 참조 https://developer.mozilla.org/ko/docs/Web/CSS/overflow
https://www.w3schools.com/cssref/pr_pos_overflow.asp
Author And Source
이 문제에 관하여(CSS display:none VS overflow:hidden), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@usablepaper/displaynone-VS-overflowhidden저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
