이전의 코드를 불러오면 다음과 같다.
<style type="text/css">
#nav ul {
list-style-type: none;
}
#nav ul li {
float: left;
margin-right: 40px;
text-align: center;
}
#nav ul li a {
display: block;
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
border: 1px solid #666;
}
#nav ul li a:link, #nav ul li a:visited {
color: #000;
text-decoration: none;
}
#nav ul li a:hover, #nav ul li a:active {
color: #F00;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="http://www.daum.net">Home</a></li>
<li><a href="../products.html">Products</a></li>
<li><a href="../services.html">Services</a></li>
<li><a href="../about Us.html">About Us</a></li>
</ul>
</div>
</body>
여기까지의 화면은 다음과 같다.
이번에 만들어볼 네비게이션바의 모양은 다음과 같다.
테두리의 두께를 2픽셀로 했더니 좀 투박스럽다. 보통은 1픽셀로 해서 은은하게 튀어나온 느낌을 주게된다.
우선 해야할 것은 li 태그간의 간격인 마진을 없애는 것이다.
#nav ul li {
float: left;
margin-right: 0px;
text-align: center;
}
삭제해도 되고 0으로 넣어도 된다. 0의 경우 단위인 px를 넣지 않아도 되지만 다른 숫자는 반드시 단위를 붙여야한다.
그다음으로 테두리의 색상을 주는데 상, 좌는 밝은색, 우,하는 어두운색을 주게되면 위처럼 3D효과가 나온다. 그리고 배경색도 준다.
#nav ul li a {
display: block;
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
background:#66CC99;
border-top: 2px solid #CCC;
border-right: 2px solid #666;
border-bottom: 2px solid #666;
border-left: 2px solid #CCC;
}
앞강좌에서는 태두리 스타일을 하나의 색상을 줬기때문에 한줄만 필요했는데 여기서는 네줄이나 필요하다. 두가지 색상을 서로 다르게 해야하기 때문이다. 배경색도 짙은 초록색으로 했다. 이번에는 링크에 대해 장식을 해본다.
#nav ul li a:link {
color: #000;
text-decoration: none;
}
#nav ul li a:visited {
color: #000;
text-decoration: none;
background: #F90;
}
#nav ul li a:hover {
color: #609;
text-decoration: none;
background: #690;
}
#nav ul li a:active {
color: #F00;
text-decoration: none;
}
4가지 요소를 각각분리해서 visited부분에는 오렌지색을 hover부분에는 다른 초록색을 주고 글자의 색을 보라색으로 했다. active는 그대로 빨간색이다. html코드의 home부분에서 실제로 링크되는 웹페이지 주소를 daum으로 입력했다. 이제까지는 가상의 웹주소를 입력했지만 실제로 방문해봐야 visited 부분이 색이 변하는지 알 수 있기때문이다. home에 마우스오버하면 색이 변경되고 클릭하면 글자색이 빨간색으로 깜빡이고 daum으로 이동한다. 다시 페이지로 돌아오면 home버튼이 오랜지색으로 되어있는 것을 확인할 수 있다.
test3.html이상한 문제의 파일-->
