색상, 크기, 폰트들은 테이블과 <head>의 <style>의 청색 부분을 조정하여 사용하라.
다른 페이지와 틀린 점은 적색으로 표시되었슴.
이 색상은 코드와 관계없이 설명을 위해 삽입 한 색상임.
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN">
<html lang="ko">
<head>
<title>Trio 홈페이지 - CSS로 작성한 메뉴 예제(cxmenu.html)</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=EUC-KR">
<style type="text/css">
table.menutable {
background-color:ffaa00; /* 실제 나중에 덮어 씌우므로 작용 않됨 */
text-align:center; vetical-align:middle;
border:solid thin; border-width:1pt; border-color: 0000ff;
padding:1pt; margin:1pt;
/*이미지를 사용시
background-image:url('http://trio.co.kr/gif/hmbgu.gif'); */
}
td.menucell, td.menuselect { /* 글자 크기와 보더 지정 */
background-color:006600;
font-size:1.06em; font-weight:bold; /* 지정 없으면 디폴트 */
text-align:center;
border:solid thin; border-width:1pt; border-color: ffff00;
}
td.menucell a:link{ /* 연결된 칸 지정 */
background-color:008800; color:ffff00;
text-decoration:none; /* 밑줄 그려면 삭제 */
}
td.menucell a:visited { /* 방문 했던 칸 지정 */
background-color:00aa00; color:ffffff;
text-decoration:none; /* 밑줄 그려면 삭제 */
}
/* 활성 인커 지정(+ 윗줄 긋기) */
td.menucell a:active, td.menucell a:hover, td.menucell a:focus {
background-color:ffff00; color:ff0000;
text-decoration: underline; /* 밑줄 없애려면 text-decoration:none; */
}
/* 활성 인커 추가 지정(밑줄 긋기) */
td.menucell a:active, td.menucell a:hover, td.menucell a:focus {
text-decoration: underline; /* 밑줄 없애려면 삭제 */
}
td.menuselect { /* 선택 된 항목의 차별화, 앞의 일반 지정 덮어씌움*/
background-color:ffee88; color:ff0000;
}
</style>
<style type="text/css">에서 </style>까지의 모든 내용을
별도 화일 cxmenu.css에 저장하고 전체 부분을
<link rel="stylesheet" href="cxmenu.css" type="text/css">
로 대체하여도 같은 결과를 갖는다.
화일 안에 <style type="text/css">와 </style>를 포함시키지 마십시오.
여러번 복사해야 하는 내용은 이렇게 하는 것이 편리하다.
</head>
<body>
<table class=menutable width=60% border=1 align=center>
<tr align="center">
<td width="25%" class=menuselect>
<!!!a href="cxmenu.html"> 항목 0 <!!!/a></td>
<td width="25%" class=menucell>
<a href="cxzmenu1.html"> 항목 1 </a></td>
<td width="25%" class=menucell>
<a href="cxzmenu2.html"> 항목 2 </a></td>
<td width="25%" class=menucell>
<a href="cxzmenu3.html"> 항목 3 </a></td>
</tr></table>
</body>
</html>
연결과 방문 했던 메뉴의 빈칸( ) 너비를 넓히면 색상 범위가 확장됩니다.
<! 혹은 <!!!는 종료 태그(>) 까지 무효화 됨.
<style> 부분과 <table> 부분을 각 문서에 복사하고 적색 부분 만 수정 해 주면 된다.
|
