IR 기법 - by. UXKM

2024-04-09

요약 설명
이미지 스프라이트(image sprite)란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다.
웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청하게 됩니다.
하지만 사용된 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 요청해야만 하므로 웹 페이지의 로딩 시간이 오래 걸리게 됩니다.

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

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 heck을 사용해야함

								<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/크롬/IE5.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명과 별도의 script를 필요로함

파폭2.0/크롬/IE5.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>