티스토리 블로그 메뉴설정부분 살펴보기

demun
티스토리스킨수정/메인메뉴
2010. 11. 14. 12:55

이번에 스킨을 만들면서 새로 추가된 메뉴설정 부분이 있어서 살펴보았습니다.
이전에는 div 를 하나 만들고 그 아래 li 나 a 링크로 만들고 클래스나 아이디를 줘서 왼쪽으로 float 를 주어서 사용했었습니다.
이미지를 사용할경우에는 하나의 이미지에 background-position 를 사용해서 만들었었지요.
하지만 이번에 티스토리 스킨에서 추가되어서 약간 변경된 부분이 있더군요.
제가 처음에 만들었던 html 코드는 아래와 같습니다.
home 같은 클릭하면 처음으로 돌아가는것과 지역로그,태그 등 필요없는 것은 삭제하고 만들지 않았죠.
하지만 이번에 변경된것은 블로그 메뉴 치환자 하나면 넣으면 티스토리에서 자동으로 코드를 변환해주죠.
그 변환한 코드를 css 로 설정을 해줘야 합니다.
그러니 변환된 html 코드에 맞쳐 css 부분도 설정을 해줘야 합니다.

<div id="menu">
	<a href="[#\#_guestbook_link_##]" title="방명록" class="m_guest png">
		<span>Guest Book</span>
	</a>
	<a href="[#\#_blog_link_##]notice" title="공지" class="m_notice png">
		<span>Notice</span>
	</a>
	<a href="[#\#_owner_url_##]" title="관리자" class="m_admin png">
		<span>Admin</span>
	</a>
	<a href="[#\#_owner_url_##]/entry/post" title="글쓰기" class="m_write png">
		<span>Write</span>
	</a>
</div>
<!-- 
위의 코드가 아래처럼 간단하게 변경이 되었습니다. 
즉 [#\#_blog_menu_##] 이 들어가면 자동으로 ul li 같은 리스트 항목이 생성됩니다.
-->
<div id="blogMenu">[#\#_blog_menu_##]</div>
<!-- 
치환자 하나로 모든것이 끝나버렸습니다. 간단하죠^^
이렇게 치환자를 넣으면 치환자를 변환해서 아래처럼 보여줍니다.
-->
<div id="blogMenu">
	<ul>
		<li class="t_menu_home first">
			<a href="/">home</a>
		</li>
		<li class="t_menu_tag">
			<a href="/tag">tag</a>
		</li>
		<li class="t_menu_medialog">
			<a href="/media">media log</a>
		</li>
		<li class="t_menu_location">
			<a href="/location">location log</a>
		</li>
		<li class="t_menu_guestbook">
			<a href="/guestbook">guestbook</a>
		</li>
		<li class="t_menu_admin">
			<a href="/admin">admin</a>
		</li>
		<li class="t_menu_write last">
			<a href="/gateway/entry/post">write</a>
		</li>
	</ul>
</div>

이미지를 넣지 않을경우는 간단한데 넣을경우는 좀 더 복잡합니다.
어떻게 변경되었는지 한번 볼까요. 이전에 css 코드는 아래와 같았습니다.

#menu{padding:0;margin:0;}
#menu a{
	font:13px/18px verdana;
	color:#fff;
	display:block;
	float:left;
	background:url(./images/button.png) no-repeat;
	height:35px;
	width:125px;
}
#menu a:hover{text-decoration:none;}
#menu a.m_guest{background-position:-8px -5px;padding:10px 0 0 25px; width:100px;}
#menu a.m_notice{background-position:-8px -5px;padding:10px 0 0 40px; width:85px;}
#menu a.m_admin{background-position:-8px -5px;padding:10px 0 0 40px; width:85px;}
#menu a.m_write{background-position:-8px -5px;padding:10px 0 0 45px; width:80px;}
#menu a.m_guest:hover{background-position:-8px -56px;}
#menu a.m_notice:hover{background-position:-8px -56px;}
#menu a.m_admin:hover{background-position:-8px -56px;}
#menu a.m_write:hover{background-position:-8px -56px;}
body#tt-body-guestbook #menu a.m_guest{
	background-position:-8px -105px;
	padding:10px 0 0 25px;
	width:100px;
}
body#tt-body-notice #menu a.m_notice{background-position:-8px -105px;}

하나의 이미지를 넣고 배경을 background-position 으로 자리를 잡아준것이죠.
물론 html 에서 필요없는 코드는 뺏깃때문에 css 에서도 설정할 필요가 없지요. 하지만 이번에 변경된것은 내가 보여주고 싶은 부분은 보여주고 빼고 싶은 부분은 빼야만 했습니다.
그래서 기존의 css 코드를 아래처럼 변경을 해줘야 했습니다.
한가지 더 기존의 메뉴에 있던 공지사항이 치환자부분에서는 지원하지 않습니다. 그래서 그 부분은 아래글에서는 뺏습니다.

#blogMenu { width: 400px; }
#blogMenu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}
#blogMenu ul li {
	float: left;
	font: 13px/18px verdana, sans-serif;
	background: url('./images/button.png') no-repeat;
	height:35px;
	width:125px;
}
#blogMenu ul li a {
	color: #fff;
}
#blogMenu ul li a:hover { text-decoration:none; }

/* 여기까지는 기본사항 아래는 필요없는 부분 안보이게 하기 */
#blogMenu ul li.t_menu_home, 
#blogMenu ul li.t_menu_tag, 
#blogMenu ul li.t_menu_medialog, 
#blogMenu ul li.t_menu_medialog, 
#blogMenu ul li.t_menu_location{
	display:none;
}

/* 아래는 배경 포지션 정하기 */
#blogMenu ul li.t_menu_guestbook{
	background-position:-8px -5px;
	padding:10px 0 0 45px; 
	width:80px;
}
#blogMenu ul li.t_menu_admin{
	background-position:-8px -5px;
	padding:10px 0 0 40px; 
	width:85px;
}
#blogMenu ul li.t_menu_write{
	background-position:-8px -5px;
	padding:10px 0 0 45px; 
	width:80px;
}

/* 아래는 마우스가 올라갔을때 hover 부분설정 */
#blogMenu ul li.t_menu_guestbook:hover{
	background-position:-8px -56px;
}
#blogMenu ul li.t_menu_admin:hover{
	background-position:-8px -56px;
}
#blogMenu ul li.t_menu_write:hover{
	background-position:-8px -56px;
}

/* 아래는 메뉴가 선택되어서 있을경우 설정 */
body#tt-body-guestbook #blogMenu ul li.t_menu_guestbook{
	background-position:-8px -105px;
	padding:10px 0 0 45px;
	width:80px;
}

티스토리에서 스킨설정에서 메뉴부분을 지원하지 않으면 지원하는 스킨으로 변경을 해야만 합니다.

하지만 이렇게 변경을 하면 아래처럼 지원하는 메뉴가 뜨지요.

맨처을 수정을 하면 관리자와 글쓰기는 자동으로 생성되지 않습니다.
하지만 위에서 미리 css 부분을 설정을 해놨기때문에 메뉴설정에서 추가적으로 만들어주기만 하면 됩니다.
다음에는 좀더 완전하게 수정하는 법을 알려드리겠습니다.
관리자와 글쓰기 부분을 만들고 공지사항을 이전처럼 메뉴자리에서 같이 보여지게끔 수정해보겠습니다.

참고

메뉴설정 2편 보러가기
이미지 처리하는 방법(확장자)
이미지 처리하는 방법(배경색을 입히고 이미지 그리기)
이미지 처리하는 방법(Image Replacement , Image Sprite)

개 개

demun(대문블로그)

티스토리 블로그 메뉴설정부분 살펴보기

참고

티스토리툴바