Offcanvas가 있는 반응형 스킨의 구조 설계
반응형 스킨이 지금은 그렇게 많지는 않지만.. 앞으로 반응형 스킨 제작 하실 분들에게 도움이 되시라고 이런 글도 한번 포스팅 해봅니다. 도움이 되셨으면 좋겠어요.
이런 구조를 그려놓는걸 뭐라고 하는지는 잘 모르겠습니다. 전개도? 설계도? 아무튼 이것을 꼭 그리고 작업하실 필요는 없습니다만, 큰 그림이 머리속에 있는 것이 좋더군요.
빨간색 칠해진 부분이 유저가 처음에 보게되는 부분입니다. 처음에는 네비게이션, 콘텐츠, 사이드바의 일부만 보게 됩니다. 이 이후에 Offcanvas가 동작하게 되면, Offcanvas가 우측으로 밀려나오게 됩니다. 아래 그림처럼요.
이 구조는 실제로 Offcanvas가 우측으로 이동하는 구조입니다. 실제로 컨텐츠와 Navigation bar가 우측으로 밀려나는 것처럼 보이지만, 실제로는 Padding을 이용한 눈속임에 불과합니다. 본문과 네비게이션바는 실제로 Left값을 사용해서 우측으로 밀어버리는 것이 아닙니다. 그렇게 되면 Body안쪽 구조가 너무 복잡해지고, 스크롤바가 꼬여버리는 문제점이 발생합니다. 그래서 Offcanvas가 우측으로 이동함과 동시에 Body를 우측으로 움직이는 것처럼 보이게 하는 방법이 가장 좋았습니다.
위 구조의 스킨이 Mobile로 가게되면 아래처럼 변합니다.
사실 거의 동일합니다만 Contents-Sidebar가 좌우로 배치되어 있던 것이 Sidebar가 하단으로 내려오는 구조입니다. Offcanvas는 PC구조와 유사하게, 좌측에 붙어있다가 필요할 때 스르륵 모습을 나타내는 구조입니다. 여기서도 역시 실제로 본문을 우측으로 보내지 않고, Padding값을 조정하여 마치 우측으로 움직이는 것처럼 보이도록 하였습니다.
대충 앞으로도 반응형 스킨이 나온다면 이 구조는 거의 정석이다시피 될 것 같군요. 이 구조가 사용자들에게 가장 익숙한 구조가 아닐까 싶습니다. 모바일 앱의 구조와도 굉장히 유사하구요. ^^
그렇다면 위의 구조가 코딩으로는 어떻게 되어있는지 한번 개괄적으로 살펴봅시다.
<!-- FastBoot v1.5.1 by Readiz Responsive Tistory Skin http://readiz.com/ Open sources are copyright of their respective owners. --> <!DOCTYPE html><html><head> <title>[$$_page_title_$$] :: [$$_title_$$]</title> </head><body id="[$$_body_id_$$]"> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> </div> <div class="container"> <div class="row"> <div id="leftContent" class="col-md-9"></div> <div id="sidebar" class="sidebar col-md-3"></div> </div> </div> <div id="footer"> </div><!--F OffCanvas --> <div id="lnav"></div> <div id="toTop" onclick="window.scrollTo(0, 0);"><i class="fa fa-angle-double-up fa-5x"></i></div></body></html>
구조가 동일하죠? 큰 그림만 보실 수 있게 코드를 많이 짤라보았습니다. 좌측 Content부분은 9만큼의 크기를.. 우측 Sidebar의 크기는 3의 크기를 가지도록 디자인 되어 있는 것이죠. 모바일에서는 Content와 Sidebar를 다른 줄로 떨어지게 하구요.
큰 그림만 짜신다면 세부적인 것을 만드는 것은 일도 아니었으면 좋겠습니다만.. 이 그림을 짠 후부터 비로소 스킨제작을 시작할 수 있게 됩니다. ^^
'Creation > Design' 카테고리의 다른 글
| [jQuery] 누르면 크기가 늘어나는 검색창 (9) | 2014.05.04 |
|---|---|
| [CSS3] box-shadow 속성 (11) | 2014.05.04 |
| CSS Grayfilter with crossbrowsing (16) | 2014.04.17 |
| Bootstrap Customize - Boost your bootstrap (7) | 2014.03.16 |
| Make bootstrap dropdown menu (4) | 2014.03.09 |
| 부트스트랩의 col-push와 col-pull 속성 (1) | 2014.03.05 |
| [CSS+Javascript] 간단한 Back to top 버튼 넣기 (6) | 2014.02.26 |
| [CSS] 구글 애드센스 노란색 뒷배경 제거하기 (1) | 2014.02.26 |
| [CSS] CSS로만 만든 배경 / 그레디언트 들어간 배경 쓰기 (5) | 2014.02.24 |
| [폰트] 구글 Fonts이용, 영문 웹폰트 적용시키기 (9) | 2014.02.22 |
