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. 뽀끼(Bbokki)

Bbokki_Mobile 스킨 가이드

PreviousBbokki_PC 스킨 가이드Next쉐프초이스(Chef's Choice)

Last updated 5 months ago

Was this helpful?

공통

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

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

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

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

  2. 나머지 포인트 컬러도 검색하여 원하는 포인트 컬러 코드로 변경합니다.

    1. 기본 컬러 코드 : #DF3842

    2. 기본 컬러 마우스 오버 코드 : #C5000C

    3. 서브 컬러 코드 : #FEFFD5

    4. 중립적 컬러 코드 : #D2D2D2, #2B2B2B

푸터 변경하기

1. 푸터 메뉴버튼의 font-size(크기), color(색상), text-align(정렬), font-weight(굵기) letter-spacing(자간) 값을 변경해줍니다.

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

#footer footer .ft_info2_box .ft_menu li a {
    display: block;
    padding: 18px 0 10px 0;
    font-size: 12px;
    color: #fff;
    text-align: left;
    font-weight: 700;
    letter-spacing: -1px;
}

2. 푸터 개인정보 메뉴버튼의 color(색상), font-weight(굵기) 값을 변경해줍니다.

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

#footer footer .ft_info2_box .ft_menu li a.privacy {
    color: #fff;
    font-weight: bold;
}

3. 푸터 정보 부분의 text-align(정렬), font-size(크기), color(색상) 값을 변경해줍니다.

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

#footer footer .ft_info2_box .ft_address {
    padding:0px;
    text-align:left;
    font-size:12px;
    color:#fff;
    word-break:keep-all;
}

4. 푸터 카피라잇 영역의 color(색상), font-size(크기), text-align(정렬) 값을 변경해줍니다.

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

#footer footer .ft_copy {
    padding:24px 0 0;
    color:#fff;
    font-size:10px;
    text-align:left;
    font-style:normal;
}
고객센터, PC화면 버튼 변경하기

1. 고객센터, PC화면 버튼의 background(배경), color(색상), font-size(크기) 값을 변경해줍니다.

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

#footer footer .ft_button_box ul li a {
    display:block;
    padding:8px 0;
    background:#484848;
    color:#fff;
    font-size:13px;
}
상단 헤더 영역 변경하기

1. GNB영역의 border-bottom(선) 값을 변경해줍니다.

> gd_layout.css | css/gd_layout.css

#header_wrap header .header_box {
    display: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    border-bottom: 2px solid #000;
    height: 62px;
    background: #fff;
}

2. 장바구니 담긴상품 수량의 배경 background(배경) 값을 변경해줍니다.

> gd_layout.css | css/gd_layout.css

#header_wrap header .header_box .cart_count {
    position: absolute;
    top: 8px;
    right: 0;
    display: block;
    padding: 0px 4px;
    line-height: 15px;
    border-radius: 100%;
    color: #fff;
    background: var(--primary-default);
    vertical-align: middle;
    font-size: 9px;
}
슬라이드 메뉴 변경하기

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

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

.nav_banner .nav_login ul li a {
    display: inline-block;
    font-size: 15px;
    color: #222222;
}

2. 아이콘 메뉴 영역의 font-size(크기), color(색상) 값을 변경해줍니다.

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

.nav_link ul li a {
    display: block;
    padding: 36px 0 0 0;
    font-size: 13px;
    color: #888;
}

3. 탭버튼 활성화 시 background(배경), color(색상), font-weight(굵기) 값을 변경해줍니다.

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

.nav_tabmenu_box .nav_tabmenu li.on span {
    background: var(--primary-default);
    color: #fff;
    font-weight: bold;
}

4. 탭버튼 비활성화 시 background(배경), color(색상) 값을 변경해줍니다.

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

.nav_tabmenu_box .nav_tabmenu li span {
    display: block;
    padding: 10px 0 10px 0;
    background: #e8e8e8;
    color: #acacac;
}

5. 메뉴 텍스트 스타일 font-size(크기), color(색상) 값을 변경해줍니다.

proc > proc.css | css/proc/proc.css

.category_side > li a {
    position: relative;
    display: block;
    padding: 12px 0 12px 0;
    font-size: 16px;
    color: #262626;
}

메뉴 폰트 font-weight(굵기) 값을 변경해줍니다.

proc > proc.css | css/proc/proc.css

.category_side > li > a {
    font-weight: bold;
}

6. 메뉴 폰트 선택 시 color(색상) 값을 변경해줍니다.

proc > proc.css | css/proc/proc.css

.category_side > li > a.on {
    color: var(--primary-default);
}

메인

고객센터 폰트 변경하기

1. 고객센터 타이틀의 font-size(크기), font-weight(굵기), border-bottom(선) 값을 변경해줍니다.

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

#footer .ft_info dl dt {
    font-size: 12px;
    padding-bottom: 5px;
    font-weight: 700;
    border-bottom: 1px solid #fff;
}

2. 고객센터 전화번호 font-size(크기), color(색상) 값을 변경해줍니다.

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

#footer .ft_info dl dd .phone {
    font-size: 14px;
    font-weight: 700;
}

3. 고객센터 이용시간 font-size(크기), color(색상) 값을 변경해줍니다.

main > main.css | css/main/main.css

#footer .ft_info dl dd .business_hours {
    margin-top: 2px;
    font-size: 12px;
    color: #fff;
    line-height: 18px;
}
상품 리스트 스타일 변경하기

1. 상품리스트 이미지의 border(라인) 값을 변경해줍니다.

list > list_01.css | css/goods/list/list_01.css

.goods_prd_item2 .goods_prd_img .img_box .img img {
    width: 100%;
    border: 2px solid var(--neutrals-dark);
    box-sizing: border-box;
}

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

list > list_01.css | css/goods/list/list_01.css

.goods_prd_item2 .goods_prd_content .goods_info_list li {
    padding: 1px 0 1px 0;
    word-break: break-all;
    color: var(--neutrals-dark);
    font-size: 14px;
}

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

main > list_01.css | css/goods/list/list_01.css

.goods_prd_item2 .goods_prd_content .goods_info_list li.price .c_price {
    color: var(--neutrals-dark);
}
진열타입 타이틀 변경하기

1. 타이틀의 font-size(크기), color(색상), border-bottom(선), font-weight(굵기) 값을 변경해줍니다.

proc > proc.css | css/proc/proc.css

._goods_display_main h3 {
    position:relative;
    display:block;
    padding:40px 0px 0px 16px;
    font-size:24px;
    color:#181818;
    /* border-bottom:1px solid #f3f2f2; */
    text-align:left;
    font-weight:400px;
}

2. 더보기 버튼의 background(배경), font-size(크기), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.

스타일시트 > gd_button.css | css/gd_button.css

.main_more_btn2 {
    display: block;
    width: 70px;
    padding: 2px 8px;
    text-align: center;
    background: var(--primary-default);
    font-size: 14px;
    font-weight: normal;
    /* border: 1px solid #9f9f9f; */
    color: #fff;
    box-sizing: border-box;
    position: absolute;
    top: 40px;
    right: 0px;
}

상품상세

상품후기 변경하기

1. 상품 후기 게시판 타이틀의 background(배경), border-bottom(선) 값을 변경해줍니다.

스타일시트 > gd_plus_review.css | css/gd_plus_review.css

.plus_review_container .plus_review_top_box {
    display: table;
    width: 100%;
    padding: 2px 0;
    background: #f2f3f3;
    border-bottom: 1px solid #e2e2e2;
}

2. 평가, 리뷰수 타이틀 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.

스타일시트 > gd_plus_review.css | css/gd_plus_review.css

.plus_review_container .plus_review_top_box dl dt {
    display: table-cell;
    font-size: 13px;
    color: #606060;
    vertical-align: middle;
}

3. 평가, 리뷰 갯수 폰트의 font-weight(굵기), font-size(크기), color(색상) 값을 변경해줍니다.

스타일시트 > gd_plus_review.css | css/gd_plus_review.css

.plus_review_container .plus_review_top_box dl dd {
    display: table-cell;
    padding: 0 8px 0 8px;
    font-weight: bold;
    font-size: 24px;
    color: var(--primary-default);
    vertical-align: middle;
}

4. 리뷰등록 버튼의 background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.

스타일시트 > gd_plus_review.css | css/gd_plus_review.css

.plus_reivew_write_btn {
    display: inline-block;
    width: 80px;
    margin: 0 10px 0 0;
    padding: 4px 0 4px 0;
    text-align: center;
    background: #3e3d3c;
    border: 1px solid #3e3d3c;
    color: #ffffff;
    font-weight: bold;
    box-sizing: border-box;
}

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

스타일시트 > gd_button.css | css/gd_button.css

.detail_write_btn {
    display:inline-block;
    width:100%;
    padding:10px 0 10px 0;
    text-align:center;
    color:var(--primary-default);
    font-size:15px;
    font-weight:bold;
    background:#ffffff;
    border:1px solid var(--primary-default);
    box-sizing:border-box;
}

6. 상품평 더보기 버튼의 text-align(정렬), color(색상), font-size(크기), background(배경) 값을 변경해줍니다.

스타일시트 > gd_button.css | css/gd_button.css

.detail_more_btn {
    display:inline-block;
    width:100%;
    padding:10px 0 10px 0;
    text-align:center;
    color:#494949;
    font-size:15px;
    background:#ffffff;
    border:1px solid #9f9f9f;
    font-weight:bold;
}
옵션 레이어-셀렉트박스 변경하기

1. 옵션 레이어의 기본 옵션 폰트의 font-size(크기), color(색상), text-align(정렬), background(배경) 값을 변경해줍니다.

스타일시트 > gd_common.css | css/gd_common.css

.layer_option .ly_buy_info .ly_opt .bn_opt {
    display:block;
    position:relative;
    width:100%;
    height:33px;
    border:1px solid #c7c7c7;
    font-size:13px;
    color:#777;
    text-align:left;
    text-indent:11px;
    z-index:100;
    background:#fff url('../img/icon/icon_bg_select.png') no-repeat 100% 0;
    background-size:400px 31px;
}

2. 옵션 레이어 활성화 시 border(선) 값을 변경해줍니다.

스타일시트 > gd_common.css | css/gd_common.css

.layer_option .ly_buy_info .ly_opt .bn_opt.selected {
    border: 1px solid #999;
}

3. 옵션 레이어 옵션 폰트의 border-bottom(선), font-weight(굵기), font-size(크기), color(색상) 값을 변경해줍니다.

스타일시트 > gd_common.css | css/gd_common.css

.layer_option .ly_buy_info .ly_opt li .optbx .optlst li {
    position: relative;
    min-height: 42px;
    text-indent: 10px;
    border-bottom: 1px solid #c7c7c7;
    font-weight: bold;
    font-size: 13px;
    color: #555;
    line-height: 42px;
    vertical-align: middle;
}
옵션 레이어-항목 변경하기(폰트/버튼)

1. 옵션 레이어 쿠폰적용 버튼의 background(배경), color(색상), border-radius(둥근선), border(선) 값을 변경해줍니다.

스타일시트 > gd_button.css | css/gd_button.css

.coupon_apply_btn {
    display: inline-block;
    height: 21px;
    margin: 0 0 0 5px;
    padding: 0 6px;
    background: #000;
    color: #ffffff;
    border-radius: 4px;
    border: 1px solid #000;
}

2. 상품 가격 금액 폰트의 font-size(크기), font-weight(굵기), text-align(정렬) 값을 변경해줍니다.

스타일시트 > css/gd_common.css | css/gd_common.css

.view_order_goods dl dd .price_info .right .price {
    padding: 5px 0 0 0;
    font-size: 15px;
    font-weight: bold;
    text-align: right;
}

3. 상품 가격 제목 폰트의 font-size(크기), text-align(정렬) 값을 변경해줍니다.

스타일시트 > css/gd_common.css | css/gd_common.css

.total_price_box ul li dl dt {
    display: table-cell;
    width: 90px;
    font-size: 13px;
    text-align: left;
    vertical-align: middle;
}

4. 상품 가격 금액 폰트의 font-size(크기), font-weight(굵기), text-align(정렬) 값을 변경해줍니다.

스타일시트 > css/gd_common.css | css/gd_common.css

.total_price_box ul li dl dd {
    display: table-cell;
    font-size: 15px;
    font-weight: bold;
    text-align: right;
    vertical-align: middle;
}
상품문의-리스트 변경하기

1. 상품문의 게시판 문의 상태표시 아이콘의 font-size(크기), line-height(행간), background(배경), color(색상), border-radius(둥근선), border(선) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css

.goods_board_qa_list li .item_list_summary .board_left .author_box .ico_ans1 {
    display: inline-block;
    padding: 5px 5px 3px 5px;
    font-size: 10px;
    line-height: 12px;
    background: #ffffff;
    color:var(--primary-default);
    border-radius: 15px;
    border: 1px solid #0CC472;
}

2. 문의 제목 폰트의 font-size(크기), color(색상), line-height(행간) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css

.goods_board_qa_list li .item_list_summary .board_left .title a {
    font-size: 14px;
    color: #333333;
    line-height: 22px;
    word-break: break-all;
}
상품문의-비밀번호 인증 레이어 변경하기

1. 비밀번호 인증 레이어의 height(높이), background(배경), border(선) 값을 변경해줍니다.

board > board.css | css/board/board.css

.cite_layer .wrap {
    position: relative;
    height: 190px;
    background: #ffffff;
    border: 1px solid #555555;
}

2. 비밀번호 인증 타이틀의 height(높이), background(배경), border(선) 값을 변경해줍니다.

board > board.css | css/board/board.css

.cite_layer .wrap h4 {
    height: 27px;
    padding: 13px 0 0 17px;
    background: #f4f4f4;
    color: #222222;
}

3. 비밀번호 인증 레이어 확인 버튼의 color(색상), border-radius(둥근선), background(배경) 값을 변경해줍니다.

스타일시트 > gd_button.css | css/gd_button.css

.d_pw_confirm_btn {
    display:inline-block;
    padding:5px 15px 5px 15px;
    color:#ffffff;
    border:1px solid var(--primary-default);
    border-radius:3px;
    background:var(--primary-default);;
}
상품문의-리스트 내용 변경하기(폰트/버튼)

1. 상품문의 내용 폰트의 color(색상) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css

.goods_board_view .contents_holder {
    table-layout: fixed;
    color: #777777;
    word-break: break-all;
    word-wrap: break-word;
}

2. 수정, 삭제 버튼의 color(색상), font-size(크기), border(선), background(배경), border-radius(둥근선) 값을 변경해줍니다.

스타일시트 > gd_button.css | css/gd_button.css

.d_comment_modify_btn {
    display: inline-block;
    padding: 2px 10px;
    color: #333333;
    font-size: 11px;
    border: 1px solid #c7c7c7;
    background: #ffffff;
    border-radius: 2px;
}
상세 타이틀 및 info 레이어 폰트 변경하기

1. 상품 상세 타이틀의 font-size(크기), line-height(행간), text-align(정렬) 값을 변경해줍니다.

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

.sub_top h2 {
    overflow: hidden;
    display: block;
    width: 100%;
    padding: 12px 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 15px;
    line-height: 15px;
    text-align: center;
}

2. info 레이어 영역의 font-size(크기), color(색상), line-height(행간), font-weight(굵기) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css

.goods_view .detail_tab_info .ly_info li a {
    position: relative;
    display: block;
    width: 100%;
    height: 36px;
    font-size: 13px;
    color: #222222;
    line-height: 36px;
    font-weight: bold;
}
상품 상세 탭 변경하기

1. 상품 상세페이지 탭 폰트의 color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css

.goods_view .detail_btm_tab_menu_box .detail_btm_tab_menu ul li a {
    display: inline-block;
    width: 100%;
    color: #000;
    font-size: 13px;
    line-height: 13px;
    font-weight: bold;
    text-align: center;
}

2. 게시글 등록 수량 폰트의 font-size(크기), color(색상), line-height(행간) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css

.goods_view .detail_btm_tab_menu_box .detail_btm_tab_menu ul li a span {
    display: block;
    padding: 2px 0 0 0;
    font-size: 11px;
    color: var(--primary-default);
    line-height: 11px;
}

3. 현재위치 탭표시 라인의 border-bottom(선) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css

.goods_view .detail_btm_tab_menu_box .detail_btm_tab_menu ul li.selected {
    padding: 1px 0 0 0;
    height: 49px;
    border-bottom: 2px solid #000;
}
상품 상세 버튼 변경하기

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

스타일시트 > gd_button.css | css/gd_button.css

.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;
}

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

스타일시트 > gd_button.css | css/gd_button.css

.btn_add_cart_related,
.btn_add_order_related,
.detail_order_btn {
    display: block;
    width: 100%;
    padding: 10px 0 10px 0;
    font-size: 16px;
    text-align: center;
    background: var(--primary-default);
    border: 1px solid var(--primary-default);
    color: #ffffff;
    font-weight: bold;
    box-sizing: border-box;
상품 상세 리스트 영역 변경하기

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

goods > goods.css | css/goods/goods.css

.goods_view .detail_info h3 {
    font-size: 18px;
    color: #333333;
    word-break: break-all;
}

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

goods > goods.css | css/goods/goods.css

.goods_view .detail_info .detail_info_top .price_box .price {
    font-size: 20px;
    color: #333333;
}

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

goods > goods.css | css/goods/goods.css

.goods_view .detail_info .detail_info_top .price_box del {
    color: #999999;
}

4. 상품 상세페이지 리스트 제목font-size(크기), color(색상) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css

.goods_view .detail_info .detail_sub_info dl dt {
    display: table-cell;
    width: 25%;
    font-size: 12px;
    color: #888888;
}

5. 상품 상세페이지 리스트 내용 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css

.goods_view .detail_info .detail_sub_info dl dd {
    display: table-cell;
    width: 75%;
    font-size: 12px;
    color: #333333;
}

6. 공유하기, 찜하기 버튼의 font-size(크기), text-align(정렬), background(배경), color(색상), font-weight(굵기) 값을 변경해줍니다.

goods > goods.css | css/goods/goods.css

.goods_view .share_btn_box ul li button {
    display:block;
    margin:0 auto;
    padding:16px 0;
    font-size:13px;
    text-align:center;
    background:none;
    border:none;
    color:#333333;
    font-weight:bold;
}

주문결제

장바구니 버튼 변경하기

1. 쿠폰적용 버튼의 text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.

스타일시트 > gd_button.css | css/gd_button.css

.cart_coupon_apply {
   display:inline-block;
   padding:4px 8px;
   text-align:center;
   background:#000;
   border:1px solid #000;
   color:#ffffff;
   font-weight:normal;
   box-sizing:border-box;
   border-radius:4px;
}

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

스타일시트 > gd_button.css | css/gd_button.css

.cart_option_modify {
   display:inline-block;
   padding:4px 8px;
   text-align:center;
   background:#000;
   border:1px solid #9f9f9f;
   color:#494949;
   font-weight:normal;
   box-sizing:border-box;
   border-radius:4px;
}

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

스타일시트 > gd_button.css | css/gd_button.css

.cart_select_del_btn {
    display:inline-block;
    width:100%;
    padding:10px 0 10px 0;
    text-align:center;
    background:#ffffff;
    border:1px solid #9f9f9f;
    color:#494949;
    font-weight:bold;
    box-sizing:border-box;
    font-size:14px;
}

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

스타일시트 > gd_button.css | css/gd_button.css

.cart_all_order_btn {
    display:inline-block;
    width:100%;
    padding:10px 0 10px 0;
    text-align:center;
    background:var(--primary-default);
    border:1px solid var(--primary-default);
    color:#ffffff;
    font-weight:bold;
    box-sizing:border-box;
    font-size:14px;
}
장바구니 폰트 변경하기

1. 장바구니 상품명 폰트의 font-weight(굵기), color(색상) 값을 변경해줍니다.

order > order.css | css/order/order.css

.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;
}

2. 장바구니 상품 옵션 폰트의 font-size(크기), line-height(행간), color(색상) 값을 변경해줍니다.

order > order.css | css/order/order.css

.cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody p {
    font-size: 12px;
    line-height: 16px;
    color: #9d9d9d;
}

3. 장바구니 상품 가격 폰트의 font-size(크기), color(색상), font-weight(굵기) 값을 변경해줍니다.

order > order.css | css/order/order.css

.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:#000;
    font-weight:bold;
}

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

order > order.css | css/order/order.css

.cart .my_buy dl dt {
    display: table-cell;
    width: 50%;
    font-size: 13px;
    color: #5e5e5e;
}

5. 장바구니 총 상품금액 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.

order > order.css | css/order/order.css

.cart .my_buy dl dd {
    display: table-cell;
    width: 50%;
    text-align: right;
    font-size: 15px;
    color: #5e5e5e;
}

6. 장바구니 총 합계금액 폰트의 color(색상), font-size(크기) 값을 변경해줍니다.

order > order.css | css/order/order.css

.cart .my_buy dl.total dd {
    color: #000;
    font-size: 17px;
}

🆙
📱