CLOSE SEARCH

CSS – 페이지 레이아웃에 관계없이 유연하게 표시되는 네비게이션 메뉴

웹페이지에 네비계이션 메뉴를 제공하는 방법 중 심미적으로 가장 뛰어난 방법은 플래시로 된 네비게이션을 제공하는 것이라고 생각한다.

하지만 iOS 기반의 디바이스에서는 플래시를 지원하지 않기때문에 사용자가 iOS 디바이스로 웹페이지에 접속할 경우 페이지를 이동할 방법이 없어진다. 그렇기 때문에 HTML 형식으로 메뉴를 구성해서 디바이스에 관계없이 네이게이션이 표시되도록 하는 것이 중요하다.

예전에는 디자이너가 포토샵으로 디자인한 이미지를 여러단계 중첩된 테이블 테그로 구성하여 페이지에 추가하고 자바스크립트로 마우스롤오버 효과를 구현하는 방식으로 메뉴를 구성했다. 하지만 이 방식은 네비게이션이 처음 제작한 크기로만 표시될뿐 다른크기에서는 구조가 망가지는 단점이 있다.  그러므로 웹페이지의 크기에 따라서 디자인의 일관성을 유지하면서 크기가 변경되도록 구현해야 한다.

1. 중첩된 테이블 대신 ul 테그를 이용해서 메뉴항목을 구성하자. 이 방식의 가장 큰 장점은 간결하다는 것이다. 유지보수를 위해 tr, td 태그 사이에서 방황할 필요가 없다.

 

2. 네비게이션바 스타일을 지정하는 CSS를 작성하자. 네비게이션에서 사용하는 각 태그의 스타일을 지정하되 특히 float 값을 필요에 맞게 잘 설정해야 한다.

 

이 방식은 메뉴를 구성하는 데이터(ul 테그의 내용)와 디자인(CSS)이 분리되어 있기 때문에 유지보수하기가 쉽다.

또한 화면 크기나 폰트 크기에 따라서 네비게이션이 일관성을 유지한 상태로 크기가 변경되므로 테이블 테그를 사용해서 구성한 메뉴에 비해 아주 유연한 네비게이션이 되었다!!

Filed under: Web