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. 무료스킨 디자인 수정 가이드
  4. 모먼트(Moment)

Moment_PC 스킨 가이드

Previous모먼트(Moment)NextMoment_Mobile 스킨 가이드

Last updated 12 months ago

Was this helpful?

공통

포인트 컬러 일괄 변경하기
  1. 컬러코드값 확인 Moment 스킨에 적용되어 있는 기본 컬러 코드 #ab3e55을 확인합니다.

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

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

  1. ctrl+F 검색 후 수정하기 스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 #ab3e55를 검색하여 원하는 포인트 컬러 코드로 변경합니다. 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. 마우스 오버시 컬러 #9b344a도 검색하여 원하는 포인트 컬러 코드로 변경합니다.

TOP형 메뉴 변경하기

  1. 상단 메뉴의 color(색상), font-size(크기) 값을 변경해줍니다.

css > layout/layout.css

.top_member_box > li a { 
display: inline-block; 
padding: 4px 0 4px 10px; 
color: #888888; 
font-size: 11px; 
}
  1. 장바구니 담긴상품 수량 폰트의 color(색상) 값을 변경해줍니다.

css > layout/layout.css

 .top_member_box > li strong { 
color: #ab3e55; 
}
  1. 상단 메뉴 하단의 color(색상) 값을 변경해줍니다.

css > layout/layout.css

#header .header_top { 
height: 45px; 
border-bottom: 1px solid #ececec; 
}
  1. 전체보기 메뉴의 background-color(배경) 값을 변경해줍니다.

css > layout/layout.css

 .btn_all_menu_open { 
position: absolute; 
top: 0px; 
left: 0px; 
background-color: #3e3d3c; 
}
  1. 카테고리 메뉴의 font-size(크기), font-weight(굵기), text-align(정렬) 값을 변경해줍니다.

css > layout/layout.css

#header .gnb .depth0 > li > a { 
display: inline-block; 
padding: 0 25px; 
font-size: 14px; 
font-weight: bold; 
text-align: center; 
line-height: 49px; 
}
  1. 2댑스 메뉴의 font-size(크기) 값을 변경해줍니다.

css > layout/layout.css

#header .gnb .depth1 li a { 
display: block; 
/* width: 100%; */ 
padding: 5px 10px 7px 19px; 
font-size: 12px; 
}
  1. 2댑스 메뉴 마우스 오버시의 background(배경), color(색상) 값을 변경해줍니다.

css > layout/layout.css

#header .gnb .depth1 li a.active { 
background: #ab3e55; 
color: #ffffff; 
}
left형 메뉴 변경하기

  1. 상단 메뉴의 color(색상), font-size(크기) 값을 변경해줍니다.

css > layout/layout.css

.top_member_box > li a { 
display: inline-block; 
padding: 4px 0 4px 10px; 
color: #888888; 
font-size: 11px; 
}
  1. 장바구니 담긴상품 수량 폰트의 color(색상) 값을 변경해줍니다.

css > layout/layout.css

 .top_member_box > li strong { 
color: #ab3e55; 
}
  1. 카테고리 메뉴의 border-bottom(선) 값을 변경해줍니다.

css > layout/layout.css

.header_top { 
height: 45px; 
border-bottom: 1px solid #ececec; 
}
  1. 전체보기 메뉴의 background-color(배경) 값을 변경해줍니다.

css > layout/layout.css

.btn_all_menu_open { 
position: absolute; 
top: 0px; 
right: -1px; 
background-color: #3e3d3c; 
}
  1. 카테고리 메뉴의 font-size(크기), font-weight(굵기), text-align(정렬) 값을 변경해줍니다.

css > layout/layout.css

.sub_menu_box .sub_depth0 > li > a { 
display: block; 
padding: 10px 10px 10px 20px; 
font-size: 14px; 
font-weight: bold; 
text-align: left; 
}
  1. 카테고리 메뉴 오버시 background-color(배경) 값을 변경해줍니다.

css > layout/layout.css

.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. 2댑스 메뉴의 font-size(크기) 값을 변경해줍니다.

css > layout/layout.css

 .sub_menu_box .sub_depth1 li a { 
display: block; 
padding: 5px 10px 7px 19px; 
font-size: 12px; 
}
  1. 2댑스 메뉴 오버시 background-color(배경), color(색상) 값을 변경해줍니다.

css > layout/layout.css

.sub_menu_box .sub_depth1 li a.active { 
background: #ab3e55; 
color: #ffffff; 
}
검색창 폰트 변경하기

1. 검색창 인풋박스 입력 폰트의 font-size(크기) 값을 변경해줍니다.

css/common/common.css 47줄

input[type="text"], input[type="password"] {
    padding: 0 10px;
    outline: none;
    font-size: 12px;
}

2. 최근검색어 폰트의 font-size(크기), font-weight(굵기) 값을 변경해줍니다. css/common/common.css 87줄

.recent_box dt {
    font-size: 13px;
    font-weight: bold;
}

3. 추천상품 폰트의 font-size(크기), font-weight(굵기), text-align(정렬) 값을 변경해줍니다.

css/common/common.css 97줄

.recom_box dt {
    width: 122px;
    padding: 0 0 10px 0;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
}

4. 추천상품명 폰트의 letter-spacing(자간) 값을 변경해줍니다.

css/common/common.css 115줄

.recom_tit_box .item_name {
    display: block;
    letter-spacing: -1px;
}

5. 추천상품 가격 폰트의 font-size(크기) 값을 변경해줍니다.

css/common/common.css 121줄

.recom_money_box .item_price {
    display: block;
    padding: 7px 0 5px 0;
    font-size: 14px;
}

6. 추천상품 검색창 닫기 폰트의 color(색상), font-size(크기), line-height(행간) 값을 변경해줍니다.

css/common/common.css 141줄

.seach_top_all .btn_top_search_close {
    float: right;
    padding: 0 15px 0 15px;
    color: #999999;
    font-size: 11px;
    line-height: 30px;
}
검색창 사이즈 변경하기(배경/라인)

1. 검색창 레이어 영역의 background(배경), border(선) 값을 변경해줍니다.

css/layout/layout.css 80줄

#header .top_search .search_cont {
    display: block;
    margin: 0;
    font-size: 0;
    border-top: 1px solid #cccccc;
    background: #ffffff;
}

2. 추천상품 이미지 영역의 border(선), background(배경) 값을 변경해줍니다.

css/layout/layout.css 99줄

.recom_box .recom_photo {
    display: table-cell;
    position: relative;
    width: 120px;
    height: 120px;
    border: 1px solid #ececec;
    vertical-align: middle;
}

3. 검색창 레이어 하단 영역의 height(높이), background(배경) 값을 변경해줍니다.

css/layout/layout.css 139줄

.seach_top_all {
    overflow: hidden;
    width: 100%;
    height: 30px;
    background: #f5f5f5;
    clear: both;
}
푸터 변경하기 (폰트/컬러)

1. 푸터 메뉴 폰트의 color(색상), border-left(선) 값을 변경해줍니다.

css/layout/layout.css 392줄

.foot_list ul li a { 
padding: 0 15px 0 14px; 
color: #717171; 
border-left: 1px solid #e0e0e0; 
}

2. 푸터 정보영역 폰트의 color(색상), font-size(크기), line-height(행간) 값을 변경해줍니다.

css/layout/layout.css 395줄

 .foot_cont { 
overflow: hidden; 
padding: 35px 0 35px 0; 
color: #a9a9a9; 
font-size: 11px; 
line-height: 1.8; 
}
퀵 검색 변경하기

1. 퀵검색 타이틀 폰트의 border-bottom(선), font-size(크기), background(배경) 값을 변경해줍니다.

css/layout/layout.css 12줄

.quick_search_cont_box h2 { 
padding: 20px 0 10px 25px; 
border-bottom: 1px solid #cccccc; 
font-size: 20px; 
background: url(../../img/icon/goods_icon/icon_search.png) no-repeat left 26px; 
}

2. 퀵검색 항목 폰트의 font-size(크기), text-align(정렬) 값을 변경해줍니다.

css/layout/layout.css 390줄

.quick_search_cont_box dl dt { 
width: 18%; 
display: inline-block; 
padding: 10px 0; 
font-size: 12px; 
text-align: left; 
font-weight: bold; 
vertical-align: top; 
word-break: break-word; 
}

3. 퀵검색 레이어의 border-left(선) 값을 변경해줍니다.

css/layout/layout.css 436줄

 #quick_search.q_right { 
right: -10000px; 
width: 400px; 
height: 100% !important; 
padding: 20px; 
border-left: 2px solid #323234; 
}

4. 검색 버튼의 border(선), background(배경), color(색상) 값을 변경해줍니다.

css/layout/layout.css 414줄

 .quick_search_cont_box .quick_btn input { 
display: inline-block; 
padding: 10px 30px; 
border: 1px solid #ab3e55; 
background: #ab3e55; 
color: #ffffff; 
cursor: pointer; 
}
쇼핑카트탭 변경하기 (폰트/컬러)

1. 쇼핑카트탭 메뉴 선택 시 border-top(선), font-weight(굵기) 값을 변경해줍니다.

css/layout/layout.css 529줄

 .cart_tab_list .on { 
border-top: 2px solid #ab3e55; 
font-weight: bold; 
padding-top: 0; 
}

2. 쇼핑카트탭 상단의 height(높이), border-top(선), background(배경) 값을 변경해줍니다.

css/layout/layout.css 524줄

#shop_cart_wrap .cart_tab_wrap { 
position: relative; 
height: 39px; 
border-top: 2px solid #333333; 
background: #f2f2f2; 
}

3. 쇼핑카트탭에 담긴 상품 이미지의 width(너비), height(높이) 값을 변경해줍니다.

css/layout/layout.css 570줄

.shop_view_tab .prdt_photo_box a > img {
    width: 135px;
    height: 120px;
}

4. 쇼핑카트탭 상단의 font-size(크기), color(색상) 값을 변경해줍니다.

css/layout/layout.css 572줄

.shop_view_tab .prdt_photo_box a > img {
    width: 135px;
    height: 120px;
}

5. 쇼핑카트탭 상단의 font-size(크기), color(색상) 값을 변경해줍니다.

css/layout/layout.css 574줄

.shop_view_tab .prdt_price strong {
font-size: 18px;
color: #000;
}
쇼핑카트탭 변경하기(옵션 시)

1. 옵션선택 버튼의 background(배경), color(색상), text-align(정렬), font-weight(굵기) 값을 변경해줍니다.

layout > layout.css | css/layout/layout.css 538줄

.cart_tab_list .cart_tab_option a {
display: block;
padding: 10px 55px;
background: #6a6a6a;
color: #ffffff;
text-align: center;
font-weight: bold;
line-height: 19px;
}

2. 상품명의 font-size(크기) 값을 변경해줍니다.

layout > layout.css | css/layout/layout.css 611줄

.shop_option_cont .shop_option_tit .shop_item_tit {
display: block;
padding: 0 0 7px 0;
font-size: 14px;
}

3. 배송비 내용 폰트의 color(색상) 값을 변경해줍니다.

layout > layout.css | css/layout/layout.css 613줄

.shop_option_cont .shop_option_tit .shop_item_delivery {
    color: #717171;
}

4. 항목 폰트의 color(색상) 값을 변경해줍니다.

layout > layout.css | css/layout/layout.css 631줄

.option_total_box dl dt {
float: left;
color: #777777;
}

5. 상품명의 font-weight(굵기) 값을 변경해줍니다.

layout > layout.css | css/layout/layout.css 611줄

.option_total_box dl dd {
float: right;
font-weight: bold;
/* color: #444444; */
}

6. 총 결제 예정금액 폰트의 font-weight(굵기), color(색상) 값을 변경해줍니다.

layout > layout.css | css/layout/layout.css 634줄

.option_total_box .total_price_sec dt {
font-weight: bold;
color: #555555;
}

7. 총 결제 예정금액 가격 폰트의 color(색상) 값을 변경해줍니다.

layout > layout.css | css/layout/layout.css 635줄

.option_total_box .total_price_sec strong {
color: #9b344a;
}

8. 장바구니 버튼의 border(선), background(배경), font-weight(굵기), font-size(크기), color(색상), text-align(정렬) 값을 변경해줍니다.

layout > layout.css | css/layout/layout.css 637줄

.option_total_box .btn_shop_cart {
display: block;
width: 200px;
height: 43px;
margin: 0;
border: 1px solid #cccccc;
background: #ffffff;
font-weight: bold;
font-size: 14px;
color: #3e3d3c;
text-align: center;
}

9. 바로구매 버튼의 background(배경), font-weight(굵기), font-size(크기), color(색상), text-align(정렬) 값을 변경해줍니다.

layout > layout.css | css/layout/layout.css 526줄

#shop_cart_wrap .btn_shop_buy {
display: block;
width: 200px;
height: 45px;
background: #ab3e55;
font-weight: bold;
font-size: 14px;
color: #ffffff;
text-align: center;
}
웹폰트 적용하기

웹폰트 적용하기

1. 관리자 페이지 > 디자인 메뉴에 접속합니다.

2. 좌측 하단 폴더트리 내 “스타일시트/CSS”를 더블 클릭하여 스타일시트 리스트 중 reset.css를 오픈하세요.

3. reset.css 스타일시트의 3번째 줄에 @import url(’외부 스타일시트 경로’)을 추가합니다.

스타일시트 > reset.css | css/reset.css 3줄

@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css'); 
/* 3번째줄에 추가 */

4. 13번째 줄의 font-family의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Nanum Gothic(변경할 폰트명)으로 수정하세요. (한글 폰트 파일명의 경우 " "입력)

스타일시트 > reset.css | css/reset.css 13줄

body, th, td, input, select, textarea, button {
    font-size: 12px;
    line-height: 1.5;
    font-family: Malgun Gothic, "맑은 고딕", AppleGothic, Dotum, "돋움", sans-serif;
    color: #333; /* color값은 디자인가이드에 맞게 사용 */
}

※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.

메인

고객센터, 뱅킹 정보 변경하기(폰트, 컬러, 크기)

1. 고객센터 폰트의 color(색상), font-size(크기) 값을 변경해줍니다.

layout > layout.css | css/layout/layout.css 366줄

.content_info h3 {
    padding: 0 0 5px 0;
    color: #222222;
    font-size: 14px;
} /* color값은 디자인가이드에 맞게 사용 */

2. 고객센터 이용시간 폰트의 color(색상) 값을 변경해줍니다.

layout > layout.css | css/layout/layout.css 370줄

.content_info .cs_center p {
    color: #777777;
}

3. 숫자 폰트의 color(색상), font-size(크기) 값을 변경해줍니다.

layout > layout.css | css/layout/layout.css 373줄

.content_info .bank_info strong {
    display: block;
    padding: 0 0 7px 0;
    color: #ab3e55;
    font-size: 18px;
}

4. 은행이름 폰트의 color(색상) 값을 변경해줍니다.

layout > layout.css | css/layout/layout.css 374줄

.content_info .bank_info em {
font-weight: bold;
}

최근 본 상품 변경하기

1. 최근 본 상품 영역의 background(배경) 값을 변경해줍니다.

layout > layout.css | css/layout/layout.css 422줄

.scroll_right_cont {
    float: left;
    min-width: 76px;
    padding: 18px;
    background: #f9f9f9;
}

2. 타이틀 폰트의 color(색상), text-align(정렬) 값을 변경해줍니다.

layout > layout.css | css/layout/layout.css 423줄

.scroll_right_cont h4 {
    padding: 0;
    color: #666666;
    text-align: center;
}

3. 최근 본 상품 오버시 border(선), background(배경) 값을 변경해줍니다.

layout > layout.css | css/layout/layout.css 429줄

.scroll_right_cont .src_box {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 191px;
    height: 69px;
    padding: 5px 0 0 7px;
    border: 1px solid #999999;
    background: #ffffff;
    text-align: left;
    z-index: 10;
}

4. 상품 가격 폰트의 color(색상) 값을 변경해줍니다.

layout > layout.css | css/layout/layout.css 431줄

.scroll_right_cont .src_box strong {
    display: block;
    color: #ab3e55;
}

5. 페이징 폰트의color(색상) 값을 변경해줍니다.

layout > layout.css | css/layout/layout.css 443줄

.scroll_right_cont .scr_paging strong {
    padding: 0 2px 0 2px;
    color: #ab3e55;
}

진열타입 타이틀과 더보기 버튼 변경하기(폰트/컬러)

1. 타이틀 폰트의font-size(크기) 값을 변경해줍니다.

goods > list.css | css/goods/list.css 21줄

.goods_list_tit h3 {
    font-size: 22px;
}

2. 타이틀 영역 하단의 border-bottom(선) 값을 변경해줍니다.

goods > list.css | css/goods/list.css 20줄

.goods_list_tit {
    padding: 60px 0 10px 0;
    border-bottom: 1px solid #ececec;
    line-height: 1;
}

3. 더보기 버튼의 font-size(크기), font-weight(굵기), border(선) 값을 변경해줍니다.

goods > list.css | css/goods/list.css 12줄

.btn_goods_more .btn_goods_view_more {
    padding: 2px 5px 3px 5px;
    font-size: 11px;
    font-weight: bold;
    border: 1px solid #dbdbdb;
}
상품 리스트 변경하기

1. 상품 이미지의 text-align(정렬), color(색상) 값을 변경해줍니다.

goods > list.css | css/goods/list.css 27줄

.item_cont {
    padding: 0 10px;
    text-align: left;
    color: #1c1c1c;
}

2. 상품명 폰트의 font-size(크기) 값을 변경해줍니다.

goods > list.css | css/goods/list.css 45줄

.item_tit_box .item_name {
    display: block;
    padding: 5px 0 0 0;
    font-size: 13px;
}

3. 정상가격 폰트의 color(색상) 값을 변경해줍니다.

goods > list.css | css/goods/list.css 52줄

.item_money_box del {
    display: block;
    color: #888888;
}

4. 할인가격 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.

goods > list.css | css/goods/list.css 53줄

.item_money_box .item_price {
    display: block;
    padding: 7px 0 5px 0;
    font-size: 14px;
    color: #ab3e55;
}

상품상세

타임세일 상세 변경하기

1. 타임세일 영역의 height(높이), border-bottom(선), background(배경) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css 33줄

.item_info_box .time_sale {
    overflow: hidden;
    height: 49px;
    margin: 0 0 20px 0;
    padding: 10px 10px 0 10px;
    border-bottom: 1px solid #dbdbdb;
    background: #f5f5f5;
}

2. 타임세일 할인율의 color(색상), font-size(크기), background(배경), text-align(정렬) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css 35줄

.time_sale .time_sale_num {
    width: 59px;
    height: 44px;
    padding: 5px 0 0 0;
    color: #ffffff;
    font-size: 18px;
    background: url(../../img/common/bg/bg_sale.png) no-repeat 0 0;
    text-align: center;
}

3. 남은 시간 폰트의 font-size(크기), letter-spacing(정렬) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css 37줄

.time_sale .time_day {
    margin: 7px 0 0 16px;
    font-size: 18px;
    letter-spacing: 2px;
}

4. 남은 재고 수량 폰트의 color(색상), font-size(크기) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css 40줄

.time_sale .time_now_order span {
    color: #ab3e55;
    font-size: 18px;
}

5. 타임세일 가격 폰트의 color(색상), font-size(크기), font-weight(굵기) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css 56줄

.time_sale_price dd {
    margin: -3px 0 0 0;
    color: #ab3e55;
    font-size: 16px;
    font-weight: bold;
}
상품 상세 상단 변경하기(폰트)

1. 상품명 폰트의 font-size(크기) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css 44줄

.item_detail_tit h3 {
    width: 405px;
    font-size: 18px;
}

2. 상품 정보 타이틀 폰트의 color(색상), font-weight(굵기) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css 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(굵기) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css 54줄

.item_price dd {
    margin: -2px 0 0 0;
    font-size: 16px;
    font-weight: bold;
}

4. 총 합계금액 폰트의 font-size(크기), font-weight(굵기) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css 91줄

.item_tatal_box .total_amount dt {
    font-size: 16px;
    font-weight: bold;
}

5. 총 합계금액 가격 폰트의 color(색상), font-weight(굵기) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css 92줄

.item_tatal_box .total_amount dd {
    color: #ab3e55;
    font-weight: bold;
}

6. 총 합계금액 가격 폰트의 font-size(크기) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css 93줄

.item_tatal_box .total_amount dd strong {
    font-size: 20px;
}
상품 상세 상단 변경하기(버튼)

1. 공유하기 버튼의 background(배경), border(선) 값을 변경해줍니다.

스타일시트 > button.css | css/button.css 7줄

.btn_gray_list a, .btn_gray_list button {
    display: inline-block;
    padding: 0 0 0 11px;
    background: url(../img/common/btn/btn_gray_bg.png) repeat-x;
    border: 1px solid #dbdbdb;
    vertical-align: middle;
}

2. 조건별 배송 버튼의 font-size(크기), background(배경) 값을 변경해줍니다.

스타일시트 > button.css | css/button.css 7줄

.btn_gray_list .btn_gray_small {
    font-size: 11px;
    background: url(../img/common/btn/btn_gray_bg_02.png) repeat-x bottom;
}

3. 장바구니 버튼의 color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기) 값을 변경해줍니다.

스타일시트 > button.css | css/button.css 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: #3e3d3c;
    font-size: 16px;
    border: 1px solid #cccccc;
    background: #ffffff;
    text-align: center;
    font-weight: bold;
}

4. 바로구매 버튼의 color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기) 값을 변경해줍니다.

스타일시트 > button.css | css/button.css 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 #ab3e55;
    background: #ab3e55;
    text-align: center;
    font-weight: bold;
}-weight: bold;
}
상품 상세 상단 변경하기(라인)

1. 셀렉트 영역의 border(선), background(배경) 값을 변경해줍니다.

layout > layout.css | css/layout/layout.css 225줄

.location_select {
    display: inline-block;
    position: relative;
    min-width: 150px;
    margin: 7px 0 0 0;
    border: 1px solid #999999;
    background: #ffffff;
    z-index: 50;
}

2. 상품명 아래 border-bottom(선) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css 43줄

.item_detail_tit {
    position: relative;
    padding: 0 0 10px 0;
    border-bottom: 1px solid #dbdbdb;
}

3. 리스트 항목 구분선의 border-top(선) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css 71줄

.item_add_option_box {
    float: left;
    margin: 5px 0 0 0;
    padding: 10px 0 5px 0;
    border-top: 1px solid #dbdbdb;
}

4. 선택한 옵션 영역의 border-bottom(선) 값을 변경해줍니다.

layout > layout.css | css/layout/layout.css 596줄

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

layout > layout.css | css/layout/layout.css 596줄

.item_choice_list table {
    width: 100%;
    background: #f5f5f5;
}
  1. 총 합계금액 구분 영역의 border-top(선) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css 90줄

.item_tatal_box .total_amount {
    margin: 15px 0 0 0;
    padding-top: 10px;
    border-top: 1px solid #dbdbdb;
}
상품 상세 탭 변경하기

1. 상품 상세 탭 선택시 color(색상), font-weight(굵기), border(선) 값을 변경해줍니다.

goods> goods.css | css/goods/goods.css 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;
}

2. 글 등록 수량 폰트의 color(색상) 값을 변경해줍니다.

goods> goods.css | css/goods/goods.css 122줄

.item_goods_tab li a strong {
    color: #ab3e55;
}
상품 상세 상품문의 영역-리스트 변경하기

1. 상품 문의 타이틀 폰트의 font-size(크기) 값을 변경해줍니다.

goods> goods.css | css/goods/goods.css 109줄

.item_goods_sec h3 {
    padding: 45px 0 10px 0;
    font-size: 18px;
}

2. 상품문의 전체보기 버튼의 color(색상), font-weight(굵기), border(선), background(배경), text-align(정렬) 값을 변경해줍니다.

스타일시트> button.css | css/button.css 122줄

.btn_reviews_more, .btn_qna_more {
    display: inline-block;
    min-width: 120px;
    padding: 10px 10px 10px 10px;
    color: #ab3e55;
    font-weight: bold;
    border: 1px solid #ab3e55;
    background: #ffffff;
    text-align: center;
}

3. 상품문의 글쓰기 버튼의 color(색상), font-weight(굵기), border(선), background(배경), text-align(정렬) 값을 변경해줍니다.

스타일시트> button.css | css/button.css 68줄

.btn_reviews_write, .btn_qna_write {
    display: inline-block;
    min-width: 120px;
    padding: 10px 10px 10px 10px;
    color: #ffffff;
    font-weight: bold;
    border: 1px solid #ab3e55;
    background: #ab3e55;
    text-align: center;
}

4. 페이징 버튼의 color(색상), font-weight(굵기), border(선) 값을 변경해줍니다.

스타일시트> button.css | css/button.css 317줄

.pagination .on {
    color: #ab3e55;
    font-weight: bold;
    border: 1px solid #ab3e55;
}
상품 상세 상품문의 비밀번호 입력 레이어 변경하기

1. 상품 상세 상품문의 비밀번호 입력 레이어의 border(선) 값을 변경해줍니다.

layer> layer.css | css/common/layer/layer.css 371줄

.layer_wrap.password_layer .layer_wrap_cont {
    border: 1px solid #555555;
}

2. 비밀번호 인증 폰트의 font-size(크기), border-bottom(선) 값을 변경해줍니다.

layer> layer.css | css/common/layer/layer.css 72줄

.layer_wrap .ly_tit h4 {
    padding: 0 30px 15px 0;
    font-size: 18px;
    border-bottom: 1px solid #999999;
}

3. 비밀번호 인증 폰트 아래 border-bottom(선) 값을 변경해줍니다.

layer> layer.css | css/common/layer/layer.css 372줄

.layer_wrap .ly_tit h4 {
    padding: 0 30px 15px 0;
    font-size: 18px;
    border-bottom: 1px solid #999999;
}

4. 확인 버튼의 color(색상), border(선), background(배경), text-align(정렬) 값을 변경해줍니다.

button> button.css | css/button.css 237줄

.btn_ly_password {
    display: inline-block;
    width: 70px;
    height: 28px;
    padding: 0 5px 0 5px;
    color: #ffffff;
    border: 1px solid #3e3d3c;
    background: #3e3d3c;
    text-align: center;
    cursor: pointer;
}
상품 상세 상품문의 영역-리스트 내용 변경하기

1. 수정 버튼의 background(배경), border(선) 값을 변경해줍니다.

스타일시트> button.css | css/button.css 7줄

.btn_gray_list a, .btn_gray_list button {
    display: inline-block;
    padding: 0 0 0 11px;
    background: url(../img/common/btn/btn_gray_bg.png) repeat-x;
    border: 1px solid #dbdbdb;
    vertical-align: middle;
}

2. 상품문의 내용 펼침 영역의 background(배경) 값을 변경해줍니다.

goods> goods.css | css/goods/goods.css 249줄

.qna_new_box {
    text-align: left;
    background: #f8f8f8;
}

주문결제

장바구니 타이틀 변경하기

1. 장바구니 타이틀 폰트의 color(색상), font-size(크기), color(색상) 값을 변경해줍니다.

order> order.css | css/order/order.css 14줄

.order_wrap .order_tit h2 {
    float: left;
    font-size: 28px;
    color: #222222;
}

2. 현재 스텝 표시 폰트의 color(색상), font-weight(굵기) 값을 변경해줍니다.

order> order.css | css/order/order.css 17줄

.order_wrap .order_tit .page_on {
    color: #ab3e55;
    font-weight: bold;
}

3. 다음 진행 스텝 표시 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.

order> order.css | css/order/order.css 16줄

.order_wrap .order_tit ol li {
    float: left;
    font-size: 14px;
    color: #d1d1d1;
}

4. 장바구니 타이틀 폰트 하단의 border-bottom(선) 값을 변경해줍니다.

order> order.css | css/order/order.css 13줄

.order_wrap .order_tit {
    overflow: hidden;
    border-bottom: 1px solid #dbdbdb;
}
주문서 작성/결제 화면 변경하기

주문서 금액 변경하기

- 상품금액/배송비/합계 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.

스타일시트 > order.css | css/order/order.css 137줄, 138줄

.price_sum_cont .price_sum_list dd {
color:#ab3e55;
}
.price_sum_cont .price_sum_list dd strong {
font-weight:700;
font-size:18px;
color:#ab3e55
}

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

1. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.

스타일시트 > order.css | css/order/order.css 323줄

.payment_final_total dd {
display:inline-block;
font-size: 30px;
color:#ab3e55;
}

2. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경해줍니다.

스타일시트 > gd_reset.css | css/gd_reset.css 180줄

.btn_order_buy {
display:inline-block;
width:300px;
height:61px;
line-height:59px;
color:#fff;
font-size:20px;
border:1px solid #ab3e55;
background:#ab3e55;
text-align:center;
}
장바구니 폰트/버튼 변경하기(컬러/사이즈/굵기)

1. 장바구니 상품금액/배송비/최종 결제금액의 color(색상), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다..

스타일시트 > order.css | css/order/order.css 137줄, 138줄

.price_sum_cont .price_sum_list dd {
color:#ab3e55;
}
.price_sum_cont .price_sum_list dd strong {
font-weight:700;
font-size:18px;
color:#ab3e55;
}

2. 선택상품주문 버튼은 마우스 오버 전(.btn_order_choice_buy) 과 오버 시(.btn_order_choice_buy:hover)의 border(선), font-size(사이즈), color(색상) 값으로 각각 변경해줍니다.

스타일시트 > button.css | css/order/button.css 174줄, 175줄

.btn_order_choice_buy { 
min-width:190px;
height:55px;
padding:0 20px 0 20px;
color:#ab3e55;
font-weight:bold;
font-size:14px;
border:1px solid #ab3e55;
background:#fff;
cursor:pointer;
}
.btn_order_choice_buy:hover {
color:#9b344a; 
border:1px solid #9b344a;
}

3. 전체상품주문 버튼은 마우스 오버 전(.btn_order_whole_buy) 과 오버 시(.btn_order_whole_buy:hover) 의 background(배경) 컬러, border(선), color(색상), font-size(사이즈) 값으로 각각 변경해줍니다.

스타일시트 > gd_reset.css | css/gd_reset.css 177줄, 178줄

.btn_order_whole_buy {
min-width:190px;
height:55px;
padding:0 20px 0 20px;
color:#ffffff;
font-size:14px;
border:1px solid #ab3e55;
background:#ab3e55;
cursor:pointer;
font-weight:bold;
}
.btn_order_whole_buy:hover {
border:1px solid #9b344a; 
background:#9b344a;
}

🖥️