NHN커머스 메인
개발자센터

📱THE LIVING_Mobile 스킨 가이드

공통

포인트 컬러 일괄 변경하기

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

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

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

  1. ctrl+F 검색 후 수정하기 스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 #dd3d42를 검색하여 원하는 포인트 컬러 코드로 변경합니다. css/gd_button.css (총 157개) css/gd_common.css (총 4개) css/gd_layout.css (총 2개) css/gd_plus_review.css (총 7개) css/goods/goods.css (총 4개) css/goods/list/list_01.css (총 4개)

    css/goods/list/list_02.css (총 4개) css/goods/list/list_04.css (총 4개) css/goods/list/list_06.css (총 4개) css/goods/list/list_07.css (총 4개) css/goods/list/list_09.css (총 3개) css/goods/list/list_11.css (총 7개) css/main/main.css(총 1개) css/mypage/mypage.css(총 9개) css/order/order.css (총 12개) css/proc/proc.css(총 6개)

상단 메뉴 영역 변경하기

  1. 로고가 있는 가장 상단의 background(배경색) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 14줄 14 #header_wrap header { width: 100%; min-width: 320px; background: #272727; z-index: 300;}

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

  1. 로고영역과 게시판메뉴 영역을 구분짓는 border-bottom의 #454545의 색상값을 변경해줍니다. 변경 위치 css > gd_layout.css 16줄 16 #header_wrap header .header_box { border-bottom: 1px solid #454545;}

  2. 게시판메뉴의 background(배경색) 값을 변경해줍니다. 변경 위치 css > main > main.css 13줄 13 .main .main_top_menu { display: table; width: 100%; background: #272727;}

  3. 게시판메뉴 텍스트의 color(색상) 값을 변경해줍니다. 변경 위치 css > main > main.css 15줄 15 .main .main_top_menu li a { display: block; padding: 13px 0 13px 0; font-size: 14px; color: #c3c3c3;}

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

  1. 로그인과 회원가입이 있는 영역의background(배경색) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 81줄 81 .nav_banner { position: relative; height: 58px; margin: 0 auto; padding: 8px 0 4px 0; text-align: center; background: #272727;}

  1. 로그인버튼의background(배경색) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 85줄 85 .nav_banner .nav_login ul li:first-child { background: #dd3d42; margin: 0;}

  1. 회원가입버튼의background(배경색) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 86줄 86 .nav_banner .nav_login ul li.btn_join { background: #111111;}

  1. 아이콘메뉴 영역의background(배경색) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 94줄 94 .nav_link { padding: 10px 0 20px 0; background: #272727;}

  1. category메뉴의background(배경색),color(색상) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 107줄 107 .nav_tabmenu_box .nav_tabmenu li.on span { background: #ffffff; color: #333333; font-weight: bold;}

  1. brand메뉴의background(배경색),color(색상) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 106줄 106 .nav_tabmenu_box .nav_tabmenu li span { display: block; padding: 10px 0 10px 0; background: #e9e9e9; color: #acacac; font-size: 14px;}

  1. 카테고리 메뉴들의 굵은느낌을 삭제하기 위해서는font-weight: bold; 를 font-weight: normal; 값으로 변경해줍니다. 변경 위치 css > proc > proc.css 9줄 9 .category_side > li > a { font-weight: bold;}

  1. 카테고리 클릭시의color(색상) 값을 변경해줍니다. 변경 위치 css > proc > proc.css 10줄 10 .category_side > li > a.on { color: #dd3d42;}

  1. 카테고리 구분선인border-top의 #d0d0d0인 색상 값을 변경해줍니다. 변경 위치 css > proc > proc.css 6줄 6 .category_side > li ul { display: none; border-top: 1px solid #d0d0d0;}

  1. 메뉴들의font-size(폰트크기), color(색상) 값을 변경해줍니다. 변경 위치 css > proc > proc.css 7줄 7 .category_side > li a { position: relative; display: block; padding: 12px 0 12px 0; font-size: 16px; color: #262626;}

  1. Community메뉴의font-size(폰트크기), color(색상) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 113줄 113 .nav_community_box .comm_tit { padding: 10px 0 10px 10px; margin: 0 10px 0 10px; font-size: 18px; color: #272727; font-weight: bold; border-bottom: 1px solid #000000;}

  1. Community메뉴들의font-size(폰트크기), color(색상) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 116줄 116 .nav_community_box .board_cate li a { display: block; padding: 12px 0; font-size: 16px; color: #1c1c1c;}

하단 영역 변경하기

  1. top버튼 영역의background(배경색) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 129줄 129 #footer footer .ft_btn_top a { display: inline-block; width: 100%; height: 46px; border-top: 1px solid #505050; border-bottom: 1px solid #434343; text-align: center; color: #ffffff; background: #272727; line-height: 46px; font-size: 13px; font-weight: bold;}

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

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

  1. 하단영역 전체background(배경색) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 135, 134줄 135 #footer footer .ft_button_box { padding: 0 25px; background: #272727;} 134 #footer footer .ft_info2_box { background: #272727;}

  1. 고객센터와 PC화면 버튼의background(배경색),color(색상) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 140줄 140 #footer footer .ft_button_box ul li a { display: block; padding: 10px 0; background: #dddddd; color: #444444; font-size: 13px;}

  1. 하단기본 메뉴의font-size(폰트크기),color(색상) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 143줄 143 #footer footer .ft_info2_box .ft_menu li a { display: block; padding: 18px 0 18px 0; font-size: 11px; color: #d1d1d1; text-align: center; letter-spacing: -1px;}

  1. 개인정보처리방침 폰트의color(색상), font-weight(폰트굵기) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 144줄 144 #footer footer .ft_info2_box .ft_menu li a.privacy { color: #fff; font-weight: bold;}

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

  1. 카피라이터의color(색상), font-size(폰트크기) 값을 변경해줍니다. 변경 위치 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. THE LIVING 모바일 스킨은 설치 시, 상단 영역의 색상이 검정색으로 기본 설정되어 있습니다. 이 영역의 색상은 원하는 색으로 자유롭게 변경이 가능합니다.

  1. THE LIVING의 로고는 하얀색 PNG 이미지로 제작되었습니다. 배경 색상과 관계없이 사용할 수 있도록 배경 없이 제작하였습니다. 배경색 변경 시에도 별도의 로고 수정 작업 없이 사용 가능합니다.

  1. 로고를 변경할 경우, 기존과 동일한 배경이 없는 PNG 파일로 설정하는 것을 권장드립니다. JPG 파일로 로고를 설정할 경우, 배경의 컬러와 동일한 컬러를 배경으로 한 로고를 업로드하시길 바랍니다.

  1. 로고는 모바일샵-모바일샵 디자인설정-배너관리를 통해서 수정이 가능하며, 아래 표기된 영역을 수정해 주시면 됩니다. *로고 컬러가 흰색이라 보이지 않음

메인

고객센터, 계좌정보 변경하기

  1. 고객센터, 계좌정보 타이틀 영역인font-weigh(폰트굵기), font-size(폰트크기), border-bottom의 색상 값을 변경해줍니다. 변경 위치 css > main > main.css 45줄 45 .main .main_info_box .main_info dl dt { font-size: 13px; margin: 0 5px; font-weight: bold; border-bottom: 1px solid #999;}

  1. top텍스트의color(색상), font-weight(폰트굵기), font-size(폰트사이즈) 값을 변경해줍니다. 변경 위치 css > main > main.css 50줄 50 .main .main_info dl dd p.phone a { font-size: 22px; color: #dd3d42; font-weight: bold;}

  1. 영업시간의border-bottom에 #434343 색상 값을 변경해줍니다. 변경 위치 css > main > main.css 51줄 51 .main .main_info dl dd p.business_hours { font-size: 11px; color: #666;}

  1. 계좌은행 텍스트color(색상), font-weight(폰트굵기) 값을 변경해줍니다. 변경 위치 css > main > main.css 57줄 57 .main .main_info dl dd ul.main_bank li span { font-weight: bold; color: #222222;}

  1. 계좌번호 텍스트color(색상) 값을 변경해줍니다. 변경 위치 css > main > main.css 56줄 56 .main .main_info dl dd ul.main_bank li { vertical-align: middle; color: #666666;}

인스타그램 기능 사용하기

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

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

  3. 복사한 소스를 아래 영역처럼 main/index.html에 붙여넣습니다.(코드값은 아래와 다를수 있음) 복사 위치 main > index.html 33줄 <div style="text-align:center;"> <h3>INSTAGRAM</h3> {=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;}

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

  3. 브랜드명 텍스트color(색상),font-size(폰트크기) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 342줄 342 .goods_view .detail_info .detail_info_top .brand { padding: 0 0 2px 0; color: #666; font-size: 13px;}

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

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

구매 옵션 영역 수정하기

  1. 상품명의 font-weight(글씨굵음), font-size(폰트크기) 값을 변경해줍니다. color값을 추가하여 색상을 변경할 수 있습니다. 변경 위치 css > gd_common.css 219줄 219 .view_order_goods dl dt { font-size: 12px; font-weight: bold;}

  2. 상품금액의 font-weight(글씨굵음), font-size(폰트크기) 값을 변경해줍니다. color값을 추가하여 색상을 변경할 수 있습니다. 변경 위치 css > gd_common.css 230줄 230 .view_order_goods dl dd .price_info .right .price { color: red; padding: 5px 0 0 0; font-size: 15px; font-weight: bold; text-align: right;}

  3. 상품금액의 font-weight(글씨굵음), font-size(폰트크기) 값을 변경해줍니다. color값을 추가하여 색상을 변경할 수 있습니다. 변경 위치 css > gd_common.css 211줄 211 .total_price_box ul li dl dd { display: table-cell; font-size: 15px; font-weight: bold; text-align: right; vertical-align: middle;

주문결제

장바구니 페이지 변경하기

  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: #dd3d42; 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: #dd3d42; 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 219줄 219 .order_end .order_end_box h2 { padding: 0 0 10px 0; font-size: 13px; color: #333333;}

  1. 주문번호의 color(색상) 값을 변경해줍니다. color 값을 추가하여 색상을 변경할 수 있습니다. 변경 위치 css > order > order.css 223줄 223 .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;}

PreviousTHE LIVING_PC 스킨 가이드Next퓨어(PURE)

Last updated

Logo

NHN COMMERCE

공지사항회사소개

Partners

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

Developers

스토어

©NHN COMMERCE Corp. All rights reserved.