# Chef's Choice\_Mobile 스킨 가이드
> 공통
포인트 컬러 일괄 변경하기
\
\
1\. 컬러코드값 확인\
chefChoice 스킨에 적용되어 있는 전역변수 --primary-default 컬러코드 **#f15546** 를 확인합니다.
2. **관리자 > 디자인 메뉴 접속**
3. **스타일시트/CSS 변경** \
좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 gd\_common.css 스타일 시트를 오픈합니다.
4. ctrl+F 검색 후 수정하기\
스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 **#f15546**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.
5. 나머지 포인트 컬러도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.
1. 기본 컬러 코드 : **#f15546**
2. 기본 마우스 오버 컬러 코드 : **#ea3f30**
3. 서브 컬러 코드 : **#fabd4c**
4. 중립 컬러 코드 : **#edebe5**, **#000**
상단 영역 변경하기
1\. 상단 영역의 **background(배경)** 값을 변경합니다.
**css/gd\_layout.css**
```css
#header_wrap header {
width: 100%;
min-width: 320px;
background: var(--neutrals-dark);
z-index: 300;
}
```
2\. 장바구니 담긴상품 수량의 배경 **background(배경)** 값을 변경합니다.
**css/gd\_layout.css**
```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: 10px;
}
```
슬라이드 메뉴 변경하기
1\. 상단배너 로그인, 회원가입의 **font-size(크기), color(색상)** 값을 변경합니다.
**css/gd\_layout.css**
```css
.nav_banner .nav_login ul li a {
display: inline-block;
font-size: 15px;
color: #222222;
}
```
2\. 아이콘 메뉴 영역 메뉴명의 **font-size(크기), color(색상)** 값을 변경합니다.
**css/gd\_layout.css**
```css
.nav_link ul li a {
display: block;
padding: 36px 0 0 0;
font-size: 13px;
color: #888;
}
```
3\. 탭버튼 활성화 시 **background(배경), color(색상), font-weight(굵기)** 값을 변경합니다.
**css/gd\_layout.css**
```css
.nav_tabmenu_box .nav_tabmenu li.on span {
background: var(--neutrals-dark);
color: #fff;
font-weight: var(--font-bold);
}
```
4\. 탭버튼 비활성화 시 **background(배경), color(색상)** 값을 변경합니다.
**css/gd\_layout.css**
```css
.nav_tabmenu_box .nav_tabmenu li span {
display: block;
padding: 10px 0 10px 0;
background: #e8e8e8;
color: #acacac;
}
```
\
5\. 메뉴 텍스트 스타일 **font-size(크기), color(색상),** **font-weight(굵기)**값을 변경합니다.
**css/proc/proc.css**
```css
.category_side > li a {
position: relative;
display: block;
padding: 12px 0 12px 0;
font-size: 16px;
color: var(--neutrals-dark);
}
```
```css
.category_side > li > a {
font-weight: var(--font-bold);
}
```
6\. 메뉴 선택 시 **color(색상), border-top(선)** 값을 변경합니다.
**css/proc/proc.css**
```css
.category_side > li > a.on {
color: var(--primary-default);
}
```
```css
.category_side > li ul {
display: none;
border-top: 1px solid var(--primary-default);
}
```
하단 영역 변경하기
1\. 하단 메뉴버튼의 **font-size(크기), color(색상), text-align(정렬), letter-spacing(자간)** 값을 변경합니다.
**css/gd\_layout.css**
```css
#footer footer .ft_info2_box .ft_menu li a {
display: block;
font-size: var(--font-size);
color: #fff;
text-align: left;
font-weight: var(--font-bold);
}
```
2\. 하단 정보 부분의 **text-align(정렬), font-size(크기), color(색상)** 값을 변경합니다.
**css/gd\_layout.css**
```css
#footer footer .ft_info2_box .ft_address {
padding: 0px;
text-align: left;
font-size: var(--font-size);
color: #fff;
word-break: keep-all;
}
```
4\. 하단 카피라이터 영역의 **color(색상), font-size(크기), text-align(정렬)** 값을 변경합니다.
**css/gd\_layout.css**
```css
#footer footer .ft_copy {
padding: 24px 0 28px 0;
color: #fff;
font-size: 11px;
text-align: left;
font-style: normal;
}
```
5. 고객센터, PC화면 버튼의 **background(배경), color(색상), font-size(크기)** 값을 변경합니다.
**css/gd\_layout.css**
```css
#footer footer .ft_button_box ul li a {
display: block;
padding: 10px 0;
background: #484848;
color: #fff;
font-size: 13px;
border-radius: 100px;
}
```
6. cs center 영역, bank info 영역의 제목 **font-size(크기), font-weight(굵기), border-bottom(선)** 값을 변경합니다.
**css/gd\_layout.css**
```css
#footer .main_info_box .main_info dl dt {
font-size: 13px;
margin: 0 5px;
font-weight: var(--font-bold);
border-bottom: 1px solid #fff;
}
```
7. cs center 영역 고객센터 번호 **font-size(크기), color(색상)** 값을 변경합니다.
**css/gd\_layout.css**
```css
#footer .main_info dl dd p.phone a {
font-size: 22px;
color: var(--secondary-default);
}
```
> 메인
메인 상품 진열 타이틀/버튼 영역 변경하기(폰트/컬러)
1\. 타이틀의 **font-size(크기), color(색상), font-weight(굵기**) 값을 변경합니다.
**css/proc/proc.css**
```css
._goods_display_main h3 {
position: relative;
display: block;
padding: 40px 0px 0px 16px;
font-size: 24px;
color: var(--neutrals-dark);
text-align: left;
font-weight: 800;
font-family: 'Montserrat';
}
```
2\. 상단 더보기 버튼의 **font-size(크기), color(색상), font-weight(굵기)** 값을 변경합니다.
**css/gd\_button.css**
```css
.main_more_btn2 {
display: inline-block;
font-size: var(--font-size);
font-weight: 600;
color: var(--neutrals-dark);
box-sizing: border-box;
}
```
3\. 하단 더보기 버튼의 **font-size(크기), color(색상), background(배경), text-align(정렬)** 값을 변경합니다.
**css/gd\_button.css**
```css
.main_more_btn {
display: block;
width: 100%;
padding: 12px 8px;
margin: 0 auto;
text-align: center;
background: var(--neutrals-dark);
font-size: 14px;
color: #fff;
box-sizing: border-box;
}
```
상품 리스트 변경하기
1\. 상품리스트 이미지의 **border(라인)** 값을 변경합니다.
**css/goods/list\_01.css**
```css
.goods_prd_item2 .goods_prd_img .img_box .img img {
width:100%;
border:1px solid #e5e5e5;
box-sizing:border-box;
}
```
2\. 상품리스트 상품명 폰트의 **color(색상), font-size(크기)** 값을 변경합니다.
**css/goods/goods.css**
```css
.prd_name {
color: var(--neutrals-dark);
font-weight: var(--font-medium);
line-height: 20px;
font-size: 16px;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
```
3\. 상품리스트 가격 폰트의 **font-size(크기)** 값을 변경합니다.
**css/goods/goods.css**
```css
.fixed_price,
.origin-price,
.price,
.dc_price {
font-size: 14px;
}
```
> 상품상세
info 레이어 폰트 변경하기
* info 레이어 영역의 **font-size(크기), color(색상), line-height(행간), font-weight(굵기)** 값을 변경합니다.
**css/goods/goods.css**
```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: var(--font-bold);
}
```
상품 상세 리스트 영역 변경하기
1\. 상품명 폰트의 **font-size(크기), color(색상)** 값을 변경합니다.
**css/goods/goods.css**
```css
.goods_view .detail_info h3 {
font-size: 18px;
color: #333333;
word-break: break-all;
}
```
2\. 상품 가격 폰트의 **font-size(크기), color(색상)** 값을 변경합니다.
**css/goods/goods.css**
```css
.goods_view .detail_info .detail_info_top .price_box .price {
font-size: 20px;
color: #333333;
}
```
3\. 상품 정가(취소선) 폰트의 **color(색상)** 값을 변경합니다.
**css/goods/goods.css**
```css
.goods_view .detail_info .detail_info_top .price_box del {
color: #999999;
}
```
4\. 상품 상세 정보 제목의 **font-size(크기), color(색상)** 값을 변경합니다.
**css/goods/goods.css**
```css
.goods_view .detail_info .detail_sub_info dl dt {
display: table-cell;
width: 25%;
font-size: var(--font-size);
color: #888888;
}
```
5\. 상품 상세 정보 내용의 **font-size(크기), color(색상)** 값을 변경합니다.
**css/goods/goods.css**
```css
.goods_view .detail_info .detail_sub_info dl dd {
display: table-cell;
width: 75%;
font-size: var(--font-size);
color: #333333;
}
```
6\. 공유하기, 찜하기 버튼의 **font-size(크기), text-align(정렬), color(색상), font-weight(굵기)** 값을 변경합니다.
**css/goods/goods.css**
```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: var(--font-bold);
}
```
상품 상세 버튼 변경하기
1\. 장바구니 버튼의 **font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다.
**css/gd\_button.css**
```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: var(--font-bold);
box-sizing: border-box;
}
```
2\. 바로구매 버튼의 **font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다.
**css/gd\_button.css**
```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: var(--font-bold);
box-sizing: border-box;
}
```
상품 옵션 레이어-셀렉트박스 변경하기
1\. 옵션 레이어의 기본 옵션 폰트의 **font-size(크기), color(색상), text-align(정렬), background(배경)** 값을 변경합니다.
**css/gd\_common.css**
```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(선)** 값을 변경합니다.
**css/gd\_common.css**
```css
.layer_option .ly_buy_info .ly_opt .bn_opt.selected {
border: 1px solid #999;
}
```
3\. 옵션 레이어 옵션 폰트의 **border-bottom(선), font-weight(굵기), font-size(크기), color(색상)** 값을 변경합니다.
**css/gd\_common.css**
```css
.layer_option .ly_buy_info .ly_opt li .optbx .optlst li {
position: relative;
min-height: 42px;
border-bottom: 1px solid #c7c7c7;
font-weight: var(--font-bold);
font-size: 13px;
color: #555;
line-height: 1.5;
vertical-align: middle;
padding: 10px;
}
```
상품 옵션 레이어-항목 변경하기(폰트/버튼)
1\. 옵션 레이어 쿠폰적용 버튼의 **background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경합니다.
**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 var(--neutrals-dark);
}
2\. 선택한 상품(옵션) 가격 금액 폰트의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경합니다.
**css/gd\_common.css**
```css
.view_order_goods dl dd .price_info .right .price {
padding: 5px 0 0 0;
font-size: 15px;
font-weight: var(--font-bold);
text-align: right;
}
```
3\. 상품 가격 제목 폰트의 **font-size(크기), text-align(정렬)** 값을 변경합니다.
**css/gd\_common.css**
```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
.total_price_box ul li dl dd {
display: table-cell;
font-size: 15px;
font-weight: var(--font-bold);
text-align: right;
vertical-align: middle;
}
```
상품 상세 탭 변경하기
1\. 상품 상세페이지 탭 폰트의 **color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬)** 값을 변경합니다.
**css/goods/goods.css**
```css
.goods_view .detail_btm_tab_menu_box .detail_btm_tab_menu ul li a {
display: inline-block;
width: 100%;
color: var(--neutrals-dark);
font-size: 13px;
line-height: 13px;
font-weight: var(--font-bold);
text-align: center;
}
```
2\. 상품후기, 상품문의 개수 폰트의 **font-size(크기), color(색상), line-height(행간)** 값을 변경합니다.
**css/goods/goods.css**
```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(선)** 값을 변경합니다.
**css/goods/goods.css**
```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 var(--neutrals-dark);
}
```
상품후기 변경하기
1\. 상품후기 작성자 및 작성일의 **font-size(크기), color(색)**을 변경합니다.
**css/goods/goods.css**
```css
.goods_board_review_list li .item_list_summary .board_left .author_box {
font-size: var(--font-size);
color: #a9a9a9;
}
```
2\. 작성한 상품후기 제목의 **font-size(크기), color(색상)** 값을 변경합니다.
**css/goods/goods.css**
```css
.goods_board_review_list li .item_list_summary .board_left .title a {
font-size: 14px;
color: #333333;
line-height: 22px;
word-break: break-all;
}
```
3\. 작성한 상품후기 내용의 **color(색상)** 값을 변경합니다.
**css/goods/goods.css**
```css
.goods_board_view .contents_holder {
table-layout: fixed;
color: #777777;
word-break: break-all;
word-wrap: break-word;
}
```
4\. 후기작성 버튼의 **text-align(정렬), color(색상), font-size(크기), font-weight(굵기), background(배경), border(선)** 값을 변경합니다.
**css/gd\_button.css**
```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: var(--font-bold);
background: #ffffff;
border: 1px solid var(--primary-default);
box-sizing: border-box;
}
```
5\. 상품후기 더보기 버튼의 **text-align(정렬), color(색상), font-size(크기), background(배경)** 값을 변경합니다.
**css/gd\_button.css**
```css
.detail_write_more_btn {
display: inline-block;
width: 25px;
height: 25px;
text-align: center;
font-size: 0;
border: none;
background: url('../img/icon/icon_detail_board_arrow.png') no-repeat center;
background-size: 14px 8px;
}
```
상품문의-리스트 변경하기
1\. 상품문의 게시판 문의 상태표시 아이콘의 **font-size(크기), line-height(행간), background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경합니다.
**css/goods/goods.css**
```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 var(--primary-default);
}
```
2\. 문의 제목 폰트의 **font-size(크기), color(색상), line-height(행간)** 값을 변경합니다.
**css/goods/goods.css**
```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\. 상품문의 내용 폰트의 **color(색상)** 값을 변경합니다.
**css/goods/goods.css**
```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(둥근선)** 값을 변경합니다.
**css/gd\_button.css**
```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;
}
```
```css
.d_comment_del_btn {
display: inline-block;
padding: 2px 10px;
color: #333333;
font-size: 11px;
border: 1px solid #c7c7c7;
background: #ffffff;
border-radius: 2px;
}
```
상품문의-비밀번호 인증 레이어 변경하기
1\. 비밀번호 인증 레이어의 **height(높이), background(배경), border(선)** 값을 변경합니다.
**css/board/board.css**
```css
.cite_layer .wrap {
position: relative;
height: 190px;
background: #ffffff;
border: 1px solid #555555;
}
```
\
2\. 비밀번호 인증 타이틀의 **height(높이), background(배경), border(선)** 값을 변경합니다.
**css/board/board.css**
```css
.cite_layer .wrap h4 {
height: 42px;
padding: 13px 0 0 17px;
background: #f4f4f4;
color: #222222;
}
```
3\. 비밀번호 인증 레이어 확인 버튼의 **color(색상), border-radius(둥근선), background(배경)** 값을 변경합니다.
**css/gd\_button.css**
```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\. 쿠폰적용 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경합니다.
**css/gd\_button.css**
```css
.cart_coupon_apply {
display: inline-block;
padding: 4px 8px;
text-align: center;
background: var(--neutrals-dark);
border: 1px solid var(--neutrals-dark);
color: #ffffff;
font-weight: normal;
box-sizing: border-box;
border-radius: 4px;
}
```
2\. 옵션변경 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경합니다.
**css/gd\_button.css**
```css
.cart_option_modify {
display: inline-block;
padding: 4px 8px;
text-align: center;
background: #ffffff;
border: 1px solid #9f9f9f;
color: #494949;
font-weight: normal;
box-sizing: border-box;
border-radius: 4px;
}
```
3\. 선택상품 삭제, 주문 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경합니다.
**css/gd\_button.css**
```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: var(--font-bold);
box-sizing: border-box;
font-size: 14px;
}
```
```css
.cart_select_order_btn {
display: inline-block;
width: 100%;
padding: 10px 0 10px 0;
text-align: center;
background: #ffffff;
border: 1px solid #9f9f9f;
color: #494949;
font-weight: var(--font-bold);
box-sizing: border-box;
font-size: 14px;
}
```
4\. 전체주문 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경합니다.
**css/gd\_button.css**
```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: var(--font-bold);
box-sizing: border-box;
font-size: 14px;
}
```
5. 총 합계금액의 **color(색), font-size(크기)**를 변경합니다.
**css/order/order.css**
```css
.cart .my_buy dl.total dd {
color: var(--neutrals-dark);
font-size: 17px;
}
```
주문페이지 변경하기
1\. 주문 상품명의 **font-weight(굵기), color(색상)** 값을 변경합니다. \
**css/order/order.css**
```css
.order .pay .my_goods li .info .itembody p.name {
padding: 0 0 3px 0;
font-weight: var(--font-bold);
color: #333;
}
```
2\. 주문 상품 금액의 **font-weight(굵기), color(색상)** 값을 변경합니다.
**css/order/order.css**
```css
.order .pay .my_goods li .info .itembody .prc {
font-weight: var(--font-bold);
color: var(--neutrals-dark);
}
```
3\. 배송정보 활성화된 탭의 **color(색상), font-weight(굵기)** 값을 변경합니다. \
**css/order/order.css**
```css
.order .order_box .delivery_box .tab_menu ul li.active a {
color: #fff;
font-weight: var(--font-bold);
}
```
4\. 배송정보 우편번호 버튼의 **background(배경), color(색상), border(선)** 값을 변경합니다.
**css/gd\_button.css**
```css
.zipcode_btn1 {
display: inline-block;
width: 100%;
padding: 5px 0 6px 0;
text-align: center;
background: var(--primary-default);
border: 1px solid var(--primary-default);
color: #ffffff;
font-weight: var(--font-bold);
box-sizing: border-box;
}
```
5\. 쿠폰 조회 및 적용 버튼의 **background(배경), color(색상), border(선)** 값을 변경합니다. \
**css/gd\_button.css**
```css
.coupon_search_apply_btn {
display: inline-block;
padding: 5px 10px 5px 10px;
text-align: center;
background: var(--primary-default);
border: 1px solid var(--primary-default);
color: #ffffff;
font-weight: var(--font-bold);
box-sizing: border-box;
}
```
6\. 결제하기 버튼의 **background(배경), color(색상), font-size(크기), border(선)** 값을 변경합니다.
**css/gd\_button.css**
```css
.order_payment_btn {
display: inline-block;
width: 100%;
padding: 10px 0 10px 0;
font-size: 14px;
text-align: center;
background: var(--primary-default);
border: 1px solid var(--primary-default);
color: #ffffff;
font-weight: var(--font-bold);
box-sizing: border-box;
}
```