[HTML/CSS] Display:none VS Overflow:hidden 🔥

처음 제목을 쓰고 "둘 다 안보이게 하는 속성이긴 한데.. overflow:hidden은 넘치는 부분을 가려주는 역할이 아닌가?" 라는 생각이 바로 들었다.
포트폴리오를 급하게 만들던 나에겐 이 두 속성은 나에게 친숙한 속성이라 어느정도 이해하기는 쉬웠다.
하지만 앞의 margin collapsing의 해결방법 중 overflow:hidden이 있었는데 그걸 이해하지 못했으니 다시 공부하는게 맞다 싶어 정리를 한다.

display:none 또한 창닫기 기능을 만들 때 사용했던 속성이고 내가 "멋사 프론트엔드 스쿨"에 지원할 때 구현과제에서도 사용했다.

이참에 한번 더 공부해서 내꺼로 만들어보자! 😊

---

Display:none

display는 주로 우리가 요소의 성격을 바꿀 때 많이 사용했었다. display:block, inline, inline-block 이렇게 말이다.
오늘 정리할 display:none을 제외하고 flex, grid라는 것도 있긴 하지만 아직 정리할 파트가 오지 않아서 그때 한번에 정리하도록 할 것이다.

display:none의 역할을 쉽게 말하면 적용한 요소 뿐만 아니라 하위에 있던 요소까지 아예 없애는 것이다. MDN에서도 "문서는 요소가 존재하지 않는 것처럼 렌더링한다."라고 적혀있다.

예제를 보면 <div>로 만든 사각형이 두개가 있다.
one이라는 박스에게 display:none을 적용할 경우에 어떤 결과가 나오게 될까?

위의 결과를 보면 two라는 박스만 남아있고 심지어 one이 있던 자리를 차지하고 있는 것이 보일 것이다. 하지만 이것을 개발자 메뉴로 보면 여전히 one 박스는 남아있다.

---

overflow:hidden

overflow란 "넘쳐흐르다"라는 사전적인 의미가 있다. 주로 사용되는 속성값은 hidden이다. 보통 부모 영역보다 자식 요소의 콘텐츠가 크면 부모 영역의 크기로 맞추고 넘치는 부분을 가려주는 역할을 한다.

<div class="parents">
	<div class="child">child</div>
</div>
<div class="five">five</div>

우선 위의 예제를 살펴보면 현재 빨간색인 parents 요소안에 투명도를 준 파란색 박스인 child요소가 있는데 child가 부모보다 훨씬 큰 크기를 가지고 있다. 그리고 넘치는 부분이 아래의 노란색 박스인 five의 정렬에도 영향을 주지 않고 있다. 현재 상태는 기본값이 overflow:visible인 상태이다.

이제 부모인 parents에 overflow:hidden 속성을 써보자.

결과를 보면 부모인 parents의 안에 자식인 child는 그대로 들어있지만 부모의 크기를 넘은 부분들은 숨겨진 채 안보이고 있다. 또한 노란색 박스인 five의 정렬에도 전혀 영향을 주지 않고 있다. 그리고 넘치는 부분에 대한 '스크롤'이 발생하지 않은 것을 볼 수 있다.

그리고 overflow는 x축과 y축을 단독으로 설정할 수 있다.

[축약형]
overflow : (x축 value) (y축 value)

또는

[분리형]
overflow-x: value
overflow-y: value

overflow-x:hidden을 사용 시 x축의 넘치는 부분을 숨겨주고 부모 영역 내에서의 y축은 "스크롤 바"가 생겨 아래 위로 이동할 수 있다.

overflow-y:hidden는 반대로 y축의 넘치는 부분을 숨겨주고 부모 영역 내에서의 x축은 "스크롤 바"가 생겨 양 옆으로 이동할 수 있다.

---

그래서 이 둘의 차이는? 🤔

차이점을 조사해봤으나 display:none과 visibility:hidden를 비교하는 정보가 많아서 overflow:hidden은 정보가 많이 없었다.
다른 동기분들도 그런지 강사님께 여쭤보셨나보다.

그래서 강사님께서 "'네이버'의 .blind와 '다음'의 .screen_out에 왜 overflow:hidden이 사용되었는가? 그리고 두 포털사이트에서 display:none은 어떤 역할로 사용되었는가? 라는 것을 조사하면 알게 될 것이다."라고 하셨다.

이 둘의 차이는 아직 자세하게 모르나 내가 조사를 해보고 웹 사이트에서 어떤 용도로 사용되었는지 조사를 하면서 얻은 정확한 차이점이 아닌 지극히 주관적인 "생각"이다.

1. 콘텐츠를 유지하여 "스크린 리더기"가 판독할 수 있게 하기 위함

우선 display:none의 경우 위에서 말했던 것처럼 적용된 요소의 하위 요소를 포함해서 존재하지 않는 것처럼 렌더링된다.
이것이 의미하는 것은 적용된 요소 내의 콘텐츠 또한 사라진다는 것이다.

그리고 display:none가 적용된 요소는 하위의 콘텐츠까지 "스크린 리더기"가 읽을 수 없다.

쉽게 말하자면, display:none가 적용된 요소는 "접근성 트리"에서 제거가 되며 해당 요소와 하위 요소(콘텐츠 등)이 화면 판독 기술(스크린 리더기)에 의해 인식되지 않는다라는 것이다.

그렇게 되면 "스크린 리더기"에 의존해야하는 시각장애인들은 웹사이트를 이용하는데 어려움을 겪게 된다.

아래의 소스코드를 간단히 말하면 width:0,height:0인 box1에 display:none과 overflow:hidden을 한번씩 사용해보며 비교해보려고 한다. 아래의 이미지는 초기에 스타일이 적용된 결과이다.

** width:0,height:0을 적용한 것은 "다음"의 .screen_out을 참고하였다.

<style>
  .box1 {
        background-color: red;
        width: 0px;
        height: 0px;
        /* display: none과 overflow:hidden을 적용할 예정 */
  	}

  .box2 {
        background-color: dodgerblue;
  	}
</style>

<div class="one">one</div>
<div class="two">two</div>

아래는 Macbook의 스크린 리더기 "Voice over"를 이용하여 웹사이트를 읽어본 결과이다.

gif파일이라 소리는 나지않지만 나는 계속해서 포커스를 이동하고 있다.

위의 이미지는 display:none을 적용한 결과이다. 멈춘 이미지 같지만 포커스를 계속하고 있는 중이다. 하지만 포커스는 이동할 곳을 못찾고 계속해서 box2만 읽고 있는 것을 볼 수 있다.

하지만 overflow:hidden의 경우는 결과가 다르게 나온다.

포커스를 계속 이동하고 있는데 보이지 않는 box1을 읽어주고 있는 것을 볼 수 있다.
결과적으로 overflow:hidden이 웹에 담긴 정보를 아무런 제약없이 누구나 접근할 수 있는 "웹 접근성"에 친근하다고 볼 수 있다.

2. 순서가 없이 읽으면 복잡한 데이터를 가지고 있는 것을 필요할 때 읽어주기 위함

솔직히 접근성 면에서 차이점이 끝난 것 같았다. 하지만 강사님께서 주신 힌트 중에 "네이버 검색 창에 있는 클래스 .nx_kbd의 역할이 무엇일까?"라는 힌트를 주셔서 많이 고민했다.

.nx_kbd의 역할은 "네이버 검색창"의 키보드 아이콘을 클릭하면 "클릭"으로 텍스트 입력이 가능한 가상 키보드가 나온다. 그 가상 키보드 창이 .nx_kbd이며 display:none으로 숨겨져있다.

키보드는 우리가 늘 사용해서 아는 만큼 키보드의 입력키는 상당히 많다.

위에서 설명한 것처럼 overflow:hidden은 숨겨져있지만 숨겨진 요소가 포커스가 된다. 만약 가상 키보드가 필요없는 상황이라면 시각장애인들은 원하는 정보에 도달하려면 많은 포커스를 거쳐 검색 버튼을 눌려야하는 불편함이 발생한다.

이를 방지하기 위해 가상 키보드를 이용하기 위한 버튼에 포커스를 가게 해서 원할 때 기능을 선택하게 하고 기능창을 나타내서 사용할 수 있게 만들고 필요없는 상황에서는 포커스가 가지않게 해서 시각장애인들의 정보 탐색에 불편을 줄이기 위해 display:none을 사용하는 것이 적절한 것 같다.

정답이 아닐 수도 있지만 나 스스로 깊이 생각해서 낸 결과라 만족스럽다.

4/9 display:none과 overflow:hidden의 차이에서 width:0과 height:0은 스크린 리더기가 요소를 인지 못하고 읽지 못한다고 한다. 하지만 내가 사용한 MacOS의 "Voice over"와 Chorme 내장 리더기인 "Chrome Vox"의 경우 여전히 읽어주는데 스크린 리더마다 다른 것 같다.

---

정리를 마치며 ⛳️

이번에 처음으로 Voice over라는 Macbook의 스크린 리더기로 내가 자주 쓰는 웹사이트는 어떻게 읽어질까? 라는 궁금증을 풀어보았다. 이 과정에서 많은 생각을 하게 되었으며 처음 "나"의 입장이 아닌 "검색에 어려움을 겪고 계신 분들" 입장에서 생각해보았다.

비록 과제로 정리한 내용이지만 강사님께서 정말 의미있는 과제를 내주신 것 같다. 한번 더 평범하게 생활에 불평하는 나에게 반성하는 시간을 준 과제였던 것 같다.

"내가 불편하지 않다고 해서 다른 사람이 다 불편하지 않다"라는 생각은 정말 미안하고 이기적인 생각인 것 같다.

이 앞의 많은 코드를 작성하게 될텐데 웹접근성을 위해 깊은 생각을 거쳐 하도록 노력해야겠다.

알맞은 대답이 아니여도 의미있는 과제 덕에 적은 양의 정리글에도 만족스러운 하루가 되었다. 😊