네이버블로그는 이런 기능이 안되지만 티스토리(태터툴스,텍스트큐브)나 익스프레스엔진(Xe)같은 php기반의 CMS(Content Management System)를 사용하면 메뉴가 추가되면서 배경이미지가 자동으로 추가되고 글자의 많고 적음에 따라 배경이미지도 변하도록 하는 기법이 슬라이딩 테크닉(Sliding Door Technic)입니다. 메뉴버튼의 link상태와 hover상태에 따라 변하게도 할 수 있습니다. 하나의 이미지 안에 4개의 이미지가 들어있고 배경이미지 포지션(Background Image Position)을 조정하여 각각의 상태에 따라 해당 이미지가 나오도록하는 기법입니다. 첨부파일을 열어보면 좌측 사진과 같은 이미지와 psd파일이 있으므로 만드든데 참고가 됩니다. 평상시(link)는 1번..

앞 강좌에서 네비게이션바를 기본만 만들었는데 마우스오버시 색상이 변화되는 것도 해보고 방문한 링크도 다른 색으로 표현해본다. 이전의 코드를 불러오면 다음과 같다. 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..