재료는 메뉴탭의 라인을 나타내주는 배경이미지와 메뉴 이미지 5개가 필요합니다.
step01.
html 코드는 의미에 맞게 리스트업하고, 디자인이 가능하도록 클래스를 부여하고 되도록 심플하게 코딩해 보겠습니다.
<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 코드의 모습입니다](http://plyfly.net/attach/1/bk37.gif)
[그림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.
각 메뉴에 이미지를 입혀 보겠습니다
- 각 메뉴의 텍스트를 감추고 메뉴와 메뉴사이의 간격을 조절합니다. ⑦
- 해당 메뉴별 배경 이미지를 넣어 줍니다. ⑧
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픽셀이 보이게 됩니다.)
background-position:0 -24px;
}
step05.
마지막으로 자신이 현재 머물고 있는 곳의 위치는 어떻게 알릴수 있을까요?
<body>의 id를 이용하면 됩니다.
예를 들어 각각의 페이지에
<body id="media">
<body id="local">
<body id="tag">
<body id="guestbook">
이런식으로 아이디값을 부여 합니다.
그리고 다음과 같이 스타일을 지정합니다.
body#media .tab_media a,
body#local .tab_local a,
body#tag .tab_tag a,
body#guestbook .tab_guestbook a {
background-position:0 -24px;
}
tab_type_img.zip소스파일 다운로드 받기


