입력 서식 샘플
폼 요소 크기
| 요소 | 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 15px
여백: PC 24/12px · MO 20/8px
|
.select
높이: PC·MO 48px
글자: PC·MO 15px
여백: PC 20/8px · MO 16/8px
|
.select-sm
높이: PC·MO 40px
글자: PC 15px · MO 13px
여백: PC 16/8px · MO 12/4px
|
.select-xsm
최소 높이: PC·MO 30px
글자: PC 13px · MO 11px
여백: 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
|
정의 없음 |
모바일 크기 전환
.textfield-mobile-sm / .textfield-mobile-xsm / .select-mobile-xsm / .btn-mobile-xsm / .btn-mobile-sm
- 셀렉트에는
.select-mobile-xsm, 일반 버튼·액션 버튼에는.btn-mobile-xsm을 추가해 기존 PC 크기를 유지하면서 모바일에서 Extra small 크기로 전환합니다. - 콘텐츠 안에서 기본 컨트롤의 크기 단계를 별도로 바꾸는 경우에 사용합니다. 출력수
.per-page처럼 역할이 명확한 컴포넌트의 반응형 크기는 해당 컴포넌트에서 정의합니다. - Extra small: 높이 30px · 글자 11px · 좌우 여백 12px · 상하 여백 4px · 모서리 10px
.btn-mobile-sm은 모바일에서 Small 높이 40px·글자 13px로 전환합니다. 좌우 여백 12px·상하 여백 4px·모서리 10px을 함께 적용합니다..textfield-mobile-sm은 모바일에서 Small 40px,.textfield-mobile-xsm은 Extra small 30px의 높이·여백·모서리로 전환하며 입력 글자의 최소 16px은 유지합니다.- 액션 버튼은 PC 기본 높이 32px을 유지합니다. 별도 크기 규칙이 있는
.btn-pill·.btn-search·.btn-register에는 적용하지 않습니다.
폼 배치
.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()호출
기간
필수 기간* 필수 입력
파일 첨부
component.fileUpload(id, files, guide, accept, multiple, dropText, label)
- BRD와 ESCR이 같은 파일 선택·선택 목록·드롭 영역 구조를 사용합니다.
- 선택 목록과 삭제 버튼은 상태별 마크업 예시입니다. 파일 선택 결과 반영·개수와 형식 검증·삭제·드롭·서버 처리는 backend/application에서 연결합니다.
- dropText로 드롭 안내를 지정하고, label로 파일 선택 입력의 목적을 구분합니다. 생략하면 기존 안내와 파일 선택 이름을 사용합니다.
- 안내문은 선택 항목이며 제공할 때만 표시합니다. Mobile의 선택 파일은 파일 개수와 관계없이 선택 버튼 다음 줄에 표시합니다.
선택 전 · 안내 없음
파일을 선택해주세요.
파일을 여기에 끌어다 놓으세요.
선택 전 · 안내 있음
파일을 선택해주세요.
파일을 여기에 끌어다 놓으세요.
최대 50MB, 파일 형식(PDF, HWP, ZIP, JPG, PNG) 제한 없음. 여러 개 선택 가능.
파일 1개 · 안내 없음
파일을 선택해주세요.
공직자윤리위원회_취업자.xlsx
파일을 여기에 끌어다 놓으세요.
파일 1개 · 안내 있음
파일을 선택해주세요.
공직자윤리위원회_취업자.xlsx
파일을 여기에 끌어다 놓으세요.
최대 50MB, 파일 형식(PDF, HWP, ZIP, JPG, PNG) 제한 없음. 여러 개 선택 가능.
파일 여러 개 · 안내 없음
파일을 선택해주세요.
공직자윤리위원회_취업자.xlsx
시스템 안내문.pdf
공직자윤리위원회_위원리스트.pdf
공직자윤리위원회.xlsx
image.jpg
파일을 여기에 끌어다 놓으세요.
파일 여러 개 · 안내 있음
파일을 선택해주세요.
공직자윤리위원회_취업자.xlsx
시스템 안내문.pdf
공직자윤리위원회_위원리스트.pdf
공직자윤리위원회.xlsx
image.jpg
파일을 여기에 끌어다 놓으세요.
최대 50MB, 파일 형식(PDF, HWP, ZIP, JPG, PNG) 제한 없음. 여러 개 선택 가능.