메인 화면에 나온 필수 컨트롤(버튼, 입력창, 캘린더, 그리드)의 기본 형태와 상태별 속성값을 총망라하여 정리했습니다.
버튼 형태 및 상태 (Button States)
가장 많이 쓰는 기본(Normal) 상태와 마우스를 올렸을 때(Hover)의 설정값입니다.
주요 버튼 (저장, 조회 등) 기본 (Normal)
높이 마우스오버 (Hover)
배경색 | 보조 버튼 (취소, 닫기 등) 기본 (Normal)
높이 마우스오버 (Hover)
배경색 |
일반 폼 컨트롤 (Form Inputs)
입력창, 캘린더, 콤보박스의 공통 속성입니다.
텍스트 입력
2024-03-24 [달력]
옵션 선택하기 ▼
| 높이 (Height) | 36px |
| 테두리 (Border) | #DFE1E6 (기본선) |
| 내부 여백 | 텍스트가 붙지 않게 10px |
데이터 그리드 상세 설정 (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 선 추가하여 강력한 구분 |
