| Line 1: | Line 1: | ||
| − | + | {{#css: | |
| + | #mw-content-text h3 span { | ||
| + | font-weight: 600; | ||
| + | padding-left: 0px; | ||
| + | } | ||
| − | File drawer의 컨텐츠 간 이동은 | + | .mw-headline { |
| + | font-weight: 600; | ||
| + | } | ||
| + | |||
| + | span.mw-editsection { | ||
| + | font-weight: 200; | ||
| + | position: relative; | ||
| + | float:right; | ||
| + | margin-right: 25px | ||
| + | } | ||
| + | |||
| + | span.mw-editsection a { | ||
| + | font-weight: 200; | ||
| + | } | ||
| + | |||
| + | .art-subpage { | ||
| + | background: #F7F7F7; | ||
| + | } | ||
| + | |||
| + | #mw-content-text p { | ||
| + | padding-top: 0px; | ||
| + | padding-bottom: 6px; | ||
| + | } | ||
| + | |||
| + | .mw-content-ltr ul { | ||
| + | margin: 0.3em 0 0 42px; | ||
| + | } | ||
| + | |||
| + | |||
| + | hr { | ||
| + | margin-top: 0px; | ||
| + | margin-bottom: 0px; | ||
| + | margin-left: -31px; | ||
| + | width: 720px; | ||
| + | border-bottom: 1px solid #E0E0DD; | ||
| + | border-left: 0px; | ||
| + | border-right: 0px; | ||
| + | border-top: 30px solid #F7F7F7; | ||
| + | } | ||
| + | <!-- | ||
| + | #sun-col { | ||
| + | -webkit-column-count:2; /* Chrome, Safari, Opera */ | ||
| + | -moz-column-count:2; /* Firefox */ | ||
| + | column-count:2; | ||
| + | } | ||
| + | |||
| + | #sun-col p { | ||
| + | padding-left: 0px; | ||
| + | --> | ||
| + | } | ||
| + | |||
| + | }} | ||
| + | File drawer는 컨텐츠 간 이동 및 삭제를 할 때 사용하는 pattern이다. 주로 현재 app안에서 제공된 다양한 컨텐츠 간을 이동할 때 사용된다. | ||
| + | |||
| + | File drawer의 컨텐츠 간 이동은 File folder가 들어 있는 Drawer의 메타포를 사용하였으며, 각 리스트는 주로 컨텐츠의 축소 이미지나 title로 이루어져 있다. | ||
=== With this pattern, we can solve... === | === With this pattern, we can solve... === | ||
| − | 저장 공간이 충분해 지면서 디지털기기의 컨텐츠 양이 기하급수적으로 증가하여, 많은 양의 컨텐츠 간 이동을 효과적으로 하기 위한 | + | 저장 공간이 충분해 지면서 디지털기기의 컨텐츠 양이 기하급수적으로 증가하여, 많은 양의 컨텐츠 간 이동을 효과적으로 하기 위한 pattern이 필요하다. File drawer은 많은 양의 컨텐츠를 각각 쉽게 볼 수 있는 기능을 제공한다. 한 번에 모든 컨텐츠를 수용하기에 화면 공간이 부족할 수 있기 때문에, 공간을 효율적으로 사용하면서 어려움 없이 직관적으로 둘러볼 수 있도록 한다. |
* 각각의 컨텐츠를 둘러보는 과정에서 더 동적이고 매력적으로 보이게 한다. | * 각각의 컨텐츠를 둘러보는 과정에서 더 동적이고 매력적으로 보이게 한다. | ||
* File drawer은 컨텐츠 간 이동할 때, 컨텐츠를 동시에 표시해 사용자의 컨텐츠간 이동을 돕는다. | * File drawer은 컨텐츠 간 이동할 때, 컨텐츠를 동시에 표시해 사용자의 컨텐츠간 이동을 돕는다. | ||
| − | === Example : | + | === Example : IOS Safari === |
| − | {{#Widget:Vimeo|id=93550682|width=300|height=533}} | + | {{#Widget:Vimeo|id=93550682|width=300|height=533|start=4s}} |
---- | ---- | ||
| − | == | + | == File drawer (screenshot) == |
| + | <div id="sun-col"> | ||
=== Android_Chrome === | === Android_Chrome === | ||
* 겹쳐저서 보이지 않는 여러개의 창을 위에서 아래로 drag하여 가려진 창의 정보를 본다. | * 겹쳐저서 보이지 않는 여러개의 창을 위에서 아래로 drag하여 가려진 창의 정보를 본다. | ||
{{#Widget:Vimeo|id=93362378|width=300|height=455}} | {{#Widget:Vimeo|id=93362378|width=300|height=455}} | ||
| + | </div> | ||
---- | ---- | ||
| − | == | + | == File drawer (title) == |
| + | <div id="sun-col"> | ||
=== iOS_Reminder === | === iOS_Reminder === | ||
{{#Widget:Vimeo|id=96696395|width=300|height=533}} | {{#Widget:Vimeo|id=96696395|width=300|height=533}} | ||
| Line 29: | Line 90: | ||
| + | </div> | ||
[[Category:Move in same level]] | [[Category:Move in same level]] | ||
File drawer는 컨텐츠 간 이동 및 삭제를 할 때 사용하는 pattern이다. 주로 현재 app안에서 제공된 다양한 컨텐츠 간을 이동할 때 사용된다.
File drawer의 컨텐츠 간 이동은 File folder가 들어 있는 Drawer의 메타포를 사용하였으며, 각 리스트는 주로 컨텐츠의 축소 이미지나 title로 이루어져 있다.
저장 공간이 충분해 지면서 디지털기기의 컨텐츠 양이 기하급수적으로 증가하여, 많은 양의 컨텐츠 간 이동을 효과적으로 하기 위한 pattern이 필요하다. File drawer은 많은 양의 컨텐츠를 각각 쉽게 볼 수 있는 기능을 제공한다. 한 번에 모든 컨텐츠를 수용하기에 화면 공간이 부족할 수 있기 때문에, 공간을 효율적으로 사용하면서 어려움 없이 직관적으로 둘러볼 수 있도록 한다.