| Line 1: | Line 1: | ||
| + | {{#css: | ||
| + | #mw-content-text h3 span { | ||
| + | font-weight: 600; | ||
| + | padding-left: 0px; | ||
| + | } | ||
| + | .mw-headline { | ||
| + | font-weight: 600; | ||
| + | } | ||
| − | == Example == | + | 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; | ||
| + | --> | ||
| + | } | ||
| + | |||
| + | }} | ||
| + | Page turn/ Page flip은 컨텐츠 화면 간 이동할 때 사용하는 pattern이다. 주로 현재 페이지와 유사한 성격의 컨텐츠 간을 이동할 때 사용된다. | ||
| + | |||
| + | 전후의 페이지를 이동하는 방식에 따라 구분이 가능한데, 주로 Paper flip 방식이 사용되며, Card flip, Cube flip, Slideshow 방식으로 분류할 수 있다. Page turn/ Page flip을 호출하는 방법은 주로 화면 좌우의 이동버튼이나 flick을 이용하여 동작시킨다. | ||
| + | |||
| + | === With this pattern, we can solve... === | ||
| + | 저장 공간이 충분해 지면서 디지털기기의 컨텐츠 양이 기하급수적으로 증가하여, 많은 양의 컨텐츠를 효과적으로 보기 위한 pattern이 필요하다. Page turn/ Page flip은 많은 양의 컨텐츠를 쉽게 볼 수 있는 기능을 제공한다. | ||
| + | |||
| + | * Page turn/ Page flip은 트랜지션 효과를 통해 전후의 컨텐츠로 이동을 하며, 전후에 다른 컨텐츠가 존재할 것이라는 기대를 주기 위해 시각적 힌트를 주기도 한다. | ||
| + | * Page turn/ Page flip 이전에는 Previous/Next button이나 이와 유사한 방식을 사용하였다. | ||
| + | |||
| + | === Example : iOS_Flipboard === | ||
| + | {{#Widget:Vimeo|id=93372596|width=300|height=405|start=4s}} | ||
| + | ---- | ||
| + | |||
| + | == Scroll == | ||
| + | <div id="sun-col"> | ||
=== 248번 사례 === | === 248번 사례 === | ||
* 화면을 위아래로 drag하면 소실점에 맞춰 달력이 움직인다. | * 화면을 위아래로 drag하면 소실점에 맞춰 달력이 움직인다. | ||
| − | + | {{#Widget:Vimeo|id=93552094|width=300|height=533}} | |
=== Isabella Stewart Gardner Museum - Touch Table Prototype === | === Isabella Stewart Gardner Museum - Touch Table Prototype === | ||
* 터치테이블에서 화면을 drag하여 세로로 화면을 이동한다. | * 터치테이블에서 화면을 drag하여 세로로 화면을 이동한다. | ||
* 단, 아래 영상의 45 ~ 53초에 해당한다. | * 단, 아래 영상의 45 ~ 53초에 해당한다. | ||
| − | + | {{#Widget:Vimeo|id=42073036|width=665|height=374}} | |
=== 430번 사례 === | === 430번 사례 === | ||
* 립모션에서 손바닥을 화면 방향으로 향하게 한 채로 상/하로 움직여 다음 화면으로 이동한다. | * 립모션에서 손바닥을 화면 방향으로 향하게 한 채로 상/하로 움직여 다음 화면으로 이동한다. | ||
| − | + | {{#Widget:Vimeo|id=93327398|width=665|height=374}} | |
=== 82번 사례 === | === 82번 사례 === | ||
| Line 22: | Line 93: | ||
=== 443번 사례 === | === 443번 사례 === | ||
* 위아래로 swipe해서 이전,다음 기사로 이동한다. | * 위아래로 swipe해서 이전,다음 기사로 이동한다. | ||
| − | + | {{#Widget:Vimeo|id=93045292|width=300|height=405}} | |
=== 482번 사례 === | === 482번 사례 === | ||
* 상단의 시청중인 영상은 고정 되어 있고, 아래의 화면을 상/하로 drag하여 화면을 이동시킨다. | * 상단의 시청중인 영상은 고정 되어 있고, 아래의 화면을 상/하로 drag하여 화면을 이동시킨다. | ||
| − | + | {{#Widget:Vimeo|id=93362816|width=300|height=455}} | |
=== 210번 사례 === | === 210번 사례 === | ||
* 터치휠이 위치한 부분을 시계반대방향 혹은 시계방향으로 drag하여 현재 화면 내에서 다음 화면 리스트 중 활성영역을 위아래로 이동하여 선택한다. | * 터치휠이 위치한 부분을 시계반대방향 혹은 시계방향으로 drag하여 현재 화면 내에서 다음 화면 리스트 중 활성영역을 위아래로 이동하여 선택한다. | ||
| − | + | {{#Widget:Vimeo|id=95703749|width=300|height=533}} | |
| + | |||
| − | + | </div> | |
| − | + | ||
| − | + | ||
[[Category:Move in same level]] | [[Category:Move in same level]] | ||
Page turn/ Page flip은 컨텐츠 화면 간 이동할 때 사용하는 pattern이다. 주로 현재 페이지와 유사한 성격의 컨텐츠 간을 이동할 때 사용된다.
전후의 페이지를 이동하는 방식에 따라 구분이 가능한데, 주로 Paper flip 방식이 사용되며, Card flip, Cube flip, Slideshow 방식으로 분류할 수 있다. Page turn/ Page flip을 호출하는 방법은 주로 화면 좌우의 이동버튼이나 flick을 이용하여 동작시킨다.
저장 공간이 충분해 지면서 디지털기기의 컨텐츠 양이 기하급수적으로 증가하여, 많은 양의 컨텐츠를 효과적으로 보기 위한 pattern이 필요하다. Page turn/ Page flip은 많은 양의 컨텐츠를 쉽게 볼 수 있는 기능을 제공한다.