안녕하세요 Dean입니다. 오랜만의 포스팅인데 이번에는 많은 분들이 메일이나 댓글로 질문해 주신 마크쿼리 킨 서치바, 상단바, 쇼셜아이콘, 옵션바를 상단바로 옮겨보도록 하겠습니다. 이전 포스팅에서는 3.0.4버전용으로 작성되어 3.0.5으로 업데이트 되면서 적용되지 않아 많은 분들이 질문을 하셨습니다. 하나씩 차근차근 옮겨 보도록 하겠습니다. 방문자 여러분들도 무조건 복사-붙여넣기 하시지 마시고 하나하나가 무슨 기능을 하고 어떻게 적용되는지 공부하면서 하시면 더 멋진 블로그로 커스텀 하실 수 있습니다!
1. 미드 배너 영역 상단 메뉴 영역(헤더 영역)으로 옮기기
skin.html 에서 먼저 미드 배너 영역을 잘라내고 상단 메뉴 영역(헤더 영역)으로 붙여 넣어 봅시다.
이부분이 미드배너 영역입니다! 잘라낸 후
그리고 저장한 후 결과물을 보면
엉망진창이군요 이제 하나하나 수정해 봅시다.
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; } }
이렇게 창 크기별로 없어지는 요소를 지정해주시면 창 크기가 줄어들어도 네비바가 망가지지 않고 아래와 같이 작동하게 됩니다.
따라 하시느라 고생하셨고 상단바로 옮겨진 http://dreamingdeantest3.tistory.com/ 블로그도 참고해 보시고
커스텀된 스킨도 아래 다운받으셔서 활용하시길 바라겠습니다. 수고하셨습니다.