🖥️Bbokki_PC 스킨 가이드

Previous뽀끼(Bbokki)NextBbokki_Mobile 스킨 가이드

Last updated 15 days ago

NHN COMMERCE

공지사항 회사소개

Partners

서비스 제휴문의 셀러어드민 디자인 파트너

Developers

스토어

공통

포인트 컬러 일괄 변경하기

컬러코드값 확인 Bbokki 스킨에 적용되어 있는 기본 컬러 코드 #DF3842을 확인합니다.

관리자 > 디자인 메뉴 접속

스타일시트/CSS 변경 좌측 하단 폴더트리 내 스타일시트/CSS를 더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈합니다.

ctrl+F 검색 후 수정하기 common 폴더를 더블클릭하여 내에 있는 common.css 스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 #DF3842를 검색하여 원하는 포인트 컬러 코드로 변경할 수 있습니다.

나머지 포인트 컬러도 검색하여 원하는 포인트 컬러 코드로 변경할 수 있습니다.
1. 기본 컬러 코드 : #DF3842
2. 기본 컬러 마우스 오버 코드 : #C5000C
3. 서브 컬러 코드 : #FEFFD5
4. 중립적 컬러 코드 : #D2D2D2, #2B2B2B

메뉴 변경하기

상단 메뉴의 color(색상), font-size(크기) 값을 변경할 수 있습니다. (현재는 포인트 컬러로 지정되어 있습니다.)

css > layout/layout.css

.top_member_box > li > a,
.top_member_box > li .top_mypage_cont .top_mypage_tit a{
    display:inline-block;
    font-size:16px;
    font-weight:500;
    color:var(--neutrals-dark);
}

장바구니 담긴상품 수량 폰트의 color(색상) 값을 변경할 수 있습니다. (현재는 포인트 컬러로 지정되어 있습니다.)

css > layout/layout.css

.top_member_box > li strong { 
    color:var(--primary-default);
}

상단 메뉴 하단의 color(색상) 값을 변경할 수 있습니다.

css > layout/layout.css

#header { 
    position: relative;
    background-color: #fff;
}

전체보기 메뉴의 background-color(배경) 값을 변경할 수 있습니다.

css > layout/layout.css

.btn_all_menu_open { 
    position: relative; 
    width: 28px; 
    height: 28px; 
    background-color: transparent; 
}

카테고리 메뉴의 font-size(크기), font-weight(굵기), text-align(정렬) 값을 변경할 수 있습니다.

css > layout/layout.css

.header_gnb .gnb_allmenu_box a,
.header_gnb .gnb_allmenu_box button { 
	display: block;
	width: 100%;
	height: 64px;
	line-height: 64px;
	color: var(--neutrals-dark);
	font-size: 24px;
	font-weight: 400;
	text-align: left; 
}

카테고리 메뉴 마우스 오버시의 background(배경), color(색상) 값을 변경할 수 있습니다. (현재는 포인트 컬러로 지정되어 있습니다.)

css > layout/layout.css

.header_gnb .gnb_allmenu_box li:hover,
.header_gnb .gnb_allmenu_box li.is-open > button:hover { 
    background-color:var(--secondary-default);
    color: var(--neutrals-dark);
}

검색창 폰트 변경하기

검색창 인풋박스 입력 폰트의 font-size(크기) 값을 변경할 수 있습니다.

css/common/common.css

#header .top_search .top_text_cont .top_srarch_text {
    display: block;
    float: right;
    width: 34px;
    height: 34px;
    border: 1px solid var(--neutrals-dark);
    border-radius: 8px 8px;
    box-sizing: border-box;
    -moz-transition: all 0.35s;
    -webkit-transition: all 0.35s;
    text-indent: -9999px;
}

2. 최근검색어 폰트의 font-size(크기), font-weight(굵기) 값을 변경할 수 있습니다. css/common/common.css

.recent_box dt {
    font-size: 13px;
    margin-bottom: 10px;
    font-weight: bold;
}

3. 추천상품 폰트의 font-size(크기), font-weight(굵기), text-align(정렬) 값을 변경할 수 있습니다.

css/common/common.css

.recom_box dt {
    width: 100%;
    font-size: 13px;
    font-weight: var(--font-bold);
    line-height: 19px;
    text-align: center;
    margin-bottom: 10px;
}

푸터 변경하기 (폰트/컬러)

1. 푸터 메뉴 폰트의 color(색상), 왼쪽 선 값을 변경할 수 있습니다.

css/layout/layout.css

(1) 색상

.foot_list ul li a { 
    position: relative;
    font-size: 16px;
    font-weight: 700;
    padding:0 15px 0 14px;
    color:#fff;
}

(2) 선 => background를 수정해주세요.

.foot_list ul li:nth-child(n + 2) a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 1px;
    height: 12px;
    background: #fff
}

2. 푸터 정보영역 폰트의 color(색상), font-size(크기), line-height(행간) 값을 변경할 수 있습니다.

css/layout/layout.css

.foot_cont { 
    overflow:hidden;
    padding:35px 0 35px 0;
    font-size:12px;
    line-height:1.8;
}

웹폰트 적용하기

1. 관리자 페이지 > 디자인 메뉴에 접속합니다.

2. 좌측 하단 폴더트리 내 “스타일시트/CSS”를 더블 클릭하여 스타일시트 리스트 중 reset.css를 오픈하세요.

3. reset.css 스타일시트의 5번째 줄에 @import url(’외부 스타일시트 경로’)을 추가합니다.

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

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
/* 5번째줄에 추가 */

4. 8번째 줄의 font-family의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Nanum Gothic(변경할 폰트명)으로 수정하세요. (한글 폰트 파일명의 경우 " "입력)

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

 .godo * {
   font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  }

※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.

메인

고객센터, 뱅킹 정보 변경하기(폰트, 컬러, 크기)

1. 고객센터 폰트의 color(색상), font-size(크기) 값을 변경할 수 있습니다.

layout > layout.css | css/layout/layout.css

.content_info h3 {
    display: inline-block;
    min-width: 60px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
} /* color값은 디자인가이드에 맞게 사용 */

2. 고객센터 이용시간 폰트의 color(색상) 값을 변경할 수 있습니다.

layout > layout.css | css/layout/layout.css

.content_info .cs_center p {
   margin-top: 12px;
   color: #fff;
   line-height: 20px;
}

3. 숫자 폰트의 color(색상), font-size(크기) 값을 변경할 수 있습니다.

layout > layout.css | css/layout/layout.css

.content_info .bank_info strong {
    color:#fff;
    font-weight: 400;
}

4. 은행이름 폰트의 color(색상) 값을 변경할 수 있습니다.

layout > layout.css | css/layout/layout.css

.content_info .bank_info em {
    font-weight:400;
}

최근 본 상품 변경하기

1. 최근 본 상품 영역의 background(배경) 값을 변경할 수 있습니다.

layout > layout.css | css/layout/layout.css

.scroll_right_cont {
    float:left;
    min-width:72px;
    padding:0px;
    background:none;
    color: #333;
}

2. 타이틀 폰트의 color(색상), text-align(정렬) 값을 변경할 수 있습니다.

layout > layout.css | css/layout/layout.css

.scroll_right_cont h4 {
    padding:0;
    font-size: 11px;
    color: var(--neutrals-dark);
    font-weight: 700;
    text-align:center;
}

3. 최근 본 상품 오버시 border(선), background(배경) 값을 변경할 수 있습니다.

layout > layout.css | css/layout/layout.css

.scroll_right_cont .src_box {
    position:absolute;
    top:0;
    right:74px;
    width:max-content;
    height:100%;
    padding:5px 5px 0 7px;
    border:1px solid #999999;
    background:#ffffff;
    text-align:left;
    z-index:10;
}

4. 상품 가격 폰트의 color(색상) 값을 변경할 수 있습니다.

layout > layout.css | css/layout/layout.css

.scroll_right_cont .src_box strong {
    display: block;
    color: var(--primary-default);
}

5. 페이징 폰트의color(색상) 값을 변경할 수 있습니다.

layout > layout.css | css/layout/layout.css

.scroll_right_cont .scr_paging strong {
    padding: 0 2px 0 2px;
    color: var(--primary-default);
}

진열타입 타이틀 변경하기(폰트/컬러)

1. 타이틀 폰트의font-size(크기) 값을 변경할 수 있습니다.

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

.goods_list_tit h3 {
    font-size:48px;
    font-weight:700;
}

2. 타이틀 영역 하단의 border-bottom(선) 값을 변경할 수 있습니다.

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

.goods_list_tit {
    padding:110px 0 10px 0;
    /* border-bottom:1px solid #ececec;*/ 
    line-height:1;
    position:relative;
}

3. 더보기 버튼의 font-size(크기), font-weight(굵기), border(선) 값을 변경할 수 있습니다.

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

.btn_goods_more .btn_goods_view_more {
    padding:2px 5px 3px 5px;
    font-size:24px;
    font-weight:400;
    border:0px solid #dbdbdb;
    color: var(--primary-default);
}

상품 리스트 변경하기

1. 상품 이미지의 text-align(정렬), color(색상) 값을 변경할 수 있습니다.

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

.item_cont {
    padding: 0 10px;
    text-align: left;
    color: #1c1c1c;
    margin-top:20px;
}

2. 상품명 폰트의 font-size(크기) 값을 변경할 수 있습니다.

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

.item_tit_box .item_name {
    display:block;
    padding:0;
    font-size:16px;
    font-weight: normal;
    white-space: nowwrap;
    text-overflow: ellipsis;
    overflow:hidden;
    line-height:22px;
    color: var(--neutrals-dark);
}

3. 정상가격 폰트의 color(색상) 값을 변경할 수 있습니다.

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

.item_money_box del {
    display: block;
    color: #888888;
}

4. 할인가격 폰트의 font-size(크기), color(색상) 값을 변경할 수 있습니다.

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

.item_money_box .item_price {
    /*display:block;*/
    padding:0px;
    font-size:16px;
    color:var(--neutrals-dark);
    font-weight:bold;
}

상품상세

상품 상세 상단 변경하기(폰트)

1. 상품명 폰트의 font-size(크기) 값을 변경할 수 있습니다.

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

.item_detail_tit h3 {
    width:405px;
    font-size:18px;
    word-break: break-all;
}

2. 상품 정보 타이틀 폰트의 color(색상), font-weight(굵기) 값을 변경할 수 있습니다.

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

.item_detail_list dt {
    float:left;
    width:80px;
    margin:0 10px 0 0;
    color:#888888;
    font-weight:normal;
    word-wrap:break-word;
}

3. 상품 가격 폰트의 font-size(크기), font-weight(굵기) 값을 변경할 수 있습니다.

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

.item_price dd {
    margin: -2px 0 0 0;
    font-size: 16px;
    font-weight: bold;
}

4. 총 합계금액 폰트의 font-size(크기), font-weight(굵기) 값을 변경할 수 있습니다.

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

.item_tatal_box .total_amount dt {
    font-size: 16px;
    font-weight: bold;
}

5. 총 합계금액 가격 폰트의 color(색상), font-weight(굵기) 값을 변경할 수 있습니다.

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

.item_tatal_box .total_amount dd {
    color:var(--primary-default);
    font-weight:bold;
}

6. 총 합계금액 가격 폰트의 font-size(크기) 값을 변경할 수 있습니다.

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

.item_tatal_box .total_amount dd strong {
    font-size: 20px;
}

상품 상세 상단 변경하기(버튼)

1. 공유하기 버튼의 background(배경), border(선) 값을 변경할 수 있습니다.

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

.btn_gray_list a, .btn_gray_list button {
    display:inline-block;
    padding:0 0 0 11px;
    border:1px solid #999;
    vertical-align:middle;
}

2. 조건별 배송 버튼의 font-size(크기), background(배경) 값을 변경할 수 있습니다.

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

.btn_gray_list .btn_gray_small {
    font-size:11px;
}

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

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

.btn_add_cart, .btn_add_wish {
    display:inline-block;
    width:152px;
    height:52px;
    margin:0 0 0 6px;
    padding:0 10px 0 10px;
    color:#3e3d3c;
    font-size:16px;
    border:1px solid #cccccc;
    background:#ffffff;
    text-align:center;
    font-weight:400;
}

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

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

.btn_add_order,
.btn_add_order_related,
.btn_add_cart_related {
    display:inline-block;
    width:230px;
    height:52px;
    margin:0 0 0 6px;
    padding:0 10px 0 10px;
    color:#ffffff;
    font-size:16px;
    border:1px solid var(--primary-default);
    background:var(--primary-default);
    text-align:center;
    font-weight:400;
}

상품 상세 상단 변경하기(라인)

1. 셀렉트 영역의 border(선), background(배경) 값을 변경할 수 있습니다.

layout > layout.css | css/layout/layout.css

.location_select {
    display:inline-block;
    position:relative;
    min-width:150px;
    margin:7px 0 0 0;
    border:1px solid #999999;
    background:#ffffff;
    z-index:50;
}

2. 상품명 아래 border-bottom(선) 값을 변경할 수 있습니다.

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

.item_detail_tit {
    position: relative;
    padding: 0 0 10px 0;
    border-bottom: 1px solid #dbdbdb;
}

3. 리스트 항목 구분선의 border-top(선) 값을 변경할 수 있습니다.

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

.item_add_option_box {
    float: left;
    margin: 5px 0 0 0;
    padding: 10px 0 5px 0;
    border-top: 1px solid #dbdbdb;
}

4. 선택한 옵션 영역의 border-bottom(선) 값을 변경할 수 있습니다.

layout > layout.css | css/layout/layout.css

.item_detail_list + .item_choice_list table {
    width: 100%;
    border-bottom: 1px solid #999999;
}

선택한 옵션영역의 background(배경) 값을 변경할 수 있습니다.

layout > layout.css | css/layout/layout.css

.item_choice_list table {
    width: 100%;
    background: #f5f5f5;
}

총 합계금액 구분 영역의 border-top(선) 값을 변경할 수 있습니다.

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

.item_tatal_box .total_amount {
    margin: 15px 0 0 0;
    padding-top: 10px;
    border-top: 1px solid #dbdbd

상품 상세 탭 변경하기

1. 상품 상세 탭 선택시 color(색상), font-weight(굵기), border(선) 값을 변경할 수 있습니다.

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

.item_goods_tab li.on a {
    padding-top: 18px;
    margin-top: 8px;
    color: #333333;
    font-weight: bold;
    border: 1px solid #bbbbbb;
    border-bottom: 1px solid #ffffff;
}

2. 글 등록 수량 폰트의 color(색상) 값을 변경할 수 있습니다.

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

.item_goods_tab li a strong {
    color: var(--primary-default);
}

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

1. 상품 문의 타이틀 폰트의 font-size(크기) 값을 변경할 수 있습니다.

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

.item_goods_sec h3 {
    padding: 45px 0 10px 0;
    font-size: 18px;
}

2. 상품문의 전체보기 버튼의 color(색상), font-weight(굵기), border(선), background(배경), text-align(정렬) 값을 변경할 수 있습니다.

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

.btn_reviews_more, .btn_qna_more {
    display: inline-block;
    min-width: 120px;
    padding: 10px 10px 10px 10px;
    color: #ab3e55;
    font-weight: 400;
    border: 1px solid #cccccc;
    background: #ffffff;
    text-align: center;
}

3. 상품문의 글쓰기 버튼의 color(색상), font-weight(굵기), border(선), background(배경), text-align(정렬) 값을 변경할 수 있습니다.

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

.btn_reviews_write, .btn_qna_write {
    display: inline-block;
    min-width: 120px;
    padding: 10px 10px 10px 10px;
    color: #ffffff;
    font-weight: 400;
    border: 1px solid var(--primary-default);
    background: var(--primary-default);
    text-align: center;
}

4. 페이징 버튼의 color(색상), font-weight(굵기), border(선) 값을 변경할 수 있습니다.

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

.pagination .on {
    color: #333;
    font-weight: bold;

상품 상세 상품문의 영역-리스트 내용 변경하기

1. 수정 버튼의 background(배경), border(선) 값을 변경할 수 있습니다.

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

.btn_gray_list a, .btn_gray_list button {
    display: inline-block;
    padding: 0 0 0 11px;
    border: 1px solid #999;
    vertical-align: middle;
}

2. 상품문의 내용 펼침 영역의 background(배경) 값을 변경할 수 있습니다.

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

.qna_new_box {
    text-align: left;
    background: #f8f8f8;
}

주문결제

장바구니 타이틀 변경하기

1. 장바구니 타이틀 폰트의 color(색상), font-size(크기), color(색상) 값을 변경할 수 있습니다.

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

.order_wrap .order_tit h2 {
    float: left;
    font-size: 28px;
    color: #222222;
}

2. 현재 스텝 표시 폰트의 color(색상), font-weight(굵기) 값을 변경할 수 있습니다.

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

.order_wrap .order_tit .page_on {
    color: #000;
    font-weight: bold;
}

3. 다음 진행 스텝 표시 폰트의 font-size(크기), color(색상) 값을 변경할 수 있습니다.

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

.order_wrap .order_tit ol li {
    float: left;
    font-size: 14px;
    color: #d1d1d1;
}

4. 장바구니 타이틀 폰트 하단의 border-bottom(선) 값을 변경할 수 있습니다.

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

.order_wrap .order_tit {
    overflow: hidden;
    border-bottom: 1px solid #dbdbdb;
}

주문서 작성/결제 화면 변경하기

주문서 금액 변경하기

- 상품금액/배송비/합계 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다.

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

.price_sum_cont .price_sum_list dd {
    color:#000;
}

.price_sum_cont .price_sum_list dd strong {
    font-weight:700;
    font-size:18px;
    color:#000;
}

최종결제금액, 결제하기 버튼 변경하기

1. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다.

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

.payment_final_total dd {
    display:inline-block;
    font-size:30px;
    color:var(--primary-default);
}

2. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경할 수 있습니다.

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

.btn_order_buy {
    display:inline-block;
    width:300px;
    height:61px;
    line-height:59px;
    color:#fff;
    font-size:20px;
    border:1px solid var(--primary-default);
    background:var(--primary-default);
    text-align:center;
}

장바구니 폰트/버튼 변경하기(컬러/사이즈/굵기)

1. 장바구니 상품금액/배송비/최종 결제금액의 color(색상), font-size(사이즈), font-weight(굵기) 값을 변경할 수 있습니다.

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

.price_sum_cont .price_sum_list dd {
    color:#000;
}

.price_sum_cont .price_sum_list dd strong {
    font-weight:700;
    font-size:18px;
    color:#000;
}

2. 선택상품주문 버튼은 마우스 오버 전(.btn_order_choice_buy) 과 오버 시(.btn_order_choice_buy:hover)의 border(선), font-size(사이즈), color(색상) 값으로 각각 변경할 수 있습니다.

스타일시트 > button.css | css/order/button.css

.btn_order_choice_buy { 
    min-width:190px;
    height:55px;
    padding:0 20px 0 20px;
    color:#3e3d3c;
    font-weight:bold;
    font-size:14px;
    border:1px solid #cccccc;
    background:#fff;
    cursor:pointer;
}

.btn_order_choice_buy:hover {
    color:#333333;
    border:1px solid #bbbbbb;
}

3. 전체상품주문 버튼은 마우스 오버 전(.btn_order_whole_buy) 과 오버 시(.btn_order_whole_buy:hover) 의 background(배경) 컬러, border(선), color(색상), font-size(사이즈) 값으로 각각 변경할 수 있습니다.

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

.btn_order_whole_buy {
    min-width:190px;
    height:55px;
    padding:0 20px 0 20px;
    color:#ffffff;
    font-size:14px;
    border:1px solid var(--primary-default);
    background:var(--primary-default);
    cursor:pointer;
    font-weight:bold;
}

.btn_order_whole_buy:hover {
    border:1px solid var(--primary-hover);
    background:var(--primary-hover);
}