메인 화면에 나온 필수 컨트롤(버튼, 입력창, 캘린더, 그리드)의 기본 형태와 상태별 속성값을 총망라하여 정리했습니다.



버튼 형태 및 상태 (Button States)

가장 많이 쓰는 기본(Normal) 상태와 마우스를 올렸을 때(Hover)의 설정값입니다.

주요 버튼 (저장, 조회 등)

기본 (Normal)

저장

높이 36px
둥글기 4px
배경색 #0052CC

마우스오버 (Hover)

저장

배경색 #0043CC


보조 버튼 (취소, 닫기 등)

기본 (Normal)

취소

높이 36px
테두리 #DFE1E6
글자색 #172B4D

마우스오버 (Hover)

취소

배경색 #F4F5F7





일반 폼 컨트롤 (Form Inputs)

입력창, 캘린더, 콤보박스의 공통 속성입니다.

텍스트 입력
2024-03-24 [달력]
옵션 선택하기 ▼
높이 (Height)36px
테두리 (Border)#DFE1E6 (기본선)
내부 여백텍스트가 붙지 않게 10px





데이터 그리드 상세 설정 (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 선 추가하여 강력한 구분