이미지 대체텍스트를 위한 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로 지정하여 해결 가능하다.