IR기법(Image Replacement)

IR기법(Image Replacement)

의미가 포함되어 있는 image를 배경으로 표현하고, 그에 상응하는 내용을 text로 전경에 기입하는 방법으로,

시각이 있는 사용자는 이미지로 처리된 화면을 볼 수 있지만 "화면 낭독기를 사용하는 시각 장애인, CSS제거 및 인쇄"시에는 문자에 접근하거나 문자를 볼 수 있는 형태로 설계 하는 기법을 말한다.

1. display:block:none 속성으로 숨김처리

<style type="text/css">

.fir h1{background:url(image/lg.gif) no-repeat;width:585px;height:103px;margin-bottom:15px;}

.fir h1 a{display:block;width:100%;height:100%;}

.fir h1 span{display:none;/*visiblity:hidden;height:0*/}

</style>

<div class="fir">

<h1><a href="#"><span>IR contents:Image Replacement Technique</span></a></h1>

</div>

2. text-indent 속성으로 글씨 날리는 방법

<style type="text/css">

.pir h1{background:url(image/lg.gif) no-repeat;width:585px;height:103px;margin-bottom:15px;text-indent:-9999px;width:0;height:0;line-height:0;overflow:hidden;font-size:0;position:absolute}

.pir h1 a{display:block;width:100%;height:100%;}

</style>

<div class="pir">

<h1><a href="#">IR contents:Image Replacement Technique</a></h1>

</div>

3. 이미지에 z-index 값을 주어 텍스트 위로 띄우는 법

<style type="text/css">

.glir h1{margin-bottom:15px;position:relative}

.glir h1 a{display:block;width:585px;height:103px;}

.glir h1 span{background:url(image/lg.gif) no-repeat;width:inherit;height:inherit;position:absolute;left:0;top:0;z-index:1}

</style>

<div class="glir">

<h1><a href="#"><span></span>IR contents:Image Replacement Technique</a></h1>

</div>

4. 텍스트 요소에 z-index 음수 값을 주어 이미지 뒤로 숨기는 법

<style type="text/css">

.oir h1{background:url(image/lg.gif) no-repeat;width:585px;height:103px;position:relative;}

.oir h1 a{display:block;width:inherit;height:inherit;}

.oir h1 span{position:absolute;left:0;top:0;z-index:-1}

</style>

<div class="oir">

<h1><a href="#"><span>IR contents:Image Replacement Technique</span></a></h1>

</div>