개발/Front-end
부트스트랩의 sr-only 클래스가 하는 일
devriver
2021. 8. 2. 23:36
부트스트랩의 sr-only 클래스가 하는 일
이 글은 그저 기억하기 위한 용도로 작성했으니 참고바랍니다.
부트스트랩은 sr-only
클래스를 사용하여 원하는 요소를 화면상에서는 사라지게 하는 동시에 웹 접근성을 높인다. 장애를 가진 사람은 스크린 리더기나 점자 타자기와 같은 보조 기구를 통해 웹을 인식하기 때문에 웹 접근성은 신경써야 할 요소 중 하나다. 간단하게 <img>
태그의 alt 요소에 이미지를 파악할 수 있는 텍스트를 작성하는 것만으로도 웹 접근성을 높일 수 있다.
나는 체크박스(<input type="checkbox>
)를 커스텀하면서 sr-only
를 접하게 되었다. 아마 사수가 아니었으면 웹 접근성을 신경쓰지도 않았을 텐데 덕분에 팁을 얻었다. 작업에 대해 자세히 말하자면 체크박스를 슬라이드 토글 형태로 커스텀하는 것이었다. 작업 순서는 아래와 같다. 체크 박스에 sr-only
클래스를 적용하여 체크 박스를 사라지게 만들기 → <label><div class="circle"></label>
로 style 만들기 → 체크박스 :checked
일 때 토글 효과 주기
부트스트랩의 sr-only
는 다음과 같이 작성되어있다. 이를 이용하여 체크박스를 화면에서 지우면 된다.
.sr-only {
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
border: 0;
clip: rect(0,0,0,0);
}
clip
속성은 요소의 일부분만 보이게 하고 싶을 때 사용한다. 단, 요소의 position
이 absolute
또는 fixed
로 적용되어 있어야 작동된다. sr-only
에서 clip
요소는 rect(0,0,0,0)
으로 선언되어있는 데 이는 요소를 노출 시키지 않겠다는 의미다.