📱Bbokki_Mobile 스킨 가이드

공통

포인트 컬러 일괄 변경하기
  1. 컬러코드값 확인 Mygreek 스킨에 적용되어 있는 기본 컬러 코드 #DF3842을 확인합니다.

  2. 디자인 스킨 리스트 접속 | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트

  3. 스타일시트/CSS 변경 | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈합니다.

  4. ctrl+F 검색 후 수정하기 gd_common.css 스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 #DF3842를 검색하여 원하는 포인트 컬러 코드로 변경합니다.

  5. 나머지 포인트 컬러도 검색하여 원하는 포인트 컬러 코드로 변경합니다.

    1. 기본 컬러 코드 : #DF3842

    2. 기본 컬러 마우스 오버 코드 : #C5000C

    3. 서브 컬러 코드 : #FEFFD5

    4. 중립적 컬러 코드 : #D2D2D2, #2B2B2B

푸터 변경하기

1. 푸터 메뉴버튼의 font-size(크기), color(색상), text-align(정렬), font-weight(굵기) letter-spacing(자간) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css

#footer footer .ft_info2_box .ft_menu li a {
    display: block;
    padding: 18px 0 10px 0;
    font-size: 12px;
    color: #fff;
    text-align: left;
    font-weight: 700;
    letter-spacing: -1px;
}

2. 푸터 개인정보 메뉴버튼의 color(색상), font-weight(굵기) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css

#footer footer .ft_info2_box .ft_menu li a.privacy {
    color: #fff;
    font-weight: bold;
}

3. 푸터 정보 부분의 text-align(정렬), font-size(크기), color(색상) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css

#footer footer .ft_info2_box .ft_address {
    padding:0px;
    text-align:left;
    font-size:12px;
    color:#fff;
    word-break:keep-all;
}

4. 푸터 카피라잇 영역의 color(색상), font-size(크기), text-align(정렬) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css

#footer footer .ft_copy {
    padding:24px 0 0;
    color:#fff;
    font-size:10px;
    text-align:left;
    font-style:normal;
}
고객센터, PC화면 버튼 변경하기

1. 고객센터, PC화면 버튼의 background(배경), color(색상), font-size(크기) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css

#footer footer .ft_button_box ul li a {
    display:block;
    padding:8px 0;
    background:#484848;
    color:#fff;
    font-size:13px;
}
상단 헤더 영역 변경하기

1. GNB영역의 border-bottom(선) 값을 변경해줍니다.

> gd_layout.css | css/gd_layout.css

#header_wrap header .header_box {
    display: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    border-bottom: 2px solid #000;
    height: 62px;
    background: #fff;
}

2. 장바구니 담긴상품 수량의 배경 background(배경) 값을 변경해줍니다.

> gd_layout.css | css/gd_layout.css

#header_wrap header .header_box .cart_count {
    position: absolute;
    top: 8px;
    right: 0;
    display: block;
    padding: 0px 4px;
    line-height: 15px;
    border-radius: 100%;
    color: #fff;
    background: var(--primary-default);
    vertical-align: middle;
    font-size: 9px;
}
슬라이드 메뉴 변경하기

1. 상단배너의 font-size(크기), color(색상) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css

.nav_banner .nav_login ul li a {
    display: inline-block;
    font-size: 15px;
    color: #222222;
}

2. 아이콘 메뉴 영역의 font-size(크기), color(색상) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css

.nav_link ul li a {
    display: block;
    padding: 36px 0 0 0;
    font-size: 13px;
    color: #888;
}

3. 탭버튼 활성화 시 background(배경), color(색상), font-weight(굵기) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css

.nav_tabmenu_box .nav_tabmenu li.on span {
    background: var(--primary-default);
    color: #fff;
    font-weight: bold;
}

4. 탭버튼 비활성화 시 background(배경), color(색상) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css

.nav_tabmenu_box .nav_tabmenu li span {
    display: block;
    padding: 10px 0 10px 0;
    background: #e8e8e8;
    color: #acacac;
}

5. 메뉴 텍스트 스타일 font-size(크기), color(색상) 값을 변경해줍니다.

proc > proc.css | css/proc/proc.css

.category_side > li a {
    position: relative;
    display: block;
    padding: 12px 0 12px 0;
    font-size: 16px;
    color: #262626;
}

메뉴 폰트 font-weight(굵기) 값을 변경해줍니다.

proc > proc.css | css/proc/proc.css

.category_side > li > a {
    font-weight: bold;
}

6. 메뉴 폰트 선택 시 color(색상) 값을 변경해줍니다.

proc > proc.css | css/proc/proc.css

.category_side > li > a.on {
    color: var(--primary-default);
}

메인

고객센터 폰트 변경하기

1. 고객센터 타이틀의 font-size(크기), font-weight(굵기), border-bottom(선) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css

2. 고객센터 전화번호 font-size(크기), color(색상) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css

3. 고객센터 이용시간 font-size(크기), color(색상) 값을 변경해줍니다.

main > main.css | css/main/main.css

상품 리스트 스타일 변경하기

1. 상품리스트 이미지의 border(라인) 값을 변경해줍니다.

list > list_01.css | css/goods/list/list_01.css

2. 상품리스트 상품명 폰트의 color(색상), font-size(크기) 값을 변경해줍니다.

list > list_01.css | css/goods/list/list_01.css

3. 상품리스트 가격 폰트의 color(색상) 값을 변경해줍니다.

main > list_01.css | css/goods/list/list_01.css

진열타입 타이틀 변경하기

1. 타이틀의 font-size(크기), color(색상), border-bottom(선), font-weight(굵기) 값을 변경해줍니다.

proc > proc.css | css/proc/proc.css

2. 더보기 버튼의 background(배경), font-size(크기), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.

스타일시트 > gd_button.css | css/gd_button.css

상품상세

상품후기 변경하기

1. 상품 후기 게시판 타이틀의 background(배경), border-bottom(선) 값을 변경해줍니다.

스타일시트 > gd_plus_review.css | css/gd_plus_review.css

2. 평가, 리뷰수 타이틀 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.

스타일시트 > gd_plus_review.css | css/gd_plus_review.css

3. 평가, 리뷰 갯수 폰트의 font-weight(굵기), font-size(크기), color(색상) 값을 변경해줍니다.

스타일시트 > gd_plus_review.css | css/gd_plus_review.css

4. 리뷰등록 버튼의 background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.

스타일시트 > gd_plus_review.css | css/gd_plus_review.css

5. 후기작성 버튼의 text-align(정렬), color(색상), font-size(크기), font-weight(굵기), background(배경), border(선) 값을 변경해줍니다.

스타일시트 > gd_button.css | css/gd_button.css

6. 상품평 더보기 버튼의 text-align(정렬), color(색상), font-size(크기), background(배경) 값을 변경해줍니다.

스타일시트 > gd_button.css | css/gd_button.css

옵션 레이어-셀렉트박스 변경하기

1. 옵션 레이어의 기본 옵션 폰트의 font-size(크기), color(색상), text-align(정렬), background(배경) 값을 변경해줍니다.

스타일시트 > gd_common.css | css/gd_common.css

2. 옵션 레이어 활성화 시 border(선) 값을 변경해줍니다.

스타일시트 > gd_common.css | css/gd_common.css

3. 옵션 레이어 옵션 폰트의 border-bottom(선), font-weight(굵기), font-size(크기), color(색상) 값을 변경해줍니다.

스타일시트 > gd_common.css | css/gd_common.css

옵션 레이어-항목 변경하기(폰트/버튼)

1. 옵션 레이어 쿠폰적용 버튼의 background(배경), color(색상), border-radius(둥근선), border(선) 값을 변경해줍니다.

스타일시트 > gd_button.css | css/gd_button.css

2. 상품 가격 금액 폰트의 font-size(크기), font-weight(굵기), text-align(정렬) 값을 변경해줍니다.

스타일시트 > css/gd_common.css | css/gd_common.css

3. 상품 가격 제목 폰트의 font-size(크기), text-align(정렬) 값을 변경해줍니다.

스타일시트 > css/gd_common.css | css/gd_common.css

4. 상품 가격 금액 폰트의 font-size(크기), font-weight(굵기), text-align(정렬) 값을 변경해줍니다.

스타일시트 > css/gd_common.css | css/gd_common.css

상품문의-리스트 변경하기

1. 상품문의 게시판 문의 상태표시 아이콘의 font-size(크기), line-height(행간), background(배경), color(색상), border-radius(둥근선), border(선) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css

2. 문의 제목 폰트의 font-size(크기), color(색상), line-height(행간) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css

상품문의-비밀번호 인증 레이어 변경하기

1. 비밀번호 인증 레이어의 height(높이), background(배경), border(선) 값을 변경해줍니다.

board > board.css | css/board/board.css

2. 비밀번호 인증 타이틀의 height(높이), background(배경), border(선) 값을 변경해줍니다.

board > board.css | css/board/board.css

3. 비밀번호 인증 레이어 확인 버튼의 color(색상), border-radius(둥근선), background(배경) 값을 변경해줍니다.

스타일시트 > gd_button.css | css/gd_button.css

상품문의-리스트 내용 변경하기(폰트/버튼)

1. 상품문의 내용 폰트의 color(색상) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css

2. 수정, 삭제 버튼의 color(색상), font-size(크기), border(선), background(배경), border-radius(둥근선) 값을 변경해줍니다.

스타일시트 > gd_button.css | css/gd_button.css

상세 타이틀 및 info 레이어 폰트 변경하기

1. 상품 상세 타이틀의 font-size(크기), line-height(행간), text-align(정렬) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css

2. info 레이어 영역의 font-size(크기), color(색상), line-height(행간), font-weight(굵기) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css

상품 상세 탭 변경하기

1. 상품 상세페이지 탭 폰트의 color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css

2. 게시글 등록 수량 폰트의 font-size(크기), color(색상), line-height(행간) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css

3. 현재위치 탭표시 라인의 border-bottom(선) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css

상품 상세 버튼 변경하기

1. 장바구니 버튼의 font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.

스타일시트 > gd_button.css | css/gd_button.css

2. 바로구매 버튼의 font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.

스타일시트 > gd_button.css | css/gd_button.css

상품 상세 리스트 영역 변경하기

1. 상품명 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css

2. 상품 할인가격 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css

3. 상품 할인 전 가격 폰트의 color(색상) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css

4. 상품 상세페이지 리스트 제목font-size(크기), color(색상) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css

5. 상품 상세페이지 리스트 내용 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css

6. 공유하기, 찜하기 버튼의 font-size(크기), text-align(정렬), background(배경), color(색상), font-weight(굵기) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css

주문결제

장바구니 버튼 변경하기

1. 쿠폰적용 버튼의 text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.

스타일시트 > gd_button.css | css/gd_button.css

2. 옵션변경 버튼의 text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.

스타일시트 > gd_button.css | css/gd_button.css

3. 선택상품 삭제, 주문 버튼의 text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.

스타일시트 > gd_button.css | css/gd_button.css

4. 전체주문 버튼의 text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.

스타일시트 > gd_button.css | css/gd_button.css

장바구니 폰트 변경하기

1. 장바구니 상품명 폰트의 font-weight(굵기), color(색상) 값을 변경해줍니다.

order > order.css | css/order/order.css

2. 장바구니 상품 옵션 폰트의 font-size(크기), line-height(행간), color(색상) 값을 변경해줍니다.

order > order.css | css/order/order.css

3. 장바구니 상품 가격 폰트의 font-size(크기), color(색상), font-weight(굵기) 값을 변경해줍니다.

order > order.css | css/order/order.css

4. 장바구니 항목 타이틀 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.

order > order.css | css/order/order.css

5. 장바구니 총 상품금액 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.

order > order.css | css/order/order.css

6. 장바구니 총 합계금액 폰트의 color(색상), font-size(크기) 값을 변경해줍니다.

order > order.css | css/order/order.css

Last updated

Was this helpful?