003_css의 다양한 숨김처리 방법

🙄 같지만 다르다?

화면을 구성하면서 때때로 이벤트 효과나 기타 목적으로 요소를 보이지 않게 해야 할 때가 있다. 

CSS에서는 이러한 기능을 다양한 방식으로 작성할 수 있는데 지금부터 어떤 방식이 있는지 알아보자!

 

1. display: none

• 컨텐츠가 사라지면서 해당 컨텐츠가 차지하고 있던 영역도 함께 사라진다.
• 이벤트 (ex. 클릭)는 작동하지 않는다.
• 화면 영역에서 사라지는 것 뿐만 아니라 보조기기나 검색엔진이 접근하지 못하게 되어 텍스트인 경우 스크린리더 사용자가 해당 내용을 들을 수 없다. 
• 브라우저 렌더링 시 렌더링 트리에서 요소를 완전히 제거한다.

2. visibility: hidden

• display: none과 달리 컨텐츠는 사라져도 해당 영역은 그대로 존재한다.
• 이벤트 (ex. 클릭)는 작동하지 않는다.
• visibility: hidden 으로 사라진 요소 뒤에 있는 요소는 클릭이 가능하다.
• 화면 영역에서 사라지는 것 뿐만 아니라 보조기기나 검색엔진이 접근하지 못하게 되어 텍스트인 경우 스크린리더 사용자가 해당 내용을 들을 수 없다. 

 

 

3. opacity: 0

• 컨텐츠는 사라져도 해당 영역은 그대로 존재한다.
• 이벤트 (ex. 클릭)는 작동한다.
• 사라진 요소 뒤에 있는 요소는 클릭이 불가능하다.
• 화면 영역에서 사라지는 것 뿐만 아니라 보조기기나 검색엔진이 접근하지 못하게 되어 텍스트인 경우 스크린리더 사용자가 해당 내용을 들을 수 없다. 

 

 

 

4. width: 0; height: 0;  (텍스트의 경우 font-size: 0; line-height: 0; 추가)

 width: 0; 
 height: 0;
 font-size: 0;
 line-height: 0;

 

• 요소의 크기를 0으로 만들어 화면에서 보이지 않게 하는 방식.
• 일부 스크린리더의 경우 해당 요소를 무시해서 읽지 않을 수 있기 때문에 접근성에 좋은 방법은 아니다.

5. clip

.hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: polygon(0 0, 0 0, 0 0);
}

• position: absolute;  : 레이아웃에 영향을 주지 않게 nomal flow에서 해당 아이템 영역을 없앤다.
• width: 1px; height: 1px;   : width, height값을 최소한의 크기로 조절한다.
• margin: -1px;  : 화면상 아예 안나오게 한다.
• overflow: hidden;  : overflow된 콘텐츠를 숨긴다.
• clip-path: polygon(0 0, 0 0, 0 0);  : 클리핑 범위를 모두 0으로 지정해서 요소를 숨긴다.

이 방법은 텍스트를 고려해 화면에서 보이지 않더라도 스크린 리더가 읽을 수 있도록 하는 방법이다.

화면에서 요소를 숨기고 스크린 리더가 해당 요소의 텍스트를 읽을 수 있으며 보조기기가 접근했을 때 화면 스크롤의 움직임을 막을 수 있다.
.hidden클래스의 css값을 저장해두고 접근성을 고려하여 요소를 숨겨야 할 경우에 사용하면 좋을 것 같다.

 

.hidden { 
	border: 0; 
	clip: rect(0 0 0 0); 
	clip-path: inset(50%); 
	width: 1px; 
	height: 1px; 
	margin: -1px; 
	overflow: hidden; 
	padding: 0; 
	position: absolute; 
	white-space: nowrap; 
}

비슷한 코드지만 약간의 차이가 있다. 아래 코드는 좀 더 많은 요소를 고려한 코드로 직접 테스트해보면서 사용해보길 권장한다.

 

참고

https://fresh-mint.tistory.com/entry/CSS3-%EC%9B%B9%EC%A0%91%EA%B7%BC%EC%84%B1%EC%9D%84-%EA%B3%A0%EB%A0%A4%ED%95%9C-blindhidden-%EC%B2%98%EB%A6%AC

https://velog.io/@ursr0706/%EC%9B%B9-%EC%A0%91%EA%B7%BC%EC%84%B1%EC%9D%84-%EA%B3%A0%EB%A0%A4%ED%95%98%EC%97%AC-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%88%A8%EA%B8%B0%EA%B8%B0