UI Style Guide

Typography

다채움

Typography

서체는 기본적으로 Pretendard의 Regular, Medium, Bold 세가지 굵기를 사용합니다.

Typography Headding List
Headding	Type	Size	Weight	Color
다람쥐 헌 쳇바퀴에 타고파	XL	36px	Bold	Gray 8
다람쥐 헌 쳇바퀴에 타고파	L	24px	Bold	Gray 8
다람쥐 헌 쳇바퀴에 타고파	M	20px	Medium	Gray 8
다람쥐 헌 쳇바퀴에 타고파	S	16px	Bold	Gray 8
다람쥐 헌 쳇바퀴에 타고파	XS	14px	Bold	Gray 6

Typography Paragraph List
Paragraph	Type	Size	Weight	Color
다람쥐 헌 쳇바퀴에 타고파	L	16px	Regular	Gray 8
다람쥐 헌 쳇바퀴에 타고파	M	14px	Regular	Gray 7
다람쥐 헌 쳇바퀴에 타고파	S	12px	Regular	Gray 6

Etc
Etc
font-size	font-size-xlg font-size-lg font-size-sm
font-color	font-color-blue font-color-green font-color-pink font-color-orange font-color-red
em	em primary

Title

Title은 itle-xlg, title-lg, title, title-sm, title-xsm을 사용합니다.

page-tit-area : title-xlg

서브타이틀(2depth)

section-title-area : title-lg

타이틀 설명

title-area : title

타이틀 설명

title-area : title-sm

title-area : title-xsm

UI Style Guide

layout

다채움

margin

margin은 상하/좌우(top,bottom,left,right)의 지정된 크기(xsm, sm, md, lg, xlg)안에서 사용합니다.

margin
Name	Direction	Type	Size
margin-direction-type (ex: margin-top-xsm)	top bottom left right	xsm	4px
		sm	8px
		md	16px
		lg	24px
		xlg	40px

align

align은 가로정렬, 세로정렬을 사용합니다.

align-left

align-center

align-right

valign-top
valign-top	valign-middle	valign-bottom

UI Style Guide

Button

다채움

Button Types

버튼은 Default < Primary < Solid 순의 위계를 갖습니다. 버튼의 위계가 높아질수록 가급적 페이지에서 중복하지 않고 최소한으로 사용하도록 합니다.

Default
primary
secondary
ctay
Danger
Link
Default Link Solid Link primary Link
Link Button
default default default default default default default
Text Button
바로가기 solid 설정 초기화 도움말
btn-ico(버튼형 아이콘)
btn etc
btn style-none

Button Size

Small은 36px, Medium은 48px, Large는 64px의 높이값을 갖습니다.

Small
Medium
Large

Button group

버튼그룹

버튼그룹 dir-col

UI Style Guide

Select & Input

다채움

Dropdown

Input Anatomy

Input은 기본적으로 아래와 같은 구조로 이뤄져있습니다. 일부 요소를 제외하고 상황에 따라 필요한 부분만 사용해도 무방합니다.

Label message
Label message
Label0/20 password는 클래스에 'valid'가 추가되어야만 통과
Search
검색

message
Search
검색

message
User Case New
message
User Case New 0/10

icon-only
.input-block은 위와 같은 경우에만 한정 사용
Date
Date
Date

Input State

Default
Disabled
Readonly

Message

summary

title

text

bullet1
bullet2

title

text

title

text

title

text

title

text

percent-width

width는percent-width1 ~ percent-width10 10단계로 %를 10%단위로 사용합니다.

...

Input ETC

검색

~

선생님

점

/ 5

Textarea

Textarea는 기본적으로 5줄까지 표시하며 나머지 구조는 Input과 같습니다.

0/15자

Check & Radio

Use Case 1

Default Checked Disabled-Default Disabled-Checked icon-only

Use Case 2

Default Checked Disabled-Default Disabled-Checked icon-only

Use Case 1

Default Checked Disabled-Default Disabled-Checked

Use Case 2

Default Checked Disabled-Default Disabled-Checked

checkradio

체크박스

라디오

선택

Toggle

Use Case 1

Default Checked Disabled-Default Disabled-Checked

Use Case 2

Default Checked Disabled-Default Disabled-Checked

Checkradio Area

이해

계산

추론

학교급 선택

초등

중등

고등

학교급 선택

초등

중등

고등

학교급 선택

초등

중등

고등

학교급 선택

초등

중등

고등

전체선택

난이도 선택

선택

상 여러 가지 함수의 실수배, 합, 차, 곱을 미분하고, 그 과정을 설명할 수 있다.

선택

중 여러 가지 함수의 실수배, 합, 차, 곱을 미분하고, 그 과정을 설명할 수 있다.

선택

하 여러 가지 함수의 실수배, 합, 차, 곱을 미분하고, 그 과정을 설명할 수 있다.

학교급 선택

전체

초등학교

중학교

고등학교

유아

특수교육

Switch

Default Checked Disabled-Default Disabled-Checked Default Checked icon-only

fnc-extend-area

fnc-list

Title
description
Title
description
Title

Chip

정보 입력, 다중 또는 단일항목 선택, 내용 필터링 등의 행동에 사용됩니다.

Use Case 1

Default Checked Disabled-Default Disabled-Checked Default Checked Disabled-Default Disabled-Checked

Use Case 2

Default Checked Disabled-Default Disabled-Checked Default Checked Disabled-Default Disabled-Checked

Use Case 3

Default Checked Disabled Disabled-Checked Default Checked Disabled Disabled-Checked

Use Case 4

Default Checked Disabled Disabled-Checked Default Checked Disabled Disabled-Checked

UI Style Guide

Indicators

다채움

Page Indicator

1
2
3
4
5

Badge

Something4
Something4
Something4
Something보기
Somethingbadge

Icon

ico-search
ico-form-check
ico-form-minus
ico-form-plus
ico-form-up
ico-form-down
ico-ppv
ico-pv
ico-fw
ico-ffw
ico-up
ico-down
ico-lt
ico-gt
ico-arrow-left
ico-arrow-right
ico-arrow-up
ico-arrow-down
ico-play
ico-pause
ico-stop
ico-archive
ico-attach
ico-block
ico-book
ico-bookmark
ico-calendar
ico-call
ico-camera
ico-chart(ico-curation)
ico-chat
ico-check
ico-close
ico-comment
ico-copy
ico-delete
ico-document
ico-document-plus
ico-download
ico-move
ico-edit
ico-favorite
ico-favorite-active
ico-file
ico-filter
ico-folder
ico-fullscreen-exit
ico-fullscreen
ico-headphone
ico-help
ico-history
ico-home
ico-hourglass
ico-img
ico-info
ico-language
ico-layer(ico-group)
ico-link
ico-location
ico-lock
ico-login
ico-logout
ico-mail
ico-map
ico-menu
ico-mic
ico-more-horiz
ico-mopre-vert
ico-music
ico-openinnew
ico-plus
ico-people
ico-profile
ico-phone
ico-pin
ico-pin-active
ico-power
ico-print
ico-redo
ico-remove
ico-refresh
ico-save
ico-schedule
ico-send
ico-setting
ico-share
ico-sound
ico-star
ico-star-active
ico-sun
ico-thumb-up
ico-thumb-down
ico-trophy
ico-undo
ico-unlock
ico-update
ico-upload
ico-video
ico-visibility
ico-visibility-off
ico-warning
ico-zoomin
ico-zoomout
ico-hamburger
ico-app
ico-notification
ico-circle-cancle
ico-sort
ico-thumblist
ico-circle-chevron-up
ico-circle-chevron-down
ico-circle-chevron-left
ico-circle-chevron-right
ico-circle-plus
ico-circle-minus
ico-circle-close
ico-circle-check
ico-protect

icon 파일

ico-file-
ico-file-hwp
ico-file-doc
ico-file-xls

ico-img

ico-img-student
ico-img-teacher
ico-img-person
ico-img-mail
ico-img-phone
ico-img-folders
ico-img-book
ico-img-pencil
ico-img-write
ico-img-writeSelf
ico-img-writeAI
ico-img-sprout
ico-img-leaf
ico-img-tree
ico-img-rank1
ico-img-rank2
ico-img-rank3
ico-img-math
ico-img-mathplate
ico-img-hangul
ico-img-korean
ico-img-calculation
ico-img-english
ico-img-microscope
ico-img-social
ico-img-social1
ico-img-social2
ico-img-arrow-blue
ico-img-error
ico-img-grinningface
ico-img-pensiveface

badge-icon

웰컴
잘 부탁해
클래스 가입 축하
가입축하축하
클래스를 부탁해
5회 출석
10회 출석
20회 출석
50회 출석
학습모드
열심모드
불타는 열공모드
영상 학습
영상 학습 10회
영상 학습 20회
영상 학습 50회
영상 학습 100회
성적향상문제풀이
도전자
풀어보자
축!성적향상
문제풀이왕
완벽한 사람
괜찮아요
적극적인 커뮤니티
나도 글쓴이
나도 정보통
클래스 평정자
커뮤니티 없인 못살아
일상이 커뮤니티
학습시작
노력하는 만큼 실력도 쑥쑥
곧 마스터 각
노력은 곧 성과
못해도 도전
시간 지킴이
과제 제출도 약속
칼같이 시간 지키기
이쯤이야 식은 죽 먹기

badge-list

웰컴
잘 부탁해
클래스 가입 축하
가입축하축하
클래스를 부탁해
5회 출석
10회 출석
20회 출석
50회 출석
학습모드
열심모드
불타는 열공모드
영상 학습
영상 학습 10회
영상 학습 20회
영상 학습 50회
영상 학습 100회
성적향상문제풀이
도전자
풀어보자
축!성적향상
문제풀이왕
완벽한 사람
괜찮아요
적극적인 커뮤니티
나도 글쓴이
나도 정보통
클래스 평정자
커뮤니티 없인 못살아
일상이 커뮤니티
학습시작
노력하는 만큼 실력도 쑥쑥
곧 마스터 각
노력은 곧 성과
못해도 도전
시간 지킴이
과제 제출도 약속
칼같이 시간 지키기
이쯤이야 식은 죽 먹기

emotion-icon

기뻐요
황당해요
아파요
뿌듯해요
화나요
설레요
슬퍼요
사랑해요
무서워요
신나요
해당하는 감정이 없어요

Profile

프로필 New

학생명 25.01.01

IMG-PNG 파일

학생명 2023-07-26
학부모명 2023-07-26
선생님명 2023-07-26
단체명 2023-07-26
시스템명 2023-07-26

IMG-SVG 파일

학생명 2023-07-26
학부모명 2023-07-26
선생님명 2023-07-26
단체명 2023-07-26
시스템명 2023-07-26

BACK-SVG 파일

사용자 섬네일
사용자 섬네일
사용자 섬네일
사용자 섬네일
사용자 섬네일

사용자 섬네일

학생명 2023-07-26
사용자 섬네일

학부모명 2023-07-26
사용자 섬네일

선생님명 2023-07-26
사용자 섬네일

단체명 2023-07-26
사용자 섬네일

시스템명 2023-07-26

UI Style Guide

Tabs

다채움

tabs-nav-lg

tabs-nav

tabs-nav-sm

tabs-nav-xsm

tabs-nav-img

UI Style Guide

Label

다채움

Label

label label blue label green label yellow label red

label a label blue button label green button label yellow button label red button

Label Large

label label blue label green label yellow label red

Label state

대기 진행중 승인 보류 반려

Label mark

Mark Update N

Mark Update New

Label cont

이미지 영상 문서 문항 평가지 수업꾸러미 수업레시피

Label num

1 2 3

UI Style Guide

accordion

다채움

accordion

열기 닫기 다채움
사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내

내용 내용 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내
열기 닫기 다채움
사이트 이용방법 안내

내용 내용

UI Style Guide

Table

다채움

list-type

Total 173

검색

리스트타입 목록으로 선택, No, 제목, 첨부, 작성자, 조회수, 등록일로 구성되어있습니다.
선택	No	제목	첨부	상태	조회수	작성자	등록일	기능
선택	3	링크-가나다라마바사아자차카타파하사 가나다라마바사아자차카타파하사가나다라마바사아자차카타파하사가나다라마바사아자차카타파하사가나다라마바사아자차카타파하사	첨부파일	대기	123,132	관리자	2020-07-23	수정
선택	2	링크-가나다라마바사아자차키타파하	첨부파일	진행중	123,132	관리자	2020-07-23	수정
선택	1	링크-가나다라마바사아자차키타파하	첨부파일	반려	123,132	관리자	2020-07-23	수정

처음으로
이전으로
1
2
3
4
5
다음으로
끝으로

write-type

1
진행완료 보조설명
2
진행중 보조설명
3
진행후 보조설명
4
진행완료 보조설명

write-type table
셀렉트 유형필수
인풋 q0 (선택)
인풋 q1
인풋 q2
인풋 q3
인풋 q4
인풋 체크박스필수	인풋라디오 Default Default
인풋 라디오필수	인풋라디오 Default Default
보조텍스트필수	보조텍스트
주소필수
전화번호
이메일	@

종합결과
3R’s (읽기)	3R’s (쓰기)	3R’s (셈하기)	국어	수학	전체 맞은 개수
15	15	15	1(미도달)	1(미도달)	49/100

UI Style Guide

Popup

다채움

Popup

Popup Alert

Toast

UI Style Guide

색연필

다채움

색연필

The Quick Brown Fox Jumps Over The Lazy Dog
The Quick Brown Fox Jumps Over The Lazy Dog
The Quick Brown Fox Jumps Over The Lazy Dog

UI Style Guide

Etc

다채움

bullet

bullet
bullet
bullet

bullet-none
bullet-none
bullet-none

bullet-tit bullet-tit내용
제목입력회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.
제목입력기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.

bullet-dash
bullet-dash
bullet-dash

bullet-hangul
bullet-hangul
bullet-hangul

box

box 타이틀

bullet
회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.
기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.

bullet-tit bullet-tit내용
제목입력회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.
제목입력기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.

bullet-dash
회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.
기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.

border-box

bullet
회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.
기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.

bullet-tit bullet-tit내용
제목입력회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.
제목입력기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.

bullet-dash
회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.
기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.

border-box bg sm

bullet
회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.
기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.

bullet-tit bullet-tit내용
제목입력회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.
제목입력기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.

bullet-dash
회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.
기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.

box 타이틀

bullet
회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.
기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.

bullet-tit bullet-tit내용
제목입력회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.
제목입력기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.

bullet-dash
회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.
기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.

초등 1,2,3학년 말하고 읽기 순서배열형 어려움

①의 경우 왜냐하면 이하를 먼저 해석하여 아이들이 TV영향을 쉽게 받는다를 유추할 수 있고 ②의 경우는 "말다툼"이 핵심

hr

작업중border-box-list

문항보기 1

단순선택형

4점

여러 가지 함수의 실수배, 합, 차, 곱을 미분하고, 그 과정을 설명할 수 있다.
문항보기 2

단순선택형

10점

여러 가지 함수의 실수배, 합, 차, 곱을 미분하고, 그 과정을 설명할 수 있다.
문항보기 3

단답형

4점

여러 가지 함수의 실수배, 합, 차, 곱을 미분하고, 그 과정을 설명할 수 있다.

info

info-block

info-block 타이틀1
info-block 타이틀2

info-list

콘텐츠 명
조선시대 사람들도 연립방정식을 활용했을까?
내용
미지수가 2개인 연립일차방정식을 활용하여 다양한 실생활 문제를 해결할 수 있다.
키워드

키워드 키워드 키워드
주제 차시
- [중등 수학 (2-1)]일차부등식과 연립일차방정식(81~82)
- [중등 수학 (2-1)]일차부등식과 연립일차방정식(81~82)
- [중등 수학 (2-1)]일차부등식과 연립일차방정식(81~82)
붙임자료
- 연립일차방정식 활용교재.pdf46KB
- 연립일차방정식 활용교재.pdf46KB
작성자
김톡톡 선생님

info-block-list

학습과정
학습과정 내용
활동명
활동명 내용

info-inline-list

학습과정
학습과정 내용
제목
내용
내용

no-style
학습과정 내용
제목
내용
내용

tag

키워드 키워드 키워드

file

파일명.jpg

연립일차방정식 활용교재.pdf 124kb
연립일차방정식 활용교재.pdf 124kb

첨부파일명.pdf

124kb

다운로드

첨부파일명.pdf

124kb

다운로드

첨부파일명.pdf

124kb

다운로드

첨부파일명.pdf

124kb

다운로드

첨부파일명.pdf

124kb

다운로드

첨부파일명.pdf

124kb

다운로드

비디오파일비디오파일비디오파일비디오파일비디오파일비디오파일비디오파일비디오파일.mp4비디오파일비디오파일비디오파일비디오파일비디오파일비디오파일비디오파일비디오파일.mp4비디오파일비디오파일비디오파일비디오파일비디오파일비디오파일비디오파일비디오파일.mp4비디오파일비디오파일비디오파일비디오파일비디오파일비디오파일비디오파일비디오파일.mp4

txt-none

검색어를 입력해주세요.

검색결과가 없습니다.

이전으로 목록으로 다시검색 메인으로

콘텐츠가 없습니다.

이전으로

Typography

Title

page-tit-area : title-xlg

section-title-area : title-lg

title-area : title

title-area : title-sm

title-area : title-xsm

margin

align

Button Types

Default

primary

secondary

ctay

Danger

Link

Link Button

Text Button

btn-ico(버튼형 아이콘)

btn etc

btn style-none

Button Size

Small

Medium

Large

Button group

Dropdown

Input Anatomy

Input State

Message

summary

percent-width

Input ETC

Textarea

Check & Radio

Use Case 1

Use Case 2

Use Case 1

Use Case 2

checkradio

Toggle

Use Case 1

Use Case 2

Checkradio Area

Switch

fnc-extend-area

fnc-list

Chip

Use Case 1

Use Case 2

Use Case 3

Use Case 4

Page Controller

Page Indicator

Badge

Icon

ico-search

ico-form-check

ico-form-minus

ico-form-plus

ico-form-up

ico-form-down

ico-ppv

ico-pv

ico-fw

ico-ffw

ico-up

ico-down

ico-lt

ico-gt

ico-arrow-left

ico-arrow-right

ico-arrow-up

ico-arrow-down

ico-play

ico-pause

ico-stop

ico-archive

ico-attach

ico-block