유효한 button IR 기법

Image Replacement(이하 IR) 기법을 사용하면 기존 마크업의 수정없이 CSS조작으로 이미지를 교체하여 내용을 표시할 수 있고, 스크린리더 사용자도 고려할 수 있습니다.

하지만 이미지가 로드되지 않았을때 알아볼 수 없고, 인쇄시 배경이미지 출력 문제가 있습니다.
HTML 마크업 자체는 깔끔해질 수 있으나 접근성 측면에서 이 기법은 권장하지 않습니다.

input 버튼 요소의 IR 기법입니다.
아래 예제는 IE,FF,Oprea,Safari 에서 테스트했습니다.
(이미지는 Daum 의 검색버튼..)

[#M_ 소스코드 펼치기.. | 접기.. |

<style type=”text/css”>
.btn {
    background:transparent url(‘btn_search.gif’) no-repeat scroll 0%;
    border:0;
    cursor:pointer;
    height:36px;
    max-height:36px;
    width:49px;
    padding-top:100px;
    overflow:hidden;
}
</style>
<input type=”submit” value=”검색” class=”btn” />

_M#]

소스코드 & 결과