마크쿼리 3.0.5ver 스킨 서치바, 상단바, 쇼셜아이콘, 옵션바를 상단바로 옮겨보자

안녕하세요 Dean입니다. 오랜만의 포스팅인데 이번에는 많은 분들이 메일이나 댓글로 질문해 주신 마크쿼리 킨 서치바, 상단바, 쇼셜아이콘, 옵션바를 상단바로 옮겨보도록 하겠습니다. 이전 포스팅에서는 3.0.4버전용으로 작성되어 3.0.5으로 업데이트 되면서 적용되지 않아 많은 분들이 질문을 하셨습니다. 하나씩 차근차근 옮겨 보도록 하겠습니다. 방문자 여러분들도 무조건 복사-붙여넣기 하시지 마시고 하나하나가 무슨 기능을 하고 어떻게 적용되는지 공부하면서 하시면 더 멋진 블로그로 커스텀 하실 수 있습니다!

1. 미드 배너 영역 상단 메뉴 영역(헤더 영역)으로 옮기기

skin.html 에서 먼저 미드 배너 영역을 잘라내고 상단 메뉴 영역(헤더 영역)으로 붙여 넣어 봅시다.




.
.
.
.


 이부분이 미드배너 영역입니다! 잘라낸 후


.
.
.
<li role="menuitem"><a href="/tag">Tags</a></li>
		<li role="menuitem"><a href="/guestbook">Guestbook</a></li>
		<li role="menuitem"><a href="/location">Location</a></li>
		</ul>
	</nav> 이곳이 상단 네비게이션 메뉴가 끝나는 곳이군요.


 이 곳에 복사한 미드영역을 붙여 넣어 봅시다!

</header><!-- /.container skeleton-nav -->

그리고 저장한 후 결과물을 보면

엉망진창이군요 이제 하나하나 수정해 봅시다.

2. 상단 메뉴바 영역 수정

붙여 넣은 소스를 살펴보면

<section class="container skeleton-mid-banner"> 전체 영역이 container skeleton-mid-banner로 둘러싸여 있습니다.
<div class="row"> 또 그밑에 row라는 영역으로 둘러싸이고
<div class="col-sm-9 mid-content"> col-sm-9의 크기로 둘러싸여있습니다.
	<div class="row col-nospace">
		<div class="col-sm-8 social-link">
			<ul>
.
.
.
			</ul>
		</div><!-- /.col-8 -->
		<div class="col-sm-4">
			<div class="responsive-right2left">
			<ul class="list-inline">
				<li>
				<div class="dropdown">
.
.
.
					</ul>
				</div><!-- dropdown -->
				</li>
				<li><button class="jfontsize-p btn btn-none btn-xs" type="button"><span class="plus-icon svgicon">본문 텍스트 확대</span></button></li>
				<li><button class="jfontsize-m btn btn-none btn-xs" type="button"><span class="minus-icon svgicon">본문 텍스트 축소 </span></button></li>
				<li><button class="btn btn-none btn-xs" type="button" onclick="btnPrint()"><span class="print-icon svgicon">인쇄</span></button></li>
			</ul>
			</div><!-- /.responsive-right2left -->
		</div><!-- /.col-4 -->
	</div><!-- /.row row -->
</div><!-- /.col-9 mid-content -->
<div class="col-sm-3 mid-aside">
	<s_sidebar_element>
	<s_search>
		<!-- Search -->
		<div class="input-group">
			<span class="input-group-btn"><button type="button" onclick="" class="btn btn-none btn-xs"><span class="search-icon svgicon">검색</span></button></span>
			<input role="search" type="text" class="search-input" placeholder="Search" name="" value="" onkeypress="if (event.keyCode == 13) {  }">
		</div>
	</s_search>
	</s_sidebar_element>
</div><!-- /.col mid-aside -->
</div><!-- /.row -->
</section><!-- /.container skeleton-mid-banner -->

위와 같이 우리가 원하지 않는 크기의 class가 지정되어 있으므로 아래와 같이 우리가 원하는 크기의 class를 새로 만들어 보겠습니다.

		<div class="social-link_custom social-link"> 
			<ul>
				<li><a href="#" onclick="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(document.URL)+'&t='+encodeURIComponent(document.title), 'facebooksharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Facebook" class="facebook-link"><span class="facebook-icon svgicon">페이스북 공유 버튼</span></a></li>
				<li><a href="#" onclick="javascript:window.open('https://twitter.com/share?url='+encodeURIComponent(document.URL)+'&via='+encodeURIComponent(document.title), 'twittersharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Twitter" class="twitter-link"><span class="twitter-icon svgicon">트위터 공유 버튼</span></a></li>
				<li><a href="#" onclick="javascript:window.open('https://plus.google.com/share?url='+encodeURIComponent(document.URL), 'googleplussharedialog','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=350,width=600');return false;" target="_blank" alt="Share on Google+" class="google-link"><span class="google-icon svgicon">구글플러스 공유 버튼</span></a></li>
				<li><a href="#" onclick="javascript:executeURLLink()" alt="Share on kakaotalk" class="hidden-md hidden-lg kakaotalk-link"><span class="kakaotalk-icon svgicon">카카오톡 공유 버튼</span></a></li>
				<li><a href="#" onclick="javascript:executeKakaoStoryLink()" alt="Share on kakaostory" class="hidden-md hidden-lg kakaostory-link"><span class="kakaostory-icon svgicon">카카오스토리 공유 버튼</span></a></li>
			</ul>
		</div><!-- /.col-8 -->
		
		<div class="option_custom">
			<div class="responsive-right2left">
			<ul class="list-inline">
				<li>
				<div class="dropdown">
				<button class="dropdown-toggle btn btn-none btn-xs" type="button" id="dropdownMenu1" data-toggle="dropdown"><span class="font-icon svgicon">dropdown menu</span></button>
					<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
						<li role="presentation"><a role="menuitem" href="javascript:changeFontFamily('나눔바른고딕, NanumBarunGothic, sans-serif');">나눔바른고딕</a></li>
						<li role="presentation"><a role="menuitem" href="javascript:changeFontFamily('나눔고딕, NanumGothic, sans-serif');">나눔고딕</a></li>
						<li role="presentation"><a role="menuitem" href="javascript:changeFontFamily('맑은 고딕, Malgun Gothic, sans-serif');">맑은고딕</a></li>
						<li role="presentation"><a role="menuitem" href="javascript:changeFontFamily('다음_Regular, daum_Regular, sans-serif');">다음</a></li>
						<li role="presentation"><a role="menuitem" href="javascript:changeFontFamily('굴림, Gulim, sans-serif');">굴림</a></li>
						<li role="presentation"><a role="menuitem" href="javascript:changeFontFamily('돋움, dotum, sans-serif');">돋움</a></li>
						<li role="presentation"><a role="menuitem" href="javascript:changeFontFamily('바탕, Batang, sans-serif');">바탕</a></li>
						<li role="presentation" class="divider"></li>
						<li role="presentation"><a role="menuitem" href="http://markquery.com/docs/web-safe-font/" target="_blank"><small>Web Safe Font</small> <span class="help-icon svgicon">web safe font 알아보기</span></a></li>
					</ul>
				</div><!-- dropdown -->
				</li>
				<li><button class="jfontsize-p btn btn-none btn-xs" type="button"><span class="plus-icon svgicon">본문 텍스트 확대</span></button></li>
				<li><button class="jfontsize-m btn btn-none btn-xs" type="button"><span class="minus-icon svgicon">본문 텍스트 축소 </span></button></li>
				<li><button class="btn btn-none btn-xs" type="button" onclick="btnPrint()"><span class="print-icon svgicon">인쇄</span></button></li>
			</ul>
			</div><!-- /.responsive-right2left -->
		</div><!-- /.col-4 -->



<div class="search_custom">
	<s_sidebar_element>
	<s_search>
		<!-- Search -->
		<div class="input-group">
			<span class="input-group-btn"><button type="button" onclick="" class="btn btn-none btn-xs"><span class="search-icon svgicon">검색</span></button></span>
			<input role="search" type="text" class="search-input" placeholder="Search" name="" value="" onkeypress="if (event.keyCode == 13) {  }">
		</div>
	</s_search>
	</s_sidebar_element>
</div><!-- /.col mid-aside -->

style.css에 새로 정의한 클래스 속성 지정

.social-link_custom{
width: 114px%;
float: right;
}

.option_custom{
width: 160px;
float: right;
}

.search_custom{
width: 200px;
float: right;
}

그리고 네비게이션에는 float값을 left을 추가로 줍니다.
.nav {
position: relative;
font-size: 14px;
font-weight: 900;
float: left;
}

이렇게 하면 아래와 같이 옮겨지게 되고 이제 예쁘게 정렬시켜 보겠습니다.

아래와 같이 여러분들이 원하는 여백값을 적당히 주시면 됩니다.

.social-link_custom{
width: 114px;
float: right;
padding-top: 14px;
}

.option_custom{
width: 160px;
float: right;
padding-top: 14px;
padding-right: 8px;
}

.search_custom{
width: 200px;
float: right;
padding-top: 8px;
padding-right: 14px;
}

완성 되었습니다! 하지만 마크쿼리는 반응형 스킨이기 때문에 창의 크기를 줄여보시면

반응형 설정을 아직 하지 않았기 때문에 이제 창 크기가 줄어들 수 록 요소가 하나씩 사라지도록 해보겠습니다.

3. 반응형 설정

창이 줄어들수록 요소가 하나씩 없어지도록 해보겠습니다. 아래 소스를 style.css에 추가시켜 줍시다.

@media screen and (max-width: 767px) { //창이 767px보다 작아지면 소셜아이콘을 없앰

.social-link_custom{
display:none;
}

}

@media screen and (max-width: 992px) { //창이 992px보다 작아지면 서치바를 없앰

.search_custom{
display:none;
}

}

@media screen and (max-width: 1199px) { //창이 1199px보다 작아지면 옵션바를 없앰

.option_custom{
display:none;
}

}

이렇게 창 크기별로 없어지는 요소를 지정해주시면 창 크기가 줄어들어도 네비바가 망가지지 않고 아래와 같이 작동하게 됩니다.