LogoLogo
NHN커머스 메인개발자센터
  • 운영 가이드
    • 고도몰 시작하기
      • 관리자 화면 이해하기
      • 쇼핑몰 기본정보 입력하기
      • 도메인 등록 및 연결하기
      • 결제수단 연결하기
      • 배송비 조건 등록
      • 회원에 대한 조건 입력하기
      • 쇼핑몰 약관, 이용안내 입력하기
    • 기본 디자인 알아보기
      • 쇼핑몰 기본 꾸미기
        • 스킨 꾸미기
          • 메인 꾸미기
          • 상품 페이지 꾸미기
          • 검색 페이지 꾸미기
      • 디자인 관리
        • PC
        • 모바일
      • 배너 및 팝업창 관리
        • PC
        • 모바일
      • 쇼핑몰에 영상 추가하기
        • 앱 신청하기
        • 영상 업로드하기
        • 영상 추가하기
          • 메인 비쥬얼
          • 배너
      • 디자인 향상시키기
      • 무료스킨 디자인 수정 가이드
        • 🆙마이그릭(Mygreek)
          • 🖥️Mygreek_PC 스킨 가이드
          • 📱Mygreek_Mobile 스킨 가이드
        • 🆙바람숲(BaRamSoop)
          • 🖥️BaRamSoop_PC 스킨 가이드
          • 📱BaRamSoop_Mobile 스킨 가이드
        • 🆙위유위(Weyouwe)
          • 🖥️Weyouwe_PC 스킨 가이드
          • 📱Weyouwe_Mobile 스킨 가이드
        • 🆙소나루(Sonaru)
          • 🖥️Sonaru_PC 스킨 가이드
          • 📱Sonaru_Mobile 스킨 가이드
        • 🆙메이트앤코(Mate&Co)
          • 🖥️Mate&Co_PC 스킨 가이드
          • 📱Mate&Co_Mobile 스킨 가이드
        • 🆙퍼피레드(Puppyred)
          • 🖥️Puppyred_PC 스킨 가이드
          • 📱Puppyred_Mobile 스킨 가이드
        • 🆙글랜스(Glance)
          • 🖥️Glance_PC 스킨 가이드
          • 📱Glance_Mobile 스킨 가이드
        • 🆙케이스(Case)
          • 🖥️Case_PC 스킨 가이드
          • 📱Case_Mobile 스킨 가이드
        • 🆙아뜰리에(Atelier)
          • 🖥️Atelier_PC 스킨 가이드
          • 📱Atelier_Mobile 스킨 가이드
        • 🆙매치포인트(Matchpoint)
          • 🖥️Matchpoint_PC 스킨 가이드
          • 📱Matchpoint_Mobile 스킨 가이드
        • 🆙홍삶(Honglife)
          • 🖥️Honglife_PC 스킨 가이드
          • 📱Honglife_Mobile 스킨 가이드
        • 🆙베르데(Verde)
          • 🖥️Verde_PC 스킨 가이드
          • 📱Verde_Mobile 스킨 가이드
        • 🆙뽀끼(Bbokki)
          • 🖥️Bbokki_PC 스킨 가이드
          • 📱Bbokki_Mobile 스킨 가이드
        • 🆙쉐프초이스(Chef's Choice)
          • 🖥️Chef's Choice_PC 스킨 가이드
          • 📱Chef's Choice_Mobile 스킨 가이드
        • 🆙마카룸(Macaroom)
          • 🖥️Macaroom_PC 스킨 가이드
          • 📱Macaroom_Mobile 스킨 가이드
        • 🆙블리스(Bliss)
          • 🖥️Bliss_PC 스킨 가이드
          • 📱Bliss_Mobile 스킨 가이드
        • 🆙로스트리브(Roastrive)
          • 🖥️Roastrive_PC 스킨 가이드
          • 📱Roastrive_Mobile 스킨 가이드
        • 🆙띵(tting)
          • 🖥️tting_PC 스킨 가이드
          • 📱tting_Mobile 스킨 가이드
        • 🆙비키(Biki)
          • 🖥️Biki_PC 스킨 가이드
          • 📱Biki_Mobile 스킨 가이드
        • 🆙하나노떼(Hahanotte)
          • 🖥️Hahanotte_PC 스킨 가이드
          • 📱Hahanotte_Mobile 스킨 가이드
        • 🆙밥도둑
        • 🆙마이 플랜트(My Plant)
        • 🆙어반(URBAN)
        • 🆙어라운드(AROUND)
        • 럭스(Luxe)
        • 벤세르(VENCER)
        • 트렌디(TRENDY)
        • 해피애니멀(Happy Animall)
        • 니모(NIMO)
        • 클레마티스(clematis)
        • 어썸(Awesome)
        • 마임(MIME)
          • 🖥️MIME_PC 스킨 가이드
          • 📱MIME_Mobile 스킨 가이드
        • 투에이엠(2AM)
          • 🖥️2AM_PC 스킨 가이드
          • 📱2AM_Mobile 스킨 가이드
        • 해피키즈(Happy Kids)
          • 🖥️Happy Kids_PC 스킨 가이드
          • 📱Happy Kids_Mobile 스킨 가이드
        • 더 리빙(THE LIVING)
          • 🖥️THE LIVING_PC 스킨 가이드
          • 📱THE LIVING_Mobile 스킨 가이드
        • 퓨어(PURE)
          • 🖥️PURE_PC 스킨 가이드
          • 📱PURE_Mobile 스킨 가이드
        • 프레쉬(FRESH#)
          • 🖥️Fresh#_PC 스킨 가이드
          • 📱Fresh#_Mobile 스킨 가이드
        • 모먼트(Moment)
          • 🖥️Moment_PC 스킨 가이드
          • 📱Moment_Mobile 스킨 가이드
        • 스토리지(Storyg)
          • 🖥️Storyg_PC 스킨 가이드
          • 📱Storyg_Mobile 스킨 가이드
    • 상품 기본 관리
      • 상품 등록하기
      • 상품 진열하기
    • 주문/배송처리 알아보기
      • 주문/배송처리 과정 및 정책
    • 검색엔진 등록하기
      • 네이버 사이트 등록하기
      • 구글 사이트 등록하기
  • FAQ
    • 쇼핑몰 운영
      • 쇼핑몰 연장/복구
      • 쇼핑몰 해지
      • 소유권 이전
      • 트래픽
      • 디스크(스토리지) 용량 추가
      • 도메인 관리
        • 네임 서버
      • 패치&업그레이드
        • [23.12.06] 에디터 보안패치 이슈 케이스
        • [24.02.21] 상품등록/수정 성능(속도) 개선 건 패치 범위 안내
          • 자주 묻는 질문(FAQ)
      • 전자결제서비스
      • 이벤트 모니터링
      • 디자인센터
      • 튜닝센터
      • 쇼핑몰 기본정보
      • 부가서비스
    • 어드민 기능
      • 기본설정
        • 기본정책
        • 관리정책
        • 배송정책
        • 주문정책
        • 결제정책
        • 본인확인 인증서비스
        • 해외상점
        • 보안서버 관리
      • 상품관리
        • 상품 분류 관리
        • 상품 노출 형태 관리
      • 주문/배송
        • 주문관리
        • 취소/교환/반품/환불
        • 현금영수증
        • 세금계산서
        • 택배연동 서비스
        • 자동입금확인 서비스
      • 회원
        • 회원관리
        • 마일리지/예치금
        • 메일관리
        • SMS 관리
        • 간편로그인
          • 페이코 로그인 설정
          • 네이버 로그인 설정
          • 카카오 로그인 설정
          • 위메프 로그인 설정
        • 카카오 알림톡
        • CRM 그룹 관리
      • 게시판
      • 프로모션
        • 쿠폰관리
        • 페이퍼 쿠폰관리
        • 타임세일
        • SNS 관리
      • 디자인
        • 디자인 설정
        • 배너 관리
        • 팝업창 관리
      • 공급사
    • 신규창업
    • 쇼핑몰 이전
    • 커머스 회원/결제
  • 고도몰 성장 지원
  • 클래스
  • 고도몰 매뉴얼
  • NHN커머스 도움말
Powered by GitBook
LogoLogo

NHN COMMERCE

  • 공지사항
  • 회사소개

Partners

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

Developers

  • 스토어

©NHN COMMERCE Corp. All rights reserved.

On this page

Was this helpful?

  1. 운영 가이드
  2. 기본 디자인 알아보기
  3. 무료스킨 디자인 수정 가이드

트렌디(TRENDY)

Previous벤세르(VENCER)Next해피애니멀(Happy Animall)

Last updated 5 months ago

Was this helpful?

카테고리 패션

지원 솔루션 고도몰

글로벌 지원 (한국어, 영어, 중국어, 일어)

포인트 컬러 일괄 변경하기

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

  1. 디자인 스킨 리스트 접속 | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트 해당 스킨이 상점별 작업스킨에 체크 되어있어야 합니다.

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

  1. ctrl+F 검색 후 수정하기 스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 #2e84d3를 검색하여 원하는 포인트 컬러 코드로 변경합니다. css/gd_button.css (153)

    css/gd_common.css (5)

    css/gd_plus_review.css (7)

    css/event/event.css (3)

    css/goods.css (10)

    css/list/list_01.css (4)

    css/list/list_02.css (4)

    css/list/list_04.css (4)

    css/list/list_06.css (4)

    css/list/list_07.css (4)

    css/list/list_09.css (3)

    css/list/list_11.css (7)

    css/mypage/mypage.css (10)

    css/order/order.css (12)

    css/proc/proc.css (5)

상단 로고영역 색상 변경

변경 위치 css > gd_layout.css 15번째 줄 15 #header_wrap header .header_box {border-bottom:1px solid #dcdcdc; border-top:1px solid #dcdcdc;} ✔️상단영역의 아래 선: [border-bottom:라인두께 solid #라인컬러] 변경 ✔️배경색상 추가: [background:#컬러값] 추가

슬라이드 배너 변경 - 슬라이드 이미지 주변 테두리 수정

변경 위치 css > main > main.css 31번째 줄 31 .main_slide2 .slider-wrap {border:1px solid #e8e8e8;padding:15px 14px 35px 14px;margin:0 10px;}

✔️[border:선두께px solid #색상값;] ✔️미사용 시,해당 border 부분 코드 삭제

메인 상품 탭버튼 색상 변경

  1. 탭ON일 경우 변경 위치 css > goods> list > list_07.css 12번째 줄 12 .goods_prd_item7 .tab_box .tab li.on a {background:#ffffff; color:#222222;} ✔️[background:#배경값; color:#텍스트컬러값;]

  2. 탭OFF일 경우 변경 위치 css > goods> list > list_07.css 9번째 줄 9 .goods_prd_item7 .tab_box .tab li a {text-align:center;font-weight:bold;overflow:hidden;display:inline-block;width:100%;padding:7px 10px 7px 10px;font-size:13px;box-sizing:border-box;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;border:1px solid #dfdfdf;border-left:none;background:#f3f3f3;color:#8e8e8e;} ✔️[background:#배경값; color:#텍스트컬러값;]

메뉴 컬러 변경

변경 위치 css > proc.css 8번째 줄 8 .category_side > li a {position:relative;display:block;padding:12px 0 8px 0;font-size:12px;color:#666666;} ✔️[color:#색상코드값]

메뉴 박스버튼 컬러 수정
  1. 박스버튼 ON일때 색상 변경 변경 위치 css > gd_layout.css 128번째 줄

    128 .nav_tabmenu_box .nav_tabmenu li.on span {background:#fff; color:#111; font-weight:bold; border:1px solid #333333;} ✔️[color:#폰트컬러값] [background:#배경컬러값]

    ✔️[border:테두리두께값px solid #색상컬러값;]

  2. 박스버튼 OFF일때 색상 변경 변경 위치 css > gd_layout.css 127번째 줄

    127 .nav_tabmenu_box .nav_tabmenu li span {display:block; padding:7px 0 6px 0; background:#fff; color:#a4a4a4; border:1px solid #e7e7e7; font-size:14px;} ✔️[color:#폰트컬러값] [background:#배경컬러값] ✔️[border:테두리두께값px solid #색상컬러값;]

로그인 영역 색상 변경하기
  1. 배경 색상 변경 : 2군대를 수정해 주셔야 변경이 가능합니다. 변경 위치 css > gd_layout.css 99번째 줄 99 .nav_banner {padding:22px 0 5px 7px; background:#f2f2f2;} 변경 위치 css > gd_layout.css 113번째 줄 113 .nav_link {padding:14px 0 16px 0; background:#f2f2f2;}

  1. 로그인/회원가입 폰트 색상 변경 변경 위치 css > gd_layout.css 104번째 줄 104 .nav_banner .nav_login ul li a {display:inline-block; font-size:15px; color:#333333; font-weight:bold;}

  1. 아이콘메뉴 폰트 색상 변경 변경 위치 css > gd_layout.css 116번째 줄 116 .nav_link ul li a {display:block; padding:36px 0 0 0; font-size:12px; color:#666;}

커뮤니티 메뉴영역 색상 변경
  1. 커뮤니티 타이틀영역 색상 수정 변경 위치 css > gd_layout.css 134번째 줄 134 .nav_community_box .comm_tit {padding:7px 0; margin:5px 0 10px 0; background:#f5f5f5; color:#111; font-size:14px; font-weight:bold; text-align:center;}

    ✔️[background:#배경색상] [color:#폰트색상] [font-size:#폰트사이즈]

  2. 커뮤니티 게시판 텍스트 수정

    변경 위치 css > gd_layout.css 147번째 줄 147 .nav_tabmenu_box .board_cate li a {display:block;color:#666666;font-size:13px;} ✔️[color:#폰트색상] [font-size:#폰트사이즈]

고객센터/입금계좌 안내 수정
  1. 고객센터 번호 버튼 수정

    변경 위치 css > main > main.css 202번째 줄 202 .main_info dl dd .call {display:inline-block;padding:4px 10px 2px 10px;background:#f2f2f2;font-size:16px;color:#222222;font-weight:bold;border:1px solid #c3c3c3;} ✔️[background:#배경색 ;font-size:폰트사이즈px; color:#폰트컬러]

  2. 고객센터 운영시간

    변경 위치 css > main > main.css 203번째 줄 203 .main_info dl dd p.business_hours {margin:7px 0 0 0; font-size:12px; color:#5b5b5b;} ✔️[font-size:폰트사이즈px; color:#폰트컬러]

  3. 입금계좌안내

  • 입금계좌번호 변경 위치 css > main > main.css 198번째 줄 198 .main_info_box .main_info dl dd strong {font-size:14px; font-weight:bold; color:#222;} ✔️[font-size:폰트사이즈px] [color:#폰트컬러]

  • 입금명, 은행명 변경 위치 css > main > main.css 206번째 줄 206 .main_info dl dd .account_holder {padding:0; font-size:12px; color:#222;} ✔️[font-size:폰트사이즈px] [color:#폰트컬러]

샘플샵📱 보기 →
디자인센터 바로가기 →