"text-indent" : -9999px 코드 대체하기

Text-indent 예시 

 

웹이나 이미지의 IR(image replacement) 기법을 사용할 때 일반적으로 CSS의 text-indent 속성을 이용하여 텍스트가 보이지 않게 처리를 하게 되는데 아마 많은 분들이 가장 많이 사용하는 방법이 text-indent:-9999px값을 넣어서 사용하는 방법일거라 생각합니다.

 

이 방법은 정말 단순하고 너무나 쉽기 때문에 많은 인기가 있었습니다. 그러나 이 방법은 편리성을 가지고 있음에도 불구하고 단점이 있었습니다.  해당 속성을 이용해서 텍스트를 박스 영역 밖으로 보내게 되면 사용자의 눈에는 보이지 않지만 CSS에 지정한 값만큼 브라우저는 화면을 랜더링해야 하기 때문에 성능의 저하가 발생합니다. (우리 눈에는 보이지 않지만 브라우저는 계속해서 열심히 일하고 있습니다. 제발 살려줘....)

 

이해하기 쉽게 설명을 하면 브라우저는 사용자의 모니터 해상도 크기만을 캔버스 크기로 인지하는데 text-indent:-9999px를 사용하면 사용한 속성만큼의 엄청 큰 영역까지 캔버스 크기로 브라우저가 간주하기 때문입니다. 

 

하지만 실망하긴 이릅니다. 이것 단점을 보완하면서 효과적으로 text-indent를 사용하는 방법이 있습니다.

 

박스 영역의 100% 만큼 들여쓰기를 하고, nowrap으로 글자가 흘러 내려가지 않게 하면서 영역을 벗어 난 글자를 overflow:hidden값으로 안 보이게 처리를 합니다.  

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

이렇게 사용하면 글자가 아무리 길어져도 문자열은 박스영역에서 흐르지 않고 멀어지게 되므로 성능도 크게 향상됩니다. 

모두 조금 더 좋은 코드를 사용해보세요. 

 

감사합니다.