블로그2010.06.24 09:00
블로그를 처음 하시는 분이나, 현재 블로그를 하시는 분들에게는 스킨을 다른 사람과 다르게 자신만의 개성으로 꾸미고 싶으신 분들이 많죠. 블로그 꾸미기 중 하나인 탭 메뉴를 꾸미는 방법을 알려드릴려고 합니다 ^^

사실, 검색만 해도 블로그 탭메뉴 꾸미는 방법은 참 많습니다.

제가 오늘 탭메뉴 꾸미는 방법은 이미지 하나로 탭 메뉴를 꾸미는 방법을 알려드릴려고 합니다.

사실 제가 티스토리를 사용하기 때문에 이 포스팅은 티스토리 기준으로 설명드리겠습니다.
티스토리가 아닌 다른 블로그를 사용하시는 분들은 댓글 또는 방명록에 남겨주시면 꾸미는 방법을 설명드릴게요 ^^;;;

일단, 제가 준비한 이미지는 파일 하나로 탭을 꾸미는 방법이기 때문에 이미지 파일은 하나입니다!!!


■ 티스토리 스킨에 맞는 이미지 만들기

스킨 편집 또는 이미지 편집에 어려움을 느끼시는 분들은 현재 자신의 블로그에 적용되어있는 탭 메뉴 이미지 사이즈 그대로 적용을 하시는 것이 가장 쉬운 방법이겠죠 ^^



자신의 스킨에 사용 중인 이미지를 찾는 방법은 티스토리를 기준으로 볼 경우 스킨 편집의 파일 업로드 탭에서 탭 이미지를 찾으신 후에 오른쪽 마우스 클릭을 하게 되면 다른 이름으로 그림 저장을 할 수 있습니다.
이렇게 하나하나 탭 이미지를 저장하게 되면 각 탭의 사이즈를 알 수 있죠 ^^

■ 자신의 스킨에 맞게 css 수정하기


자신의 스킨에 맞게 이미지를 만드셨다면 이제는 css 수정을 해야겠죠 ^^
일단 기본적은 자신의 css 를 확인하시면 됩니다.!!!
아마 티스토리의 경우 css 는 같지 않을까 생각이 드네요~

아래 css를 보시게 되면 background-position의 숫자들이 모두 틀린것을 보실 수 있습니다.
그 이유는 하나의 이미지로 해당 메뉴의 위치값이 다르기 때문입니다^^

- 기본 백그라운드 이미지 설정
#blogMenu a {
    background:url(images/탭이미지) no-repeat;
}

- 기본 이미지

.tab_home a {
    width:60px;
    background-position:0 0
}
.tab_tag a {
    width:45px;
    background-position:-62px 0
}
.tab_media a {
    width:74px;
    background-position:-107px 0
}
.tab_location a {
    width:87px;
    background-position:-183px 0
}
.tab_guestbook a {
    width:67px;
    background-position:-270px 0
}
.tab_admin a {
    width:58px;
    margin-left:28px;
    background-position:-337px 0
}
.tab_write a {
    width:48px;
    margin-left:28px;
    background-position:-393px 0
}

- 현재 카테고리의 이미지 (ex) 체크된 v home 이미지
#tt-body-page .tab_home a, .tab_home a:hover{
    background-position:0 -50px
}
#tt-body-tag .tab_tag a, .tab_tag a:hover {
    background-position:-62px -50px
}
#tt-body-media .tab_media a, .tab_media a:hover {
    background-position:-107px -50px
}
#tt-body-location .tab_location a, .tab_location a:hover {
    background-position:-183px -50px
}
#tt-body-guestbook .tab_guestbook a, .tab_guestbook a:hover {
    background-position:-270px -50px
}
#tt-body-guestbook .tab_admin a, .tab_admin a:hover {
   background-position:-337px -50px
}
#tt-body-guestbook .tab_write a, .tab_write a:hover {
    background-position:-393px -50px
}

background-position은 각 이미지의 위치값이라고 생각하시면 됩니다.
(background-position:0 0 : 이미지 좌측 상단이 기준이 되며, 첫번째 숫자는 좌측, 두번째 숫자는 위에서 떨어진 값을 시작점으로 설정하는 것입니다. 예를 들어 background-position:0 -62px; 인 경우엔 좌측에서는 0, 좌측에서는 62 떨어진 지점을 시작점으로 선택하기 위해 숫자 앞에 마이너스( - ) 가 붙게 됩니다.)

제가 사용중인 스킨은 마우스가 오버되었을 경우엔 이미지에 아무 변화가 없습니다.
마우스 오버가 되었을 경우에도 이미지가 변경되는것을 원하신다면 위의 코드에서 빨간색의 코드를 추가하시면 됩니다.

■ 이미지 하나로 만들어진 탭메뉴



위의 이미지에 마우스를 움직여보시면 마우스가 해당 메뉴에 위치했을때 색상이 변경되는 것을 확인 할 수 있습니다.
실제로 블로그에 적용했을 경우엔 현재 카테고리도 마우스 오버 이미지와 같은 이미지로 변경 되는것을 확인 할 수 있습니다.

 제가 아직 설명을 자세히 할 수 있는 능력(?)이 되지 않아 읽어보시고 이해가 되지 않으실 것 같네요;
궁금하신 사항은 언제나 댓글 또는 블로그에 남겨주세요~
제가 아는 html/css 에 대해서는 자세히 알려드리도록 노력하겠습니다 ^^;;

저작자 표시 비영리 변경 금지
신고
Posted by 별군

댓글을 달아 주세요

  1. 메뉴항목을 꾸미는데 관심있으신 분들에게 좋은정보가 될것 같네요^^
    잘보구 갑니당~!

    2010.06.25 09:11 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 감사합니다^^
      그런데 머니야님;;; 왜 "머니ㅑ" 로 보일까요;;
      제 블로그가 이상한건지;;ㅎ 다른분으로 착각할뻔했어요

      2010.06.25 09:57 신고 [ ADDR : EDIT/ DEL ]
  2. 앗!! 제가 딱 찾던 강좌가 여기있었네요^^ 근데 저같은 일반인?은 어렵네요;; 차근히 공부해봐야 겟습니다^^

    2010.07.20 20:32 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 헉;; 스킨 바꾸면서 기존에 올렸던 이미지들이 사라졌네요 ㅠㅠ
      궁금하신것은 언제나 물어봐주세요^^

      2010.07.20 20:37 신고 [ ADDR : EDIT/ DEL ]


티스토리 툴바