이번에는 UL과 LI 태그를 이용해서 간단하게 가로나열 메뉴를 만드는 포스팅을 하겠습니다.
예전에는 테이블을 이용해서 만들거나 그냥 드림위버가 만들어주는 방식으로 만들었었는데요..
이제는 HTML5를 이용해서 날코딩으로 간단하게 코딩하는 법을 알려드립니다.
이것은 기본의 형태이고 CSS를 이용해서 좀더 꾸며야 겠죠?
HTML 부분입니다.
CSS 부분입니다.
CSS적용은 여러가지 방법이 있지만 여기서는 <head> </head> 태그 사이에 넣으시면 됩니다.
/* 기본 설정*/
a{text-decoration:none; color:#000000;}
a:hover{color:#ff0000;}
/* nav tag */
nav ul{padding-top:10px;} /* 상단 여백 10px */
nav ul li {
display:inline; /* 세로나열을 가로나열로 변경 */
border-left:1px solid #999; /* 각 메뉴의 왼쪽에 "|" 표시(분류 표시) */
font:bold 12px Dotum; /* 폰트 설정 - 12px의 돋움체 굵은 글씨로 표시 */
padding:0 10px; /* 각 메뉴 간격 */
}
nav ul li:first-child{border-left:none;} /* 메뉴 분류중 제일 왼쪽의 "|"는 삭제
두개를 합친 완전체 입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>CSS를 일렬로 나열하기</title>
<style type="text/css">
/* 기본 설정*/
a{text-decoration:none; color:#000000;}
a:hover{color:#ff0000;}
/* nav tag */
nav ul{padding-top:10px;} /* 상단 여백 10px */
nav ul li {
display:inline; /* 세로나열을 가로나열로 변경 */
border-left:1px solid #999; /* 각 메뉴의 왼쪽에 "|" 표시(분류 표시) */
font:bold 12px Dotum; /* 폰트 설정 - 12px의 돋움체 굵은 글씨로 표시 */
padding:0 10px; /* 각 메뉴 간격 */
}
nav ul li:first-child{border-left:none;} /* 메뉴 분류중 제일 왼쪽의 "|"는 삭제
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
<li><a href="#">MENU5</a></li>
</ul>
</nav>
</body>
</html>
