(Created page with "페이지가 넘어가듯 화면이 전환된다. == Examples == === 180번 사례 === * 특정 항목을 선택하면 하위 항목이 접혀진 상태에서 펼쳐지듯...") |
|||
| Line 1: | Line 1: | ||
| − | + | {{#css: | |
| + | #mw-content-text h3 span { | ||
| + | font-weight: 600; | ||
| + | padding-left: 0px; | ||
| + | } | ||
| + | .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; | ||
| + | --> | ||
| + | } | ||
| + | |||
| + | }} | ||
| + | Accordion은 세로로 쌓여진 목록에서 선택한 항목과 관련된 내용이 악기 아코디언처럼 확장되거나 늘어나는 패턴이다. 확장목록은 없을 수도 하나이거나 그 이상일 수도 있으며 리스트에서 많은 공간을 확보하기 위해 사용된다. | ||
| + | |||
| + | Accordion은 탭을 통한 리스트뷰와 유사한 목적을 가지지만 GUI적 효과에서 구분된다. | ||
| + | |||
| + | === What Problem Does This Solve? === | ||
| + | * 한정된 화면, 즉 제한된 공간을 사용하는 경우에 대표성을 띄는 항목들을 목록으로 구성하고 각각의 항목에 해당하는 내용을 확장해 보여줌으로 화면을 효율적으로 디자인할 수 있다. | ||
| + | |||
| + | === Example : iPhone === | ||
| + | {{#Widget:Vimeo|id=95488635|width=300|height=405|start=4s}} | ||
| + | |||
| + | [[Category:Accordion]] | ||
| + | |||
| + | <!-- | ||
=== 180번 사례 === | === 180번 사례 === | ||
* 특정 항목을 선택하면 하위 항목이 접혀진 상태에서 펼쳐지듯 보여준다. | * 특정 항목을 선택하면 하위 항목이 접혀진 상태에서 펼쳐지듯 보여준다. | ||
<videoflash type="vimeo">95488635|300|490</videoflash> | <videoflash type="vimeo">95488635|300|490</videoflash> | ||
| − | + | --!> | |
[[Category:Accordion]] | [[Category:Accordion]] | ||
Accordion은 세로로 쌓여진 목록에서 선택한 항목과 관련된 내용이 악기 아코디언처럼 확장되거나 늘어나는 패턴이다. 확장목록은 없을 수도 하나이거나 그 이상일 수도 있으며 리스트에서 많은 공간을 확보하기 위해 사용된다.
Accordion은 탭을 통한 리스트뷰와 유사한 목적을 가지지만 GUI적 효과에서 구분된다.