반응형 스킨인 FastBoot 에서의 사이드바를 모바일에서는 감추자!

모바일 기기에서 블로그를 보면서 느낀건데, 내가 블로그 운영자가 아니라, 순수 방문자라고 했을 때, 사이드바에 있는 요소들을 모바일에서 이용하는 횟수는 지극히 적을 것 같고, 또 사용할만한 컨텐츠도 마땅한게 없었습니다.

블로그 설명은 하단에 있는 푸터 영역에 간략하게 나와 있으므로 사이드바에서는 공지사항 모듈이 필요가 없을 것 같았습니다.

카테고리 및 메뉴들은 상단 고정 메뉴바에 드롭다운 구성요소에 들어가 있기 때문에 모바일 기기에서 화면을 내려서 사이드바에 있는 기능을 사용할 일도 적어 보였습니다.

암튼 이러한 이유들로 인해서, 모바일 기기(가로크기 768픽셀 이하) 에서는 사이드바가 없어도 될 것 같다는 생각에, 그리고 모바일에서는 주요 컨텐츠 위주로만 보여주고 싶다는 생각에 과감하게 사이드바를 숨기게 되었습니다.

부트스트랩 기반의 반응형 스킨에서 사이드바 숨기는 방법

간단한 클래스 선택자를 입력해줄 것이기 때문에, 티스토리 관지자 페이지에 있는 HTML 편집 항목에서 바로 수정을 해 주었습니다.

HTML 편집에서 'CTRL+F 혹은 COMMAND+F' 단축키를 눌러서 검색창을 활성화 해 주세요!

검색창에서 <aside> 를 검색 해 주세요! 그리고 해당 태그에 부트스트랩에서 사용하는 반응형 유틸리티 클래스 선택자를 입력 해 주세요!

<aside class="hidden-xs">

위와 같이 입력을 하게 되면, 가장 작은 사이즈인 가로 768픽셀 이하에서는 <aside>와 사이드바가 감싸고 있는 모든 요소들을 감추게 됩니다. hidden-sm도 추가를 해서 태블릿 피시 크기에서도 감추게 할까? 생각을 해 봤지만, 태블릿에서는 디스플레이가 비교적 큰 편에 속하기 때문에, 사이드바에 있는 요소들까지 이용하기에 괜찮아 보여서 스마트폰 크기에서만 감춰지도록 했습니다.

 

결과적으로, 방문자들은 어떻게 받아들일지는 모르겠지만 저는 만족스러운 변경사항이었다고 생각 합니다.