대체 텍스트기법

CSS 2012.06.27 15:31

오늘 접근성관련 글을 보다가 무심코 사용했던 text-indent : -9999px에 대한 글을 보게 되었다.

백에 이미지 넣고 안에 있는 글자를 감추기 위해 대체적으로 사용하는 기법인데 텍스트를 브라우저 저 멀리 날려버리는거기때문에 눈에는 보이지 않지만 랜더링할때 브라우저를 크게 그려서 성능을 떨어뜨리는 결과를 가져온다고 한다.

글쓴이는 .hidden {text-indent:100%; white-space:nowrap; overflow:hidden;} 을 권장했다. ie7에서 지원이 안되기 때문에 따로 block를 해줘야 한다고 덧붙였다.

회사 퍼블과 예전에 이 문제에 대해 어떤방법이 좋을지를 의논한적이 있다. text-indent의 경우 a 태그 안에 들어가 있을때 ie6에서 가로사이즈를 제대로 인식 못해 저 멀리 안드로메다로 날아가는 버그가 종종 있기에 아래 방법을 많이 쓴다고 했다.  position:relative; index:-1; 을 하게 되면 브라우저를 크게 그리지 않으면서 뒤로 숨어버리기 때문에 괜찮은 방법중 하나이지만 a태그 안에 span태그를 넣어 한번더 싸줘야 한다는게 문제였다. 이방법 저방법 각기 장단점이 있었는데...위 방법을 보니 참 괜찮은 것 같다. 그러나 글쓴이가 말했듯이 ie의 크로스브라우징 문제가 걸리기에 아직까진 구글의 방법을 추천했다.

font-size:0; line-height:0; text-shadow:none; color:transparent;

 

출처: http://blog.naver.com/aron1210?Redirect=Log&logNo=40159983408

신고

'CSS' 카테고리의 다른 글

ie9 이하 버전의 제한  (0) 2014.02.26
One-Time Expression 한번만 실행시키자.  (0) 2012.07.27
대체 텍스트기법  (0) 2012.06.27
하단 풋터고정  (0) 2012.06.07
스크립트 에디터  (0) 2012.05.23
CSS3로 만든 아이폰  (0) 2012.03.20
Trackbacks 2 : Comment 0

티스토리 툴바