Fieldset Style

HTML Templete

See the Pen ExWdYVM by kimgoeun (@kimgoeun-the-decoder) on CodePen.

적용 예시

학생독립만세의 디자인시스템, HDML(HDM-Look)은 프로덕트 디자인에 일관된 사용자 경험을 제공하기 위해 만들어졌습니다.

Typography

legend 섹션 타이틀 기본 가운데 정렬 legend 태그 섹션 타이틀 H 태그 기본 왼쪽 정렬

학생독립만세 HDML H1

학생독립만세 HDML H2

학생독립만세 HDML H3

학생독립만세 HDML H4

학생독립만세 HDML H5 : 'fieldset_title'에 사용

학생독립만세 HDML H6

P 태그

학생독립만세의 디자인시스템, HDML(HDM-Look)은 프로덕트 디자인에 일관된 사용자 경험을 제공하기 위해 만들어졌습니다.

Color

--indie-indigo : #3c4576;

예시 텍스트

--dark-indigo : #30375E;

예시 텍스트

--light-indigo : #6b79bc;

예시 텍스트

--dim-green : #eff4f1;

예시 텍스트

--active-green : #67CCAE;

예시 텍스트

--growth-green : #00aa5f;

예시 텍스트

--bright-green : #00BC72;

예시 텍스트

--light-green : #def5ee;

예시 텍스트

--bg-green : #def5ee;

예시 텍스트

--bg-gray : #f5f5f5;

예시 텍스트

--pale-gray : #eaeaea;

예시 텍스트

--gray : #C4C4C4;

예시 텍스트

--btn-gray : #b7bcbf;

예시 텍스트

--line-gray : #C7CED4;

예시 텍스트

--default : #94909E;

예시 텍스트

--active-gray : #54515C;

예시 텍스트

--youth-peach : #f3ab9c;

예시 텍스트

--warning : #f73709;

예시 텍스트

Col Size

col

col_auto width : auto

col_1

8%

col_2 16%

col_3 25%

col_4 33%

col_5 40%

col_6 50%

col_7 58%

col_8 66%

col_9 75%

col_10 83%

col_11 92%

col_12 100%

Text Application

Legend, Title, Description, Label

Legend : 섹션 타이틀

P : 더욱 상세한 내용은 이곳에 입력합니다.

H5 : 섹션 타이틀

H6 : 서브 타이틀 디스크립션

label : 입력창 라벨

span : .hint_text 힌트텍스트

Source Code

See the Pen ZEeqzJw by kimgoeun (@kimgoeun-the-decoder) on CodePen.

실제 적용 예시

Sample Case

소득공유 후불제 지원하기

활동 이력과 심리검사 결과를 통해,
정직도와 성실도를 평가에 반영합니다.

회원님의 정보를 입력해주세요.

* 필수 입력

이름

이메일

이메일 형식을 정확하게 입력해주세요.

성별

남자

여자

(필수) 서비스 이용 약관 동의

(필수) 개인정보 취급방침 동의

(선택) 마케팅 이용 수신 동의

먼저 배우고 나중에 내는 후불제 방식을 선택한 이유가 무엇인가요?

후불제 방식이 학생에게 적합하다고 판단한 이유에 대해 구체적으로 적어주세요.

최소 200자 이상 내용을 입력해주세요! (0/200)

Source Code

See the Pen Sample 1 by kimgoeun (@kimgoeun-the-decoder) on CodePen.

050 - button

Class Name

.hdm_btn_common

.hdm_btn_point

.hdm_btn_prev
.hdm_btn_next

.hdm_btn_detail

.hdm_btn_texttype

.hdm_btn_linetype

Active Status

Inactive Status

100 - Input type : "text"

full_input_group

Inline Label

Parent div class : "input_inline_label"

Default Status

Inactive Stasus

Required Status

Top Label

Parent div class : input_top_label
'input_form'에 : "input_full_width"

입력창 라벨

No Label Full Width

'input_form' class name : "input_full_width"

part_input_group

Top Label, seperated Width

Parent div class : "part_input_group"와 width(col_n)값 지정
Child div class : "input_top_label"

이름

닉네임

비밀번호

Inline Label, seperated Width

Parent div class : "part_input_group"
Child div class : 'input_label'과 'input_form'에 각각 width(col_n)값 지정

이름

닉네임

110~160 - Input Type : Valiation

110

input type : Password

비밀번호

비밀번호를 확인해주세요.

120

input type : Email

이메일

이메일 형식에 맞춰 입력하세요.

130

input type : Tel

전화번호

하이픈'-' 제외하고 숫자만 입력하세요.

140

input type : Number

나이

150

input type : Address

주소

160

input type : Textarea

내용 입력

260 - checkbox

기본형

(필수) 서비스 이용 약관 동의

(필수) 개인정보 취급방침 동의

(선택) 마케팅 이용 수신 동의

응용형

(필수) 서비스 이용 약관 동의

(필수) 개인정보 취급방침 동의

인라인

1

2

3

4

301 - datalist

Inline Label

Datalist Inline

Top Label

Datalist Top Label

350 - Select

Inline Label

선택

Top Label

옵션을 선택하세요.

355 - Option input

옵션을 선택하세요.

400 - Range

Full Width

범위를 지정해주세요.

최소값 최대값 표시

범위를 지정해주세요.

최소값 최대값

Inline Width

범위를 지정해주세요.

410 - likert

500 - date

Date

생년월일

Datetime Local

일시를 입력하세요.

510 - Date Split

Date Split

연도

월

일

연도

월

일

Time Split

구분

시간

분

초

* form 내 '시','분','초' 단위 표기 script 작업 필요

시

분

초

Datetime Split

600 - File

Top Label

파일 업로드

Inline Label

파일 업로드

multiple 여러 파일 선택

파일 업로드

710 - Group List

인풋그룹, 그 중 하나만 순서바꾸기 접기 삭제하기 추가하기

720 - Dictionary Dictionary

인풋그룹, 전체 덩어리를 순서바꾸기 접기 삭제하기 추가하기

800 - Content

801 LABEL

802 LINK

820 - Media

821 IMAGE

822 VIDEO

829 YOUTUBE

830 - Document

831 HTML

832 PDF

850 - Dialog

851 SIMPLE DIALOG

852 FORM DIALOG

855 BROWSER ALERT

865 BROWSER CONFIRM

HDML-학생독립만세 디자인 시스템

HTML Templete

적용 예시

학생독립만세 HDML H1

학생독립만세 HDML H2

학생독립만세 HDML H3

학생독립만세 HDML H4

학생독립만세 HDML H5 : 'fieldset_title'에 사용

학생독립만세 HDML H6

Legend, Title, Description, Label

H5 : 섹션 타이틀

H6 : 서브 타이틀 디스크립션

Source Code

Sample Case

회원님의 정보를 입력해주세요.

* 필수 입력

먼저 배우고 나중에 내는 후불제 방식을 선택한 이유가 무엇인가요?

후불제 방식이 학생에게 적합하다고 판단한 이유에 대해 구체적으로 적어주세요.

Source Code

Class Name

Active Status

Inactive Status

full_input_group

Inline Label

Parent div class : "input_inline_label"

Top Label

Parent div class : input_top_label 'input_form'에 : "input_full_width"

No Label Full Width

'input_form' class name : "input_full_width"

part_input_group

Top Label, seperated Width

Parent div class : "part_input_group"와 width(col_n)값 지정 Child div class : "input_top_label"

Inline Label, seperated Width

Parent div class : "part_input_group" Child div class : 'input_label'과 'input_form'에 각각 width(col_n)값 지정

110

input type : Password

120

input type : Email

130

input type : Tel

140

input type : Number

150

input type : Address

160

input type : Textarea

기본형

응용형

인라인

기본형

응용형

인라인

Inline Label

Top Label

Inline Label

Top Label

Full Width

최소값 최대값 표시

Inline Width

Date

Datetime Local

Date Split

Time Split

Datetime Split

Top Label

Inline Label

multiple 여러 파일 선택

Parent div class : input_top_label
'input_form'에 : "input_full_width"

Parent div class : "part_input_group"와 width(col_n)값 지정
Child div class : "input_top_label"

Parent div class : "part_input_group"
Child div class : 'input_label'과 'input_form'에 각각 width(col_n)값 지정