이미지 대체텍스트를 위한 CSS 기법인 IR기법에는 여러 방법이 있는데, 다룸에서 소개하는 IR기법에 다양한 기법에 대한 설명과 장단점이 잘 나와있다.
Phark Method
이 중 text-indent로 텍스트를 날리는 방법인 Phark Method가 가장 범용적으로 쓰이는 편인데, text-indent: -9999px와 같은 매우 큰 수치를 주어 화면 밖으로 밀어내버리는 원리이다.
.ir {
display: inline-block;
width: 200px;
text-indent: -9999px;
background: url(../images/blank.gif);
}이는 화면상에 보이지 않더라도 실제 캔버스는 지정한 영역까지 뻗어있는 꼴이므로 text-indent: -9999px은 성능상 좋지 않다고 한다. 해법은 다음과 같으며, 특정한 경우가 아니라면 가장 애용하는 방식이다.
보완한 CSS
.ir {
display: inline-block;
width: 200px;
text-indent: 100%;
white-space: nowrap;
background: url(../images/blank.gif);
overflow: hidden;
}text-indent를 요소의 너비와 동일하게 설정하면 텍스트가 첫 줄을 비우고 그 다음 행으로 개행하게 되는데 white-space: nowrap;를 이용해 이를 막고, 요소의 우측으로 텍스트가 삐져나가게 한 다음 해당 부분은 overflow: hidden; 처리하여 숨긴다. 이렇게 하면 실제 생성되는 캔버스 영역은 -9999px일 때보다 훨씬 작아지게 될 것이다.
이슈 및 해결
- background를 지정하지 않고 본 기법을 활용하려는 경우, ie에서는 해당 영역을 감지하지 못하여 클릭할 수 없는 버그가 있었다. 이를 위해 투명한 2px*2px짜리 blank.gif를 만들어 배경으로 지정하여 해결했다.
- ie7에서 해당 요소에 padding 값이 좌측 또는 우측에 적용되어있을 때 text-indent: 100%;로 지정하면 글씨가 삐져나오는 버그가 있었으며, 이 경우 %가 아닌 너비와 동일한 px로 지정하여 해결 가능하다.