메인 화면에 나온 필수 컨트롤(버튼, 입력창, 캘린더, 그리드)의 기본 형태와 상태별 속성값을 정리했습니다.
...
| width | 50% |
|---|
...
| borderColor | #DFE1E6 |
|---|---|
| bgColor | #ffffff |
| borderStyle | solid |
버튼 형태 및 상태 (Button States)
가장 많이 쓰는 기본(Normal) 상태와 마우스를 올렸을 때(Hover)의 설정값입니다.
...
주요 버튼 (저장, 조회 등)
기본 (Normal)
| 저장 |
높이 36px
둥글기 4px
배경색 #0052CC
마우스오버 (Hover)
| 저장 |
배경색 #0043CC
...
1. 일반 폼 컨트롤 및 버튼 규격
자주 쓰는 버튼과 입력창의 형태(높이 36px)를 통일하여 시스템의 일관성을 높여 보세요.
| 컨트롤 종류 | 표준 높이 | 디자인 속성 및 상태 (State) |
|---|---|---|
| 주요 버튼 (저장, 승인 등) | 36px | 기본 저장 배경: #0052CC / 글자: 흰색 Hover 저장 배경: #0043CC (약간 짙어짐) |
| 보조 버튼 (취소, 닫기 등) | 36px | 기본 |
...
| 취소 |
...
마우스오버 (Hover)
| 취소 |
배경색 #F4F5F7
취소 테두리: #DFE1E6 / 글자: #172B4D Hover 취소 배경: #F4F5F7 (약간 어두워짐) | ||
| 입력창 / 캘린더 | 36px | 테두리: #DFE1E6 |
...
| 둥글기: 4px 내부여백: Left 12px |
2. 테마별 데이터 그리드 색상 적용표 (Grid Theme Colors)
대시보드의 주조색(Primary Color) 테마에 맞춰, 데이터 그리드의 '헤더/반복행/선택행/테두리' 색상을 짝지어 입력해 보세요.
| Section | |||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
데이터 그리드 상세 설정 (Grid Details)
그리드 스타일 해부도 (Anatomy) | |||||||||||||||||||||||||||||||||||||||||||
| 헤더 (Header) | #F4F5F7 바탕, Bold, 텍스트 중앙 정렬. 하단 라인은 조금 더 진하게 1px solid #C5CDD7 | ||||||||||||||||||||||||||||||||||||||||||
| 일반 행 (Data) | #FFFFFF 바탕 기본 데이터. 텍스트 좌측, 숫자 우측 정렬 유지. | ||||||||||||||||||||||||||||||||||||||||||
| 반복 행 (Zebra) | #FAFBFC (데이터 구분을 위한 아주 옅은 회색 배색) | ||||||||||||||||||||||||||||||||||||||||||
| 소계 (Subtotal) | #F4F5F7 바탕, Bold. 상단에 1px solid #C5CDD7 선 추가하여 구분 | ||||||||||||||||||||||||||||||||||||||||||
| 총합계 (Total) | #E4ECF0 바탕, Bold. 상단에 더 진한 1px solid #A9B4C3 선 추가하여 강력한 구분 |
|
| Column | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||
|
| Column | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||
|