NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


CSS Tab Navigation Design.

본문 건너 뛰기

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 | XEUI 페이지에 링크되어 있습니다.

분류: CSS,웹 표준 | 2008년 10월 29일, 7:01 | 정찬명 | 댓글: 8개 |
트랙백URI - http://naradesign.net/wp/2008/10/29/173/trackback/

8개의 댓글이 있습니다.

  1. 황규연 댓글:

    보통 디자이너들은 이미지 처리를 하는 경우가 많아서
    에이전시에서는 꿈도 못 꿔볼 이야기입니다..–;
    저런 제안을 할 수있다는것이 찬명님이 부럽네요..^^

  2. 정찬명 댓글:

    네, 공감합니다. 배경이 이미지로 처리된 버전까지 코드속에 심어 놓아야 겠네요. 오늘 저녁에 코드 확장공사좀 해야겠습니다. 감사합니다. ^^; 이미지 텍스트를 사용하는 케이스는 제가 쓸 일이 없을 것 같아서 거기까지는 고려 하지 않을 생각입니다.

  3. 착이 댓글:

    이미지를 저렇게 붙여서 쓰는군요..!
    평소에 거의 이미지는 안쓰기는 하지만.. 멋진 정보들 감사합니다 ^^

  4. 희주 댓글:

    이미지를 붙여쓰는것은 구글코리아의 메인화면에서 했던 부분이라 저도 많이 응용하고 있습니다.

  5. 이흥섭 댓글:

    VLAAH에서도 칩셋은 요긴히[1] 쓰고 있습니다! ㅋㅋ

    [1]: http://dev.vlaah.com/blog/2008/05/15/000005.html

  6. 정찬명 댓글:

    와우~ 대단한걸. 특히 ‘gdLibrary‘ 이건 언젠가는 나도 한번 써먹어 봐야겠다.

    VLAAH의 초록 배경이미지 테마

    이런 이미지가 16색 준비되어 있더군. 그렇다면 VLAAH는 162 개의 테마가 존재하는 거겠네? 256 테마닷. ㅋㅋ.

  7. 이흥섭 댓글:

    256개의 테마가 있는 VLAAH[1]에 놀러오세요! 굽신굽신 ㅜㅜㅜ

    다음 마일스톤에는 유저 임의의 색으로 테마를 생성할 수 있게 하는 것도 포함되어있어요! 그러려면 우선 느린 테마 제네레이터 속도부터 대폭 향상시켜야하는데 ㅠㅠ

    [1]: http://vlaah.com/

  8. 정진희 댓글:

    우와~! 이런 방법이 있는지 처음으로 알았어요!!
    배우고 갑니다 ^^

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님