-9999px을 대체하는 새로운 image replacement 기법

웹브라우저를 통해 문자를 보여주는데 있어서 문자를 이미지형태로 보여주는 것보다

글자 그대로를 이용하는 것이 미적인 요소를 제외하고 모든 측면에서 좋습니다.

트래픽도 절감해주죠, SEO(검색엔진최적화)에도 좋죠, 웹접근성측면에서도 좋죠.


그런데 미적인 욕심을 내기 때문에 적어도 타이틀이나 로고같은 부분은 글자 그대로를 사용하기 보다는 이미지를 사용합니다.

특히나 한글은 영문만큼 웹에서 즐길 수 있는 서체가 많지 않기 때문에(엄밀히 말하면 돋움과 굴림 뿐)

더욱 이미지를 사용해야할 필요성이 높습니다.


접근성을 살리면서 미적인요소를 얻는 두마리의 토끼를 잡고자 많은 방법들이 논의되었습니다.

그중 한가지 방법이 image replacement 기법이라고 하는 것이 있는데

CSS의 text-indent 속성을 이용한 방법입니다.


보여주고자 하는 타이틀 이미지를 배경이미지로 넣고, 텍스트도 넣습니다.

그리고 text-indent(들여쓰기) 속성을 이용해 -9999px값을 넣습니다.

꼭 -9999가 아니라, 일반 모니터 해상도로 표현하기 힘든 수치를 넣어줍니다.

이렇게 되면 -9999px만큼 들여쓰기가 되기 때문에

눈에 보이지는 않지만 실제 여러분들이 쓰시는 모니터 바깥의 위치까지 들여쓰기가 됩니다.

텍스트는 보이지 않고, 배경이미지만 보이게 되는 방법이지요.



하지만 이 방법이 성능측면에서 비효율적이라고 합니다.

왜냐하면 브라우저는 사용자들의 눈에 보이지 않는 -9999px의 텍스트까지 렌더링을 해야하기 때문입니다.

그러니깐 -9999px를 사용하지 않으면

브라우저는 대략 여러분들의 모니터 해상도인 1200*800정도의 크기만을 캔버스 크기로 잡게되는데

-9999px 를 사용하면 그만큼의 엄청 큰 영역까지 캔버스 크기로 브라우저가 간주하기 때문입니다.


그래서 새로운 image replacement 기법을 고안해냈는데

아래와 같은 속성을 이용합니다.


.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}


100% 만큼 들여쓰기를 하고, nowrap과 overflow:hidden값으로 글자가 흘러내리지 않게, 그리고 바깥을 벗어나도 보이지 않게 속성을 넣어준것입니다.


이렇게 되면 -9999px로 넣을때보다 캔버스를 작게 그리게 되어 성능이 향상됩니다.

text-indent를 100%로 할때 매우매우매우 긴 글자를 넣으면 보이지않겠냐고요?

매우 긴 글자를 넣더라도 모니터 바깥에서 텍스트가 아래줄로 흘러내지지 않고 글자가 보여지는 것이기 때문에 결코 그럴일이 없습니다. : )


http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/