IR 기법 - by. UXKM

Publishing
CSS
CSS 중급
IR 기법

요약 설명
IR(Image Replacement) 기법은 이미지 대체텍스트 제공을 위한 CSS 기법으로, 다양한 CSS 속성을 사용하여 텍스트를 이미지로 대체할 수 있습니다.
주로 이미지 스프라이트(image sprite)와 함께 사용되며, 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하여 웹 페이지의 로딩 시간을 단축할 수 있습니다.

이미지 스프라이트를 사용하면 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있어, 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼에서 효과적입니다.
또한 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지 파일만을 관리하면 되므로 매우 간편합니다.

Sprite Image 활용 예제

Daum CSS Convention

아래 방법은 Daum CSS Convention에서 명시한 방법입니다.

Phark Method (권장)

이미지로 대체할 요소에 배경 이미지를 설정하고, 글자는 text-indent를 이용하여 화면 바깥으로(-9999px만큼 들여쓰기) 빼내어 보이지 않게 하는 방법입니다.

장점
스크린 리더기 읽어줌

추가적인 요소 사용 안 함
단점
CSS on / Image off 시 텍스트 안보임

								<button type="button">검색</button>
								<a href="#">검색</a>

								<style>
									button {
										display:block; width:49px; height:36px; margin:0; padding:0;
										text-indent:-9999px; /* 들여쓰기를 -9999px만큼 지정하여 글자를 버튼 밖으로 숨김 처리 */
										background:url('btn_search.gif') no-repeat;
										border:none;
									}
									a {
										display:block; overflow:hidden; float:left; width:49px; height:36px;
										text-indent:-9999px; /* 들여쓰기를 -9999px만큼 지정하여 글자를 버튼 밖으로 숨김 처리 */
										background:url('btn_search.gif') no-repeat;
									}
								</style>

WA IR (권장)

이미지로 대체할 요소에 배경 이미지를 설정하고, 글자는 <span> 태그로 감싼 후 position:relative와 z-index:-1을 이용하여 화면에 보이지 않게 처리합니다.

장점
스크린 리더기 읽어줌

CSS on / Image off 시 텍스트 보임
단점
추가적인 요소 사용함

position 속성 사용(성능 관련 이슈)

								<button type="button"><span>검색</span></button>
								<a href="#"><span>검색</span></a>

								<style>
									button {
										width:49px; height:36px; margin:0; padding:0;
										background:url('btn_search.gif') no-repeat;
										border:none;
									}
									a {
										display:block; width:49px; height:36px;
										text-decoration:none;
										background:url('btn_search.gif') no-repeat;
									}
									span {
										position:relative; z-index:-1;
									}
								</style>

Farhner Image Replacement

이미지로 대체할 요소에 배경 이미지를 설정하고, 글자는 <span> 태그로 감싼 후 display:none을 이용하여 화면에 보이지 않게 처리합니다.

장점
없음
단점
스크린 리더기 안읽어줌

CSS on / Image off 시 텍스트 안보임

추가적인 요소 사용함

								<button type="button"><span>검색</span></button>
								<a href="#"><span>검색</span></a>

								<style>
									button {
										width:49px; height:36px; margin:0; padding:0;
										background:url('btn_search.gif') no-repeat;
										border:none;
									}
									a {
										display:block; width:49px; height:36px;
										text-decoration:none;
										background:url('btn_search.gif') no-repeat;
									}
									span {
										display:none;
									}
								</style>

Dwyer Method

이미지로 대체할 요소에 배경 이미지를 설정하고, 글자는 <span> 태그로 감싼 후 width와 height를 각각 0으로 하여 글자를 숨기는 방법입니다.

장점
스크린 리더기 읽어줌
단점
CSS on / Image off 시 텍스트 안보임

추가적인 요소 사용함

								<button type="button"><span>검색</span></button>
								<a href="#"><span>검색</span></a>

								<style>
									button {
										width:49px; height:36px; margin:0; padding:0;
										background:url('btn_search.gif') no-repeat;
										border:none;
									}
									a {
										display:block; width:49px; height:36px;
										text-decoration:none;
										background:url('btn_search.gif') no-repeat;
									}
									span {
										display:block; overflow:hidden;
										width:0; height:0;
									}
								</style>

Gilder/Levin Method

이미지로 대체할 요소 내에 빈 <span> 태그를 추가하여 배경 이미지를 설정하고, position:absolute 스타일을 이용하여 글자를 덮는 방법입니다.

장점
스크린 리더기 읽어줌

추가적인 요소 사용안함
단점
CSS on / Image off 시 텍스트 안보임

IE 5에서 제대로 출력하기 위해 button 요소를 제외한 다른 요소에서는 Box model hack을 사용해야 함

								<button type="button"><span></span>검색</button>
								<a href="#"><span></span>검색</a>

								<style>
									button {
										display:block; position:relative;
										width:49px; height:36px;
										background-color:transparent;
										cursor:pointer;
										border:0;
									}
									button span {
										position:absolute; top:0; left:0;
										width:100%; height:100%;
										background:url('http://icon.daum-img.net/top/2008/btn_search.gif') no-repeat 0 0;
									}
									a {
										display:block; position:relative;
										width:49px; height:36px;
									}
									a span {
										position:absolute; top:0; left:0;
										width:100%; height:100%;
										background:url('http://icon.daum-img.net/top/2008/btn_search.gif') no-repeat 0 0;
									}
								</style>

Leahy/Langridge Method

이미지로 대체할 요소에 배경 이미지를 설정하고, height: 0과 padding-top(이미지의 높이 값)을 지정하여 글자를 아래로 숨기는 방법입니다.
height: 0으로 지정하여 글자를 숨기려면 반드시 overflow: hidden이 선언되어야 합니다.

장점
스크린 리더기 읽어줌

CSS on / Image off 시 텍스트 보임
단점
추가적인 요소 사용함

투명한 이미지인 경우 텍스트가 비칠 수 있음

파이어폭스 2.0/크롬/IE 5.0에서 <button> 요소와 <span> 요소의 위치가 약간 밀림

								<button type="button">검색</button>
								<a href="#">검색</a>

								<style>
									button {
										display:block; overflow:hidden;
										width:49px; height:0; padding:36px 0 0 0;
										background:url('btn_search.gif') no-repeat;
										border:0;
									}
									a {
										display:block; overflow:hidden;
										width:49px; height:0; padding:36px 0 0 0;
										background:url('btn_search.gif') no-repeat;
									}
								</style>

span padding : applied Method

이미지로 대체할 요소에 배경 이미지를 설정하고, 글자는 <span>으로 감싼 후 블록화하여 padding-top의 값을 이미지의 높이만큼 주어 글자를 아래로 밀어내어 숨기는 방법입니다.

장점
스크린 리더기 읽어줌
단점
추가적인 요소 사용함

CSS on / Image off 시 텍스트 안보임

								<button type="button"><span>검색</span></button>
								<a href="#"><span>검색</span></a>

								<style>
									button {
										display:block; overflow:hidden;
										width:49px; height:36px; margin:0; padding:0;
										border:none;
										background:url('btn_search.gif') no-repeat;
									}
									a {
										display:block; overflow:hidden;
										width:49px; height:36px;
										background:url('btn_search.gif') no-repeat;
									}
									span {
										display:block;
										padding-top:40px
									}
								</style>

script replace Method

자바스크립트를 이용하여 이미지로 대체할 요소의 텍스트를 <img> 태그로 교체하는 방법입니다.

장점
스크린 리더기 읽어줌

CSS on / Image off 시 텍스트 보임
단점
추가적인 요소 사용함

이미지 절대경로를 포함한 class명과 별도의 스크립트를 필요로 함

파이어폭스 2.0/크롬/IE 5.0에서 <button> 요소 안의 <img> 요소의 위치가 약간 밀림

								<button type="button" id="btn_button">검색</button>
								<a href="#" id="btn_a">검색</a>

								<style>
									button {
										width:49px; height:36px; margin:0; padding:0;
										border:none;
										background-image:none; background-color:transparent;
									}
									button img {
										display:block;
									}
									a img {
										border:0;
									}
								</style>

								<script>
									function replaceImg() {
										var replaceImgButton = document.getElementById("btn_button");
										replaceImgButton.innerHTML = "<img src=\"" + replaceImgButton.className + ".gif\" alt=\"" + replaceImgButton.innerHTML + "\" />";
										var replaceImgA = document.getElementById("btn_a");
										replaceImgA.innerHTML = "<img src=\"" + replaceImgA.className + ".gif\" alt=\"" + replaceImgA.innerHTML + "\" />";
									}
									window.onload = replaceImg;
								</script>