IR기법을 활용한 메뉴바 만들어보기!

오늘은 IR 기법을 활용한 메뉴바를 만들어 보도록 하겠습니다
IR 기법은 전에도 말씀 드렸듯이 텍스트 대신에 이미지를 대처하는 기법입니다
웹표준 접근성에 있어서도 좋은 기법이라고 할수 있으며 현재 실무에서 많이 사용되는 기법이니 잘 이해하고 넘어가면 좋을것 같네요

먼저 IR기법을 활용한 메뉴를 만들기 전에 아래와 같은 메뉴바 이미지를 먼저 준비해보도록 하겠습니다.

위의 메뉴바에 마우스를 오버하게 되면 글자의 색이 변하는 방식의 메뉴를 만들어 보겠습니다 그렇게 하기 위해서는 위의 이미지와 오버시 나타나는 이미지가 필요하겠죠

이미지 준비가 완료되었다면 이제 마크업 작업을 통해 메뉴의 형태를 잡아보도록 하겠습니다  

<div>

    <ul>

        <li class="first_menu"><a href="#">첫번째 메뉴</a></li>

        <li class="second_menu"><a href="#">두번째 메뉴</a></li>

    </ul>

</div>

태그 부분은 매우 간단하죠 div안에 그냥 목록 태그가 있으면 끝

그렇다면 스타일 부분을 작성해보도록 하겠습니다

ul{list-style:none;}

ul li{float:left;}

ul li:first-child{

background:url(menu.jpg);

width:150px;

height:50px;

text-indent:-999px;

}

ul li:last-child{

background:url(menu02.jpg);

width:150px;

height:50px;

text-indent:-999px;

}

ul li a{display:block; width:150px; height:50px;}

.first_menu a:hover{background:url(menu_over.jpg);}

.second_menu a:hover{background:url(menu02_over.jpg);}

위와 같은 스타일을 적용하게 되면 IR기법으로 인해 텍스트 대신하여 이미지가 대처 된다는것을 알수 있을겁니다 또한 마우스를 메뉴바에 오버하게 되면 텍스트가 노란색으로 변경된다는 것을 알수있을겁니다

이처럼 IR 기법은 웹표준에 최적화된 기법이면서 여러가지 액션을 적용할수 있습니다