퍼블리싱 가이드

컬러

Main Color

  • $colorMain1

    006851

  • $colorMain2

    065b69

  • $colorMain3

    104295

Text Color

  • $colorText1

    222

  • $colorText2

    666

  • $colorText3

    777

  • $colorText4

    888

  • $colorText5

    999

Bg Color

  • $colorBg1

    222

  • $colorBg2

    c2c2c2

  • $colorBg3

    eee

  • $colorBg4

    f5f5f5

  • $colorBg5

    f7f7f7

  • $colorBg6

    fbfbfb

Border Color

  • $colorBorder1

    555

  • $colorBorder2

    bbb

  • $colorBorder3

    d7d7d7

  • $colorBorder4

    ddd

  • $colorBorder5

    efefef

  • $colorBorder6

    f5f5f5

버튼

Small

강조일반

Medium

강조일반

Large

강조일반블랙

더보기

더보기

폼요소

체크박스

라디오

* 체크와 라디오 공통 사용 input type으로 분류

* 한줄 목록 사용시: .check-list에 .is-block 멀티 클래스 사용

* 개별사용시: .check-item 단독사용

1
2
3
4
5
6
7
8
9
10
11
<ul class="check-list">
    <li class="check-list-item"> 
        <div class="check-item">
            <input id="check0" type="checkbox" checked="">
            <label for="check0">
                <span class="check-item-icon"><i class="icon"></i></span>
                <span class="check-item-txt">체크박스0</span>
            </label>
        </div>
    </li>
</ul>
cs

Input / Select / Textarea















아이콘폰트

교육아이콘

  • fi-edu-price

  • fi-edu-book

  • fi-edu-calendar

  • fi-edu-user

  • fi-edu-clock

  • fi-edu-home

이벤트아이콘

  • fi-event-calendar

  • fi-event-link

  • fi-event-trophy

  • fi-event-pencil

  • fi-event-location

  • fi-event-host

  • fi-event-source

  • fi-event-activity

공통아이콘

  • fi-plus

  • fi-chevron-right

  • fi-link

  • fi-trashcan

  • fi-share

  • fi-search

  • fi-download

파일첨부

*권장 사이즈: 660 x 310

// 2023.06.16[bnJung]: 파일첨부이벤트
const addedFileName = ref('');
const handleFileAdd = (e) => {
  const file = e.target.files[0];
  const fileName = file.name;
 
  addedFileName.value = fileName;
}
cs