interactive
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>
'Design' 카테고리의 다른 글
이미지 대체 사용 팁! placehold.it (0) | 2012.12.05 |
---|---|
[CSS3] Transform (0) | 2012.12.03 |
CSS로 배경투명하게 만들기 (1) | 2012.11.15 |
[CSS3] background-size 속성알아보기 (0) | 2012.11.14 |
HTML5 Canvas 기본형태 (0) | 2012.10.31 |