[CSS] 김버그의 HTML&CSS는 재밌다 | Screen Only

스크린리더기를 사용하는 이용자를 위해 HTML 정보로는 필요하나 시각적으로 보이지 않게끔 하기 위해서 CSS로 작업한다.

.sr-only {
	display: absolute;
    z-index: -100;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

display: none; 으로 하면 HTML이 정보로써의 가치가 없다고 여기기 때문에 아예 읽히지 않고

또한 width나 height의 값을 0으로 주면, 안에 있는 컨텐츠 자체를 없다고 여긴다.

 

---

 

(+)

최근에는 'sr-only'라는 표현보다 'visuallyHidden'이라고 쓰이더라.