CSS3 부트스트랩 sr-only 클래스값 의미와 사용 목적을 알아보자
몰랐던 사실을 또 하나 배우게 됩니다. 저는 폰트어썸을 꼭 사용해서 늘 CDN 링크 주소를 넣습니다. 수업시간에 sr-only 라고 하는 클래스값을 h1에 넣었더니, 해당 h1 태그 요소가 사라지는 것 입니다. 분명 따로 스타일을 부여하지 않았는데도 클래스값의 유무에 따라 화면상 나타나고 사라지는것을 확인할 수 있었습니다. 단순히 사라지는게 아닌, 완전 그 자리가 없어져서 뒤에 오는 요소들이 빈 공백을 매꿔서 자리를 차지하게 됩니다.
나중에 알고보니, 이것은 "접근성" 을 위한 처리 방식이었습니다. 웹접근성이란 말 그대로 사용자의 블로그 (티스토리 등), 홈페이지에서 원하는 문구를 넣고 싶은데, 단순히 화면에서 보이지 않게 하고 싶을 때 사용됩니다. 예를 들어서 자신의 이름 석자를 넣고 싶은데, 보이게 하고 싶지는 않습니다. 이럴때는 이름의 투명도를 준다거나, 위치를 스크린 해상도 밖으로 보낸다거나 하면 해결되지만 요즘은 고해상도의 디바이스가 많이 출시되고 있는데다 CSS도 발전함에 따라 더이상 과거의 이런 방법이 먹히지 않는 경우도 발생하고는 합니다.
그래서 폰트어썸같은 부트스트랩 기반에서는 아예 화면상에서 사라지게 하는 방법을 기본적으로 제시하고 있습니다. 클래스명은 제목에서 언급했듯 "sr-only" 입니다. 이 클래스명을 숨기고 싶은 태그 요소에 사용하시면 화면상에서는 보이지 않지만, 검색 엔진에서는 이 클래스명이 적용된 텍스트를 그대로 읽어옵니다. 그래서 웹접근성을 높일 수 있게 됩니다.
간단히 테스트를 해 보겠습니다. 아래의 예제를 주목해 주시기 바랍니다.
See the Pen CDN: class="sr-only" by rgy0409 (@rgy0409) on CodePen.
현재 <head> 안쪽에는 어썸폰트의 CDN 주소가 적혀 있습니다. 그리고 <body> 안에는 두 개의 h1 태그가 있으며 하나는 클래스값이 들어있습니다. 클래스명은 sr-only 라고 되어 있구요. 결과는 첫번째 h1에 있는 텍스트만 화면상에 출력이 되고 있으며 sr-only의 클래스값을 가지고 있는 h1의 텍스트는 보이지 않습니다.
display: none; 처리를 해버리면 화면상에 출력이 되지 않을 뿐만 아니라, 검색 봇이 이 태그 요소를 인식하지 못하게 됩니다. 결국 웹 접근성 부분에서 떨어지죠. 그래서 접근성을 높이기 위해서 이런 방법을 사용하는 것 입니다. 보통 블로그를 운영하시면 어떻게 해서든 내가 작성한 글을 구글이나 네이버 검색엔진에 노출되게 하고 싶으실텐데, 그럴때 웹 접근성을 활용하여 이와 비슷한 방법을 구사하면 되는 것 입니다. 예전에는 다양한 키워드들을 다량으로 입력하고 이것을 웹접근성을 이용한 방법으로 화면상에 보이지 않게 처리하는 경우도 많았는데, 지금은 검색봇의 알고리즘이 워낙 좋아져서 더 이상 이런 편법은 통하지 않습니다.
sr-only에 들어있는 스타일은 다음과 같습니다.
position: absolute; → 위치를 지정함. 위로 붕 뜬 상태가 되어 뒤에 오는 요소들의 자리를 차지하지 않게 됨
width: 1px; → 가로크기
height: 1px; → 세로크기
overflow: hidden; → 현재 크기 이상의 영역은 모두 감춤
padding: 0; → 부풀리는 영역을 없앰
margin: -1px; → 벌리는 영역을 오히려 더 좁힘
border: 0; → 테두리를 없앰
clip: rect(0,0,0,0); → 보여지게 하는 부분을 설정하는 것인데, 모든 값이 0 이므로 결국 보여지는 부분이 없음
이렇게 해석하시면 됩니다. 이것은 기본적으로 부트스트랩 관련 CDN을 연결해 놓으면 동작하지만, 별도로 CSS에 마크업을 해두시는것을 추천합니다. 이유는 인터넷이 안 되는 경우를 대비하거나, 해당 CDN 링크 주소가 깨지는 경우 동작을 하지 않기 때문입니다.
.sr-only {
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
border: 0;
clip: rect(0,0,0,0);
}
이렇게 작성하시면 되겠죠. 이 방법을 너무 과다하게 이용하시면 오히려 웹접근성에서 더 떨어질 수 있으니 가급적이면 꼭 필요할때만 한두번만 사용하시기를 바라겠습니다. 그리고 개인적으로 티스토리 블로그를 이용하시면서 어그로성 콘텐츠를 생성하시는 분들은 절대로 이 방법을 악용하지 않으셨으면 좋겠습니다. 끝.
