본문 바로가기

Blog/티스토리스킨

스파이더웹 반응형 사이드바 모바일에서 없애기?

마크쿼리 웹 반응형 스킨 사이드바 모바일에서 없애기

Spider’s Web 3.0.5 기준으로 작성했습니다.

스킨 적용하고 그냥 사용하면 모바일로 화면처럼 작아지면 사이드바는 본문 밑으로 내려갑니다.
그냥 사용하면 이건 아주 그냥 스마트폰으로 보면 포스팅이 길다?라고 착각할 수도 있지만 쓸데없이 많이 길어지는 느낌도 있습니다.
그래서 저는 모바일에서는 사이드 바를 안 보이게 설정하고 사용 중입니다.



bootstrap css


이것은 마크 쿼리님 스킨이 bootstrap기반이라 위 그림은 알아두면 이용할 곳이 많습니다.
그리고 bootstrap 기반으로 만든 반응형 스킨이면 원리는 같다고 봐도 될 거 같네요.
어려움 말다 필요 없이 간단하게 설명하면...

.visible-xs : 스마트폰 화면크기에서만 보임.
.visible-sm : 태블릿 화면 크기에서만 보임.
.visible-md : PC에서 좀 작은 창에서만 보임.
.visible-lg : PC에서 큰 화면에서만 보임.
.hidden-xs : 스마트폰 화면에서 안 보이고 다른 크기는 다 보임.
.hidden-sm : 태블릿 화면에서 안 보이고 다른 크기는 다 보임.
.hidden-md : PC에서 좀 작은 창에서 안 보이고 다른 크기는 다 보임.
.hidden-lg : PC에서 큰 화면에서 안 보이고 다른 크기 다 보임.

대충이렇게 이해하시면 될꺼에요.
조금 더 말하자면 젤 위에 숫자 (<768px) 된 걸 보면 이 정도 픽셀에 화면에서라고 생각하면 되겠네요.



<aside role="complementary" class="col-md-4 skeleton-aside"><!-- site layout : aside column -->
.
.
.
</aside><!-- site layout : /.aside column  -->

우선은 사이드 바 부분을 찾습니다.
찾을 때 Ctrl + F로 aside라고 입력하면 빨리 찾을 수 있을 거예요.
이 부분을 찾았으면 위에 먼저 알아두면 도움 되는 정보 본 것 적용하면 되는데요.
우선은 두 가지 방법이 입니다.



사이드 바를 전체적으로 감 추워서 전혀 안 보이게 하는 방법?


<div class="hidden-sm hidden-xs">
<aside role="complementary" class="col-md-4 skeleton-aside"><!-- site layout : aside column -->
.
.
.
</aside><!-- site layout : /.aside column  -->
</div>

위에처럼 적용하면 되는데요.
저는 하나가 아니고 태블릿PC에서 없애는 걸로 적용했습니다.


그래도 이래도 사이드바에 요소를 사용하고 싶은 게 있는 경우라면...


<s_sidebar_element>
<div class="hidden-sm hidden-xs">
	<!-- catetories -->
	<div class="widget">
		<div class="widget-inner">
		<h3>Categories</h3>
			

		</div>
	</div>
</div>
</s_sidebar_element>

개별적으로 없앨 거만 지정하면 될 거 같습니다.


Plus

정리해보면

대충대충 이렇게 적용하고 사용 중인데...
얼마 전에 3.0.5 업데이트될 때 티에디션 적용하면서 코드를 보고 다른 방법도 생각이 나더라고요.
아직 귀찮아서 실험 안 해봤는데 나중에 해보고 그것도 적어보도록 하겠습니다.'';;
그리고 더 궁금하시면 댓글이나 방명록으로 문의하세요.