Design System
Foundation
디자인 시스템이란?
컬러
타이포그래피
그리드
아이콘
Component
GNB
Input
Form
Dropdown
Selection
Accordion
Card
Footer
Carousel
Badge
Switch
Notification
Tooltip
Breadcrumb
Dialog
사용자의 특정 행동이 Trigger 가 되어 발생하는 컴퍼넌트입니다.
일방적으로 정보를 전달하거나, 특수한 경우 사용자로 부터 정보를 받을 때 사용됩니다.
Guideline
아래의 수칙을 준수하며, 필수 사항에 대해서는 꼭 사용하도록 합니다.
Scrim
필수 사항
Scrim에 들어가는 컬러 정보는 모든 해상도에서 동일합니다.
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Secondary Action
Primary Action
Gray 800 / Opacity 80%
Button
필수 사항
Primary Action 에 대해서는 세 가지가 사용될 수 있습니다.
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Secondary
Primary Action
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Secondary
Primary Action
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Secondary
Primary Action
필수 사항
Button의 정렬 방법은 두 가지 입니다.
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Secondary
Primary Action
Horizontal
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Primary Action
Secondary Action
Vertical
필수 사항
Secondary Action 은 Secondary Button으로 고정됩니다.
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Secondary
Primary Action
Do
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Secondary
Primary Action
Do Not
필수 사항
Primary Action 과 Icon의 색은 통일 합니다.
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Secondary
Primary Action
Do
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Secondary
Primary Action
Do Not
Position
필수 사항
Web과 Tablet은 Device 기준 정중앙에 위치하게 됩니다.
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Secondary Action
Primary Action
필수 사항
Mobile의 경우 Device 하단에 고정 됩니다.
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Secondary
Primary Action
Width
필수 사항
Web과 Tablet은 각각의 고정된 넓이 값을 가집니다.
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Secondary Action
Primary Action
500
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Secondary Action
Primary Action
420
필수 사항
Mobile의 경우 Device의 넓이에 비례하여 넓어집니다. 단, Max-Width(480px)를 가집니다.
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Secondary
Primary Action
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Secondary
Primary Action
480
Height
필수 사항
Web과 Tablet은 각각의 최대 높이값을 가집니다.
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Previous
Next
882px
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Previous
Next
770px
필수 사항
Mobile의 경우 Device 별 높이 기준 -40px 까지만 높아질 수 있습니다.
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Previous
Next
필수 사항
정해진 높이 값을 초과하게 되면 스크롤이 발생하게 되며, 하단 버튼 영역만 고정입니다.
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Previous
Next
Close Trigger (닫기 조건)
필수 사항
닫기 버튼이 없는 경우 Dialog 외의 영역을 클릭 또는 터치 하여 빠져나갈 수 있습니다.
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Previous
Next
필수 사항
닫는 행동에 대한 버튼은 중복하여 배치할 수 없습니다.
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Close
Open
Do
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Close
Open
Do Not