작성일자
카테고리 CSS/CSS2.1
앞 강좌에서 네비게이션바를 기본만 만들었는데 마우스오버시 색상이 변화되는 것도 해보고 방문한 링크도 다른 색으로 표현해본다.

이전의 코드를 불러오면 다음과 같다.

<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

이상한 문제의 파일-->

test3-2.html




신고
입문자

Highly recommended
웬만한 책보다 낫네요

청명

네비게이션 바 만드는데 좋은 공부가 되었습니다. 그런데, 응용단계에서 초록색 배경 넣는 것에
대해 궁금한 것이 있습니다.
제가 실제로 적용해 보니까, 기본 상태(웹브라우저에서 보이는)에서는 그냥 흰색이고
마우스 오버할 때만 초록색으로 바뀌더라구요.
본문 내용으로 볼 때는 기본상태에서도 초록색 배경이 적용되어야 맞지 싶은데, 이상하네요.
제가 잘못 이해한걸까요?

BlogIcon 베누시안

안녕하세요. 저도 위 스타일시트를 편집기에 붙여넣고 하니 배경이 흰색으로 나오더군요. 코드가 잘못됐나 싶어서 찾아보니 background:#66CC99; 부분에서 background라는 글자가 검정색으로 나옵니다. 다른 글자는 텍스트 편집기에서 정상적인 스타일시트 속성이라는 표시로 파란색이 나오거든요. 아무리 봐도 단어는 맞는데 말이죠. 그래서 다른 곳의 background를 복사해서 붙여넣으니 정상적으로 파란색으로 바뀌면서 저장하고 웹브라우저에서 보니 초록색으로 정상으로 나왔습니다. 참으로 알 수 없는 현상이네요.

수정하지 마시고 현재 상태 그대로 파일을 이메일로 보내주시면 감사하겠습니다. martian36@naver.com

정상적인 파일은 위에 첨부했습니다.

티스토리 툴바