// A 태그의 링크제목에 사용할 스타일을 지정합니다

<style>
.myStyle { 
        font-size: 14px; /*글자크기*/
        font-family: 굴림; /*글자모양*/
        text-decoration: none; /*밑줄 보이기 등, underline 으로 설정하면 밑줄이 보입니다*/
        color: black; /*글자색상, #FFCC00 등의 코드나 red, blue 등 색상명도 가능합니다*/
}
</style>

===============================================
// 2. 원하는 위치에 아래의 내용을 복사해 넣으세요
===============================================


// 아래 사용법을 보고 따라 하세요
<TD
onmouseover="bgColor='EEEEEE'"   // 마우스를 대었을때 셀의 배경색상을 EEEEEE 로바꿉니다
onClick="window.location='page1.html'"  // 클릭했을때 해당 주소로 이동합니다. 주소를 수정하세요
style="cursor:hand"  // 커서의 모양을 손모양으로 합니다, 커서모양에 대한 것은 위의 검색창에서 '커서' 로 검색 해 보세요
onmouseout="bgColor='#FFFFFF'" // 마우스를 떼었을때 배경색을 FFFFFF 로 합니다
>

<p> <B>가로형 메뉴</B>

<table border=1>
<tr>
<td onmouseover="bgColor='EEEEEE'" onClick="window.location='page1.html'" style="cursor:hand" onmouseout="bgColor='#FFFFFF'" bgcolor="#FFFFFF" width="100" align="center" valign="center">
<a href="page1.html" class="myStyle">첫번째 메뉴</a></td>

<td onmouseover="bgColor='EEEEEE'" onClick="window.location='page2.html'" style="cursor:hand" onmouseout="bgColor='#FFFFFF'" bgcolor="#FFFFFF" width="100" align="center" valign="center">
<a href="page2.html" class="myStyle">두번째 메뉴</a></td>

<td onmouseover="bgColor='EEEEEE'" onClick="window.location='page3.html'" style="cursor:hand" onmouseout="bgColor='#FFFFFF'" bgcolor="#FFFFFF" width="100" align="center" valign="center">
<a href="page3.html" class="myStyle">세번째 메뉴</a></td>

<td onmouseover="bgColor='EEEEEE'" onClick="window.location='page3.html'" style="cursor:hand" onmouseout="bgColor='#FFFFFF'" bgcolor="#FFFFFF" width="100" align="center" valign="center">
<a href="page4.html" class="myStyle">네번째 메뉴</a></td>

<td onmouseover="bgColor='EEEEEE'" onClick="window.location='page3.html'" style="cursor:hand" onmouseout="bgColor='#FFFFFF'" bgcolor="#FFFFFF" width="100" align="center" valign="center">
<a href="page5.html" class="myStyle">다섯번째 메뉴</a></td>

</tr>
</table>

<p> <B>세로형 메뉴</B>

<TABLE border=1>
<TR>
        <TD onmouseover="bgColor='EEEEEE'" onClick="window.location='page1.html'" style="cursor:hand" onmouseout="bgColor='#FFFFFF'" bgcolor="#FFFFFF" width="100" align="center" valign="center">
<a href="page1.html" class="myStyle">첫번째 메뉴</a></TD>
</TR>
<TR>
        <TD onmouseover="bgColor='EEEEEE'" onClick="window.location='page2.html'" style="cursor:hand" onmouseout="bgColor='#FFFFFF'" bgcolor="#FFFFFF" width="100" align="center" valign="center">
<a href="page2.html" class="myStyle">두번째 메뉴</a></TD>
</TR>
<TR>
        <TD onmouseover="bgColor='EEEEEE'" onClick="window.location='page3.html'" style="cursor:hand" onmouseout="bgColor='#FFFFFF'" bgcolor="#FFFFFF" width="100" align="center" valign="center">
<a href="page3.html" class="myStyle">세번째 메뉴</a></TD>
</TR>
<TR>
        <td onmouseover="bgColor='EEEEEE'" onClick="window.location='page3.html'" style="cursor:hand" onmouseout="bgColor='#FFFFFF'" bgcolor="#FFFFFF" width="100" align="center" valign="center">
<a href="page4.html" class="myStyle">네번째 메뉴</a></td>
</TR>
<TR>
        <td onmouseover="bgColor='EEEEEE'" onClick="window.location='page3.html'" style="cursor:hand" onmouseout="bgColor='#FFFFFF'" bgcolor="#FFFFFF" width="100" align="center" valign="center">
<a href="page5.html" class="myStyle">다섯번째 메뉴</a></td>


</TR>
</TABLE>

CSS 와 자바스크립트를 함께 사용하면 여러가지 유용한 효과를 구현할 수 있습니다

위의 스타일시트를 HEAD 부분에 복사해 넣으세요