상상공장 스킨공작소 :: 이미지 메뉴탭 만들어 보기

이런 모양의 메뉴를 만들어 보겠습니다

재료는 메뉴탭의 라인을 나타내주는 배경이미지와 메뉴 이미지 5개가 필요합니다.

step01.
html 코드는 의미에 맞게 리스트업하고, 디자인이 가능하도록 클래스를 부여하고 되도록 심플하게 코딩해 보겠습니다.

<div class="tab_type01">
<ul class="tab_navi">
<li class="tab_home"><a href="#">첫페이지</a></li>
<li class="tab_media"><a href="#">미디어로그</a></li>
<li class="tab_local"><a href="#">지역로그</a></li>
<li class="tab_tag"><a href="#">태그</a></li>
<li class="tab_guestbook"><a href="#">방명록</a></li>
</ul>
</div>

[그림1]옷을 입히지 않은 html 코드의 모습입니다

step02.
자 이제 옷을 입혀 보겠습니다.
- 먼저 메뉴바의 가로와 세로 사이즈를 지정합니다. ① ②
- 리스트의 형식을 감춰줍니다. ③
- 아래 라인을 표현하기 위해 배경이미지를 넣고 여백도 적절히 조절합니다 ④ ⑤
- 리스트를 세로가 아니라 가로로 정렬합니다. ⑥

.tab_navi {
width:500px; ①
height:24px; ②
list-style:none; ③
padding:0 0 0 5px; ④
background:url(tab_bg.gif) repeat-x; ⑤
}

.tab_navi li {
display:inline; ⑥
}

[그림2] step2의 스타일을 적용한 모습입니다

step03.
각 메뉴에 이미지를 입혀 보겠습니다
- 각 메뉴의 텍스트를 감추고 메뉴와 메뉴사이의 간격을 조절합니다. ⑦
- 해당 메뉴별 배경 이미지를 넣어 줍니다. ⑧

.tab_navi a { ⑦
float:left;
padding:24px 0 0 0;
overflow:hidden;
height:0px;
margin:0 1px; /* 메뉴와 메뉴 사이의 간격 조절 */
}

.tab_home a { ⑧
width:71px;
background:url(tab_home.gif) no-repeat;
}

.tab_media a { ⑧
width:78px;
background:url(tab_media.gif) no-repeat;
}

.tab_local a { ⑧
width:70px;
background:url(tab_local.gif) no-repeat;
}

.tab_tag a { ⑧
width:58px;
background:url(tab_tag.gif) no-repeat;
}

.tab_guestbook a { ⑧
width: 61px;
background:url(tab_guestbook.gif) no-repeat;
}

[그림 3] 각 메뉴별 이미지가 적용된 모습입니다

step04.
마우스 오버했을때 표현해 보도록 하겠습니다.
- 배경으로 지정되어 있는 이미지의 위치를 위로 올려줍니다. ⑨
(overflow:hidden;으로 숨겨져있던 24픽셀이 보이게 됩니다.)

.tab_navi a:hover { ⑨
background-position:0 -24px;
}

step05.
마지막으로 자신이 현재 머물고 있는 곳의 위치는 어떻게 알릴수 있을까요?
<body>의 id를 이용하면 됩니다.
예를 들어 각각의 페이지에

이런식으로 아이디값을 부여 합니다.
그리고 다음과 같이 스타일을 지정합니다.

body#home .tab_home a,
body#media .tab_media a,
body#local .tab_local a,
body#tag .tab_tag a,
body#guestbook .tab_guestbook a {
background-position:0 -24px;
}