Feed 피드

Job Coding Feed

티스토리 반응형 스킨 FastBoot v1.3 - 상단 메뉴바 수정하기

imageUrl:http://cfile24.uf.tistory.com/image/2304D53C531EC48E290F40






관련 글


이번 글에서는 상단 메뉴바를 수정하는 사항에 대해서 살펴볼건데요. 그전에 3월 10일 패치가 있었는데 그 부분 부터 알아보고, 상단 메뉴바 수정 관련 사항들에 대해서 알아 보는 시간을 갖도록 하겠습니다.


이 글을 읽기전에 앞서서, 티스토리 반응형 스킨인 FastBoot v1.3을 적용하고자 하는 분들은 위의 연재물을 먼저 살펴 보시고 진행하시길 권장 합니다.


또한 FastBoot v.13을 커스터마이징 사용자화 하기 위해서는 아래의 준비물들이 필요하므로 미리 준비 해 두시길 바랍니다.


준비물

  • FastBoot v1.3 스킨 | 다운로드
  • 기존에 사용하던 티스토리 스킨 다운로드(관리자 > 스킨 > 스킨 다운로드)
  • 텍스트 에디터인 SublimeText | 다운로드
  • 구글의 크롬 브라우저 | 다운드드




Readiz님 블로그에서 새로운 패치 내용을 확인 해 주세요!




블로거머니라는 커뮤니티 공간에서 회원 한분이, 제 블로그가 IE 8에서는 열리지가 않고, 브라우저가 먹통되는 현상이 발생 했다고 해서, Readiz님에게 피드백을 넣어서 해결을 했습니다.


자세한 패치적용 방법은 아래의 Readiz님 포스트 내용을 참조 하시기 바랍니다.

임시패치 FastBoot v1.3 IE8 동작 개선


기존에 다운받은 FastBoot v1.3 스킨에서 skin.html 파일을 열어서 </head>부분까지를 변경하고, Readiz님이 첨부한 파일 ie.min.css / ie.navbar.css 파일 두개를 업로드 하거나, images 폴더에 추가 해주시면 됩니다.




티스토리 반응형 스킨 FastBoot v1.3 상단 메뉴바 구성요소 살펴보기!


패스트부트 스킨을 다운로드하고, 바로 티스토리에 업로드 하기전에 서브라임 텍스트와 같은 텍스트 에디터로 수정 및 추가할 사항들을 사전에 마무리 해놓고 업로드 하는 것을 권장 합니다.



다운받은 패스트부트 스킨 폴더에서 skin.html을 크롬 브라우저로 실행 해 봤습니다. 패스트부트 스킨에서 사용되는 드롭다운 메뉴바는 '관리자 메뉴' 와 '글쓰기'가 링크되어 있는 블로그 이름 클릭했을 때 드롭되는 메뉴만 있는 상태 입니다.



이전 포스트에서도 말씀드렸듯이, FastBoot 반응형 스킨은 부트스트랩(Bootstrap)을 기반으로 만들어졌기 때문에, 부트스트랩 홈페이지에서 제공하는 드롭다운 메뉴 소스를 그대로 긁어와서 적용하면 상단 메뉴바에 드롭다운 메뉴를 추가할 수 있습니다.




부트스트랩 드롭다운(한글) | 부트스트랩 드롭다운(원문)


그럼 바로 드롭다운 메뉴를 만들어 보겠습니다. 우선 서브라임 텍스트를 실행 하시고, 다운받은 스킨이 있는 폴더를 '드래그앤드롭'으로 서브라임 텍스트 사이드바에 추가 해 주세요! 서브라임 텍스트의 사이드바가 보이지 않을 경우에는 상단 메뉴 'view' 항목에서 보이게끔 할 수 있습니다.



서브라임 텍스트에서 검색 기능(ctrl+f)을 활성화 해서 '네비게이션' 항목을 검색해서 네비게이션이 시작되는 곳을 찾아 주세요!


 <!--F 상단 네비게이션 바 시작 -->
 <nav><div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>





위에 내용까지는 건드릴 필요가 없습니다. 수정하게 될 사항들은 이 아래에 있는 요소들이며, 위의 소스 코드는 웹 브라우저의 크기가 모바일 기기에 적합한 크기만큼 줄어들었을 때 활성화되는 메뉴 바 관련 코드들 입니다.


<a class="navbar-brand dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-book"></i>  <span class="fa fa-caret-down"></span></a>
<ul id="navbar-title-dropdown" class="dropdown-menu">
<li><a href="">
<i class="fa fa-gear fa-fw"></i> Admin</a></li>
<li><a href="/entry/post" title="글쓰기"><i class="fa fa-pencil fa-fw"></i> Write Post</a></li>
</ul>
</div>



이 위에 있는 항목은 상단 메뉴바 좌측에 블로그 이름과 관리자메뉴, 글쓰기 드롭다운 메뉴가 있는 곳 입니다. 이 항목을 수정 하지 않으실 분들은 그냥 놔둬도 되고, 수정하실 분들은 조금 이따가 공개하는 제가 수정한 소스 코드로 대체 하셔도 됩니다.


<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li id="navbar-page"><a href="/"><i class="fa fa-home fa-fw"></i> Home</a></li>
<li id="navbar-tag"><a href="/tag"><i class="fa fa-tags fa-fw"></i> Tag</a></li>
<li id="navbar-guestbook"><a href="/guestbook"><i class="fa fa-book fa-fw"></i> Guestbook</a></li>



위의 태그 소스가 주로 수정하게 될 코드들인데요. 영어로 되어있고 html 태그에서 사용되는 문자들이 있어서 어지러우신가요? 이러한 요소들을 볼 때 가장 중요한 것은 패턴을 찾는 것이 가장 중요 합니다.

<div>라는 큰 요소안에 <ul>이라는 순서없는 목록 리스트를 만드는 태그가 사용되었고, 그 안에 <li> 로 각각의 리스트로 만들어져 있습니다.


<!--F 필요한 티스토리 추가 메뉴가 있으시면 주석에서 꺼내 쓰세요
<li id="navbar-media"><a href="/media"><i class="fa fa-video-camera fa-fw"></i> 미디어</a></li>
<li id="navbar-location"><a href="/location">위치로그</a></li>
<li id="navbar-rss"><a href="" onclick="window.open(this.href); return false" title=" 구독하기"><i class="fa fa-rss fa-fw"></i> RSS</a></li>-->
</ul>


위의 요소는 스킨 제작자이신 'Readiz'님의 배려로 감춰진 메뉴항목들 입니다. <!-- 주석 -->으로 감싸서 주석안에 태그들을 위치시켜서 HTML 태그로 인식을 하지 않아 실제 블로그 화면에서는 보이지 않게 되는건데요.



사용하고싶은 메뉴를 <li>...</li> 까지 복사 또는 잘라내기 한 다음에 적용하고자 하는 위치에 붙혀넣기 해 주시면 되겠습니다.


			<!--F 검색 모듈 -->
			<s_search>
			<form id="search_fix" class="navbar-form navbar-left" role="search">
				<div class="input-group form-search">
					<input type="text" name="" value="" onkeypress="if (event.keyCode == 13) {  }" class="form-control search-query" placeholder="Enter to search..."/>
					<span class="input-group-btn">
						<button value="검색" class="btn btn-inverse" onclick="" class="submit"><i class="fa fa-search fa-lg" data-type="last"></i></button>
					</span>
				</div>
			</form>
			</s_search>
          </div>
      </div>
    </div></nav>
    <!--F 상단 네비게이션 바 끝 -->


위의 코드 소스는 검색창이 있는 태그와, 상단 네비게이션 레이아웃이 끝나는 태그들로 구성되어 있습니다. 상단 메뉴바에 기본구성 요소가 아닌 추가로 메뉴들을 구성하게 되면, 브라우저의 크기가 줄어들었을 때, 즉 992픽셀이 되었을 때 검색창이 상단 메뉴바에서 밑으로 내려오는 현상이 발생할 수 있습니다.

이 문제는 상단 메뉴바 영역을 차지하는 요소가 많아지면 어쩔 수 없이 발생하는건데요. 하지만 굳이 누가 PC 화면에서 모바일 기기에서처럼 화면을 줄여서 보겠습니까?????? 만 해결 방법이 있습니다.

<s_search>를 찾아 주세요! 찾으셧나요? 그러면 부트스트랩에서 제공하는 아래의 표를 잠깐 살펴 보시죠! 특정 크기에서는 검색창이 사라지게 하는 클래스명을 추가 해 주는 건데요. 992픽셀은 아이패드 2를 세로모드로 웹 페이지를 볼 때의 크기 입니다.





부트스트랩(한글) 반응형 유틸리티


<s_search class="hidden-sm"> hidden-sm을 추가하게 되면 992픽셀 이하 768픽셀 이상에서는 보이지 않게 됩니다. 아이패드 2 기준 세로모드일때만 안보이는거고, 가로모드나 다른 사이즈의 기기에서는 잘 보이니 걱정하지 않아도 됩니다.


그래도 모든 브라우저의 크기에서 검색창이 노출되도록 하고 싶다면??? 상단 메뉴바의 레이아웃을 헤치지 않고서 하는 방법은, 사이드바 요소, 드롭다운 메뉴 요소 들에 <s_search>...</s_search> 항목을 추가 해 주고, 768픽셀 이상 992픽셀 이하에서만 보이도록 클래스 명을 지정 해 주면 될 것 같습니다.


클래스명은 class="visible-sm" 으로 사용이 가능 합니다. 아래 캡처 이미지에서는 사이드바 모듈에 검색창을 추가 해 주고, 해당 모듈에 visible-sm 클래스명을 부여해서 992픽셀 이하가 되면 사이드바 모듈 영역에서 검색창이 보여지도록 했습니다.



어떻게 여기까지는 이해가 되셨는지 모르겠네요. 말이 많아지면 더 혼란을 야기시킬수도 있는데... 부연설명을 계속 달다보니 말만 많아진 격이 되어 버렸습니다 ㅜㅜ;




FastBoot v1.3 상단 메뉴바에 드롭다운 메뉴 만들기!


드롭다운 메뉴를 만들기에 앞서서 준비물을 하나 더 준비해야 합니다. 그것은 다름아닌 'FontAwesome' 인데요. FastBoot 스킨에서는 각종 아이콘들을 폰트어썸에서 제공하는 클래스명으로 사용을 하고 있습니다. 메뉴의 이름 앞에 아이콘을 추가하고 싶다면 폰트어썸 홈페이지를 참조 하시면 됩니다.



위의 예제는 부트스트랩 한국어 페이지에서 '콤포넌트 > 드롭다운' 에 있는 일부 내용을 캡처 해 봤습니다. 지금부터 만들게 될 드롭다운 메뉴는 위의 부트스트랩 예제 코드를 수정해서 만들 예정 입니다.

드롭다운이 시작되는 요소에 class="dropdown" 클래스 치환자를 입력해서 드롭다운이 시작 됨을 알려 주세요!


<li class="dropdown">


그리고 클릭했을 때 드롭다운이 펼쳐지도록 링크를 걸 항목을 만들어 줍니다. class="dropdown-toggle" 드롭다운이 펼쳐지는 링크를 걸 항목에 클래스명을 가진 선택자를 추가 해 주세요!id="dropdownMenu1" ID 선택자는 없어도 드롭다운이 작동하는데 있어서 크게 상관이 없는 것 같습니다. 그래도 예제에 있는 것이니 추가 해봤습니다. data-toggle="dropdown" 그리고 마지막으로 데이타-토글에 드롭다운 선택자를 입력 해주면 됩니다.


<a href="#" class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"><i class="fa fa-folder-open"></i> Category <b class="caret"></b></a>


이제는 마지막으로 드롭다운 메뉴가 있는 요소들을 감싸고 있는 항목에 클래스 선택자를 입력해 주는 것으로 완료가 됩니다.

보통은 드롭다운 메뉴를 만들때 리스트 목록 태그로 만들게 되는데요. 사용되는 태그는 <ul> 이고 그 안에class="dropdown-menu" 이 클래스 선택자를 추가 해주는 것으로 드롭다운 메뉴를 사용할 수 있습니다. role="menu" aria-labelledby="dropdownMenu1" 이 두가지 요소또한 없어도 드롭다운이 동작하는데 문제가 없긴 하지만, 예제에 있는 거라서 포함을 시켜 봤습니다.


<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">


저처럼 상세하게 해당 선택자들과 요소들의 역할을 모르더라도 드롭다운 메뉴를 구성하는데 있어서는 전혀 문제될게 없으므로, 이 글을 보는 초보자 분들도 한번 따라 해 보시길 바랍니다.


목록 리스트를 만드는 <ul>태그로 드롭다운 메뉴를 만들거기 때문에, 이제는 <li><a href="menu01">Menu01</a></li> 이런식으로 드롭다운에 추가할 메뉴 링크를 추가 해서 드롭다운 메뉴를 구성할 수 있습니다.


그리고 마지막으로 </ul></li> 를 추가해서 사용된 태그들을 닫아주는 것으로 마무리 할 수 있습니다.



현재 제 블로그에서는 위의 캡처 이미지에서처럼 총 3개의 드롭다운 메뉴를 사용하고 있는데요. 해당 드롭다운의 소스 코드를 아래에 공개 하겠습니다.


<li class="dropdown">
<a href="#" class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"><i class="fa fa-list-alt"></i> Menu <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li><a href="/"><i class="fa fa-home"></i> Home</a></li>
<li class="divider"></li>
<li><a href=""><i class="fa fa-tags"></i> Tag Log</a></li>
<li><a href="media"><i class="fa fa-camera"></i> Media Log</a></li>
<li class="divider"></li>
<li><a href="notice/176"><i class="fa fa-info-circle fa-fw"></i> About me</a></li>
<li><a href=""><i class="fa fa-book fa-fw"></i> Guest Book</a></li>
<li class="divider"></li>
<li><a href=""><i class="fa fa-gear fa-fw"></i> Admin</a></li>
<li><a href="/entry/post" title="글쓰기"><i class="fa fa-pencil fa-fw"></i> Write Post</a></li>
</ul>
</li>


위의 소스 코드를 보면 다루지 않은 요소들도 있는데요. 하나는 드롭다운 내에 밑줄을 그어서 다른 링크 항목과 분류하는 용도로 사용하는거고, 또 다른 하나는 링크된 메뉴 앞에 '폰트어썸'의 아이콘을 삽입한 요소 입니다.



<li class="divider'></li> 는 밑줄 입니다.

<i class="fa fa-tags"></i> 는 폰트어썸 아이콘 입니다.


폰트어썸 아이콘 사용 방법은 <i></i> 태그 안에 폰트어썸에서 제공하는 아이콘 클래스 선택자를 입력해주는 것으로 사용이 가능 합니다.



폰트어썸 4.0 부터는 아이콘 이름 앞에 fa를 하나 더 붙힌 상태에서 띄어쓰기 후 아이콘 이름을 입력해서 사용해야 하는 점이 3.0 버전과는 다른 차이점 입니다.


예) <i class="fa fa-bell> 종 아이콘 그리고 위의 폰트어썸 아이콘 목록 페이지에서 사용할 아이콘을 클릭하면 사용방법이 상세하게 기록되어 있으니 참고 하시면 이용하는데 어려움이 없을 것 같습니다.



아이콘의 크기는 폰트 크기에 영향을 받습니다. 폰트 크기의 영향을 받지않고 개별적으로 크기를 키우고 싶다면, <i class="fa fa-bell fa-lg,2x,3x,4x,5x> 이런식으로 폰트크기에 영향을 받지 않고 개별적인 크기를 조절할 수 있습니다.




부트스트랩(Bootstrap) 드롭다운 메뉴 만들기 실습!


위에서 드롭다운 메뉴를 만드는 방법에 대해서 알아봤는데요. 이제는 위에서 배운 내용들을 토대로, 드롭다운 메뉴를 적용하는 실습과정을 배워 보겠습니다.



현재 메뉴는 위와 같이 되어 있습니다. ##_title_##이 있는 항목은 그냥 놔두고, 그 옆에 있는 메뉴들만 수정하겠습니다. 타이틀 항목도 변경하고자 하는 분들은 위에서 다룬 내용들을 토대로 응용하면 쉽게 변경을 할 수 있을 거라고 생각 합니다.


<li id="navbar-page"><a href="/"><i class="fa fa-home fa-fw"></i> Home</a></li>


이 항목에 클릭했을때 드롭다운 메뉴가 보여지는 링크를 위치 시킬 겁니다. 위에서 배운 예제는 아래와 같습니다.


<li class="dropdown">
<a href="#" class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
<i class="fa fa-list-alt"></i> Menu 
<b class="caret"></b></a>


이 소스 코드로 대체를 해 주세요! 그리고 Menu 이 항목을 원하는 이름으로 변경 해 주시고, i class 폰트어썸 아이콘 이름도 원하는 항목으로 변경을 해 주시면 됩니다.

이제는 위의 항목을 클릭했을 때 펼처질 드롭다운 메뉴를 구성 해 볼 건데요. 이 태그를 사용하는 패턴은 아래와 같습니다.


<li>
	<ul>
		<li>메뉴01</li>
		<li>메뉴02</li>
	</ul>
</li>


다시 본론으로 들어가서 아래에 드롭다운 메뉴가 펼쳐졌을 때 보여지는 메뉴구성 소스 코드는 아래와 같습니다.


<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  <li><a href="/"><i class="fa fa-home"></i> Home</a></li>
  <li class="divider"></li>
  <li><a href=""><i class="fa fa-tags"></i> Tag Log</a></li>
  <li><a href="media"><i class="fa fa-camera"></i> Media Log</a></li>
  <li class="divider"></li>
  <li><a href="notice/176"><i class="fa fa-info-circle fa-fw"></i> About me</a></li>
  <li><a href=""><i class="fa fa-book fa-fw"></i> Guest Book</a></li>
  <li class="divider"></li>
  <li><a href=""><i class="fa fa-gear fa-fw"></i> Admin</a></li>
  <li><a href="/entry/post" title="글쓰기"><i class="fa fa-pencil fa-fw"></i> Write Post</a></li>
</ul></li>


이 소스를 그대로 가져다 쓰시라는게 아닌건 아시죠? 본인에 성향에 맞는 메뉴 구성을 해서 사용하시는게 가장 좋습니다. 지금 제가 구성하고 있는 메뉴구성이 마음에 든다면, 수정작업 없이 사용하셔도 괜찮습니다. 다만 url 정도는 변경 해줘야겠죠? 위에서 공통으로 사용하는 url이 아닌것은 aboout me 에 해당하는 url이 다르네요!


<a href="notice/176">


저는 그냥 위에 소스코드를 그대로 복사해서 드롭다운 메뉴가 구성되지 않은 skin.html에 적용 해 보겠습니다.


위의 캡처 이미지에서처럼 적용이 잘 되었습니다. 이제 나머지 사항들은 사용자가 직접 응용해서 메뉴들을 구성하는 일만 남았습니다.




마무리하며...


FastBoot v1.3 에 부트스트랩(Bootstrap)에서 제공하는 드롭다운 메뉴를 구성하는 방법에 대해서 배워 봤는데요. 이 글에서 사용한 방법은, 부트스트랩을 기반으로 하는 대부분의 반응형 스킨에서도 동일하게 적용이 가능한 사항들 입니다.

다음 포스팅 부터는 디테일한 사항들을 변경하는 방법을 알아 볼 예정 입니다. 주로 사용하게 될 준비물(도구)로는 '크롬 브라우저'가 될 것 같습니다.


관련 글 and Link






저작자 표시 비영리 동일 조건 변경 허락

back to top