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. 스토리지(Storyg)

Storyg_Mobile 스킨 가이드

PreviousStoryg_PC 스킨 가이드Next상품 기본 관리

Last updated 12 months ago

Was this helpful?

공통

푸터 영역 변경하기(배경/컬러/사이즈)

1. 로그인 버튼의 background(배경), border(선), radius(라운드), font-size(사이즈), color(색상) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css 161줄

.ft_menu a {
    display: block;
    background: #363636;
    border: 1px solid #494949;
    border-radius: 2px;
    font-size: 13px;
    color: #777;
    line-height: 32px;
}

2. 제목 폰트의 font-size(사이즈), color(색상) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css 421줄

.ft_info dt {
    float: left;
    width: 73px;
    font-size: 11px;
    color: #545454;
    letter-spacing: -1px;
    display: table-cell;
    vertical-align: top;
    word-break: break-all;
}

3. 내용 폰트의 font-size(사이즈), color(색상) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css 422줄

.ft_info dd {
    overflow: hidden;
    font-size: 11px;
    color: #686868;
    display: table-cell;
    vertical-align: top;
    padding-left: 5px;
    max-width: 200px;
}
상단 메뉴 영역 변경하기(배경/라인/컬러)

1. 상단 메뉴 background(배경), border(선) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css 22줄

#header .head {
    position: relative;
    height: 50px;
    line-height: 50px;
    background: #fff; 
    text-align: center; 
    border-bottom: 1px solid #c3c3c3;
}

2. 메뉴 폰트 수정은 color(색상), font-size(사이즈) 값을 변경해줍니다.

스타일시트 > gd_contents.css | css/gd_contents.css 4607줄

.main-link-wrap span {
    display: table-cell; 
    width: 25%; 
    text-align: center; 
    line-height: 38px; 
    height: 38px; 
    font-size: 14px; 
    font-weight: bold;
}

스타일시트 > gd_contents.css | css/gd_contents.css 4608줄

.main-link-wrap span a {
    color: #333;
}
슬라이드 메뉴 영역 변경하기(배경/컬러/사이즈)

1. 로그인 버튼의 font-size(사이즈), background(배경), color(색상), height(높이) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css 161줄

.slide_wrap .member-btns .member-btn-in a {
    display: block;
    font-size: 14px;
    background: #3e3d3c;
    color: #fff;
    text-align: center;
    height: 39px;
    line-height: 39px;
}

2. 회원가입 버튼의 background(배경) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css 162줄

.slide_wrap .member-btns .subbtn a {
    background: #676767;
}

3. 마이페이지 버튼영역의 background(배경) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css 174줄

.nav-member-info {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-bottom: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
    border-collapse: collapse;
    background: #f3f3f3;
}

4. 메뉴 폰트의 color(색상), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css 523줄

.hamburger-gnb .dep1 > li > a {
    position: relative;
    z-index: 5;
    display: block;
    background: #fff;
    color: #888;
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
    font-weight: bold;
}
아이콘(sprite icon) 이미지 변경하기
  1. 변경하고 싶은 이미지를 확인하고 개발자 도구를 사용하여 선택한 후 이미지 경로를 확인합니다.

2. 아래 해당 이미지 링크로 접속하여 변경할 아이콘 이미지를 다운받으세요.

(예시 이미지는 흰색 아이콘 확인을 위해 추가된 이미지로 수정 후 저장 하실 때에는 꼭 투명 배경의 png로 저장)

- sprite-icon.png 이미지 url 위치 : /data/skin/mobile/story_g/img/icon/sprite-icon.png - sprite-icon.png 이미지 관리자 위치 : skin/mobile/story_g/img/icon/sprite-icon.png

- sp.png 이미지 url 위치 : /data/skin/mobile/story_g/img/common/sp.png - sp.png 이미지 관리자 위치 : skin/mobile/story_g/img/common/sp.png

- sp_mono.png 이미지 url 위치 : /data/skin/mobile/story_g/img/common/sp_mono.png - sp_mono.png 이미지 관리자 위치 : skin/mobile/story_g/img/common/sp_mono.png

3. 이미지를 변경한 후 관리자 > 디자인 > Web FTP 메뉴를 클릭 팝업에 접속하여 수정한 파일을 업로드하면 됩니다.

(이미지의 위치 및 사이즈는 변경 불가)

메인

상품 리스트 폰트 변경하기(사이즈/컬러/굵기)

1. 상품명 폰트 수정은 font-size(사이즈), color(색상) 값을 변경해줍니다.

스타일시트 > gd_contents.css | css/gd_contents.css 2027줄

.goods-nm {
    font-size: 13px;
    color: #222;
    margin-bottom: 5px;
}

2. 판매가 폰트 수정은 font-size(사이즈), color(색상) 값을 변경해줍니다.

스타일시트 > gd_contents.css | css/gd_contents.css 2045줄

.goods-price {
    font-size: 15px;
    color: #555;
}
상품 이미지 라인 변경하기(컬러)

1. 상품이미지 라인 수정은 color(색상) 값을 변경해줍니다.

스타일시트 > gd_contents.css | css/gd_contents.css 1974줄

.goods-list-img a,
.goods-gallery-img a,
.goods-simpleimg-img a {
    border: 1px solid #e5e5e5;
    display: block;
    text-align: center;
    position: relative;
}

2. 더보기 버튼 수정은 border(선), background(배경), color(색상), font-size(사이즈) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css 338줄

.bn_more {
    display:block;
    height:40px;
    border:1px solid #ddd;
    background:#ededed;
    color:#888;
    font-size:14px;
    line-height:40px;
    text-align:center;
    width: 100%;
}
타이틀 영역 변경하기(배경/컬러/사이즈)

- 타이틀영역 폰트 수정은 background(배경), color(색상), font-size(사이즈) 값을 변경해줍니다.

스타일시트 > gd_contents.css | css/gd_contents.css 200줄

my_tit {
    padding: 0 10px;
    border: 1px solid #ccc;
    border-width: 1px 0 0 0;
    background: #f2f3f3;
    color: #333;
    font-size: 14px;
    line-height: 36px;
}

상품상세

레이어 폰트 스타일 변경하기(컬러/사이즈/굵기)

1. 쿠폰적용 버튼의 background(배경), color(색상), font-size(사이즈), radius(라운드) 값을 변경해줍니다.

스타일시트 > gd_contents.css | css/gd_contents.css 4239줄

.view-order-goods .check .btn-wrap button {
    height: 21px;
    margin: 0 0 0 5px;
    padding: 0 6px;
    background: #3e3d3c;
    color: #fff;
    font-size: 12px;
    border-radius: 3px;
}

2. 총 상품금액 폰트의 font-size(사이즈), color(색상) 값을 변경해줍니다.

스타일시트 > gd_contents.css | css/gd_contents.css 4373줄

.view-end-price ul li strong {
    float: right;
    font-size: 15px;
}

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

스타일시트 > gd_contents.css | css/gd_contents.css 4382줄

.view-end-price ul li:last-child * {
    /* color: #3e3d3c; */
}

스타일시트 > gd_contents.css | css/gd_contents.css 4391줄

.view-end-price ul li:last-child strong {
    font-size: 18px;
}
탭 스타일 변경하기(컬러/사이즈/굵기)

1. 글 수의 color(색상), font-size(사이즈) 값을 변경해줍니다.

스타일시트 > gd_contents.css | css/gd_contents.css 1324줄

.detail_sub_lst>li>a {
    height: 41px;
    font-size: 14px;
    color: #222;
    font-weight: bold;
    position: relative;
    vertical-align: middle;
}

2. 탭 폰트의 font-size(사이즈), color(색상) 값을 변경해줍니다.

스타일시트 > gd_contents.css | css/gd_contents.css 1326줄

.detail_sub_lst>li .itemnum {
    margin-left: 2px;
    font-size: 15px;
    color: #fa2828;
}

3. 현재 위치 탭 표시 라인의 height(높이), color(색상) 값을 변경해줍니다.

스타일시트 > gd_contents.css | css/gd_contents.css 1327줄

.detail_sub_lst li.selected:after {
    content: '';
    width: 80%;
    height: 3px;
    background: #3e3d3c;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}
상품상세 버튼 스타일 변경하기(컬러/사이즈/굵기)

1. 장바구니 버튼의 border(선), background(배경), color(색상), font-size(사이즈) 값을 변경해줍니다.

스타일시트 > gd_contents.css | css/gd_contents.css 988줄

.ly_buy_dn li a {
    display: block;
    height: 50px;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    line-height: 51px;
    text-align: center;
    background: #3e3d3c;
    color: #fff;
    border: 1px solid #3e3d3c;
}

스타일시트 > gd_contents.css | css/gd_contents.css 989줄

.ly_buy_dn .basket {
    border: 1px solid #3e3d3c;
    background: #fff;
    color: #3e3d3c;
}

2. 바로구매 버튼의 border(선), background(배경), color(색상), font-size(사이즈) 값을 변경해줍니다.

스타일시트 > gd_contents.css | css/gd_contents.css 988줄

.ly_buy_dn li a {
    display: block;
    height: 50px;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    line-height: 51px;
    text-align: center;
    background: #3e3d3c;
    color: #fff;
    border: 1px solid #3e3d3c;
}
리스트 항목 폰트 변경하기(컬러/사이즈/굵기)

1. 상품명 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.

스타일시트 > gd_contents.css | css/gd_contents.css 703줄

.detail_info h2 {
    padding-bottom:3px;
    font-size:22px;
    color:#222;
    line-height:26px;
}

2. 판매가 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.

스타일시트 > gd_contents.css | css/gd_contents.css 705줄

.detail_info .price {
    margin-left:3px;
    font-size:17px;
    color:#222;
}

3. 리스트 항목 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.

스타일시트 > gd_contents.css | css/gd_contents.css 716줄

.detail_info dl {
    overflow:hidden;
    margin-top:25px;
    line-height:16px;
    font-size:13px;
    border-bottom: 1px solid #999999;
    padding-bottom: 10px;
}

스타일시트 > gd_contents.css | css/gd_contents.css 718줄

.detail_info dt {
    float:left;
    width:70px;
    color:#222;
}

4. 리스트 내용 폰트의 color(색상) 값을 변경해줍니다.

스타일시트 > gd_contents.css | css/gd_contents.css 722줄

.detail_info dd {
    overflow:hidden;
    color:#888;
}

주문결제

장바구니 버튼 변경하기(컬러/사이즈/굵기)

1. 쿠폰적용 버튼의 border(선), font-size(사이즈), color(색상) 값을 각각 변경해줍니다.

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

.btn.btn_p3 {
    border: 1px solid #3e3d3c;
    background: #3e3d3c;
    border-radius: 2px;
    color: #fff;
    height: 33px;
    line-height: 33px;
    font-size: 13px;
    box-sizing: border-box;
}

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

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

.btn.btn_gr {
    height: 33px;
    border: 1px solid #919191;
    border-radius: 3px;
    background: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#f0f0f0));
    color: #5e5e5e;
    font-size: 13px;
    line-height: 32px;
}

3. 선택상품 삭제버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값으로 각각 변경해줍니다.

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

.btn.btn_w {
    background: #fff;
    border-color: #9f9f9f;
    color: #494949;
    font-size: 15px;
}

4. 전체주문 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경해줍니다.

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

.btn {
    overflow: hidden;
    display: block;
    width: 100%;
    height: 42px;
    background: #3e3d3c;
    border: 1px solid #3e3d3c;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    line-height: 36px;
}

스타일시트 > gd_contents.css | css/gd_contents.css 3548줄

.btn-order-all {
    margin-top: 5px;
    font-size: 15px;
}
장바구니 폰트 변경하기(컬러/사이즈/굵기)

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

스타일시트 > gd_contents.css | css/gd_contents.css 282줄

.my_goods .info .prc {
    display: block;
    margin: 10px 4px 0 0;
    color: #606060;
    font-size: 15px;
    text-align: right;
}

2. 총 합계금액 폰트의 color(색상), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다.

스타일시트 > gd_contents.css | css/gd_contents.css 396줄

.my_buy li {
    margin-bottom: 17px;
    color: #5e5e5e;
    font-size: 13px;
}

스타일시트 > gd_contents.css | css/gd_contents.css 398줄

.my_buy li.total {
    border-top: 1px solid #C3C3C3;
    padding-top: 20px;
    font-weight: bold;
}

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

스타일시트 > gd_contents.css | css/gd_contents.css 399줄

.my_buy li.total strong {
    font-size: 17px;
    color: #fa2828;
    text-align: right;
}

📱