티스토리 반응형웹 스킨 skeleton 의 상단 메뉴바 구성하기

Tip!/티스토리

메뉴바는 뭔가요?


skeleton 은 블러그 상단에 메뉴바를 제공 합니다. 메뉴바는 PC화면 뿐만 아니라, 테블릿 화면, 모바일 화면 어디서든지 표시 됩니다. 뿐만 아니라 블러그의 화면을 위/아래로 움직여도 메뉴바는 항상 따라 옵니다. 메뉴바를 어떻게 구성하는지에 따라서 사용자에게 매우 편리한 UI 를 제공 할 수가 있습니다.


NOTE
글쓴이의 블러그 상단의 메뉴바를 보시면서 웹브라우저의 좌/우폭을 조절해 보시면 이해가 빠릅니다.


기본 메뉴바

skeleton 스킨을 설치하시면 그림과 같이 단출 합니다. 기본적으로는 홈, 전체 카테고리, 방명록, 검색외에는 특별한 기능을 제공하고 있지는 않습니다. 그래서 사용자가 자신의 블러그 환경에 맞추어 글쓴이의 블러그 메뉴바처럼 수정을 하셔야 합니다.


메뉴바 수정은 어디서 하나요?


스킨 수정 페이지

skeleton 스킨의 메뉴바 수정은 skin.html 에서 수정이 가능하고, skin.html 은 자신의 블러그 관리자 페이지에 HTML/CSS 편집 에서 내용을 보실 수 있습니다. skin.html 수정시 간단한 작업은 관리자 페이지에서 바로 하시면 되지만, 수정할 내용이 많을 경우는 ctrl+a - ctrl+c 로 내용을 복사하셔서 EditPlus 같은 HTML 에디터에서 작업을 하시는게 편리 합니다.


잠깐! 티스토리 치환자에 대해서 알아보고 넘어가겠습니다.


치환자 는 티스토리 블러그에서 사용되는 검색, 이동, 표시, 관리자 등 다양한 요소를 포함하고 있는 중요한 부분이며, skin.html 을 구성하는 가장 중요한 항목이기도 합니다.


NOTE
가장 대표적인 것들은 아래와 같고, 좀 더 자세한 내용은 티스토리 스킨 가이드를 참고 바랍니다.

[ ##_blog_link_##] 블로그의 주소(url) - 블로그 주소가 필요한곳에 넣으면 됩니다.
[ ##_title_##] 블로그 제목으로 환경설정-기본설정에 변경가능
[ ##_page_title_##] 현재 보고 있는 글의 제목
[ ##_localog_link_##] 지역로그 페이지 링크(주소)
[ ##_taglog_link_##] 태그로그 페이지 주소
[ ##_notice_rep_title_##] 공지사항 글의 제목
[ ##_article_rep_link_##] 포스트(글)의 주소
[ ##_article_rep_title_##] 포스트 제목
[ ##_article_rep_category_##] 카테고리명
[ ##_article_rep_desc_##] 블로그 글(포스트)
[ ##_image_##] 블로그 이미지
[ ##_desc_##] 블로그 설명글
[ ##_rctps_rep_title_##] 최근글 제목
[ ##_owner_url_##] 관리페이지 링크
[ ##_rss_url_##] rss 피드 주소



메뉴바 구성하기


에디터 또는 관리자 페이지의 HTML/CSS 편집창에서 <ul class="nav navbar-nav"> 를 검색 하세요.


<ul class="nav navbar-nav">
	<li typeof="sioc:Page" about="[##_blog_link_##]category/"><a property="dc:title" href="[##_blog_link_##]category/">category 1</a></li>
	<li typeof="sioc:Page" about="[##_blog_link_##]category/"><a property="dc:title" href="[##_blog_link_##]category/">category 2</a></li>
	<li typeof="sioc:Page" about="[##_guestbook_link_##]"><a property="dc:title" href="[##_guestbook_link_##]">GuestBook</a></li>
	<li>
	<s_sidebar_element>
	<s_search>
	<!-- Search -->
	<form class="navbar-form">
	<input role="search" type="text" class="form-control" placeholder="Search" name="[##_search_name_##]" value="[##_search_text_##]" onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }">
	</form>
	</s_search>
	</s_sidebar_element>
	</li>
</ul>

skeleton 스킨을 처음 적용시 메뉴바의 구성 입니다. HTML 이 생소하신 분들께서는 뭐가 뭔진 잘 모르실 겁니다. 글쓴이도 처음에는 마찬가지 였구요. ㅜㅜ 그렇다고 겁먹지는 마세요~ 한번만 알고나면 매우 간단 합니다. ^^


<li typeof="sioc:Page" about="[##_blog_link_##]category/"><a property="dc:title" href="[##_blog_link_##]category/">category 1</a></li>

제일 핵심적인 내용의 코드 입니다. 내용을 보시면 [##_blog_link_##]category/ 가 두번에 category 1 이 한번 있는데, [##_blog_link_##]category/ 는 위에서 설명드린 티스토리의 치환자 입니다. 풀어서 쓰면 http://블러그 주소/category 이고 해당 주소로 이동 하라는 뜻 입니다. 글쓴이의 블러그에 적용하면 http://jaebok.tistory.com/category 즉 카테고리 전체의 글을 보는 페이지로 이동 하라는 뜻이 됩니다. 그리고 category 1 은 메뉴바에 표시되는 문자 입니다.


응용해서 간단하게 수정을 해보겠습니다.


<li typeof="sioc:Page" about="[##_blog_link_##]category/리뷰~"><a property="dc:title" href="[##_blog_link_##]category/리뷰~">리뷰~</a></li>

리뷰 메뉴바

글쓴이의 블러그를 기준으로 리뷰~ 에 해당하는 카테고리의 전체글 보기로 수정을 해보니 스크린샷에서 보시는 것처럼 수정이 된것을 확인 가능 합니다. 마지막의 리뷰~ 문구는 블러그 화면에 표시되는 것이기에 자신이 원하는데로 수정하시면 됩니다. 이 부분을 동일한 방법으로 자신의 블러그에 맞추어서 수정 하시고 저장을 하시면 됩니다. 참~ 쉽죠! ^^

이번에는 새로운 것을 추가해 보겠습니다. 여기서 중요한 것은 <li ~ </li> 가 하나의 문단 입니다. <li ~ </li> 를 복사하셔서 다음줄에 삽입 합니다. 티스토리에 메뉴바의 구성에 보면 태그로그와 미디어로그가 있는데, skeleton 스킨에는 없죠! 위에서 설명드린 티스토리 치환자를 활용해서 만들어 보면...


<li typeof="sioc:Page" about="[##_blog_link_##]location"><a property="dc:title" href="[##_blog_link_##]location">위치로그</a></li>

이 위치로그가 되고,


<li typeof="sioc:Page" about="[##_blog_link_##]media"><a property="dc:title" href="[##_blog_link_##]media">미디어</a></li>

가 미디어로그가 됩니다. 만들기 귀찮으신분들은 코드를 복사하셔서 적절한 위치에 붙여넣기 하고, 문구만 자신이 원하는데로 수정 하시면 됩니다.


NOTE
<li ~ </li> 의 순서를 위아래 변경하시면 메뉴바의 순서도 동일하게 변경 됩니다.



이번에는 관리자와 글쓰기를 만들어 보겠습니다. 마찬가지로 <li ~ </li> 를 복사 하신후에 적절한 위치에 붙여넣기 하시고 위에서 설명드린 티스토리 치환자를 활용해서 만들어 보면...


<li class="tab_admin"><a href="[##_owner_url_##]">관리자</a></li>
<li class="tab_write"><a href="[##_owner_url_##]/entry/post">글쓰기</a></li>

가 됩니다. 물론 [##_blog_link_##]admin/ , [##_blog_link_##]admin/entry/post/ 으로 동일 합니다.


메뉴바 구성 완료

위의 내용들을 토대로 글쓴이의 블러그에 반영을 해봤습니다. 어떤가요? 다들 잘되시나요? 이렇게 자신의 블러그 환경에 맞는 메뉴바를 구성하면 블러그 이용이 보다 편리해집니다. ^^


NOTE
메뉴바를 너무 길게 만드시면 해상도 변경에 따른 블러그 타이틀이 짤리는 경우가 있습니다.



Dropdown 메뉴바 구성은 어떻게 하나요?


드롭다운 메뉴

"저는 메뉴바에 이것도 넣고 저것도 넣고~ 다양하게 넣고 싶은데요..." 이럴때 활용하시면 좋은게 드롭다운 메뉴 입니다. 그림과 같이 드롭다운 메뉴 를 활용해서 카테고리 드롭다운 메뉴를 만들고 아래에 인기 카테고리를 넣어서 만들어 봤습니다. 어떤가요? 메뉴바에 드롭다운 메뉴 를 활용하니 좀 더 다양하게 메뉴바를 구성할 수 있었습니다.


<li class="dropdown">
	<a href="#" class="dropdown-toggle" data-toggle="dropdown">카테고리<b class="caret"></b></a>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
	<li typeof="sioc:Page" about="[##_blog_link_##]category/"><a property="dc:title" href="[##_blog_link_##]category/">전체보기~</a></li>
	<li class="divider"></li>
	<li typeof="sioc:Page" about="[##_blog_link_##]category/오늘은%20뭐%20먹을래%3F"><a property="dc:title" href="[##_blog_link_##]category/오늘은%20뭐%20먹을래%3F">오늘은 뭐 먹을래?</a></li>
</li>

기본적인 드롭다운 메뉴의 구성 입니다. 첫줄의 <li class="dropdown"> 로 시작해서 마지막 줄의 </li> 로 구성되며, 두번째 줄과 세번째줄은 메뉴바에 표시되는 문자와 드롭다운 메뉴 를 마우스로 클릭시 활성화 되는 부분 입니다. 자신이 원하는 항목은 세번째 줄과 마지막 </li> 사이에 순서데로 넣으시면 됩니다.


<li class="dropdown">
	<a href="#" class="dropdown-toggle" data-toggle="dropdown">카테고리<b class="caret"></b></a>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
	<li typeof="sioc:Page" about="[##_blog_link_##]category/"><a property="dc:title" href="[##_blog_link_##]category/">전체보기~</a></li>
	<li class="divider"></li>
	<li typeof="sioc:Page" about="[##_blog_link_##]category/오늘은%20뭐%20먹을래%3F"><a property="dc:title" href="[##_blog_link_##]category/오늘은%20뭐%20먹을래%3F">오늘은 뭐 먹을래?</a></li>
	<li class="divider"></li>
	<li typeof="sioc:Page" about="[##_blog_link_##]category/지름~"><a property="dc:title" href="[##_blog_link_##]category/지름~">지름~</a></li>
	<li typeof="sioc:Page" about="[##_blog_link_##]category/리뷰~"><a property="dc:title" href="[##_blog_link_##]category/리뷰~">리뷰~</a></li>
	<li typeof="sioc:Page" about="[##_blog_link_##]category/Tip!"><a property="dc:title" href="[##_blog_link_##]category/Tip!">Tip!</a></li>
	<li class="divider"></li>
	<li typeof="sioc:Page" about="[##_blog_link_##]category/이벤트"><a property="dc:title" href="[##_blog_link_##]category/이벤트">이벤트</a></li>
	</ul>
</li>

글쓴이의 블러그 카테고리 항목의 메뉴바 구성 입니다. 쉽게 이해가 가시죠? ^^ 그런데, 코드를 살펴보면 <li class="divider"></li> 라고 못보던 항목이 있습니다. 바로 드롭다운 메뉴 의 구분선 입니다. 필요한 곳에 적절히 배치를 해주시면 좋습니다.



마무리


오늘은 skeleton 스킨의 메뉴바를 구성하고 한번 만들어 봤습니다. 생각만큼 어렵지는 않으시죠? 처음에는 html 코드를 수정하는게 어렵고, 낯설게 느껴지겠지만 몇번 하다보면 도사(?)가 되어 있는 자신의 모습을 보실 수 있을 겁니다. ^^


다음편에는 메뉴바에 다음뷰 구독, 티스토리 링크 추가, 페이스북, 트위터 페이지 추가 및 포스트 공유기능, 팔로워에 대해서 알아 보도록 하겠습니다. 궁금하신 점은 댓글 남겨 주시면 답변 드리겠습니다. ^^



글쓴이의 다른 포스트 보기