이 블로그는 더이상 운영되지 않고 Archive 용도로 사용되고 있습니다.
새로운 블로그를 방문해주세요.

[스킨 가이드] simple white v4 - 모바일 웹 위젯 숨기기 (반응형)


style.css 파일 안의 반응형 스타일 중 .hide-widget 소스가 있습니다.


이 소스는 화면 가로길이 768px 이하의 기기에서 위젯을 숨겨주는 역할을 합니다. (display: none;)


이걸 어떻게 사용하는가에 대해 작성해 보겠습니다.


숨기고 싶은 위젯 선택

simple white v4 에서 사용중인 여러가지 위젯 중, 모바일 화면에서 숨기고 싶은 위젯을 정해둡니다.

방문자 통계 그래프 위젯을 예로 설명하겠습니다.



HTML의 수정

관리자 > HTML/CSS 수정 화면으로 접속합니다.

※ E 키를 눌러주면 바로 이동합니다. - 단축키


"방문자 통계 그래프"를 검색하여 소스를 확인해보면,

<s_sidebar_element> <!-- 방문자 통계 그래프 --> <div class="widget"> <h3><i class="fa fa-bar-chart"></i> 방문자 통계 그래프</h3> [##_StatisticsGraph_##] </div> </s_sidebar_element>

기본적으로 이렇게 되어 있습니다.

여기서 class="widget" 부분에 hide-widget 을 추가해주면 됩니다.



저장 후 테스트

위와 같은 방법으로 위젯을 숨기면, 데스크탑에선 위젯이 출력되고 모바일에선 위젯을 숨길 수 있습니다.

"알림" 위젯은 기본적으로 모바일에선 숨겨지게 되어있습니다.

추가로 여러분이 숨기고 싶은 위젯에 hide-widget 속성을 사용해보세요.