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

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

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

 

●세로 메뉴

 <!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">
#menu1{width:100px; }
#menu1 ul{list-style:none; margin: 0;padding: 0; }
</style>

 

</head>
<body>

 

<div id="menu1">
  <ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
  </ul>
</div>

 

</body>
</html>

결과

1111

2222

3333

4444

 

 

 

 

●li안에 이미지를 세로로 나열할 때 이미지 사이에 여백이 생길경우, img속성에 'vertical-align:top;'로 설정한다.

 

 

 

 

●가로 메뉴

<!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">
#menu2{width:400px; }
#menu2 ul{margin:0 ;padding: 0; }
#menu2 li{display:inline;}
</style>

 

</head>
<body>

 

<div id="menu2">
 <ul>
   <li>1111</li>
   <li>2222</li>
   <li>3333</li>
   <li>4444</li>
 </ul>
</div>

 

</body>
</html>

 

결과

1111 2222 3333 4444

 

 

 

●li안에 'display:inline;'를 적용하면 가로로 배열이 된다.

 

 

 

●li안에 이미지를 가로로 나열할 때 이미지 사이에 여백이 생기는 경우, li안에 'float:left;'로 설정한다.

 

 

 

 

반응형

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

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

관련글

댓글

티스토리툴바