Title

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

margin

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

align

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

Button Types

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

• Default

• primary

• secondary

• CTA

• Danger

• Link

  Default Link Solid Link primary Link

• Link Button

  default default default default default default default

• Text Button

  바로가기 solid 설정 초기화 도움말

• btn-ico(버튼형 아이콘)

• btn etc

  투명버튼 좋아요 좋아요 좋아요 좋아요 좋아요(toast) 구독중(txt) 구독중(toast, txt)

• btn style-none

  좋아요 담기 공유 댓글

Button Size

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

• Small

• Medium

• Large

Button group

Dropdown

Input Anatomy

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

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

  search option 1_1 search option 1_2 search option 2_1 search option 2_2

  검색
  message
• Search
  검색

  search option 1_1 search option 1_2

  검색
  message
• User Case New
  message
• User Case New 0/10
  icon-only
  .input-block은 위와 같은 경우에만 한정 사용
• Date
• Date
• Date

Input State

• Default
• Disabled
• Readonly

Message

summary

summary-img

title

text

• bullet1
• bullet2

학교체험 프로그램 Q&A

percent-width

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

Input ETC

Textarea

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

checkradio

Toggle

Checkradio Area

fnc-extend-area

fnc-list

• Title

  description
• Title

  description
• Title

Chip

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

Page Controller

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

Page Indicator

1. 1
2. 2
3. 3
4. 4
5. 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-adjust

• ico-sound-mute

• ico-link-item

• ico-shuffle

• ico-repeat

• ico-arrows

• ico-arrow-up-right

• ico-arrow-up-left

• ico-arrow-down-right

• ico-arrow-down-left

• ico-chevron-left

• ico-chevron-right

• ico-chevron-up

• ico-chevron-down

• ico-chevron-double-left

• ico-chevron-double-right

• ico-chevron-double-up

• ico-chevron-double-down

• ico-caret-left

• ico-caret-right

• ico-caret-up

• ico-caret-down

• ico-caret-sort

• ico-sprout

• ico-clover

• ico-tree

• ico-code-scan

• ico-circle-play

• ico-circle-pause

• ico-circle-stop

• ico-present

• ico-text-scale

• ico-siren

• ico-megaphone

• ico-mortarboard

Profile

프로필

학생명 25.01.01

설정

학생명 25.01.01

설정

학생명 25.01.01

설정

학생명 25.01.01

설정

tabs-nav-lg

• tabs1
• tabs2
• tabs3

• tabs1
• tabs2
• tabs3

tabs-nav

• tabs1
• tabs2
• tabs3

• tabs1
• tabs2
• tabs3

• tabs full1
• tabs full2
• tabs full3

• tabs1
• tabs2
• tabs3

tabs-nav-sm

• tabs1
• tabs2
• tabs3

• tabs1
• tabs2
• tabs3

tabs-nav-xsm

• 읽기
• 쓰기
• 셈하기
• 셈하기2

• tabs1
• tabs2
• tabs3

Label

Label Large

Label state

Label mark

Label cont

Label num

accordion

• 열기 닫기 온세종

  사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내
  내용 내용 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내
• 열기 닫기 온세종

  사이트 이용방법 안내
  내용 내용

list-type

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

write-type

1. 1

   진행완료

2. 2

   진행중

3. 3

   진행후

4. 4

   진행완료

info-type

Popup

Popup Alert

Toast

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

hr

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

• 학습과정 u-block
  학습과정 내용
• 제목
  내용
• 내용

• 학습과정 u-block
  학습과정 내용
• 제목
  내용
• 내용

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

info-box-list

• 제목
  26 /100점 만점
• 최고 점수
  26점
• 최저 점수
  26점
• 평균응시시간
  5분 24초
• 참여인원
  17 /20명

• info-box-list
  col3
• 최고 점수
  26점
• 최저 점수
  26점
• 평균응시시간
  5분 24초
• 참여인원
  17 /20명

tag

file

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

txt-none

검색결과가 없습니다.

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

콘텐츠가 없습니다.

이전으로