text-index:-9999px 대체 방법

1. NHN방법(position/z-index를 이용)

<a href="주소"><span></span>로고</a>

일경우 span에 로고 이미지를 넣고 position을 줘서 글자 위에 그림이 오게끔 함.

좋은점:f12눌렀을때 이미지 사용 안함이라고 있는데

그때 이미지는 사라져도 글자가 남음.

(이거까지 고려해서 만들어야 되는 경우 있다죠..)

2번째 방법은 요약해서 쓸게요

text-index:-9999px 을 이용해서 텍스트를 들여쓰기 할 경우

눈에 보이지 않지만 실제 모니터 바깥위치까지 들여쓰기가 되기 때문에 성능측면에서는 비효율 적이라고 합니다.

(원래 캔버스가 1024면 -9999px을 들여쓴만큼 캔버스로 간주)

그리하여 쓸수있는 방법

text-indent:100%

white-space:nowrap;

overflow:hidden;

100%만큼 들여쓰기하고 nowrap과 overflow를 이용해서 글자가 흘러내리지않고, 바깥을 벗어나도 보이지않게 속성을

넣는거라고 합니다.

이렇게 하면 -9999px넣을때보다 캔버스를 작게 그려서 성능이 향상 된다고 합니다.