이런 모양의 메뉴를 만들어 보겠습니다
재료는 메뉴탭의 라인을 나타내주는 배경이미지와 메뉴 이미지 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>
<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 코드의 모습입니다](/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의 스타일을 적용한 모습입니다](/attach/1/bk39.gif){kind=small}
[그림2] step2의 스타일을 적용한 모습입니다
step03.
각 메뉴에 이미지를 입혀 보겠습니다
- 각 메뉴의 텍스트를 감추고 메뉴와 메뉴사이의 간격을 조절합니다. ⑦
- 해당 메뉴별 배경 이미지를 넣어 줍니다. ⑧
.tab_navi a { ⑦
float:left;
padding:24px 0 0 0;
overflow:hidden;
height:0px;
margin:0 1px; /* 메뉴와 메뉴 사이의 간격 조절 */
}
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] 각 메뉴별 이미지가 적용된 모습입니다](/attach/1/bk38.gif){kind=small}
[그림 3] 각 메뉴별 이미지가 적용된 모습입니다
step04.
마우스 오버했을때 표현해 보도록 하겠습니다.
- 배경으로 지정되어 있는 이미지의 위치를 위로 올려줍니다. ⑨
(overflow:hidden;으로 숨겨져있던 24픽셀이 보이게 됩니다.)
.tab_navi a:hover { ⑨
background-position:0 -24px;
}
background-position:0 -24px;
}
step05.
마지막으로 자신이 현재 머물고 있는 곳의 위치는 어떻게 알릴수 있을까요?
<body>의 id를 이용하면 됩니다.
예를 들어 각각의 페이지에
<body id="home">
<body id="media">
<body id="local">
<body id="tag">
<body id="guestbook">
<body id="media">
<body id="local">
<body id="tag">
<body id="guestbook">
이런식으로 아이디값을 부여 합니다.
그리고 다음과 같이 스타일을 지정합니다.
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;
}
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소스파일 다운로드 받기
Comments
백그라운드 포지션을 올리는건 첨 봤내요^^ㅋ
오~~ 좋아좋아.
오 딱 좋은 팁인데요..
네이버 시즌2 스킨을 빼와서 사용중인데..
위의 메뉴탭 효과 구현이 귀찮아서 뺐는데..
이렇게 하면 되겠군요 ^^
http://yonghees.oranc.co.kr/59
여기로 트랙백 하나만 날려주시겠어요 ??
죄송합니다. 이제야 보내드렸습니다. ㅜ ㅜ;;
와. 좋은 정보 감사합니다. 이런방법도 있었군요.^-^
height /**/:24px; /* ie6를 위한 hack */
이 Hack의 용도를 잘모르겠어요.(^-^);
여기저기 찾아보니 /**/가 Win IE 6 제외시키기 인데요.
역시나 정확한 의도가 무엇인지 잘 모르겠습니다.
!important; 는 어떤 브라우저를 위한 우선순위인가요?
질문이 많네요^^ 좋은하루 보내세요.
아... 제가 ie hack을 사용했는데.. 이것이 ie6용이 아니라 ie5용이였더군요.. 잠시 착각... 그래서 일단 hack는 삭제했습니다. 그리고.. !important는 브라우저를 가리지 않고, 무조건 우선으로 스타일을 적용한다는 뜻입니다. 답변이 늦어 죄송합니다. ㅜ ㅜ;;
오오! 이제사 블로그에 발을 들여놓고..
이거저거 뒤지고 있는데, 여기까지 찾아왔습니다. ^_^
앞으로 좋은 가르침 많이 받고 갈께요! 흐흐
감사합니다... 일주일에 글을 하나이상은 올리려고 하는데.. 그게 잘 안되네요.. ㅠ ㅠ;;
안녕 하세요,중국에 마이미 입니다.스킨 이야기를 번역하여 불로그에 올려도 되겠습니까?링크와 원작품출처는 꼭 남겨드릴께요...
말씀하셨듯이 링크와 출처만 남겨주신다면 상관없을것 같습니다. ^^;;
링크와 출처 남겼읍니다,고마워요^^
너무 좋네요~
감사합니다 ^^
아아아아..어렵네요 진짜..아아아 ㅠㅠ
정말 좋네요 !!! 감사하게 쓰겠습니다.
그런데 탭메뉴를 우측으로 정렬하려면 어떻게 하나요 ?