IR효과기법

/* IR효과(IR기법) */
/* 이미있는 이미지의 대체 텍스트를 제공 하는경우 */
.ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;}
/* 의미 있는 이미지의 대체 텍스트를 이미지가 없어도 대체 텍스트를 보여주고자 할때 */
.ir_wa {display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%;}
/* 대체텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때*/
.ir_su {overflow: hidden; position: absolute; width: 0; height: 0; ;line-height: 0; text-indent: -9999px;}

웹 접근성을 위해 숨김 텍스트를 제공하는경우 사전에 CSS를 만들어두어 필요한경우에 적용을 해준다.

예를들어, 전체 메뉴 부분에 대해 웹접근성을 준수하기 위해 이부분이 전체메뉴임을 알리고 실제 화면에서는 보이지 않도록  숨김 텍스트를 제공해주는경우에 사용을 한다. 

 

<nav id="nav">
       <div class="container">
        <div class="row">
        <div class="nav">
        <h2 class="ir_su">전체메뉴</h2>
               	<div>
			            <h3>HTML Reference</h3>
			            <ol>
			                <li><a href="#">HTML 태그(Tag)</a></li>
			                <li><a href="#">블록 요소/인라인 요소</a></li>
			                <li><a href="#">DTD 선언</a></li>
			                <li><a href="#">언어 속성 설정</a></li>
			                <li><a href="#">HTML &lt;title&gt;</a></li>
			                <li><a href="#">HTML &lt;meta&gt;</a></li>
			                <li><a href="#">특수문자</a></li>
			                <li><a href="#">하이퍼 링크</a></li>
			                <li><a href="#">HTML &lt;style&gt;</a></li>
			                <li><a href="#">HTML &lt;html&gt;</a></li>
			                <li><a href="#">HTML &lt;head&gt;</a></li>
			                <li><a href="#">HTML &lt;div&gt;</a></li>
			                <li><a href="#">HTML &lt;colgroup&gt;</a></li>
			                <li><a href="#">HTML &lt;caption&gt;</a></li>
			            </ol>
			        </div>
			        <div>
			            <h3>CSS Reference</h3>
			            <ol>
			                <li><a href="#">CSS 선택자</a></li>
			                <li><a href="#">CSS 단위</a></li>
			                <li><a href="#">CSS 색상</a></li>
			                <li><a href="#">CSS 선언 방법</a></li>
			                <li><a href="#">상대주소와 절대주소</a></li>
			                <li><a href="#">CSS float</a></li>
			                <li><a href="#">이미지 표현 방법</a></li>
			                <li><a href="#">이미지 스프라이트</a></li>
			                <li><a href="#">IR 효과</a></li>
			                <li><a href="#">이미지 최적화</a></li>
			                <li><a href="#">background-color</a></li>
			                <li><a href="#">border-style</a></li>
			                <li><a href="#">font-size</a></li>
			                <li><a href="#">text-align</a></li>
			            </ol>
			        </div>
			        <div>
			            <h3>Responsive</h3>
			            <ol>
			                <li><a href="#">반응형사이트</a></li>
			                <li><a href="#">미디어쿼리</a></li>
			                <li><a href="#">CSS3</a></li>
			                <li><a href="#">웹 접근성 연구소</a></li>
			                <li><a href="#">네이버 널리</a></li>
			                <li><a href="#">다음 다룸</a></li>
			                <li><a href="#">Webstandard</a></li>
			            </ol>
			        </div>
			     </div>
				</div>
			</div>
		</div>
	</nav>