[css] "text-indent: -9999px"보다 좋은 코드를 사용하자

 

 

 

 

 

 

 

 

 

이미지의 IR(image replacement)기법을 사용할 때 보통 text-indent:-9999px 속성을 넣는 방법으로 텍스트를 보이지 않게 처리한다.

이 방법은 매우 편리하지만 성능의 저하와 웹 접근성이 떨어진다.

스크린리더가 차례대로 웹사이트를 탐색하다가, 스크롤이 갑자기 상단으로 이동하는 현상이 나타나기도 한다.

또한 일부 검색 엔진이 사이트의 검색 엔진 최적화(SEO) 점수를 낮게 평가할 수 있다. 대체 텍스트가 SEO에 중요한 역할을 하는 경우에는 다른 방법을 고려해 볼 필요가 있다.

 

 

 

이러한 단점을 보완하면서 text-indent를 사용하는 방법은,

 

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

 

1. nowrap 값으로 글자가 박스 영역에서 흘러 내려가지 않고 멀어지게 된다.

2. hidden 값으로 박스 영역에서 벗어난 글자를 숨긴다.