...
| 종류 | 기본형 | 테두리/밑줄형 | 배경 채움형 | 투명형 |
|---|
버튼
Button | 
배경: #0052CC Border: none Corner Radius: 4 Font Size: 14pt | 
배경: #FFFFFF Border: #0052CC Corner Radius: 4 Font Size: 14pt | 
배경: #E6EFFC Border: none Corner Radius: 4 Font Size: 14pt | 
배경: 없음 Border: Corner Radius: 4 Font Size: 14pt |
캘린더
Calendar | 
배경: #FFFFFF Border: 1,1,1,1 가로: 130 Font Size: 14pt | 
배경: 없음 Border: 0,0,0,2 가로: 130 Font Size: 14pt | 
배경: #EBECF0 Border: none 가로: 130 Font Size: 14pt | 
배경: 없음 Border: none 가로: 130 Font Size: 14pt |
콤보박스
Combo Box | 
배경: #FFFFFF Border: 1,1,1,1 가로: 130 Font Size: 14pt | 
배경: 없음 Border: 0,0,0,2 가로: 130 Font Size: 14pt | 
배경: #EBECF0 Border: none 가로: 130 Font Size: 14pt | 
배경: 없음 Border: none 가로: 130 Font Size: 14pt |
...
2. 버튼 스타일
버튼 용도에 따른 스타일을 골라 사용하세요. 이미지를 클릭해 마우스 우클릭으로 복사하고, AUD디자이너에 붙여 넣으세요.
| 조회/검색 | 저장/업로드 | 추가 | 삭제 |
|---|
| Default | | | | |
| Hover | | | | |
| 조회/검색 | 저장/업로드 | 추가 | 삭제 |
|---|
| Default | | | | |
| Hover | | | | |
3. 테마별 데이터 그리드 색상표
대시보드의 주조색(Primary Color) 테마에 맞춰, 데이터 그리드의 '헤더/반복행/선택행/테두리' 색상을 짝지어 입력해 보세요.
...
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderWidth | 1 |
|---|
| borderStyle |
|---|
|
|
|
...
| 정보 |
|---|
행 높이 설정 가이드
사용하는 폰트 크기에 맞춰 그리드의 행 높이도 조절합니다. (@그리드 > 디자인 > 스타일 > 레코드 > '높이') - 표준 (14px) : 높이 36px
- 밀집 (12px) : 높이 32px
- 초밀집 (11px) : 높이 28px
|
| Vibrant Purple (SaaS/세련) | Column 스타일 | | Row 스타일 | | 행 배경 (반복) | | 선택 레코드 색 | | 마지막 레코드 색 | Column 스타일 #F4F6FA
Row 스타일 #FFFFFF
행 배경 (반복) #F9FAFC
선택 레코드 색 #F0EFFF
마지막 레코드 색 #E4E0FF
가로 테두리 #E2E8F0 |
|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderWidth | 1 |
|---|
| borderStyle | solid |
|---|
| Oceanic Blue (클래식) | Column 스타일 | | Row 스타일 | | 행 배경 (반복) | | 선택 레코드 색 | | 마지막 레코드 색 | Column 스타일 #F5F7FA
Row 스타일 #FFFFFF
행 배경 (반복) #FAFBFC
선택 레코드 색 #EBF2FA
마지막 레코드 색 #DCE7F5
가로 테두리 #E6E9ED |
|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderWidth | 1 |
|---|
| borderStyle |
|---|
|
|
|
...
| 참고사항 |
|---|
행/열 테두리(HorizontalBorder/VerticalBorder) 설정 팁 모든 선을 진하게 표시하면 데이터가 갇혀 보입니다. 바깥 테두리(Border)는 #DFE1E6로 영역을 잡고, 행/열 테두리(HorizontalBorder/VerticalBorder)는 가장 연한 #F4F5F7 를 쓰거나 세로선은 투명(없음, 혹은 Thickness 0)으로 처리해보세요. |
| Fresh Mint (의료/산뜻) | Column 스타일 | | Row 스타일 | | 행 배경 (반복) | | 선택 레코드 색 | | 마지막 레코드 색 | Column 스타일 #F4F9F8
Row 스타일 #FFFFFF
행 배경 (반복) #F9FCFB
선택 레코드 색 #E8F6F3
마지막 레코드 색 #D5EFE9
가로 테두리 #DCEFEA |
|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderWidth | 1 |
|---|
| borderStyle | solid |
|---|
| Sunset Grapefruit (알림) | Column 스타일 | | Row 스타일 | | 행 배경 (반복) | | 선택 레코드 색 | | 마지막 레코드 색 | Column 스타일 #FFF6F6
Row 스타일 #FFFFFF
행 배경 (반복) #FFFAFA
선택 레코드 색 #FDE8EA
마지막 레코드 색 #FBD5DA
가로 테두리 #FADCE0 |
|
|
| Section |
|---|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderWidth | 1 |
|---|
| borderStyle | solid |
|---|
| 블루 Standard Blue헤더 일반 데이터헤더 스타일 #F4F5F7Column 스타일 #FFFCF5
Row 스타일 #FFFFFF
행 배경 (반복) #FFF8E5
마지막 레코드 색 #FFF0CC
가로 테두리 #F7EAC4 |
|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderWidth | 1 |
|---|
| borderStyle | solid |
|---|
| 소프트 그린 (Soft Green헤더 일반 데이터헤더 스타일 #F0FAF5Column 스타일 #F6F5FB
Row 스타일 #FFFFFF
행 배경 (반복) #F0EDF9
마지막 레코드 색 #E6E0F5
가로 테두리 #E6E2F1 |
|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderWidth | 1 |
|---|
| borderStyle | solid |
|---|
| 모던 다크 (Modern Dark헤더 일반 데이터헤더 스타일 #EBECF0Column 스타일 #F6FAF2
Row 스타일 #FFFFFF
행 배경 (반복) #F0F7E9
마지막 레코드 색 #E5F2D8
가로 테두리 #E2EED5 |
|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderWidth | 1 |
|---|
| borderStyle | solid |
|---|
| 웜 오렌지 (Warm Orange헤더 일반 데이터헤더 스타일 #FFEBE6Column 스타일 #434A54
Row 스타일 #656D78
행 배경 (반복) #4B6E7D
마지막 레코드 색 #3A5A69
가로 테두리 #AAB2BD |
|
|
