[CSS] 컨텐츠를 숨기는 방법 정리

1. display:none; or visibility:hidden;

모든 사용자에게 컨텐츠를 숨긴다.

컨텐츠를 시각적인 부분에서 완전히 제거하는 방법으로 스크린리더기에도 읽히지 않는다.

텍스트만 숨기고 백그라운드 이미지를 보여주어야 할 때 사용할 수 없다.

만약 어떤 특정 이벤트가 일어날 때만 보여주고 싶다면 기본 설정으로 두고 자바스크립트에서 클래스를 부여하는 방법으로 많이 사용했다.

2. width:0px; height:0px; 0픽셀 조절 방법

HTML/CSS로 정의된 높이나 너비가 없는 요소는 일반적으로 페이지에서 제거하고 대부분의 스크린리더가 읽지 않는다.

font-size:0px; line-height:0px 은 작동할수는 있지만, 화면에 여전히 가로 공간을 차지하게 된다는 단점이 있다.

검색엔진에 불이익을 줄 수 있다.(과거에 악의적으로 사용되어 지금은 검색엔진이 알아서 걸러주게 되었다.)

3. text-indent: -9999px;

콘텐츠를 왼쪽으로 밀어내는 방법으로, 스크린리더도 해당 텍스트를 읽게 된다.

하지만 링크, 양식 컨트롤 또는 기타 포커스가 가능한 요소에 이 스타일이 지정된 경우 포커스를 받을 수 있지만, 페이지에는 표시되지 않는다.

시각 장애가 있는 키보드 사용자에게 혼동을 줄 수 있다.

요새는 여러 모니터를 사용하기도 하고 넓은 스크린을 사용 할 수도 있어 자칫 보일수 있다는 단점이 제기되고 있다고 한다.(과연 보일까..?)

4. 콘텐츠를 화면 밖으로 보내기

.sr-only {
	position:absolute;
	left:-9999px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

position:absolute; 페이지 흐름에서 요소를 제거하고

left:-9999px; 콘텐츠를 왼쪽으로 밀어낸다.

top:auto; 원래 위치와 동일한 위치에 수직으로 배치하고

width:1px; height:1px; overflow:hidden; 요소 크기를 1x1 픽셀로 만들고 해당 픽셀에 맞지 않는 모든 항목을 숨김처리한다.

(1px로 만드는 방식이 참신하다고 생각)

5. CSS 클립방법

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

🙋‍♀️ clip은 이제 더이상 권장되지 않고 최신 속성인 clip-path로 대체되었다. 하지만 clip은 구 버전의 브라우저 대응을 위해서, clip-path는 최신 버전의 브라우저를 위해서 두개다 기입한다.

 

결론 : CSS 클립 방법을 사용하자!