반응형웹(skeleton) PC/모바일 화면 사이드바 표시 및 숨기기

최근 모바일 트렌드에 발맞추어 반응형 웹으로 전환하고 계신 분들이 많이 계신 것으로 알고 있습니다.

금융/보험 회사들을 포함하여 주요 사이트들도 점점 반응형 웹으로 전환되고 있는 듯 합니다.

개인이 백지 상태에서 직접 반응형 웹을 만들고 적용하기에는 많은 페이지 구현 방식과 복잡한 옵션들로 인해 왠만한 실력자가 아닌 이상 구현하기 힘들 것으로 예상됩니다.

그러하여 최근 블로그 분야에서 각광을 받고 있는 마크쿼리님의 skeleton 스킨은 반응형 웹을 직접 구현하기 힘든 분이나 개인 블로거 분들에게 큰 사랑을 받고 있으며 또한 그 도움을 받아 구현된 사이트 또한 상당수에 이르게 됩니다.

기본 뼈대를 기본으로 하여 적당한 코드 수정을 통하여 개인의 취향에 맞추어 스킨 구현이 가능하도록 제작되었기 때문입니다.

본인 또한 skeleton 중 spidersweb 스킨을 적용한 상태이며 아직 튜닝 단계이긴 하지만 크게 만족하며 사용하고 있습니다.

오늘은 skeleton 스킨에서 사이드바의 내용을 표시하고 숨기는 내용에 대해 잠시 알려드리고자 합니다.

특히 광고의 구현, 복잡한 사이드바의 구성에 있어 많이 사용되어질 듯 합니다.

물론 티스토리 관리자 페이지에서 사이드바 구성에서 위치와 요소를 변경할 수 있습니다만, skeleton 스킨의 특성상 모바일 화면으로 전환 시 사이드바의 모든 요소들이 페이지 아래 부분으로 배치되어 모바일 기기에서 스크롤 압박은 물론 의사 전달 부분에서 마이너스 요소를 가진다고 생각됩니다.

많은 콘텐츠와 정보를 전달하는 것도 좋지만 스마트폰과 같이 작은 화면에서는 방문자의 의도에 맞추어 반드시 필요한 내용을 중심으로 심플한 콘텐츠 내용과 관련글 내용만 보여지는게 효과적이라 생각됩니다.

그러하여 모바일 기기에서는 수많은 사이드바 요소들을 숨긴 후 콘텐츠 뒤에는 블로거분들의 상징인 광고를 배치하는 것을 추천해 드립니다.

우선 티스토리 관리자 페이지의 HTMLS/CSS편집 화면 중 skin.html 수정화면으로 이동합니다.

.

아래 화면과 같이 <s_sidebar> 또는 <s_sidebar_element) 부분으로 이동하여 사이드바 element 요소를 미디어쿼리로 감싸도록 수정합니다.

사이드바 목록

기본 사이드바 구성 화면에서 미리 정의된 <div class="visible-md visible-lg"> ... </div> 의 새로운 코드를 추가하여 PC/컴퓨터 화면과 같이 큰 해상도 화면에서만 보여지도록 설정을 하게 된다면 모바일 기기에서는 해당 사이드바는 보여지지 않게 될 것입니다.

반대로 <div class=visible-sm visible-xs"> ... </div> 코드는 모바일 화면과 같이 작은 화면이나 낮은 해상도에서만 표시가 되겠습니다.

모바일 화면에서, 또는 PC화면에서 굳이 필요하지 않은 요소들은 과감하게 제거합니다.

이 경우에는 상단의 드롭다운 메뉴를 최대한 활용해야 하겠죠?

이를 활용하여 본인은 아래와 같이 작은 스마트폰 화면에서만 사이드바 요소들을 보이지 않게 구현하였습니다.

사이드바 미디어쿼리 적용

화면 크기나 해상도에 따라 달라질 수도 있겠지만 테블릿PC나 아이패드, 갤럭시탭 등의 화면에서 사이드바를 표시하지 않고 싶으시면 visible-sm 항목은 제거하시면 되겠습니다.

이를 잘 이용하여 구글 애드센스나 리얼센스 등 여러 광고 소스코드들을 화면 상에 적절하게 배치하면 높은 수익창출에 도움이 될 것입니다.

사이드바를 추가하고, 화면 해상도에 따라 제거 또는 숨기는 작업을 통하여 적절하게 관리하는 것은 깔끔한 홈페이지를 구현하는데 큰 도움을 줄 것입니다.

-----

방문 감사합니다 (__)