CSS를 이용하여 Tab Navigation 형태를 디자인 하는 예제는 무척 많고 언제든 쉽게 구할 수 있습니다. CSS Tab Navigation을 만들어주는 응용 프로그램까지 등장했을 정도 입니다. 하지만 제 마음에 꼭 들어서 가져다 쓰고 싶은 예제는 많지 않더군요. 현재 제가 참여하고 있는 오픈소스 프로젝트에 적용되어야 할 CSS 코드를 작성할 때 제가 중요하게 생각하는 요소는 다음과 같고 이러한 내용들을 반영하여 Tab Navigation 코드를 작성해 보았습니다.

예제를 새창으로 보기

1. 첫째, 사용자의 자유도가 높을 것. 사용자는 원하는 색상으로 전경/배경을 얼마든지 쉽게 바꿀 수 있어야 합니다. 어떤 객체의 색상을 변경할 때 이미지 대신 CSS 코드를 이용할 수 있다면 훨씬 경제적 입니다. 물론 이미지 처리가 더욱 아름다운 표현을 위하여 필요하다는 의견에도 동의 하지만 저는 오픈소스의 진짜 디자이너는 최종 사용자 라고 생각하고 있습니다.
2. 둘째, 확장 가능성을 고려할 것. 너비, 높이, 갯수, 구조등은 항상 가변적이기 때문에 너비와 높이의 값을 고정하거나 제한된 갯수와 구조 하에서만 적당한 표현을 구사하게 되면 그 한계를 뛰어 넘어야 할 때 또 한벌의 새로운 코드를 작성해야 합니다. Tab Navigation을 만들기로 했다면 하위메뉴가 존재하는 상황도 미리 고려하여 작성해 둡니다. 처음 한번 작성할 때 시간이 많이 소요되지만 계속해서 재 사용할 수 있으므로 훨씬 효과적 입니다.
3. 셋째, 이미지는 쪼개지 말고 붙여서 사용할 것. 예를 들어 Tab의 라운딩 처리된 양쪽 모서리를 표현할 때 초심자들은 왼쪽 이미지, 오른쪽 이미지, hover, active 상태의 이미지들을 각각 따로 만드는 경우가 있습니다. 여러가지 상황에 대응하는 표현들은 단 하나의 이미지에 모두 쓸어담되 CSS를 이용하여 마치 분리된 이미지인듯 배치할 수 있습니다. 이러한 기법은 http request를 줄여주기 때문에 페이지의 성능 향상에도 영향을 줍니다. 야후에서는 이미지를 이런식으로 쓸어 담았습니다.
   

사용법

1. 탭의 기본 색, 마우스 오버 색, 활성화 된 탭의 색, 문자 색, 보더는 모두 CSS로 수정이 가능합니다.
2. 텍스트 기반으로 작성되어 있으며 문자열의 길이에 따라 탭의 크기는 가변적 입니다.
3. 탭의 크기(너비, 높이)는 padding으로 조절 합니다.
4. 사용자가 어떤 배경색을 사용하는지에 따라 1개의 이미지를 배경색과 동일한 색으로 수정하여야 합니다.
5. 약간의 코드만 수정하면 이미지 처리 방식으로도 얼마든지 전환이 가능 합니다.
6. IE 5.5~7.x, Firefox 2~3, Safari 3.x, Opera 9.x, Chrome 브라우저에서의 호환성이 확보되어 있습니다.
7. 더욱 아름다운 컬러 매치 또는 이미지로 처리된 탭 디자인이나 그 밖의 새로운 방식으로 자유롭게 구현한 다음 함께 볼 수 있도록 댓글로 공유해 주시면 대 환영 입니다. ^^;

이미지

이 밖에 더 많은 예제들이 OUIF 페이지에 링크되어 있습니다.