마크쿼리 웹 반응형 스킨 사이드바 모바일에서 없애기
스킨 적용하고 그냥 사용하면 모바일로 화면처럼 작아지면 사이드바는 본문 밑으로 내려갑니다.
그냥 사용하면 이건 아주 그냥 스마트폰으로 보면 포스팅이 길다?라고 착각할 수도 있지만 쓸데없이 많이 길어지는 느낌도 있습니다.
그래서 저는 모바일에서는 사이드 바를 안 보이게 설정하고 사용 중입니다.
이것은 마크 쿼리님 스킨이 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 업데이트될 때 티에디션 적용하면서 코드를 보고 다른 방법도 생각이 나더라고요.
아직 귀찮아서 실험 안 해봤는데 나중에 해보고 그것도 적어보도록 하겠습니다.'';;
그리고 더 궁금하시면 댓글이나 방명록으로 문의하세요.
'Blog > 티스토리스킨' 카테고리의 다른 글
| 웹 반응형 스킨 검색 결과 보기 좋게? 깔끔하게 목록 스타일 바꾸기 (15) | 2014.06.20 |
|---|---|
| 사이드바 전체 배경색, 제목 부분 등등 색상 바꾸기? (0) | 2014.06.18 |
| 스파이더 웹 반응형 스킨 사이드바 하단에 내맘대로 추가하기 (2) | 2014.06.16 |
| 티스토리 사이드바 오른쪽에서 왼쪽으로 옮기기 본문 영역은 왼쪽으로!! (8) | 2014.06.15 |
| 웹 반응형 스킨 스파이더웹 커버 이미지 사용 안 하고 없애기 (5) | 2014.06.14 |
