본문 바로가기
프로그래밍/html

html <div>로 메뉴(내비게이션) 만들기2

by -현's- 2012. 5. 30.
반응형

●마우스 롤 오버 태그, 속성

 <img src="이미지 주소" onmouseover="this.src='마우스 오버시 이미지 주소'"

                                 onmouseout="this.src='이미지 주소'" alt="alt이름"/> 

 

 

●웹표준 준수 위해서 이미지의 alt속성을 꼭 넣어주고, <img src=""/>처럼 태그 마지막 부분을 꼭 막아줘야한다.

별 의미 없는 그냥 화면을 꾸미기 위한 이미지의 경우는 alt속성에 값을 넣지 않고 alt=""처럼 빈 속성값을 설정한다.

 

 

 

●이미지 링크 테두리 없애기

- 이미지에 링크를 걸면 테두리가 생긴다. 개별적으로 border값을 설정하는 것 보다 css를 이용하여 테두리를 제거한다.

  img {border:"0"}

 

 

 

●가로 메뉴 예

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>

 

<style type="text/css">
img{border:0;}
#menu{width:800px; margin:10px auto; padding-left:200px;}
#menu ul{margin:0 ;padding: 0; }
#menu li{display:inline; float:left; }
</style>

 

</head>
<body>

 

<div id="menu">
 <ul>
     <li><a href="#"><img width=200 height=50 src="image/menu1.png" onmouseover="this.src='image/menu1_on.png'"
       onmouseout="this.src='image/menu1.png'" alt="메뉴1"/></a></li>
     <li><a href="#"><img width=200 height=50 src="image/menu2.png" onmouseover="this.src='image/menu2_on.png'"
       onmouseout="this.src='image/menu2.png'" alt="메뉴2"/></a></li>
     <li><a href="#"><img width=200 height=50 src="image/menu3.png" onmouseover="this.src='image/menu2_on.png'"
       onmouseout="this.src='image/menu3.png'" alt="메뉴31"/></a></li>
 </ul>
</div>

 

</body>
</html>

반응형

'프로그래밍 > html' 카테고리의 다른 글

부트스트랩2.3 시작  (0) 2013.08.28
html 웹표준 로고 넣기  (0) 2012.05.31
html <div>로 메뉴(내비게이션) 만들기1  (0) 2012.05.30
html <div>로 웹사이트 레이아웃 구성하기2  (0) 2012.05.28
DTD((Document Type Definition) 개념  (0) 2012.05.25

관련글

댓글

티스토리툴바