입력 서식 샘플
폼 요소 크기
| 요소 | Large | Medium | Small | Extra small |
|---|---|---|---|---|
| 입력 |
.textfield-lg
높이: PC 60px · MO 48px
글자: PC 17px · MO 16px
여백: PC 24/12px · MO 20/8px
|
.textfield
높이: PC·MO 48px
글자: PC 15px · MO 16px
여백: PC 20/8px · MO 16/8px
|
.textfield-sm
높이: PC·MO 40px
글자: PC 15px · MO 16px
여백: PC 16/8px · MO 12/4px
|
.textfield-xsm
최소 높이: PC·MO 30px
글자: PC 13px · MO 16px
여백: PC 12/8px · MO 12/4px
|
| 선택 |
.select-lg
높이: PC 60px · MO 48px
글자: PC 17px · MO 16px
여백: PC 24/12px · MO 20/8px
|
.select
높이: PC·MO 48px
글자: PC 15px · MO 16px
여백: PC 20/8px · MO 16/8px
|
.select-sm
높이: PC·MO 40px
글자: PC 15px · MO 16px
여백: PC 16/8px · MO 12/4px
|
.select-xsm
최소 높이: PC·MO 30px
글자: PC 13px · MO 16px
여백: PC 12/8px · MO 12/4px
|
| 버튼 |
.btn-lg
높이: PC 60px · MO 48px
글자: PC 17px · MO 15px
여백: PC 24/12px · MO 20/8px
|
.btn
높이: PC·MO 48px
글자: PC 17px · MO 15px
여백: PC 20/8px · MO 16/8px
|
.btn-sm
높이: PC·MO 40px
글자: PC 15px · MO 13px
여백: PC 16/8px · MO 12/4px
|
.btn-xsm
최소 높이: PC·MO 30px
글자: PC 13px · MO 11px
여백: PC 12/8px · MO 12/4px
|
| 체크박스 |
.check-lg
크기: PC·MO 32px
글자: PC 17px · MO 15px
|
.check
크기: PC·MO 24px
글자: PC·MO 15px
|
.check-sm
크기: PC·MO 18px · 클릭 영역 최소 24×24px
글자: PC 15px · MO 13px
|
정의 없음 |
| 라디오 |
.check-lg
크기: PC·MO 32px
글자: PC 17px · MO 15px
|
.check
크기: PC·MO 24px
글자: PC·MO 15px
|
.check-sm
크기: PC·MO 18px · 클릭 영역 최소 24×24px
글자: PC 15px · MO 13px
|
정의 없음 |
폼 배치
.box.box-form / .form-narrow / .form-field-group
- 등록·수정 등 입력 중심 화면의 바깥 영역:
.box.box-form사용 - 한 열 입력 영역을 좁은 너비로 가운데 배치:
.form-narrow사용 - 패널 안에서 연관된 필드·필수 입력 안내·표를 하나의 입력 묶음으로 배치:
.form-field-group사용
*필수 입력
/
/
/
/
Small 체크박스
체크박스
전체 선택
라디오 버튼* 필수 입력
조건부 입력* 필수 입력
- 선택 항목과 조건부 영역 연결: 같은
data-toggle-group값 사용 - 선택 항목과 표시할 영역 연결: 같은
data-toggle값 사용 - 조건부 영역 동적 추가 후 갱신:
FEUI.toggleFormControl.update()호출
기간
필수 기간* 필수 입력