[CSS]요소를 보이지 않게 하는 속성 3가지

웹페이지를 구현하다보면 디자인 상으로는 없는 요소이지만 접근성을 위해 넣어야하는 요소가 있다. 이 요소는 보이지 않아야해 화면에서 숨김처리가 되어야하는데, 이때 사용되는 CSS 설정 중 overflow:hidden이라는 속성이 들어간다.

display: none과 visibility: hidden을 안다면 왜 overflow:hidden가 사용되었는지 궁금할 것이다. 어차피 3개다 화면에서 안보이게 하는건 똑같이 않는가? 이번에 그 차이에 대해 알아보고자 한다.

case01. height 값을 넘어선 콘텐츠 내용

예시는 하늘색 상자에 비해 글씨가 많아져 밖으로 삐져나온 것을 볼 수 있다. 이때 앞서 말한 3가지를 각각 적용했을 때 결과는 다음과 같다.

• visibility: hidden
  요소가 보이지 않지만 요소가 있었던 높이값만큼 공간이 남아있다. 이 경우 요소가 존재하지만 보이지만 않게 한 것이다. 요소가 남아있기때문에 접근성은 유지할 수 있지만 불필요한 공간이 생겨버린다.

• display: none
  예시에서 하늘색 박스가 사라져 있는 것을 볼 수 있다. 이처럼 이 속성을 적용하면 요소가 완전히 사라진다. 요소가 없는 걸로 되기 때문에 접근성이 아예 없다. 존재하지 않는 요소이기때문에 공간 또한 차지하지않는다.

• overflow:hidden
  요소의 크기 값 밖으로 넘어간 부분을 보이지 않게 한다. 보이지 않게 하는 것 뿐으로 해당 요소가 사라진 것이 아니기 때문에 접근성 또한 지켜지며 height 값을 조정하여 공간을 조정할 수 있다.

case02. 빨간 상자 사라지게 하기

이번에는 원하는 요소만 보이지 않게 하기위해 3가지 방법을 적용해 보는 예시이다.

• visibility: hidden
  상자가 보이진 않지만 공간이 여전히 남아있어 순서대로 정리되지 않는다. 다만 보이지만 않을 뿐 존재하므로 접근성이 지켜진다.

• display: none
  상자가 보이지도 않고 빈공간도 없어 다음 요소가 정리되었지만, 요소를 아예 지워버렸기때문에 스크린리더와 같은 접근성 프로그램에선 읽혀지지 않는다.

• overflow:hidden
  상자의 크기를 0으로 만들고 overflow 속성을 적용해 공간이 없게 하여 빨간상자가 보이지 않고 공간도 차지하지 않아 나란히 정리되어 있다.
  접근성 또한 상자가 완전히 사라진게 아니기 때문에 접근성 또한 지켜진다.

그래서 결론은?

	visibility: hidden	display: none	overflow:hidden
요소 존재 유무	O	X	O
공간 차지	O	X	△(조정하면 가능)
접근성	△(일부 안읽힘)	X	O