PURE_PC 스킨 가이드
Last updated
Was this helpful?
Last updated
Was this helpful?
공통
컬러코드값 확인 PURE 스킨에 적용되어 있는 기본 컬러 코드 #e38bac을 확인합니다.
관리자 > 디자인 메뉴 접속
스타일시트/CSS 변경 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈합니다.
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개)
마우스 오버시 컬러 #db83a4도 검색하여 원하는 포인트 컬러 코드로 변경합니다.
상단 메뉴의 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;}
장바구니 담긴상품 수량 폰트의 color(색상) 값을 변경해줍니다.
변경 위치 css > layout > layout.css 45줄
45 .top_member_box > li strong { color: #e38bac;}
카테고리 메뉴의 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;}
카테고리 메뉴의 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;}
2 depth 메뉴 마우스 오버 시의 background(배경), color(색상) 값을 변경해줍니다.
변경 위치 css > layout > layout.css 216줄
216 #header .gnb .depth1 li a.active { background: #e38bac; color: #ffffff;}
상단 메뉴의 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;}
장바구니 담긴상품 수량 폰트의 color(색상) 값을 변경해줍니다.
변경 위치 css > layout > layout.css 44줄
44 .top_member_box > li strong { color: #e38bac;}
카테고리 메뉴 오버 시 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;}
카테고리 메뉴의 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;}
2depth 메뉴 오버 시 background-color(배경), color(색상) 값을 변경해줍니다.
변경 위치 css > layout > layout.css 201줄
201 .sub_menu_box .sub_depth1 li a.active { background: #e38bac; color: #ffffff;}
검색창 인풋박스 입력 폰트의 font-size(크기) 값을 변경해줍니다.
변경 위치 css > common > common.css 42줄
42 input[type="text"], input[type="password"] { padding: 0 10px; outline: none; font-size: 12px;}
최근 검색어 폰트의 font-size(크기), font-weight(굵기) 값을 변경해줍니다.
변경 위치 css > layout > layout.css 90줄
90 .recent_box dt { font-size: 13px; font-weight: bold;}
추천상품 폰트의 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;}
추천상품 가격 폰트의 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;}
추천상품 검색창 닫기 폰트의 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;}
검색창의 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;}
검색창 레이어 영역의 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;}
추천상품 이미지 영역의 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;}
푸터 메뉴 폰트의 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;}
푸터 정보영역 폰트의 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;}
고객센터 영역의 전화번호 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;}
메인
상품 이미지의 text-align(정렬), color(색상) 값을 변경해줍니다.
변경 위치 css > goods > list.css 30줄
30 .item_cont { text-align: center; border: 1px solid #ebebeb; vertical-align: middle; }
상품명 폰트의 font-size(크기) 값을 변경해줍니다.
변경 위치 css > goods > list.css 52줄
52 .item_tit_box .item_name { display: block; color: #888888;}}
정상가격 폰트의 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;}}
할인가격 폰트의 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;}
최근 본 상품 영역의 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;}
타이틀 폰트의 color(색상), text-align(정렬) 값을 변경해줍니다.
변경 위치 css > layout > layout.css 450줄
450 .scroll_right_cont h4 { padding: 0; color: #252525; text-align: center;}
최근 본 상품 오버 시 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;}
상품 가격 폰트의 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링크 이미지의 display 값을 변경해줍니다.
변경 위치 css > goods > list.css 415줄
415 .item_cont {position: relative; width: 1200px; margin: 0 auto; display: none; }
게시판 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;}
게시판의 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;}
공유하기 버튼의 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;}
조건별 배송 버튼의 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;}
장바구니 버튼의 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;}
바로구매 버튼의 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;}
셀렉트 영역의 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;}
상품 이미지 영역의 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;}
리스트 항목 구분선의 border-top(선) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 43줄
43 .item_add_option_box { position: relative; padding: 0 0 10px 0; border-bottom: 1px solid #dbdbdb;}
선택한 옵션영역의 border-bottom(선) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 699줄
699 .item_detail_list + .item_choice_list table { width: 100%; border-bottom: 1px solid #999999;}
총 합계금액 구분 영역의 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;}
상품 상세 탭 선택시 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;}
글 등록 수량 폰트의 color(색상) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 122줄
122 .item_goods_tab li a strong {color: #e38bac;}
주문결제
장바구니 타이틀 폰트의 color(색상), font-size(크기), color(색상) 값을 변경해줍니다.
변경 위치 css > order > order.css 14줄
14 .order_wrap .order_tit h2 { float: left; font-size: 28px; color: #222222;}
현재 스텝 표시 폰트의 color(색상), font-weight(굵기) 값을 변경해줍니다.
변경 위치 css > order > order.css 17줄
17 .order_wrap .order_tit .page_on { color: #e38bac; font-weight: bold;}
다음 진행 스텝 표시 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.
변경 위치 css > order > order.css 16줄
16 .order_wrap .order_tit ol li { float: left; font-size: 14px; color: #d1d1d1;}
장바구니 타이틀 폰트 하단의 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;}
최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.
변경 위치 css > order > order.css 323줄
323 .payment_final_total dd {display: inline-block;font-size: 30px;color: #e38bac;}
결제하기 버튼의 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;}
장바구니 상품금액/배송비/최종 결제금액의 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;}}
선택상품주문 버튼은 마우스 오버 전(.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;}
전체상품주문 버튼은 마우스 오버 전(.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;}
