3개의 메뉴로 구성되어 있는 세로형 메뉴를 만들어 보자.
메뉸는 아래처럼 보여지게 된다.
 |
[nav.htm]
<html>
<head>
<link rel="stylesheet" type="text/css" href="nav.css" />
</head>
<body>
<ul id="nav">
<li><a href="http://okkks.tistory.com" target="_blank">여기는</a></li>
<li><a href="http://okkks.tistory.com" target="_blank" class="active">http://okkks.tistory.com</a></li>
<li><a href="http://okkks.tistory.com" target="_blank">입니다.</a></li>
</ul>
</body>
</html>
메뉴에 주로 사용하는 ul, li 태그의 조합으로 구성을 한다.
[nav.css]
#nav
{
list-style-type:none;
}
#nav li
{
background:url(images/page_btn_next.gif) no-repeat 0 50%;
padding-left:25px;
}
#nav a
{
font-weight:bold;
font-size:12px;
text-decoration:none;
color:#7878E1;
}
#nav a.active, #nav a:hover
{
color:#00008C;
}
#nav 설명
list-style-type:none; => 블릿을 없앤다.
#nav li 설명
background:url(이미지 지정) no-repeat 0 50%;
=> 블롯을 대체할 다른 이미지 지정
no-repeat => 배경 이미지를 한 번만 출력하고 반복하지 않게 지정
0 50% => 왼쪽에서 0, 위에서부터 50%에 이미지를 위치 시킨다.(즉, 세로 중간에 위치)
보다 쉬운 방법으로 list-style-image:url(이미지 지정); 속성을 사용해 기본 불릿 이미지를 다른 이미지로 지정할 수 있다.
예>
ul
{
list-style-image:url(이미지 지정);
}
하지만, 각종 브라우저와 버전에 따라 기본 이미지 위치가 다르기 때문에 <li>엘리먼트 배경이미지로 같은 효과를 줬다.
#nav a 설명
font-weight:bold; => 굵은 글자
font-size:12px; => 글자 크기
text-decoration:none; => 글자의 꾸미기를 보통 모양으로 지정.(밑줄을 없앤다.)
color:#7878E1; => 글자 색상
#nav a.active, #nav a:hover 설명
color:#00008C; => 글자 색상
a.active
=> <a>엘리먼트(a 태그)에 class="active" 형태로 사용한다.
메뉴를 선택하면 해당 메뉴를 선택했다는 효과를 주기위해 class에서 사용할 수 있게 active 라는 이름을 직접 만들었다. 선택한 메뉴는 class="active" 를 사용하고 그렇지 않은 메뉴들은 class="" 를 사용한다.
예:선택 안한 메뉴 효과>
<li><a href="http://okkks.tistory.com" target="_blank" class="">여기는</a></li>
예:선택한 메뉴 효과>
<li><a href="http://okkks.tistory.com" target="_blank" class="active">http://okkks.tistory.com</a></li>
a:hover
=> 마우스 오버시 글자 색상
이처럼 같은 속성을 여러군데에서 사용하려면 "," 를 이용해서 설정할 수 있다.
