메인 메뉴 스타일 지정

도큐먼트베이스 아래 images 폴더를 만들고, 다음 다섯 이미지를 저장한다.

이전 글에서 만든 index.html을 열고 #main-menu 엘리먼트에 다음 코드를 추가한다.

<div id="main-menu">

	<ul id="nav">
		<li><a href="#">Java</a></li>
		<li><a href="#">JDBC</a></li>
		<li><a href="#">JSP</a></li>
		<li><a href="#">CSS Layout</a></li>
		<li><a href="#">JSP Project</a></li>
		<li><a href="#">Spring</a></li>
		<li><a href="#">JavaScript</a></li>
	</ul>
	
</div>

#main-menu 폰트 설정

메인 메뉴의 폰트 스타일을 지정한다. /*** The Essential Code ***/에 다음 강조된 부분을 추가한다. /*** Just for Looks ***/에 있는 #main-menu는 필요없으니 제거한다.

#main-menu {
	width: 1000px;
	height: 35px;
	font-family: Verdana, sans-serif;
	font-weight: bold;
	font-size: 12px;	
}

예제보기 1

ul#nav

/*** The Essential Code ***/에 다음을 추가하여, li의 디폴트 리스트 스타일과 ul과 li가 가진 디폴트 마진과 패딩을 제거한다.

ul#nav {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

예제보기 2

ul#nav li

서브 메뉴가 가로로 보이도록 /*** The Essential Code ***/에 다음을 추가한다.

ul#nav li {
	float: left;
}

예제보기 3

메뉴 항목이 붙어있으니 항목 좌우에 적당한 패딩을 준다.

ul#nav li {
	float: left;
	padding: 0 17px 0 8px;
}

예제보기 4

ul#nav 위치 수정

메뉴가 있는 ul이 #main-menu의 위쪽으로 치우쳐 있다. #main-menu의 높이에 변화를 주지 않으면서 ul를 중앙으로 이동시키기 위해 다음을 추가한다.

ul#nav {
	margin: 0;
	padding: 0;
	list-style-type: none;
	position: relative;
	top: 9px;
	left: 17px;
}

예제보기 5

메인 메뉴 링크 스타일

#main-menu 배경색을 지정한다.

#main-menu {
	width: 1000px;
	height: 35px;
	font-family: Verdana, sans-serif;
	font-weight: bold;
	font-size: 12px;
	background: #92B91C;
}

링크의 글자색은 흰색으로, 링크 밑줄은 없애고, 마우스를 올릴 때 밑줄이 보이도록, /*** The Essential Code ***/에 다음을 추가한다.

ul#nav > li > a {
	text-decoration: none;
	color: #FFF;
}
ul#nav > li > a:hover {
	text-decoration: underline;
	background: none;
	color: #FFF;
}

예제보기 6

메인 메뉴의 항목 앞에 이미지 넣기

ul을 list-style-type: none;으로 설정하면, li 앞의 동그라미는 사라진다. 동그라미 없애고 대신 li 앞에 배경 이미지를 넣으면 리스트를 좀 더 세련되게 표현할 수 있다. 다음 코드를 ul#nav li 스타일에 추가한다. url 다음의 이미지 경로는 CSS 파일 위치를 기준으로 이미지 위치를 상대경로로 표시해야 한다.

ul#nav li {
	float: left;
	padding: 0 17px 0 8px;
	background: url('../images/bull_circle.gif') no-repeat 0 50%;
}

아래 강조된 부분을 #main-menu에 추가한다.

#main-menu {
	margin: 15px 0;
	width: 996px;
	height: 35px;
	font-family: Verdana, sans-serif;
	font-weight: bold;
	font-size: 12px;	
	background: #92B91C;
	border: 2px solid #DAEAAA;
}

예제보기 8

참고