앞 강좌에서 네비게이션바를 기본만 만들었는데 마우스오버시 색상이 변화되는 것도 해보고 방문한 링크도 다른 색으로 표현해본다. 이전의 코드를 불러오면 다음과 같다. Home Products Services About Us 여기까지의 화면은 다음과 같다. 이번에 만들어볼 네비게이션바의 모양은 다음과 같다. 테두리의 두께를 2픽셀로 했더니 좀 투박스럽다. 보통은 1픽셀로 해서 은은하게 튀어나온 느낌을 주게된다. 우선 해야할 것은 li 태그간의 간격인 마진을 없애는 것이다. #nav ul li { float: left; margin-right: 0px; text-align: center; } 삭제해도 되고 0으로 넣어도 된다. 0의 경우 단위인 px를 넣지 않아도 되지만 다른 숫자는 반드시 단위를 붙여야한다. ..

네비게이션바는 웹페이지에서 다른 페이지로 이동하기 위해서 여러가지 버튼형식으로 만들어진 메뉴의 집합이다. 이것은 타이틀 아래에 있는 경우도 있고 사이드바에 위치하기도 하며 어떤 때는 페이지의 하단에 위치하기도 한다. 이 네이게이션바는 웹페이지에서 아주 중요한 역할을 하기 때문에 디자인에 각별한 신경을 쓰게 된다. 제이쿼리나 플래시를 이용하여 아주 다양하게 만들어지고 정지된 메뉴가 아닌 슬라이딩 효과를 주게 되고 사진을 넣어서 움직이게 하여 방문자로 하여금 재미를 선사하기도 한다. 이러한 네비게이션바를 만드는데 있어서 기본이 되는 CSS를 점검해 본다. 아주 기본적인 것이므로 간단하게 위와같이 만들어본다. 바디부분에 다음과 같이 li 태그를 작성한다. Home Products Services About U..