display: none 과 overflow: hidden 의 차이점에 대해 알아보겠다.
사실 깊이 생각한 적이 없었는데, 이번 기회를 통해 알아보면서 웹접근성에 대해서도
한번 더 숙지 하게 되었다.
이 포스팅은 fenjo.log, untiring_dev.log 게시물을 참고 하여 작성하였습니다. 도움이 되어 감사합니다.
Display: none
태그가 화면에 보이는 방식을 지정하는 속성이다.
display 는 주로 요소의 성격을 바꿀 때 많이 사용한다.
display: block; , inline, inline-block, grid, flex 이런식으로 css 작성시 사용해왔었다.
none 태그를 화면에서 보이지 않게 만든다.
block 태크를 bolck 형식으로 지정한다.
inline 태그를 inline 형식으로 지정한다.
inline-block 태그를 inline-block으로 지정한다.
예를 들어
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display: none VS overflow: hidden</title>
</head>
<style>
.box1 { width: 50px; height: 50px; background-color: red; }
.box2 { width: 50px; height: 50px; background-color: blueviolet; }
</style>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
브라우저에는 위와 같이 div로 구성된 영역이 생성된다.
이때, box1에 display:none을 적용시켜보면,
화면에서는 box1이 사라진것을 확인할 수 있다. 하지만 개발자도구에서 확인하면
box1에 해당하는 태그는 아직 남아 있는것을 확인할 수 있다.
overflow:hidden;
overflow 속성은 내부의 요소가 부모의 범위를 벗어날 때 어떻게 처리할 건지 지정하는 속성인데,
overflow란 '넘쳐흐르다' 라는 말 그대로 사전적의미가 포함되어 있다.
주로 사용되는 속성값은 hidden 이다. 보통 부모 영역보다 자식의 요소가 크면
부모영역의 크기로 맞추고 넘치는 부분을 안보이게끔 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display: none VS overflow: hidden</title>
</head>
<style>
.parents {width:400px; height: 300px; background-color: aqua; }
.child { width: 600px; height: 200px; background-color: yellow; }
.last { width: 400px; height: 200px; background-color: brown; }
</style>
<body>
<div class="parents">
<div class="child">child</div>
</div>
<div class="last">last</div>
</body>
</html>
부모 요소에 overflow:hidden 을 넣어줄경우
hidden 영역을 벗어나는부분을 보이지 않게 만든다.
위와 같이 child 영역이 가려진 것을 확인할 수 있다.
scroll 영역을 벗어나는 부분을 스크롤을 생성하게 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title></title>
<style>
body > div{
width: 400px;
height: 100px;
border: 3px solid black;
position: relative;
overflow: scroll;
}
.box{
width: 100px;
height: 100px;
position: absolute;
}
.box1{
background-color: red;
left: 10px;
top: 10px;
}
.box2{
background-color: green;
left: 50px;
top: 50px;
}
.box3{
background-color: blue;
left: 90px;
top: 90px;
}
</style>
</head>
<body>
<div>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
</body>
display:none의 경우 적용된 요소의 하위 요소를 포함해서 존재하지 않는것처럼
렌더링 된다. 이것이 의미하는 것은 적용된 요소 내의 콘텐츠 또한 사라진다는것이다.
그렇기 때문에 display:none 이 적용된 요소는 하위의 콘텐츠까지 스크린리더기가 읽을 수 없다.
display:none 이 적용된 요소는 접근성 트리에서 제거가 되며 해당 요소와 하위 요소-콘텐츠 등이 화면 판독 기술(스크린리더기)에 의해 인식되지 않는다.
그렇게 될 경우 스크린 리더기에 의존해야하는 사람들은 웹사이트를 이용하는데 어려움을 겪게 될 것이다.
overflow:hidden은 숨겨져있지만 숨겨진 요소가 포커스가 된다.
순서가 없이 읽으면 복잡한 데이터를 가지고 있는 것을 필요할 때 읽어주기 위함이다.
위 사진은 네이버 검색창에 있는 가상 키보드 영역이다.
키보드 아이콘을 클릭하면 텍스트 입력이 가능한 가상 키보드가 나온다.
이 가상 키보드는 #_nx_kbd 이며, display:none으로 숨겨져있다.
overflow:hidden은 숨겨져있지만 숨겨진 요소가 포커스 된다고 했다.
만약 가상키보드가 필요 없는 상황이라면 시각장애인들은 원하는 정보에 도달하기 위해
많은 포커스를 걸쳐 검색 버튼을 눌러야할것이다.
이를 방지하기 위해 가상키보드 버튼 포커스에 도달하기 위해 원하는 기능을
선택하게 하고, 기능창을 나타내어 사용하게 할 수 있도록 하며,
필요없는 상황에서는 포커스가 가지 않도록 하기위해 display:none을 사용하는 것이
적절하다.
- display:none은 보이는 것, 들리는것 둘다 없앤다.
- overflow:hidden은 보이는것은 숨기지만 들리거나 읽힐 수는 있다.
마지막으로 display:none, visibility:hidden;의 차이점에 대해 알아보겠다.
예시를 보면 명확하게 이해 할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div { display: inline-block; border: 1px solid #ddd; margin: 10px; padding: 10px; }
.dis div { width: 50px; background-color: aqua; }
.vis div { width: 50px; background-color: red; }
</style>
<body>
<h2>display</h2>
<div class="dis">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
<h2>visibility</h2>
<div class="vis">
<div class="box4">box4</div>
<div class="box5">box5</div>
<div class="box6">box6</div>
</div>
</body>
</html>
여기서 .box2에는 display:none을, .box5에는 visibility: hidden; 을 줘보겠다.
display: none; 은 앞서 말했듯이 화면에 보이지 않게 처리하고 차지하고 있는 공간도 없앤다.
visibility: hidden; 은 화면에서는 보이지 않게 처리하지만 차지하고 있는 공간은 그대로 남는다.
