이 웹사이트는 IE 9 이하 버전을 지원하지 않습니다. 최신 브라우저로 업데이트하시길 바랍니다.

UI 요소

Grid System

Column은 최대 12개로 구성되어있습니다. 각 column의 너비는 상위 요소의 너비에 비례해 유동적으로 변화하며, 각 column 사이의 gutter는 30px입니다. 좁은 너비에서는 column의 너비를 적절히 확보하기 위해 2배수의 column을 사용하기를 권장합니다.

Buttons

버튼은 5가지 종류가 있으며 세가지 크기로 구분합니다. 이 이외의 버튼 스타일은 사용하지 않습니다. 각 버튼의 설명을 숙지하고 목적에 맞게 사용하도록합니다.

Button Default

가장 기본이 되는 버튼입니다. 일반적인 상황에 사용합니다.

Normal
Hover
Active
Disabled
Button Danger

삭제, 탈퇴 등 주의를 요하는 액션에 사용하는 버튼입니다. Normal 상태일때는 Button default와 똑같이 보이도록 하여 불필요한 주의를 끌지 않지만 hover, focus, active 상태에선 버튼이 붉게 변하며 사용자에게 경고 메시지를 전달하는 역할을 합니다.

Normal
Hover
Active
Disabled
Button Primary

Button Default와 Button Solid의 중간정도 위계를 갖는 액션에 사용합니다. 가급적 한 페이지에서 중복하지 않고, 1번만 사용하도록 합니다.

Normal
Hover
Active
Disabled
Button Solid

강력한 시선의 환기 또는 해당 페이지의 키액션 등에 사용하는 버튼입니다. 한 페이지에 1번만 쓰입니다.

Normal
Hover
Active
Disabled
Button Convex

특별히 어포던스가 높아야하는 매체에서 사용하는 버튼입니다. 일반적인 웹에서는 사용하지 않습니다.

Normal
Hover
Active
Disabled
Button Size

버튼 크기는 normal과 large가 있습니다. 일반적으로는 normal 버튼을 사용하지만, 버튼의 크기가 강조되어야할 경우엔 large 버튼을 사용합니다.

Normal size
Large size
Button Block

일반적인 버튼 너비는 버튼 레이블에 따라 결정됩니다. 이와 달리 column의 너비에 꽉 채운 버튼을 button block이라고 부릅니다. 관습적으로 button large와 button block은 자주 같이 사용합니다.

Button block normal size
Button block large size
Button Group

비슷한 액션을 하는 버튼은 모아서 group으로 만들어 사용합니다.

Alerts

얼럿은 사용자의 행동에 피드백이 필요할 때 사용합니다. 상황에따라 Info, Success, Danger의 세가지 종류를 적절히 사용합니다.

Alert info
Alert success
Alert danger

Toasts

토스트는 상단에 고정되어 나타나며 일정 시간이 지나면 사라집니다.

Toast info
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Toast success
Duls sagittis ipsum. Prasent mauris
Toast danger
Sed cursus ante dapibus diam. sed nisi. nulla quis sem

Forms

Basic Form

모든 입력창에 공통적으로 적용되는 기본적인 스타일입니다. 상태에 맞게 적절한 스타일을 적용해, 사용자가 현재 상태를 파악하기 쉽도록 합니다.

Class aptent taciti sociosqu ad litora torquent per conubia nostra
Group of Form

경우에 따라 폼은 버튼이나 셀렉트, 다른 폼들과 그룹으로 묶어 함께 사용할 수 있습니다.

button
button
Date & Period Form

날짜 입력창입니다. 기간을 입력할 때에는 아래와 같이 시작일과 끝일의 창을 붙여 연관관계를 나타냅니다.

Form Add-on

입력창의 앞뒤에 단위 등 고정된 텍스트를 넣고 싶을 때 아래와 add-on을 붙입니다.

$
Static Text

레이블과 데이터는 아래과 같이 상하배열 합니다. 데이터가 입력창 사이에 표기될 경우엔 텍스트의 위치가 입력창에 중앙정렬 되도록 레이블과의 간격을 넓힙니다.

Nam nec ante
029-1929-4738
2015-03-05
Litora torquent
Checkboxes & Radios

체크박스와 라디오버튼은 상황에 맞게 세로 정렬과 가로 정렬을 혼용해 사용합니다.

Toggle

토글의 원리는 체크박스와 같지만, 체크박스로는 상태를 분명히 나타낼 수 없을 때 사용합니다. 체크박스 대신에 남용되지 않도록 주의합니다.

Invalid Form

각종 폼의 invalid 스타일입니다.

Urna non tincidunt mattis, tortor neque adipiscing diam
Form Section

하나의 액션 버튼으로 묶이는 모든 폼은 한 카드로 묶으며 하단에 액션 버튼이 sticky footer임을 유의합니다. 카드 내의 레이아웃은 어떤 환경에서도 쾌적하게 보이도록 가능한한 6 column으로 배치합니다.

Form section title

Table

테이블을 구성하는 기본 요소는 테이블 제목과 테이블 내용입니다. 여기에 상황에 따라 테이블 옵션, 테이블 내 검색필터와 검색 창, 페이지네이션, 뷰 옵션을 붙여 사용합니다.

Table title
Table information
tortor sodales neque lectus
1 Neque adipiscing diam amet 3092
2 Class aptent taciti lacinia 12930
3 In scelerisque sem tortor 5943
4 Aenean lectus elit quam 149
5 Quisque nisl felis, venenatis quis 2743
6 neque adipiscing diam Morbi 284
7 Integer lacinia sollicitudin sit 49378
8 Praesent blandit dolor purus 93172
9 In vel mi sit amet augue congue imperdiet 4393
10 Sed pretium blandit orci aliquet 58722