NHN커머스 메인
개발자센터

🖥️PURE_PC 스킨 가이드

공통

포인트 컬러 일괄 변경하기

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

  1. 관리자 > 디자인 메뉴 접속

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

  1. ctrl+F 검색 후 수정하기 스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 #e38bac를 검색하여 원하는 포인트 컬러 코드로 변경합니다. mypage.css (총 11개) layer.css (총 22개) common.css (총 26개)

    service.css (총 7개) order.css (총 7개) layout.css (총 22개) member.css (총 20개) goods.css (총 13개) list.css (총 4개) event.css (총 6개) board.css (총 15개) button.css (총 76개)

  1. 마우스 오버시 컬러 #db83a4도 검색하여 원하는 포인트 컬러 코드로 변경합니다.

[상단 메뉴형] 메뉴 영역 변경하기

  1. 상단 메뉴의 color(색상), font-size(크기) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 42줄 42 .top_member_box > li a { display: inline-block; padding: 4px 0 4px 10px; color: #888888; font-size: 11px;}

  1. 장바구니 담긴상품 수량 폰트의 color(색상) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 45줄 45 .top_member_box > li strong { color: #e38bac;}

  1. 카테고리 메뉴의 font-size(크기), font-weight(굵기), text-align(정렬) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 203줄 203 #header .gnb .depth0 > li > a { display: inline-block; padding: 0 63px; font-size: 14px; font-weight: bold; text-align: center; line-height: 49px;}

  1. 카테고리 메뉴의 font-size(크기), font-weight(굵기), text-align(정렬) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 214줄 214 #header .gnb .depth1 li a { display: block; /* width: 100%; */ padding: 5px 10px 7px 19px; font-size: 12px;}

  1. 2 depth 메뉴 마우스 오버 시의 background(배경), color(색상) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 216줄 216 #header .gnb .depth1 li a.active { background: #e38bac; color: #ffffff;}

[ 좌측 메뉴형] 메뉴 영역 변경하기

  1. 상단 메뉴의 color(색상), font-size(크기) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 41줄 41 .top_member_box > li a { display: inline-block; padding: 4px 0 4px 10px; color: #888888; font-size: 11px;}

  1. 장바구니 담긴상품 수량 폰트의 color(색상) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 44줄 44 .top_member_box > li strong { color: #e38bac;}

  1. 카테고리 메뉴 오버 시 font-size(폰트사이즈) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 181줄 181 .sub_menu_box .sub_depth0 > li > a.active { background: url(../../img/common/btn/btn_gnb_list_over.png) no-repeat right center; background-color: #f8f8f8;}

  1. 카테고리 메뉴의 font-size(크기), font-weight(굵기), text-align(정렬) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 194줄 194 .sub_menu_box .sub_depth0 > li > a.active { display: block; padding: 15px 10px 15px 20px; font-size: 18px; font-weight: bold; text-align: left;}

  1. 2depth 메뉴 오버 시 background-color(배경), color(색상) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 201줄 201 .sub_menu_box .sub_depth1 li a.active { background: #e38bac; color: #ffffff;}

검색창 폰트 변경하기

  1. 검색창 인풋박스 입력 폰트의 font-size(크기) 값을 변경해줍니다. 변경 위치 css > common > common.css 42줄 42 input[type="text"], input[type="password"] { padding: 0 10px; outline: none; font-size: 12px;}

  1. 최근 검색어 폰트의 font-size(크기), font-weight(굵기) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 90줄 90 .recent_box dt { font-size: 13px; font-weight: bold;}

  1. 추천상품 폰트의 font-size(크기), font-weight(굵기), text-align(정렬) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 102줄 102 ;auto-links:false">.recom_box dt { width: 122px; padding: 0 0 10px 0; font-size: 13px; font-weight: bold; text-align: center;}

  1. 추천상품 가격 폰트의 font-size(크기) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 100줄 100 .recom_money_box .item_price { display: inline-block; float: right; width: 138px; min-height: 218px; margin: 10px 0 0 -1px; padding: 0 0 20px 15px; font-size: 12px;}

  1. 추천상품 검색창 닫기 폰트의 color(색상), font-size(크기), line-height(행간) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 146줄 146 .seach_top_all .btn_top_search_close { float: right; padding: 0 15px 0 15px; color: #333333; font-size: 12px; line-height: 30px;}

검색창 사이즈 변경하기(배경/라인)

  1. 검색창의 height(높이) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 81줄 81 #header .top_search .top_text_cont .top_srarch_text { width: 100%; height: 45px; padding: 5px 45px 5px 15px; box-sizing: border-box;}

  1. 검색창 레이어 영역의 border(선), background(배경) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 70줄 70 .#header .top_search { position: absolute; top: 25px; right: 0; float: right; border: 1px solid #cccccc; background: #ffffff; z-index: 110;}

  1. 추천상품 이미지 영역의 border(선), background(배경) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 83줄 83 .recom_box .recom_photo { display: block; margin: 0; font-size: 0; border-top: 1px solid #cccccc; background: #ffffff;}

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

  1. 푸터 메뉴 폰트의 color(색상), border-left(선) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 413줄 413 .foot_list ul li a { padding: 0 15px 0 14px; color: #1d1d1d; border-left: 1px solid #e0e0e0;}

  1. 푸터 정보영역 폰트의 color(색상), font-size(크기), line-height(행간) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 421줄 421 .foot_cont {overflow: hidden; padding: 27px 0 35px 0; color: #737373; font-size: 11px; line-height: 1.8;}

  1. 고객센터 영역의 전화번호 color(색상), font-size(크기), line-height(행간) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 381줄 381 .foot_cont {overflow: hidden; display: block; padding: 0 0 7px 0; color: #e38bac; font-size: 18px;}

메인

상품 리스트 변경하기

  1. 상품 이미지의 text-align(정렬), color(색상) 값을 변경해줍니다. 변경 위치 css > goods > list.css 30줄 30 .item_cont { text-align: center; border: 1px solid #ebebeb; vertical-align: middle; }

  1. 상품명 폰트의 font-size(크기) 값을 변경해줍니다. 변경 위치 css > goods > list.css 52줄 52 .item_tit_box .item_name { display: block; color: #888888;}}

  1. 정상가격 폰트의 color(색상) 값을 변경해줍니다. 변경 위치 css > goods > list.css 30줄 30 .item_money_box del { display: inline-block !important; overflow: hidden; position: relative; text-align: center; border: 1px solid #ebebeb; vertical-align: middle;}}

  1. 할인가격 폰트의 font-size(크기), color(색상) 값을 변경해줍니다. 변경 위치 css > goods > list.css 53줄 53 .item_money_box .item_price { display: block; padding: 7px 0 5px 0; font-size: 14px; color: #e38bac;}

최근 본 상품 변경하기

  1. 최근 본 상품 영역의 border(선), background(배경) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 449줄 449 .scroll_right_cont {float: left; min-width: 76px; padding: 18px 13px 18px 13px; background: #ffffff; border: 1px solid #e9e9e9;}

  1. 타이틀 폰트의 color(색상), text-align(정렬) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 450줄 450 .scroll_right_cont h4 { padding: 0; color: #252525; text-align: center;}

  1. 최근 본 상품 오버 시 border(선), background(배경) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 458줄 458 .scroll_right_cont .src_box { position: absolute; top: -1px; right: -1px; width: 191px; height: 86px; padding: 5px 0 0 7px; border: 1px solid #999999; background: #ffffff; text-align: left; z-index: 10;}

  1. 상품 가격 폰트의 color(색상) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 459줄 459 .scroll_right_cont .src_box strong { display: block; overflow: hidden; width: 95px; height: 59px; color: #939393; word-break: break-all;}

sns링크 메뉴 변경하기

  1. sns링크 이미지의 display 값을 변경해줍니다. 변경 위치 css > goods > list.css 415줄 415 .item_cont {position: relative; width: 1200px; margin: 0 auto; display: none; }

게시판 폰트 변경하기

  1. 게시판 background(배경) 컬러 값을 변경해줍니다. 변경 위치 css > layout > layout.css 393줄 393 .recent_box dt { float: left; overflow: hidden; width: 213px; height: 118px; padding: 16px 17px; margin: 0 18px 0 0; background: #ffffff;}

  1. 게시판의 font-size(사이즈), color(색상), border(선) 값을 변경해줍니다. 변경 위치 css > order > button.css 394줄, 13줄 394 .btn_order_choice_buy { padding: 0 0 3px 0; border-bottom: 1px solid #797979;} 13 .btn_order_choice_buy:hover { font-size: 12px; line-height: 1.5; font-family: Malgun Gothic,"맑은 고딕",AppleGothic,Dotum,"돋움",sans-serif; color: #333;}

메인화면에 공지사항, 배너 삭제하기

✔️ 메인화면에 노출되는 공지사항과 배너 영역의 마지막 줄에 display: none; 값을 추가합니다. 변경 위치 css > layout > layout.css 390줄 390 .main_visual .main_visual_banner { float: left; position: absolute; top: 347px; left: 50%; width: 511px; margin-left: 82px; display: none;}

상품상세

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

1. 상품명 폰트의 font-size(크기) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 44줄 44 .item_detail_tit h3 {width: 405px; font-size: 18px;}

2. 상품 정보 타이틀 폰트의 color(색상), font-weight(굵기) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 50줄 50 .item_detail_list dt {float: left; width: 70px; margin: 0 10px 0 0; color: #888888; font-weight: normal; word-wrap: break-word;}

3. 상품 판매가 폰트의 font-size(크기), font-weight(굵기) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 54줄 54 .item_price dd { margin: -2px 0 0 0; font-size: 16px; font-weight: bold;}

4. 총 합계금액 폰트의 font-size(크기), font-weight(굵기) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 91줄 91 .item_tatal_box .total_amount dt {font-size: 16px; font-weight: bold;}

5-1. 총 합계금액 가격 폰트의 color(색상), font-weight(굵기) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 92줄 92 .item_tatal_box .total_amount dd {color: #e38bac; font-weight: bold;}

5-2. 총 합계금액 가격 폰트의 font-size(크기) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 93줄 93 .item_tatal_box .total_amount dd strong { font-size: 20px;}

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

  1. 공유하기 버튼의 background(배경), border(선) 값을 변경해줍니다. 변경 위치 css > button > button.css 9줄 9 .btn_gray_list a, .btn_gray_list button { display: inline-block; padding: 0px 20px 0 0; background: url(../img/common/btn/btn_gray_bg.png) no-repeat right top; border: 1px solid #dbdbdb; vertical-align: middle;}

  1. 조건별 배송 버튼의 font-size(크기), background(배경) 값을 변경해줍니다. 변경 위치 css > button > button.css 9줄 9 .btn_gray_list .btn_gray_small { font-size: 11px; background: url(../img/common/btn/btn_gray_bg_02.png) repeat-x bottom;}

  1. 장바구니 버튼의 color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기) 값을 변경해줍니다. 변경 위치 css > button > button.css 40줄 40 .btn_add_cart, .btn_add_wish { display: inline-block; width: 152px; height: 52px; margin: 0 0 0 6px; padding: 0 10px 0 10px; color: #e38bac; font-size: 16px; border: 1px solid #e38bac; background: #ffffff; text-align: center; font-weight: bold;}

  1. 바로구매 버튼의 color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기) 값을 변경해줍니다. 변경 위치 css > button > button.css 44줄 44 .btn_add_order { 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 #e38bac; background: #e38bac; text-align: center; font-weight: bold;}

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

  1. 셀렉트 영역의 border(선), background(배경) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 250줄 250 .location_select { display: block; position: absolute; top: 22px; left: 0px; width: 100%; margin-left: -1px; padding: 6px 0 6px 0; font-size: 0; border: 1px solid #999999; background: #ffffff;}

  1. 상품 이미지 영역의 border(선) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 10줄 10 .item_detail_tit { display: table-cell; position: relative; width: 600px; height: 600px; text-align: center; vertical-align: middle; border: 1px solid #ebebeb;}

  1. 리스트 항목 구분선의 border-top(선) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 43줄 43 .item_add_option_box { position: relative; padding: 0 0 10px 0; border-bottom: 1px solid #dbdbdb;}

  1. 선택한 옵션영역의 border-bottom(선) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 699줄 699 .item_detail_list + .item_choice_list table { width: 100%; border-bottom: 1px solid #999999;}

  1. 총 합계금액 구분 영역의 border-top(선) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 90줄 90 .item_tatal_box .total_amount { margin: 15px 0 0 0; padding-top: 10px; border-top: 1px solid #dbdbdb;}

상품 상세 탭 변경하기

  1. 상품 상세 탭 선택시 color(색상), font-weight(굵기), border(선) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 119줄 119 .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;}

  1. 글 등록 수량 폰트의 color(색상) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 122줄 122 .item_goods_tab li a strong {color: #e38bac;}

주문결제

장바구니 타이틀 영역 변경하기

  1. 장바구니 타이틀 폰트의 color(색상), font-size(크기), color(색상) 값을 변경해줍니다. 변경 위치 css > order > order.css 14줄 14 .order_wrap .order_tit h2 { float: left; font-size: 28px; color: #222222;}

  1. 현재 스텝 표시 폰트의 color(색상), font-weight(굵기) 값을 변경해줍니다. 변경 위치 css > order > order.css 17줄 17 .order_wrap .order_tit .page_on { color: #e38bac; font-weight: bold;}

  1. 다음 진행 스텝 표시 폰트의 font-size(크기), color(색상) 값을 변경해줍니다. 변경 위치 css > order > order.css 16줄 16 .order_wrap .order_tit ol li { float: left; font-size: 14px; color: #d1d1d1;}

  1. 장바구니 타이틀 폰트 하단의 border-bottom(선) 값을 변경해줍니다. 변경 위치 css > order > order.css 13줄 13 .order_wrap .order_tit { overflow: hidden; border-bottom: 1px solid #dbdbdb;}

주문서 금액 변경하기

✔️ 상품금액/배송비/합계 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다. 변경 위치 css > order > order.css 137줄, 138줄 137 .price_sum_cont .price_sum_list dd {color:#ab3e55;} 138 .price_sum_cont .price_sum_list dd strong {font-weight: 700; font-size: 18px;color: #e38bac;}

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

  1. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다. 변경 위치 css > order > order.css 323줄 323 .payment_final_total dd {display: inline-block;font-size: 30px;color: #e38bac;}

  1. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경해줍니다. 변경 위치 css > gd_reset.css 180줄 180 .btn_order_buy {display: inline-block;width: 300px;height: 61px;line-height: 59px;color: #fff;font-size: 20px;border: 1px solid #e38bac;background: #e38bac;text-align: center;}

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

  1. 장바구니 상품금액/배송비/최종 결제금액의 color(색상), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다. 변경 위치 css > order > order.css 137줄, 138줄 137 .price_sum_cont .price_sum_list dd {color:#ab3e55;} 138 .price_sum_cont .price_sum_list dd strong {font-weight: 700;font-size: 18px;color: #e38bac;}}

  1. 선택상품주문 버튼은 마우스 오버 전(.btn_order_choice_buy) 과 오버 시(.btn_order_choice_buy:hover)의 border(선), font-size(사이즈), color(색상) 값으로 각각 변경해줍니다. 변경 위치 css > order > button.css 174줄, 175줄 174 .btn_order_choice_buy {min-width: 190px;height: 55px;padding: 0 20px 0 20px;color: #e38bac;font-weight: bold;font-size: 14px;border: 1px solid #e38bac;background: #fff;cursor: pointer;}} 175 .btn_order_choice_buy:hover {color: #db83a4;border: 1px solid #db83a4;}

  1. 전체상품주문 버튼은 마우스 오버 전(.btn_order_whole_buy) 과 오버 시(.btn_order_whole_buy:hover) 의 background(배경) 컬러, border(선), color(색상), font-size(사이즈) 값으로 각각 변경해줍니다. 변경 위치 css > gd_reset.css 177줄, 178줄 177 .btn_order_whole_buy {min-width: 190px;height: 55px;padding: 0 20px 0 20px;color: #ffffff;font-size: 14px;border: 1px solid #e38bac;background: #e38bac;cursor: pointer;font-weight: bold;}} 178 .btn_order_whole_buy:hover {border: 1px solid #db83a4;background: #db83a4;}

Previous퓨어(PURE)NextPURE_Mobile 스킨 가이드

Last updated

Logo

NHN COMMERCE

공지사항회사소개

Partners

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

Developers

스토어

©NHN COMMERCE Corp. All rights reserved.