Guide

Color Palette

[Primary color]

.fc-deepblue
#3d6dc4
.fc-blue
#5f8fe6
.fc-yellow
#ffbf07
.fc-white
#ffffff

[Secondary Color]

.fc-bluegreen
#00b4a5
.fc-red
#f75656
.fc-green
#63bf1f

[Blue Variation]

.fc-blue01
#2496e5
.fc-blue02
#4aa4e3
.fc-blue03
#92bddb
.fc-blue04
#347eed

[Basic Font Color]

.basic-color01
#000000
.basic-color02
#101010
.basic-color03
#333333
.basic-color04
#666666
.basic-color05
#999999
.basic-color06
#dddddd
.basic-color07
#ffffff

[Color Font]

.point-color01
#ff0000
.point-color02
#5f8fe6
.point-color03
#912a16
.point-color04
#ff4040
.point-color05
#9ca837
.point-color06
#e6855f
.point-color07
#ff4200

Trade State Color

결제대기
결제대기
결제대기
결제완료
결제완료
결제완료
거래완료
거래완료
거래완료
취소승인대기
취소승인대기
취소승인대기
상품전달완료
상품전달완료
상품전달완료
거래보류
거래보류
거래보류
거래취소
거래취소
거래취소
등록상품
등록상품
등록상품
초기화
초기화
초기화
시간연장
시간연장
시간연장
수정
수정
수정

Typography

[S-Core Dream]

에스코어 드림 font-family: 'SCoreDreamLight'

에스코어 드림 font-family: 'SCoreDreamRegular'

에스코어 드림 font-family: 'SCoreDreamMedium'

에스코어 드림 font-family: 'SCoreDreamBold'

Title

* 큰 타이틀 -> .h-tit-big
* 작은 타이틀 -> .h-tit-mid
* 컨텐츠위에 타이틀 나올경우 (ex, 테이블 위의 제목) -> 'top-head-wrap'로 감싸기
* 보더 있는 경우 -> .top-head-wrap.line 더블 클래스

h-tit-big

h-tit-mid

h-tit-sm

h-tit-big

판매중인 상품 (192)

전체상품보기 선택서버 판매하기

h-tit-big

Search Field Big

Search Field Small

Checkbox & Radio button

[Checkbox]

알림톡/SMS 알림톡/SMS

[Radio]

이메일로 찾기 이메일로 찾기

Contents space

* .cont-box 로 감싸서 컨텐츠 넣으면 사이 간격 50px 생깁니다.
ex) 테이블 사이의 간격

content01

content02

Design Scroll

* 스크롤 들어가는 영역에 '[data-role="scrollBar"]' 추가
* 컨텐츠 안의 여백은 각각 padding값 추가

스크롤 컨텐츠 내용

Table

* 테이블 상단 border-top -> Default : 2px
* 테이블 상단 border-top : 1px 인 경우 -> 'line-single' 더블클래스로 추가
* 테이블 상단 border-color: 회색 -> 'type2' 더블클래스로 추가
* 테이블 위/아래 여백이 10px, 기본 높이가 70px일 경우 -> 'type3' 클래스 추가 (tbl-list만 존재)
* 말줄임 처리 필요시 -> td에 'brd-txt' 추가 + 태그감싸서 텍스트 넣기
* 테이블에 체크박스or라디오박스 있을경우
--> 체크박스 테이블에서 tr 클릭 시 체크유형 -> table에 data-role="tblChkType" 속성 추가

[Table 목록형]

카테고리, 거래번호, 제목, 수량, 금액, 거래일시 정보제공
서버명	등급	물품제목		판매가격	닉네임/거래건수	등록일	찜하기
카인01	Platinum	제목 제목제목 제목제목 제목제목 제목제목 제목제목 제목 제목 제목제목 제목제목 제목제목	검색	1만당 24,500원 최소 225,2000원~	닉네임열자	3시간전	찜
카인01	Platinum	제목 제목제목 제목제목 제목제목 제목제목 제목제목 제목 제목 제목제목 제목제목 제목제목	검색	1만당 24,500원 최소 225,2000원~	닉네임열자	3시간전	찜

카테고리, 거래번호, 제목, 수량, 금액, 거래일시 정보제공
카테고리	거래번호	제목	수량	금액	거래일시
리니지m > 군터 > 군터 > 군터	A12345678990A12345678990	다이아 판매합니다 다이아 판매합니다 다이아 판매합니다 다이아 판매합니다 다이아 판매합니다 다이아 판매합니다	2,500,000개	4,000,000원	10.12 12:10
리니지m > 군터 > 군터 > 군터	A12345678990A12345678990	다이아 판매합니다 다이아 판매합니다 다이아 판매합니다 다이아 판매합니다 다이아 판매합니다 다이아 판매합니다	2,500,000개	4,000,000원	10.12 12:10

카테고리, 거래번호, 제목, 수량, 금액, 거래일시 정보제공
카테고리	거래번호	제목	수량	금액	거래일시
리니지m > 군터 > 군터 > 군터	A12345678990A12345678990	다이아 판매합니다 다이아 판매합니다 다이아 판매합니다 다이아 판매합니다 다이아 판매합니다 다이아 판매합니다	2,500,000개	4,000,000원	10.12 12:10
리니지m > 군터 > 군터 > 군터	A12345678990A12345678990	다이아 판매합니다 다이아 판매합니다 다이아 판매합니다 다이아 판매합니다 다이아 판매합니다 다이아 판매합니다	2,500,000개	4,000,000원	10.12 12:10

[Table 내용형]

내용

상품가격, 소비자가격, 유효기간에 대한 정보제공
상품가격	7,010,000원
소비자가격	4,300 원
유효기간	~ 2020년 4월 30일

내용

상품가격, 소비자가격, 유효기간에 대한 정보제공
상품가격	7,010,000원
소비자가격	4,300 원
유효기간	~ 2020년 4월 30일

Button

[Small Button]

* btn-sm02 활성화 시 'on'클래스 (btn-sm03색으로 활성화)
==> 다른 버튼은 활성화 style 없음. 사용 시 추가 필요

btn-sm btn-sm01 btn-sm02 btn-sm03 btn-sm04

[Middle Button]

* btn-mid02 활성화 시 'on'클래스 (btn-mid04색으로 활성화)
==> 다른 버튼은 활성화 style 없음. 사용 시 추가 필요

btn-mid btn-mid01 btn-mid02 btn-mid03 btn-mid04 btn-mid05

btn-mid06

[Middle Button (in contents)]

btn-submid btn-submid01 btn-submid02 btn-submid03 btn-submid04

[Big Button]

* btn-big02 활성화 시 'on'클래스 (로그인 페이지에만 적용)
==> 다른 버튼은 활성화 style 없음. 사용 시 추가 필요

btn-big btn-big01

btn-big02

[Assist Button]

btn-assist btn-assist01 btn-assist02 btn-assist03

Marking&Icon

[Product Marking]

접속중 8%

[Grade & favorite icon (etc)]

Diamond Platinum Gold Silver Bronze 우수 휴대폰 출금계좌

Star Rating icon

* class="star-inner" width값 퍼센트(0 ~ 100%)로 조절

[Small Star]

[Middle Star]

4.0

[Big Star]

4.0 이상

* 별점 선택
* class="star-wrap"에 "rating-select" 클래스 추가 , data-role="grade01" 속성추가

1.0

Category Brand

* 높이로 조절

Button Icon

삭제 숨김 수정 구매하기 판매하기 카테고리

info Icon

구매 평균시세 쿠폰가 기간임박

Paging

1 2 3 4 5 6 7 8 9

Layer Popup

* 레이어 감싼 영역 (버튼포함) : data-role="lyPopWrap" class="layer-wrap" 추가
* 레이어 버튼 : data-role="lyPopBtn"
* 레이어 내용 : data-role="lyPopCont" / data-target 추가 / class="layer-content" 추가
* 닫기 버튼 : data-role="lyCloseBtn"
* 레이어 버튼 'href' 값과 레이어 내용 data-target 값 동일하게 맵핑

* 레이어 뜨는 위치 디폴트 -> right:레이어버튼의 끝 / top: 레이어버튼 높이 바로 아래 기준

* 레이어 닫기 기능(3가지 케이스) : 레이어 외의 영역 클릭 시 / 레이어안의 닫기버튼 클릭 시 / 다른 레이어 block 될 경우

레이어버튼

레이어내용 닫기

****** 레이어 딤 유형 ******
-> 레이어 열기 버튼 : data-role="lyDimPopOpen"
-> 레이어 팝업 : class="layer-dim-type" ( 얼럿 유형은 "alert" 더블 클래스 ) , data-role="lyDimPop" 추가
-> 레이어 닫기 : data-role="lyDimPopClose" 추가

-> 레이어 열기 버튼의 href값과 레이어 팝업 id값 매칭

* 레이어 닫기 기능(3가지 케이스) : 딤 클릭 시 / 레이어안의 닫기버튼 클릭 시

레이어 얼럿 유형(딤) 레이어 팝업(딤)

잇다이아

잇코인이 부족합니다.
충전페이지로 이동합니다.

취소 확인

잇다이아

잇코인이 부족합니다.
충전페이지로 이동합니다.

취소 확인

Common

프로필사진
추가하기

추가+

닉네임은열글자입니다

4.0

Gold 혜택보기