반응형 스킨 데스크톱 보기 대신할 가로 넓게보기
반응형 스킨을 사용하다 보면 기존 컨텐츠 중에 가로크기(width)가 고정된 요소가 잘리는 경우가 있습니다.
가장 흔한 예가 본문내 삽입한 표(table)입니다.
모바일웹을 사용중이라면 데스크톱보기 버튼으로 해결되었겠지만,
반응형 스킨은 가로 스크롤이 되지 않아도 되도록 고안되었기 때문에, 이렇게 가로로 긴 요소는 볼 수가 없습니다.
그래서 모바일환경 등 가로로 긴 요소를 볼 수 없는 환경에서
페이지의 가로 크기를 늘려 스크롤 하며 볼 수 있는 버튼을 만들어봅시다.
(다시 누르면 완벽하진 않지만 원래대로 돌아옵니다.)
'가로 넓게 보기' 버튼 만들기
1. skin.html에서 </body> 위쪽에 다음 스크립트를 붙여넣습니다.
<!--가로 넓게 보기-->
<script>
function superwidth(){
$("div.container").addClass("superwidth");
$("body").css("overflow-x","scroll");
$("body").css("zoom","0.7");
$("button#unsuperwidth").css("display","block");
$("button#superwidth").css("display","none");
window.scrollTo(0, 0);
alert("화면 하단의 버튼을 누르면 원래대로 돌아옵니다.");
};
function unsuperwidth(){
$("body").css("overflow-x","hidden");
$("div.container").css("zoom","1");
$("div.container").removeClass("superwidth");
$("button#superwidth").css("display","block");
$("button#unsuperwidth").css("display","none");
};
$(document).ready(function(){
$("button#superwidth").click(function(){
superwidth();
});
$("button#unsuperwidth").click(function(){
unsuperwidth();
});
});
</script>
<style>
div.superwidth {width:1100px;}
</style>
2. skin.html에서 사이드바 항목이 있는곳을 찾습니다. 모듈 하나당 <s_sidebar_element>하나로 묶여있습니다.
그 중 마음에 그는것 하나를 하나 더 복제한 뒤 사이드바 내용이 출력되는 부분을 지우고 버튼태그를 삽입합니다.
(스킨마다 코드가 달라서 설명이 어렵습니다. 아래코드는 본 블로그에 적용된 readiz님의 fastboot 스킨에 사용되는 코드입니다.)
<s_sidebar_element>
<!-- 가로 넓게보기 모듈 -->
<div class="panel panel-default">
<h4 class="panel-heading"><i class="fa fa-list"></i> Expand width</h4>
<div class="panel-body">
<button id="superwidth" style="width:100%">가로 넓게 보기</button>
<button id="unsuperwidth" style="width:100%;display:none">가로 원래대로</button>
</div>
</div>
</s_sidebar_element>
(그냥 사이드바 메뉴에서 HTML배너출력모듈로 추가해도됩니다.)
3. 버튼 모양 수정은 각자의 몫입니다. 스킨에 적용되어있는 버튼들을 참조하여 같은 class속성을 주면 간단합니다.
4. 저장을 하고나면 사이드바 설정 항목에 가로 넓게 보기 모듈이 생겨있을겁니다.
알맞은 순서를 지정하면됩니다.
적용이 되지 않을 땐
jQuery 스크립트를 로딩하세요.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
를 위의 1에서 삽입한 스크립트 위쪽에 붙여넣습니다,
[TIPs/티스토리&애드센스] - 티스토리 반응형 스킨에서 표 잘림 문제 해결하기
