<style type="text/css">
<!--
img {
border: none;
}
/*- Menu--------------------------- */
#gr {
float:left;
width:100%;
font-size:93%;
}
#gr ul {
margin:0;
padding:0 0 0 0;
list-style:none;
}
#gr li {
display:inline;
margin:0;
padding:0;
}
#gr a {
float:left;
background:url("left.png") no-repeat left top;
margin:0;
padding:0 0 0 15px;
text-decoration:none;
font: bold 12px/1 Arial;
}
#gr a span {
float:left;
display:block;
background:url("right.png") no-repeat right top;
padding:19px 25px 19px 0px;
color:#FFFFFF;
font: bold 12px/1 Arial;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#gr a span {float:none;font: bold 12px/1 Arial;}
/* End IE5-Mac hack */
#gr a:hover span {
color:#cbcbcb;
}
#gr a:hover {
background-position:0% -50px;
}
#gr a:hover span {
background-position:100% -50px;
}
#gr #current a {
background-position:0% -50px;
}
#gr #current a span {
background-position:100% -50px;
color:#cbcbcb;
}
-->
</style>
</head>
<body>
<table width="900" height="50" border="0" align="center" cellpadding="0" cellspacing="0" background="bar.gif">
<tr>
<td style='padding-left:10px;'>
<div id="gr"><ul><!-- CSS Tabs -->
<!--
<li id="current"><a href="home"><span><b>처음으로</b></span></a></li>
강조하고 싶은 그룹에 예제처럼 id="current" 를 넣어주시면 됩니다
-->
<li><a href="home"><span><b>처음으로</b></span></a></li>
<li><a href="community"><span><b>커뮤니티 채널</b></span></a></li>
<li><a href="file"><span><b>자료실</b></span></a></li>
<li><a href="about"><span><b>싸이트 소개</b></span></a></li>
<li><a href="help"><span><b>고객지원</b></span></a></li>
</ul></div>
</td>
</tr>
</table>
--------------------------------------------------------------------------------
위의 소스는 여러가지에서 의미가 크다.
하나의 background 이미지 위에 hover 이미지를 씌우고 그 위에 이정표 역할을 하는 메뉴글을 씌웠다.
중요한 것은 이것을 스타일시트로 구현했다는 것이고 이미지 분할을 최소화 하면서 많은 것을 표현했다는 점에서 의의가 있다.
invalid-file