|
|
(16 intermediate revisions by 2 users not shown) |
Line 1: |
Line 1: |
− | {{#css:
| + | Step indicators는 여러 항목의 데이터를 입력해서 어플을 사용할 경우, 그 입력단계를 구분하여 각 단계별 진행상황을 보여주는 패턴이다. 순차적으로 데이터를 입력해야만 다음 단계로 진행할 수 있다는 특징이 있다. 입력한 데이터가 잘못 입력된 경우 이전 단계로 이동하여 수정할 수 있다. |
− | #mw-content-text h3 span {
| + | |
− | font-weight: 600;
| + | |
− | padding-left: 0px;
| + | |
− | }
| + | |
| | | |
− | .mw-headline { | + | === With this pattern, we can solve... === |
− | font-weight: 600;
| + | * 데이터를 기입하는 순서와 행동을 보여주며 이 중 현재 어느 정도 진행했고, 앞으로 어떤 것이 있는지에 대해 확인할 수 있도록 모형이나 문자를 이용하여 알려준다. |
− | }
| + | * [[Page indicatros]]와 유사하게 현재 진행정도를 나타내 준다. |
| + | * Navigation 기능을 갖기도 한다. |
| | | |
− | span.mw-editsection {
| + | ===Example === |
− | font-weight: 200;
| + | [[file:Step_indicator.JPG|310px]] |
− | 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;
| + | |
− | -->
| + | |
− | }
| + | |
− | | + | |
− | }}
| + | |
− | 데이터를 기입하는 순서와 행동을 보여주며 이 중 현재 어느 정도 진행했고, 앞으로 어떤 것이 있는지에 대해 확인할 수 있도록 모형이나 문자를 이용하여 알려준다.
| + | |
− | | + | |
− | | + | |
− | == Examples ==
| + | |
− | === 331번 사례 ===
| + | |
− | * 데이터를 입력하고 여러 단계를 거치는 동안 프로세스의 진행 정도를 확인한다.
| + | |
− | 촬영불가자료_이미지로대체
| + | |
| | | |
| === iOS_MyFitnessPal === | | === iOS_MyFitnessPal === |
Line 72: |
Line 18: |
| | | |
| | | |
− | [[Category:Show_progress_state]] | + | [[Category:Indicate position]] |
Latest revision as of 13:06, 21 July 2014
Step indicators는 여러 항목의 데이터를 입력해서 어플을 사용할 경우, 그 입력단계를 구분하여 각 단계별 진행상황을 보여주는 패턴이다. 순차적으로 데이터를 입력해야만 다음 단계로 진행할 수 있다는 특징이 있다. 입력한 데이터가 잘못 입력된 경우 이전 단계로 이동하여 수정할 수 있다.
With this pattern, we can solve...
- 데이터를 기입하는 순서와 행동을 보여주며 이 중 현재 어느 정도 진행했고, 앞으로 어떤 것이 있는지에 대해 확인할 수 있도록 모형이나 문자를 이용하여 알려준다.
- Page indicatros와 유사하게 현재 진행정도를 나타내 준다.
- Navigation 기능을 갖기도 한다.
Example
iOS_MyFitnessPal
iOS_Uber