Trio 홈페이지 CSS로 작성한 메뉴 예제(cxmenu.html) 예제 메뉴로



색상, 크기, 폰트들은 테이블과 <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">&nbsp;항목 0&nbsp;<!!!/a></td>
<td width="25%" class=menucell>
  <a href="cxzmenu1.html">&nbsp;항목 1&nbsp;</a></td>
<td width="25%" class=menucell>
  <a href="cxzmenu2.html">&nbsp;항목 2&nbsp;</a></td>
<td width="25%" class=menucell>
  <a href="cxzmenu3.html">&nbsp;항목 3&nbsp;</a></td>
</tr></table>
</body> </html>
연결과 방문 했던 메뉴의 빈칸(&nbsp;) 너비를 넓히면 색상 범위가 확장됩니다.
<! 혹은 <!!!는 종료 태그(>) 까지 무효화 됨.
<style> 부분과 <table> 부분을 각 문서에 복사하고 적색 부분 만 수정 해 주면 된다.

번역문 소유자 - Trio 홈페이지 예제 메뉴로
이문서(http://trio.co.kr/webrefer/csex/cxmenu.html)는 자유로이 연결 사용이 가능함.