HTML&CSS 본문

IR 기법

IR 기법

IR 기법은 이미지 대체텍스트 제공을 위한 CSS 기법으로 다양한 CSS 기법을 사용하여 이미지 대체텍스트를 제공할 수가 있으며, 이 중에 널리 알려진 기법들을 소개하고자 한다. Daum은 이러한 여러 가지 기법 중에서 Phark Method와WA IR 기법을 주로 사용하여 대체텍스트를 제공해주고 있다.

Phark Method (권장)

이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로(-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하는 방법

CSS
button {display:block;width:49px;height:36px;margin:0;padding:0;border:none;background:url(btn_search.gif) no-repeat;text-indent:-9999px}
a {display:block;overflow:hidden;float:left;width:49px;height:36px;background:url(btn_search.gif) no-repeat;text-indent:-9999px}
HTML
<button>검색</button> 
<a href="#">검색</a>
장단점
Phark Method 장단점
항목 장점 단점
스크린 리더기 읽어줌  
추가적인 태그 사용 안 함  
CSS on / Image off 시 텍스트 안보임  

WA IR (권장)

이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 span 태그로 감싼 후 z-index:-1을 이용하여 화면에 안보이게 처리

CSS
body {position:relative;z-index:0;margin:15px;padding:0;background-color:#fafafa}
button {width:49px;height:36px;margin:0;padding:0;border:none;background:url(btn_search.gif) no-repeat}
a {display:block;width:49px;height:36px;font-weight:bold;font-size:13px;background:url(btn_search.gif) no-repeat;color:#4b5bc9;text-decoration:none}
span {display:block;position:relative;z-index:-1;padding:8px 0;border:1px solid #bcc1ec;background-color:#F1F3FF;text-align:center}
HTML
<button> 
	<span>검색</span> 
</button> 

<a href="#"> 
	<span>검색</span> 
</a>
장단점
WA IR 장단점
항목 장점 단점
스크린 리더기 읽어줌  
CSS on / Image off 시 텍스트 보임  
추가적인 태그 사용함  
position 속성 사용(성능 관련 이슈)  

Farhner Image Replacement

이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 span태그로 감싼 후 display:none 을 이용하여 화면에 안보이게 처리

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

<a href="#">
	<span>검색</span>
</a>
장단점
Farhner Image Replacement 장단점
항목 장점 단점
스크린 리더기 안읽어줌  
CSS on / Image off 시 텍스트 안보임  
추가적인 태그 사용함  

Dwyer Method

이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 span태그로 감싼 후 width와 height를 각각 0으로 하여 글자를 숨기는 방법

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

<a href="#"> 
	<span>검색</span> 
</a>
장단점
Dwyer Method 장단점
항목 장점 단점
스크린 리더기 읽어줌  
추가적인 태그 사용함  
CSS on / Image off 시 텍스트 안보임  

Gilder/Levin Method

이미지로 대체할 엘리먼트 내에 빈 span태그를 추가하여 배경이미지를 설정하고 'position:absolute' 스타일을 이용하여 글자를 덮는 방법

CSS
button {display:block;position:relative;width:49px;height:36px;border:0 none;background-color:transparent;cursor:pointer}
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}
HTML
<button type="button">
    <span></span>검색
</button>
 
<a href="#">
    <span></span>검색
</a>
장단점
Gilder/Levin Method 장단점
항목 장점 단점
스크린 리더기 읽어줌  
CSS on / Image off 시 텍스트 보임  
추가적인 태그 사용함  
투명한 이미지인 경우 텍스트가 비칠 수 있음  
파폭2.0/크롬/IE5.0에서 <button> 엘리먼트 <span> 엘리먼트의 위치가 약간 밀림  

Leahy/Langridge Method

이미지로 대체할 엘리먼트에 배경이미지를 설정하고 padding-top의 값을 이미지의 높이만큼 주어 글자를 밑으로 밀어내어 숨기는 방법

CSS
button {display:block;overflow:hidden;width:49px;height:36px;padding:36px 0 0 0;border:0 none;background:url(btn_search.gif) no-repeat}
a {display:block;overflow:hidden;width:49px;height:0px !important;height:36px;padding:36px 0 0 0;background:url(btn_search.gif) no-repeat}
HTML
<button>검색</button> 

<a href="#">검색</a>
장단점
CSS Font-Size Comparative Table
항목 장점 단점
스크린 리더기 읽어줌  
추가적인 태그 사용안함  
CSS on / Image off 시 텍스트 안보임  
IE 5에서 제대로 출력하기 위해 button 엘리먼트를 제외한 다른 엘리먼트에서는 Box model heck을 사용해야함  

span padding : applied Method

이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 span으로 감싼 후 블럭화하여 padding-top의 값을 이미지의 높이만큼 주어 글자를 밑으로 밀어내어 숨기는 방법

CSS
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}
HTML
<button> 
	<span>검색</span> 
</button> 

<a href="#"> 
	<span>검색</span> 
</a>
장단점
CSS Font-Size Comparative Table
항목 장점 단점
스크린 리더기 읽어줌  
추가적인 태그 사용함  
CSS on / Image off 시 텍스트 안보임  

script replace Method

자바스크립트를 이용하여 이미지로 대체할 엘리먼트의 텍스트를 img태그로 교체하는 방법

JavaScript
<script type="text/javascript"> 
function replaceImg() {
	replaceImgBtn = document.getElementById("btn"); 
	replaceImgBtn.innerHTML = "<img src=\"" + replaceImgBtn.className + ".gif\" alt=\"" + replaceImgBtn.innerHTML + "\" />"; 
	replaceImgA = document.getElementById("btnA"); 
	replaceImgA.innerHTML = "<img src=\"" + replaceImgA.className + ".gif\" alt=\"" + replaceImgA.innerHTML + "\" />"; 
}
window.onload = replaceImg; 
</script>
CSS
button {width:49px;height:36px;margin:0;padding:0;border:none 0px;background-image:none;background-color:transparent}
button img {display:block}
a img {border:none 0px}
HTML
<button id="btn" class="btn_search">검색</button>

<a href="#" id="btnA" class="btn_search">검색</a>
장단점
script replace Method 장단점
항목 장점 단점
스크린 리더기 읽어줌  
CSS on / Image off 시 텍스트 보임  
추가적인 태그 사용함  
이미지 절대경로를 포함한 class명과 별도의 script를 필요로함  
파폭2.0/크롬/IE5.0에서 <button> 엘리먼트 안의 <img> 엘리먼트의 위치가 약간 밀림