NHN커머스 메인
개발자센터

📱Happy Kids_Mobile 스킨 가이드

공통

포인트 컬러 일괄 변경하기

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

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

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

  1. ctrl+F 검색 후 수정하기 스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 #f0bc0c를 검색하여 원하는 포인트 컬러 코드로 변경합니다. gd_button.css (총 154개) gd_common.css (총 5개) gd_layout.css (총 1개) gd_plus_review.css (총 7개) goods/goods.css (총 1개) goods/list/list_01.css (총 4개) goods/list/list_02.css (총 4) goods/list/list_04.css (총 4개) goods/list/list_06.css (총 4개) goods/list/list_07.css (총 4개) goods/list/list_09.css (총 3개) goods/list/list_11.css (총 7개) mypage/mypage.css (총 10개) order/order.css (총 12개) proc/proc.css (총 2개)

상단 메뉴영역 변경하기

  1. 로고가 있는 가장 상단의background(배경색) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 15, 16줄 15 #header_wrap header .header_box { background: #aedcf8; height: 61px;} 16 .h_logo { padding: 20px 0 40px 0; margin: 0 auto; line-height: 0; text-align: center; background: #aedcf8; z-index: 300;}

  1. 장바구니의 갯수가 노출되는background(배경색) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 36줄 36 #header_wrap header .header_box .cart_count { position: absolute; top: 8px; left: 20px; display: block; padding: 3px 6px 1px 6px; line-height: 15px; border-radius: 100%; color: #636363; background: #fff2c2; vertical-align: middle; font-size: 12px;}

  1. 상단 메뉴의 텍스트font-size(폰트사이즈), color(색상) 값을 변경해줍니다. 변경 위치 main > main.css 15줄 15 .main .main_top_menu li a { display: block; padding: 13px 0 13px 0; font-size: 14px; color: #333333;}

슬라이드 메뉴 영역 변경하기

  1. 슬라이드메뉴 영역의background(배경색) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 72줄 72 #wrap nav .nav_bg_box .nav_box { position: fixed; top: 0; left: 0; width: 290px; height: 100%; margin: 0 0 0 -290px; background: #ffe999; z-index: 1001;}

  1. 로그인, 회원가입 텍스트의background(배경색) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 87줄 87 .nav_banner .nav_login ul li a { display: inline-block; font-size: 15px; color: #666666;}

  1. 브랜드. 카테고리. 커뮤니티 텍스트의color(색상)값을 변경해줍니다. 변경 위치 css > gd_layout.css 108줄 108 .nav_tabmenu_box .nav_tab_list .nav_tabmenu_tit { display: block; margin: 0 25px; padding: 9px 0; font-size: 17px; color: #666666; font-weight: bold; background: url(../img/icon/icon_left_arrow.png) no-repeat right center; background-size: 12px 7px; border-top: 1px solid #e0cf8f;}

  1. 카테고리 텍스트의color(색상) 값을 변경해줍니다. 변경 위치 css > proc.css 7줄 7 .category_side > li a { position: relative; display: block; padding: 4px 0 4px 0; font-size: 19px; color: #666666;}

  1. 카테고리On일때엔 font-weight(폰트굵기) 값을 변경해줍니다. 변경 위치 css > proc.css 11줄 11 .category_side > li > a.on { font-weight: bold;}

  1. 실선의border-top(선 컬러 - #e0cf8f) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 111줄 111 .category_side > li ul { display: none; border-top: 1px solid #e0cf8f;} 변경 위치 css > proc.css 6줄 6 .nav_tabmenu_box .nav_tab_list > * { padding: 17px 0; margin: 0 25px; border-top: 1px solid #e0cf8f;}

하단 영역 변경하기

  1. 하단영역의 배경색인background(배경색) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 155줄,161줄,131줄,137줄 155 #footer footer .ft_btn_top a { display: inline-block; width: 100%; height: 46px; border-top: 1px solid #505050; border-bottom: 1px solid #787878; text-align: center; color: #ffffff; background: #6b6867; line-height: 46px; font-size: 13px; font-weight: bold; } 161 #footer .main_info_box { padding: 0 10px; background: #6b6867;} 131 #footer footer .ft_button_box { padding: 0 25px; background: #6b6867;} 137 #footer footer .ft_info2_box { background: #6b6867;}

  1. top텍스트의color(색상) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 155줄 155 #footer footer .ft_btn_top a { display: inline-block; width: 100%; height: 46px; border-top: 1px solid #505050; border-bottom: 1px solid #787878; text-align: center; color: #ffffff; background: #6b6867; line-height: 46px; font-size: 13px; font-weight: bold;}

  1. top버튼과 아래영역의 구분선인border-bottom에 #787878 색상 값을 변경해줍니다. 변경 위치 css > gd_layout.css 155줄 155 #footer footer .ft_btn_top a { display: inline-block; width: 100%; height: 46px; border-top: 1px solid #505050; border-bottom: 1px solid #787878; text-align: center; color: #ffffff; background: #6b6867; line-height: 46px; font-size: 13px; font-weight: bold;}

  1. 고객센터,무통장입금 텍스트의 노란색은color(색상) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 164줄 164 #footer .main_info_box .main_info dl dt { font-size: 13px; margin: 0 5px; font-weight: bold; color: #ffdc5e;}

  1. 고객센터 번호의color(색상) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 169줄 169 #footer .main_info dl dd p.phone a { font-size: 22px; color: #cccccc;}

  1. 고객센터 상세내용의color(색상) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 170줄 170 #footer .main_info dl dd p.business_hours { font-size: 14px; color: #b5b4b3;}

  1. 무통장입금 번호의color(색상) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 175줄 175 #footer .main_info dl dd .account_num { font-size: 22px; color: #cccccc;}

  1. 무통장입금 정보의color(색상) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 176줄 176 #footer .main_info dl dd .account_bank { font-size: 14px; color: #b5b4b3; padding: 11px 0 0;} 174 #footer .main_info dl dd .account_holder { font-size: 14px; color: #b5b4b3;}

  1. 회사소개,이용약관,개인정보처리방침,이용안내 폰트color(색상) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 151줄 151 #footer footer .ft_copy { padding-bottom: 23px; color: #e0e0e0; font-size: 12px; text-align: center; font-style: normal;}

  1. 쇼핑몰정보들의color(색상), font-size(폰트크기) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 142줄 142 #footer footer .ft_info2_box .ft_address { padding: 0 50px 0 50px; text-align: center; font-size: 12px; color: #e0e0e0; word-break: keep-all;}

메인

추천테마 테두리 변경하기

✔️ Happy Kids 모바일 스킨은 추천 테마에 노란색 테두리가 설정되어 있습니다. 테두리를 변경하기 위해서border(테두리)의 색상:#fee99e, 테두리굵기:10px의 값을 변경해줍니다. 변경 위치 css > main > main.css 27줄 27 .recommend_prd { position: relative; padding: 97px 5px 0; border: #fee99e 10px solid;}

인스타그램 기능 사용하기

  1. 관리자모드에서프로모션 -> 인스고위젯관리를 모바일 기준에 맞춰 설정해줍니다(아래 이미지 참고)

  2. 관리자모드에서 모바일샵 → 모바일샵 디자인 관리 → 메인폴더 → 쇼핑몰메인본문 경로를 찾습니다.

  3. 복사한 소스를 아래 영역처럼 main/index.html에 붙여넣습니다.(코드값은 아래와 다를수 있음) 복사 위치 main > index.html 48줄 <div style="padding:30px 20px; background: #eefbfe;"> <div style="color:#695f59; font-size:17px; text-align:center; font-weight:bold; padding-bottom:10px;">해피키즈 인스타그램</div> {=includeWidget('proc/_insgo.html', 'sno', '2')} </div>

상품상세

상품명, 가격변경하기

  1. 상품명 텍스트color(색상),font-size(폰트크기) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 339줄 339 .goods_view .detail_info h3 { font-size: 18px; color: #333333;}

  1. 판매가격 텍스트color(색상),font-size(폰트크기) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 346줄 346 .goods_view .detail_info .detail_info_top .price_box .price { font-size: 24px; color: #333333; }

상품 구매하기, 장바구니 버튼 변경하기

  1. 장바구니 버튼background(배경색), color(색상),font-size(폰트크기), border(테두리색상:#9f9f9f;) 값을 변경해줍니다. 변경 위치 css > gd_button.css 166줄 166 .detail_cart_btn { display: block; width: 100%; padding: 10px 0 10px 0; font-size: 16px; text-align: center; background: #ffffff; border: 1px solid #9f9f9f; color: #494949; font-weight: bold; box-sizing: border-box;}

  1. 바로구매 버튼background(배경색), color(색상),font-size(폰트크기), border(테두리색상:#9f9f9f;) 값을 변경해줍니다. 변경 위치 css > gd_button.css 168줄 168 .detail_order_btn { display: block; width: 100%; padding: 10px 0 10px 0; font-size: 16px; text-align: center; background: #f0bc0c; border: 1px solid #f0bc0c; color: #ffffff; font-weight: bold; box-sizing: border-box;} box-sizing: border-box;}

주문결제

장바구니 페이지 변경하기

  1. 상품명의font-weight(글씨굵음), font-size(폰트크기) 값을 변경합니다. color값을 추가하여 색상을 변경할 수 있습니다. 변경 위치 css > order > order.css 52줄 52 .cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody p.name { padding: 0 0 3px 0; font-weight: bold; color: #333;}

  1. 주문수량의color(색상), font-size(폰트크기) 값을 변경합니다. color값을 추가하여 색상을 변경할 수 있습니다. 변경 위치 css > order > order.css 51줄 51 .cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody p { font-size: 12px; line-height: 16px; color: #9d9d9d;}

  1. 상품금액의color(색상), font-size(폰트크기), font-weight(폰트굵기) 값을 변경합니다. color값을 추가하여 색상을 변경할 수 있습니다. 변경 위치 css > order > order.css 54줄 54 .cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody .prc { display: block; padding: 10px 0 0 0; font-size: 15px; color: #f0bc0c; font-weight: bold;}

  1. 상품금액, 배송비의color(색상), font-size(폰트크기) 값을 변경합니다. color값을 추가하여 색상을 변경할 수 있습니다. 변경 위치 css > order > order.css 86줄 86 .cart .my_buy dl dd { display: table-cell; width: 50%; text-align: right; font-size: 15px; color: #5e5e5e;}

  1. 총 합계금액의color(색상), font-size(폰트크기) 값을 변경합니다. color값을 추가하여 색상을 변경할 수 있습니다. 변경 위치 css > order > order.css 88줄 88 .cart .my_buy dl.total dd { color: #f0bc0c; font-size: 17px;}

  1. 항목 텍스트의color(색상), font-size(폰트크기) 값을 변경합니다. color값을 추가하여 색상을 변경할 수 있습니다. 변경 위치 css > order > order.css 85줄 85 .cart .my_buy dl dt { display: table-cell; width: 50%; font-size: 13px; color: #5e5e5e;}

주문완료 페이지 변경하기

  1. 주문번호의color(색상) 값을 변경해줍니다. color값을 추가하여 색상을 변경할 수 있습니다. 변경 위치 css > order > order.css 220줄 220 .order_end .order_end_box h2 { padding: 0 0 10px 0; font-size: 13px; color: #333333;}

  1. 주문번호의color(색상) 값을 변경해줍니다. color값을 추가하여 색상을 변경할 수 있습니다. 변경 위치 css > order > order.css 224줄 224 .order_end .order_end_box .tx ul li { text-align: left; color: #5e5e5e;}

  1. 주문완료 영역의background(배경색), border(#e1e1e1 - 컬러) 값을 변경해줍니다. color값을 추가하여 색상을 변경할 수 있습니다. 변경 위치 css > order > order.css 218줄 218 .order_end .order_end_box { position: relative; margin: 15px 15px 5px 15px; padding: 20px 0 20px 0; background: #f3f3f3; border: 1px solid #e1e1e1; border-radius: 2px; text-align: center;}

PreviousHappy Kids_PC 스킨 가이드Next더 리빙(THE LIVING)

Last updated

Logo

NHN COMMERCE

공지사항회사소개

Partners

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

Developers

스토어

©NHN COMMERCE Corp. All rights reserved.