메인 화면에 나온 필수 컨트롤(버튼, 입력창, 캘린더, 그리드)의 기본 형태와 상태별 속성값을 총망라하여 정리했습니다.
| Section |
|---|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderStyle | solid |
|---|
| 버튼 형태 및 상태 (Button States) 가장 많이 쓰는 기본(Normal) 상태와 마우스를 올렸을 때(Hover)의 설정값입니다. 주요 버튼 (저장, 조회 등) 기본 (Normal) 높이 36px
둥글기 4px
배경색 #0052CC 마우스오버 (Hover) 배경색 #0043CC |
| 보조 버튼 (취소, 닫기 등) 기본 (Normal) 높이 36px
테두리 #DFE1E6
글자색 #172B4D 마우스오버 (Hover) 배경색 #F4F5F7 |
|
|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderStyle | solid |
|---|
| 일반 폼 컨트롤 (Form Inputs) 입력창, 캘린더, 콤보박스의 공통 속성입니다. 텍스트 입력 2024-03-24 [달력] 옵션 선택하기 ▼ | 높이 (Height) | 36px | | 테두리 (Border) | #DFE1E6 (기본선) | | 내부 여백 | 텍스트가 붙지 않게 10px |
|
|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderStyle | solid |
|---|
|
데이터 그리드 상세 설정 (Grid Details) 행 높이 비례 가이드 사용하시는 폰트 크기에 맞춰 조절하세요.
• 표준 (14px) : 36px
• 밀집 (12px) : 32px
• 초밀집 (11px) : 28px | 행/열 테두리 꿀팁 모든 선을 진하게 그으면 데이터가 갇혀 보입니다. 바깥 테두리는 #DFE1E6로 영역을 잡고, 가로/세로 내부 선은 가장 연한 #F4F5F7를 쓰거나 세로선은 투명(없음)으로 처리해 보세요. |
그리드 스타일 해부도 (Anatomy) | 헤더 (Header) | #F4F5F7 바탕, Bold, 텍스트 중앙 정렬. 하단 라인은 조금 더 진하게 1px solid #C5CDD7 | | 일반 행 (Data) | #FFFFFF 바탕 기본 데이터. 텍스트 좌측, 숫자 우측 정렬 유지. | | 반복 행 (Zebra) | #FAFBFC (데이터 구분을 위한 아주 옅은 회색 배색) | | 소계 (Subtotal) | #F4F5F7 바탕, Bold. 상단에 1px solid #C5CDD7 선 추가하여 구분 | | 총합계 (Total) | #E4ECF0 바탕, Bold. 상단에 더 진한 1px solid #A9B4C3 선 추가하여 강력한 구분 |
|
...