[css-tip]CSS 네비게이션 메뉴 만들기(가로형)
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
{
margin:0;
padding:0;
}
#nav li
{
margin:0;
padding:0;
list-style-type:none;
display:inline;
float:left;
}
#nav a
{
line-height:14px;
font-weight:bold;
margin:0 10px 4px 10px;
text-decoration:none;
font-size:12px;
color:#9c9;
}
#nav a.active, #nav a:hover
{
color:#363;
}
#nav 설명
magin, padding => 여백을 없앤다.
#nav li 설명
margin:0;
padding:0;
=> 여백 및 들여쓰기 없앤다.
list-style-type:none =>블릿을 없앤다.
display:inline; => 리스트를 같은 줄에 표시하한다.
float:left; => 리스트를 왼쪽으로 붙여서 표시
#nav a 설명
line-height:14px; => 줄 간격 지정
font-weight:bold; => 굵은 글자
margin:0 10px 4px 10px; => 여백 간격을 조정한다.(순서대로 위,오른쪽,아래,왼쪽=시계방향)
text-decoration:none; => 글자의 꾸미기를 보통 모양으로 지정
font-size:12px; => 글자 크기
color:#9c9; => 글자 색상
#nav a.active, #nav a:hover 설명
color:#363; => 글자 색상
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
=> 마우스 오버시 글자 색상
이처럼 같은 속성을 여러군데에서 사용하려면 "," 를 이용해서 설정할 수 있다.
