|
|
| 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;
| |
| − | -->
| |
| − | }
| |
| − |
| |
| − | }}
| |
| − | Toggle button/switch는 On/Off를 설정할 때 쓰이는 위와 같은 컨트롤을 토글 버튼(위) 혹은 토글 스위치(아래)라고 부릅니다. 토글 버튼의 경우 언뜻 보기에는 버트콘 같지만 선택 시에 음각(눌린) 상태로 변하는데 해당 항목이 실행되고 있음(On)을 의미하며, 다시 누를 시에는 볼록한 원래 상태(Off)로 되돌아옵니다. 토글 스위치는 모바일에서 주로 사용되며 손가락으로 직접 스위치를 좌우로 움직이거나 영역을 선택하여 On/Off 상태를 조절합니다. 이 때, 사용자가 현재 상태를 인지할 수 있는 시각적인 피드백이 반드시 필요합니다.
| |
| − |
| |
| − | Switches는 On/Off와 마찬가지로 두 개의 상호 배타적인 옵션 중 하나를 지정하는 pattern이다.
| |
| − |
| |
| − | 두 개의 옵션이 함께 보여지며 좌우로 swipe하여 설정하는 경우는 switches로, 동일한 기능이지만 하나의 설정값이 보여지며 버튼을 클릭하여 다른 설정값으로 바꾸는 경우는 toggle buttons라고 불린다. toggle buttons의 경우는 두번 누를 경우 다시 처음 설정값으로 돌아온다. switches나 toggle은 손가락으로 직접 스위치를 좌우로 움직이거나 영역을 선택하여 On/Off 상태를 조절한다. 이 때, 사용자가 현재 상태를 인지할 수 있는 시각적인 피드백이 함께 주어진다.
| |
| − | ----
| |
| − | == Toggle switch ==
| |
| − | <div id="sun-col">
| |
| − | === iOS_gmail ===
| |
| − | {{#Widget:Vimeo|id=96557102|width=300|height=533}}
| |
| − |
| |
| − | === iOS_Settings ===
| |
| − | {{#Widget:Vimeo|id=96557098|width=300|height=533}}
| |
| − |
| |
| − | ===Android_Settings ===
| |
| − | {{#Widget:Vimeo|id=96420717|width=300|height=541}}
| |
| − |
| |
| − | === Android_Etsy ===
| |
| − | {{#Widget:Vimeo|id=96420806|width=300|height=541}}
| |
| − |
| |
| − | ----
| |
| − | == Toggle button==
| |
| − | <div id="sun-col">
| |
| − |
| |
| − | === Android_Noom ===
| |
| − | {{#Widget:Vimeo|id=96421019|width=300|height=541}}
| |
| − |
| |
| − | === Android_whatcha ===
| |
| − | {{#Widget:Vimeo|id=93208930|width=300|height=528}}
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | [[Category:Make selection from pre-defined values]]
| |