...
️ 1. 대표적인 업무 화면 레이아웃 3가지 더 많은 레이아웃 보러가기 →
목적에 맞는 레이아웃을 선택하세요. 화면 최상단에는 공통적으로 [페이지 제목]과 [조회/검색 영역]이 들어갑니다.
...
️ 2. 대시보드를 위한 '절대 간격' 공식
제목과 본문 사이는 얼마나 띄워야 할까요? 위젯(카드) 사이는요? 아래 4가지 숫자 (24, 20, 16, 8)를 똑같이 적용해 보세요.
| Section |
|---|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderWidth | 1 |
|---|
| borderStyle | none |
|---|
|  Image Removed Image Added
|
|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderWidth | 1 |
|---|
| borderStyle | none |
|---|
|
| 화면 가장자리 여백 | 화면의 가장 자리에서 컨텐츠 사이 여백 | 20px | | 상단 조회 조건 영역 ↔ 하단 본문 | 조회 조건 영역과 그 아래 그리드/차트가 시작되는 사이 간격 | 16px | 위젯(카드) ↔ 위젯 사이 | 여러 개의 카드를 나열할 때 카드와 카드 사이 | 소제목 ↔ 본문/차트 간격 | 위젯 안 소제목과 컨텐츠 사이 간격 | 16px | ~ 20px | | 위젯(카드) 안쪽 여백 | 위젯 가장자리와 내부 콘텐츠(글자/차트) 사이 간격 | 20px | | 소제목 ↔ 본문/차트 간격 | 위젯 안 소제목과 컨텐츠 사이 | 위젯(카드) ↔ 위젯 사이 | 여러 개의 카드를 나열할 때 카드와 카드 사이 간격 | 16px ~ 20px | | 컨트롤 ↔ 컨트롤 간격 | 라벨과 달력 컨트롤 사이, 또는 버튼과 버튼 사이의 좁은 간격 | 8px ~ 16px |
|
|
|