Off Canvas Layout

Blog Skin + Add-On :: Off-Canvas

큰 화면에서 볼수있는 화면을 작은 기기에서 보고 숨겨진 화면을 보는 레이아웃

---

반응형 웹 디자인 레이아웃 패턴 Multi-Device Layout Patterns

데스크탑-노트북-테블릿-패드-스마트폰 등 대표적인 기기의 레이아웃을 바꿔나가는 패턴과 관련 기법을 자세히 설명한 <http://mediaqueri.es/>,<Luke Wroblewski>웹사이트에 보면 그는 다중기기 (multi-device) 레이아웃 이라는 표현을 사용했는데, 아마도 패턴 중 하나가 반응형 웹이 아닌 일반 앱(app)을 포함하는 것이라 그런것 같습니다. 그의 다른 글에서도 정리했듯이, 앱에서 만 가능했던 그런 다중기기 레이아웃을 요즘은 반응형 웹에서도 구현하였기에 그냥 ‘반응형 레이아웃 패턴’으로 부르려고 합니다. 구체적인 것은 검색하면 많은 글들이 검색되니 여기서는 생략하겠습니다.

 

 

Off Canvas

많은 다양성이 있는 '반응형 디자인 레이아웃 패턴'에 있어 몇 가지 공통적인 특징이 있습니다. 전체 긴 페이지의 결과를 작은 화면에서 보이기 위해 몇 가지 방법의 하나인 'Off Canvas'를 이용하여 보이는 공간과 그 이상의 공간을 활용해서 더 많은 정보를 전달하는 것입니다.

그러나 여러 화면에 보이는 레이아웃을 각각 기기에 맞는 크기로 만들기에는 아직 미숙하며 스마트폰 등의 작은 기기보다는 오프스크린(데스크탑) 더 적합합니다.

 

 

위에서 설명한 바와 같이 '다중 장치 레이아웃(multi-device layout)'에 대한 '오프 캔버스(Off-Canvas)' 패턴은 큰 화면 크기를 보고 그것을 작은 기기에서 볼 수 있도록 허용할 내용이나 숨겨진 탐색메뉴를 유지하기 위해 화면 밖으로 공간을 활용 하거나 사용자가 노출 하는 작업을 수행합니다. 이 패턴은 몇 가지 별도의 버튼을 사용자가 조작해야합니다.

 

이 블로그의 사용 예 Example

위의 메뉴중 off-canvas sidebar 을 클릭하면 옆의 숨겨진 화면이 나옵니다. 현재 Off-Canvas 상단 네비바는 보류중입니다..

 

 

 

사용해본 Off Canvas 사이트

• Transitions for Off-Canvas Navigations
• Off Canvas Menu with CSS :target
• Bootstrap 3 - Off Canvas
• uilit - Off Canvas
• Pushy - Off Canvas
• Foundation - Off Canvas
• Aidan Zealley - Off.canvas