스킨의 메뉴부분, 태그 수정하는 방법
노트패드 스킨를 비롯한 Neutral 스킨 및 피아노블랙 스킨, 모노크롬 스킨 등을 보면, 상단의 메뉴에 "가로형 메뉴" 이외에도, 가로 메뉴에 마우스가 올라갈때 열리는 "세로형 메뉴"가 있습니다.
그림이 작으니, 실제 태그로 볼까요.
위 코드에서 녹색으로 표시한 <ul>과 </ul> 부분이 없다고 가정해 봅시다.
실제로 이 경우는 "가로 메뉴" Home Menu Guestbook만 출력됩니다. 즉, 녹색으로 표시한 <ul>과 </ul> 부분이 Menu 글자에 마우스를 올리면 열리는 "세로 메뉴"부분(Notice Tag media)인 것입니다.
예를 들어 자신의 블로그 카테고리에 Life라는 이름이 있고, 그 Life를 메뉴에 넣고 싶다면, 태그는 아래와 같겠죠.
위와 같은 태그를 어디에 놓느냐에 따라, 가로 메뉴가 될수도 있고 세로 메뉴에 나타날수도 있습니다.
노트패드 스킨
예를 들어, 위와 같은 메뉴를 보면, Home Menu Guestbook의 가로 메뉴가 있고,
Menu라는 글에 마우스가 올라가면 Notice Tag media라는 세로의 메뉴가 열립니다.
그리고 Notice에 마우스가 올라가면 About Location 이라는 추가의 메뉴가 또 열리구요.
이 부분의 코드는 아래 그림과 같습니다.
<li class="current_home"><a href="/">Home</a></li>
<li class="page_item page-item-2"><a href="/category" title="menu">Menu</a>
<ul> <li class="page_item page-item-38"><a href="/notice" title="notice">Notice</a>
<ul> <li class="page_item page-item-38"><a href="/notice" title="">About</a></li>
<li class="page_item page-item-38"><a href="/location" title="local">Location</a></li> </ul> </li> <li class="page_item page-item-36"><a href="/tag" title="tag">Tag</a></li>
<li class="page_item page-item-40"><a href="/media" title="Media">media</a></li> </ul> </li> <li class="page_item page-item-43"><a href="/guestbook" title="guestbook">Guestbook</a></li>
위 코드에서 녹색으로 표시한 <ul>과 </ul> 부분이 없다고 가정해 봅시다.
그 경우 아래처럼 되겠죠.
<li class="current_home"><a href="/">Home</a></li>
<li class="page_item page-item-2"><a href="/category" title="menu">Menu</a>
</li> <li class="page_item page-item-43"><a href="/guestbook" title="guestbook">Guestbook</a></li>
더 자세히 보시면, 녹색으로 표시한 <ul>과 </ul> 안에 또 다른 <ul>과 </ul> 이 있지요. 그 부분이 Notice 글자에 마우스를 올리면 열리는 About Location 이구요.
<li>를 이용한 메뉴의 기본 태그는 아래와 같습니다.
<li class="page_item"><a href="경로">메뉴명</a></li>
<li class="page_item"><a href="/category/Life">Life</a></li>
가령, 전체 메뉴 태그에서,
<li class="current_home"><a href="/">Home</a></li> 의 바로 아래에
<li class="page_item"><a href="/category/Life">Life</a></li>를 놓으면
Home과 Menu 사이에 보이는 가로형 메뉴가 되고,
녹색의 첫 번째 <ul>바로 아래에
<li class="page_item"><a href="/category/Life">Life</a></li>를 놓으면 Menu라는 단어 위에 마우스가 올라갈때 Life가 보이는 세로형 메뉴가 되는 것입니다.
따라서, 녹색의 두 번째 <ul>바로 아래에
<li class="page_item"><a href="/category/Life">Life</a></li>가 놓인다면,
말씀 안드려도 아시겠죠^^
Trackback Address ::
Filed Under: NOTE Tagged With: 메뉴부분의 태그 수정방법,
좋은정보 감사합니다.
1등!! x
1등에 공책 3권 x
저도 이거 물어보려고 했는데 ㅋㅋ 누가 질문했네요~
덕분에 전 묻어갑니다 ㅎㅎ x
노트패드 말고, 위에 열거한 다른 스킨에 적용해도 됩니다. x
이런 상세한 설명을 해주시다니 완전 감사합니다.^^!! x
도움이 되었으면 합니다. x
관리자 페이지에서 새로운 기능이 있어
주오님 블로그에 오면 있을 것 같아 왔더니 역시 있네요.
잘 보관 해 놓았다 다음에 필요 시 사용해야 겠습니다.
감사합니다. x
메뉴에 관해 새로 생긴, 아래의 치환자 말씀인가요?
<div class="blogMenu">[@@_blog_menu_@@]</div>
(@@는 ##)
음, 저 치환자는 블로그의 메뉴를 기억해 뒀다가 스킨을 바꾸면 그대로 이전 메뉴가 적용되는 치환자인데, css를 잘 이용하면 저 기능이 지원되지 않는 스킨에서도 유익하게 써 먹을 수가 있겠더군요.
예제 css를 만들어 두고 스킨에 따라 약간씩 변형만 하면..^^
.blogMenu {}
.blogMenu ul {list-style:none;}
.blogMenu li {display:inline;}
.blogMenu li a{padding:0 10px;}
.blogMenu li.first a{padding-left:0 !important;}
.blogMenu il.last, .blogMenu il.last a{ background:none; } x