# Storyg\_PC 스킨 가이드

> #### 공통

<details>

<summary>포인트 컬러 일괄 변경하기</summary>

1. 스토리지 스킨에 현재 적용되어 있는 포인트 컬러 코드 **#3e3d3c**를 확인하세요.

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FRo7llsdWBRP5JGiJ0hxX%2Fimage.png?alt=media\&token=d06dc0c9-ef96-4f41-8c25-b5d022fa1895)

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

3) 좌측 하단 폴더트리 내 스타일시트/CSS를 더블 클릭하여 표시된 스타일시트 파일을 엽니다.\


![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FUCUeUoqayRyDnDSPIL4P%2Fimage.png?alt=media\&token=655720df-b4f6-41c9-96bc-73782b71dbf4)



4. 아래 스타일시트 파일에서 **Ctrl + F**를 누르고 **#3e3d3c**검색하여 **원하는 포인트 컬러 코드**로 변경하세요.

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2Ft1iW3ubGri0VBPDdUGk8%2Fimage.png?alt=media\&token=9b43fc8f-b24c-4dbc-931a-e5db9f7e64ad)

5. 마우스 오버시 컬러 **#4f4e4d** 도 검색하여 **원하는 포인트 컬러 코드**로 변경하세요.

**#4f4e4d** -> <mark style="color:red;">**# 컬러 코드**</mark>

</details>

<details>

<summary>상단 메뉴 변경하기(배경/라인/컬러)</summary>

<img src="https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FeHS6JWkIygZ6dOiI09Bc%2Fimage.png?alt=media&#x26;token=24b230f5-8d16-4fef-8dfa-b697559bab52" alt="" data-size="original">

* 상단 메뉴 배경컬러 수정은 background-color 값을 변경해줍니다.

&#x20;**css > gd\_layout.css 21줄**

`21` #top.header .navi {\
`22` position:absolute;\
`23` top:0;\
`24` left:0;\
`25` width:100%;\
`26` height:32px;\
`27` border-bottom:1px solid #eaeaea;\
`28` <mark style="background-color:orange;">background-color: #f9f9f9;}</mark>

</details>

<details>

<summary>브랜드 메뉴 폰트 변경하기(컬러/사이즈/굵기)</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FqB7Tt6VtWwR31hKNIGuk%2Fimage.png?alt=media\&token=662122e6-aa64-4f59-8d88-f5983bdd5983)

* 브랜드 메뉴 폰트 수정은 color(색상), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다.

**css > gd\_layout.css&#x20;**<mark style="color:red;">**288줄**</mark>

`288` #top.header .top-service .link > li > a {\
`289` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">:#444;</mark>\
`290` <mark style="background-color:orange;">**font-size**</mark><mark style="background-color:orange;">:14px;</mark>\
`291` <mark style="background-color:orange;">**font-weight**</mark><mark style="background-color:orange;">:bold;}</mark>

</details>

<details>

<summary>전체 카테고리 변경하기(배경/폰트/컬러)</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FiZhUA31Af4nxr6gjfQSG%2Fimage.png?alt=media\&token=26e4180e-c92d-436e-9ab7-d38f1da008c3)

* 전체 카테고리 영역 수정은 background(배경), color(색상), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다.

**css > gd\_layout.css&#x20;**<mark style="color:red;">**166줄**</mark>

`166` #top.header .top-service .all-category {\
`167` **position**:relative;\
`168` **float**:left;\
`169` **width**:180px;\
`170` **height**:49px;\
`171` **margin**:0;\
`172` **padding**:0;\
`173` <mark style="background-color:orange;">**background**</mark><mark style="background-color:orange;">:#3e3d3c url('../img/header/ico-all-category.png') no-repeat 13px 18px;</mark> \
`174`} \
`175` #top.header .top-service .all-category > a {\
`176` **display:**&#x62;lock;\
`177` **height**:36px;\
`178` **padding**:13px 0 0 40px;\
`179` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">:#fff;</mark>\
`180` <mark style="background-color:orange;">**font-size**</mark><mark style="background-color:orange;">:14px;</mark>\
`181` <mark style="background-color:orange;">**font-weight**</mark><mark style="background-color:orange;">:bold;</mark>

</details>

<details>

<summary>좌측 메뉴 변경하기(배경/폰트/컬러)</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FMo3ZdfvNIykneEfn7gjE%2Fimage.png?alt=media\&token=58fb4dca-c6dc-41d7-b294-c0438a8239d4)

1. 좌측 메뉴 최상위 카테고리 텍스트/배경 컬러 수정은 color(색상), background(배경) 값을 변경해줍니다.

**css > gd\_layout.css&#x20;**<mark style="color:red;">**498줄**</mark>

`498` #side .lnb > .category.type-layer > li > a { \
`499` **display:**&#x62;lock; \
`500` **padding**:9px 10px 12px 24px; \
`501` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">: #222222;</mark> \
`502` **font-size**:13px; \
`503` **font-weight**:bold;\
`504` } \
`505` #side .lnb > .category.type-layer > li > a:hover, \
`506` #side .lnb > .category.type-layer > li > a.has-sub { \
`507` **position**:relative; \
`508` **top**:0; \
`509` **left**:0; \
`510` **z-index**:10; \
`511` **width**:144px; \
`512` **padding**:9px 10px 12px 24px; \
`513` <mark style="background-color:orange;">**background**</mark><mark style="background-color:orange;">:#f2f2f2;</mark> \
`514` **color**: #222222; \
`515` }

2. 좌측 메뉴 하위 카테고리 텍스트/배경 컬러 수정은 color(색상), background(배경) 값을 변경해줍니다.

**css > gd\_layout.css&#x20;**<mark style="color:red;">**570줄**</mark>

`570` #side .lnb > .category.type-layer > li > ul li a {\
`571` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">: #222222;</mark>\
`572` **text-indent**:6px; \
`573` }

**css > gd\_layout.css&#x20;**<mark style="color:red;">**483줄**</mark>

`483` #side .lnb > .category.type-layer ul li:hover { \
`484` <mark style="background-color:orange;">**background**</mark><mark style="background-color:orange;">: #f2f2f2;</mark> \
`485` } \
`486` #side .lnb > .category.type-layer ul li:hover > a { \
`487` <mark style="background-color:orange;">**background**</mark><mark style="background-color:orange;">: none;</mark> \
`488` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">: #fff;</mark>\
`489` }

</details>

<details>

<summary>웹폰트 적용하기</summary>

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

2) 좌측 하단 폴더트리 내 **“스타일시트/CSS”**&#xB97C; 더블 클릭하여 스타일시트 리스트 중 **gd\_reset.css**를 오픈하세요.

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FT6nI0dl9rWjsVxchMxI2%2Fimage.png?alt=media\&token=ff9002d3-5080-4db3-b8fe-bf7ba205d548)

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

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

**스타일시트 > gd\_reset.css | css/gd\_reset.css&#x20;**<mark style="color:red;">**3줄, 13줄**</mark>

`2` @charset "UTF-8"; \
`3` @import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css'); \
`4` /\*\*\
`5` \*html 리셋 css 입니다.\
`6` \*/\
`7` \*{\
`8` margin:0;\
`9` padding:0; } body {\
`10` color:#714171;\
`11` font-family: Nanum Gothic, AppleGothic,Dotum,"돋움",sans-serif;\
`12` font-size:12px;\
`13` line-height:1.4;\
`14` }

<mark style="color:red;">※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.</mark>

</details>

> #### 상품상세

<details>

<summary>카테고리 스타일 변경하기(폰트/컬러/보더)</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FriPuEZIxo6M6gGJIlzd4%2Fimage.png?alt=media\&token=bb078989-addc-4f31-8645-7a0776b1afd3)

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

&#x20;**css > gd\_contents.css&#x20;**<mark style="color:red;">**50줄**</mark>

`50` .cg-main > h3 {     \
`51` **padding**:32px 0 0;     \
`52` <mark style="background-color:orange;">**color:**</mark><mark style="background-color:orange;">#000;</mark>  \
`53` <mark style="background-color:orange;">**font-size**</mark><mark style="background-color:orange;">:18px;</mark>    \
`54` **text-align**:center; \
`55` }

2. 박스 라인의 border(선), color(색상) 값을 변경해줍니다.

**css > gd\_contents.css&#x20;**<mark style="color:red;">**56줄**</mark>

`56` .cg-main .weekly-best {\
`57` **margin**:17px 0 0;\
`58` **padding**:30px 0 0;\
`59` **borde**r:2px solid #d7d7d7; \
`60` }

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

**css > gd\_contents.css&#x20;**<mark style="color:red;">**193줄**</mark>

`193` .item-display .list ul li .price .cost strong { \
`194` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">:#333;</mark> \
`195` **font-family**:arial; \
`196` <mark style="background-color:orange;">**font-size**</mark><mark style="background-color:orange;">:16px;</mark> \
`197` }



</details>

<details>

<summary>카테고리 라인컬러 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FhNrQrj3nWboFJiyKOQRB%2Fimage.png?alt=media\&token=b642fe34-056e-4aee-a5e9-d93de93b305f)

* 카테고리 라인컬러 수정은 color(색상) 값을 변경해줍니다.

**css > gd\_contents.css&#x20;**<mark style="color:red;">**76줄**</mark>

`76` .view .goods-list .align { \
`77` **height**:28px; \
`78` **margin**:12px 0 20px; \
`79` **padding**:9px 0 10px; \
`80` **border-top**:1px solid <mark style="background-color:orange;">#717171;</mark> \
`81` **border-bottom**:1px solid <mark style="background-color:orange;">#dadada;</mark> \
`82` **clear**:both; \
`83` }

</details>

<details>

<summary>상품상세 상단 라인 컬러 변경하기(컬러/사이즈/폰트)</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FkNEQuEBTOLORRbuexrov%2Fimage.png?alt=media\&token=dae765d4-5ee3-491b-bae6-e76ef1f7ec53)

1. 상품명 아래 라인의 border(선), font-color(색상) 값을 변경합니다.

**스타일시트 > gd\_goods\_view.css | css/gd\_goods\_view.css&#x20;**<mark style="color:red;">**347줄**</mark>

`347` .goods-view .goods .info .item ul li:first-child { \
`348` **display:**&#x62;lock; \
`349` <mark style="background-color:orange;">**border-top**</mark><mark style="background-color:orange;">:1px solid #707070;</mark> \
`350` **margin-top**:5px; \
`351` }

2. 리스트항목 아래 라인의 border(선) 값을 변경합니다.

**스타일시트 > gd\_contents.css | css/gd\_contents.css&#x20;**<mark style="color:red;">**3773줄**</mark>

`3773` .order-goods { \
`3774` **background**:#f5f5f5; \
`3775` **border-top**:none; \
`3776` <mark style="background-color:orange;">**border-bottom**</mark><mark style="background-color:orange;">:2px solid #3e3d3c;</mark> \
`3777` }

</details>

<details>

<summary>상품상세 상단 버튼 스타일 변경하기(컬러/사이즈/폰트)</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FxQ2EdCHR3UHywtesNqk2%2Fimage.png?alt=media\&token=b36770ab-e6fc-4a89-bd96-aea5aa1b6c54)

1. &#x20;장바구니 버튼의 border(선), font-color(색상) 값을 변경해줍니다.

**css > gd\_common.css&#x20;**<mark style="color:red;">**927줄**</mark>

`927` .skinbtn.point1 { \
`928` <mark style="background-color:orange;">**border**</mark><mark style="background-color:orange;">:1px solid #3e3d3c;</mark> \
`929` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">:#3e3d3c;</mark> \
`930` } \
`931` .skinbtn.point1:hover { \
`932` <mark style="background-color:orange;">**border**</mark><mark style="background-color:orange;">: 1px solid #fa2828;</mark> \
`933` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">:#4f4e4d;</mark> \
`934` }

2. 장바구니 버튼의 width(가로), height(세로), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다.

&#x20;**css > gd\_contents.css&#x20;**<mark style="color:red;">**5478줄**</mark>

`5478` .skinbtn.point1.btn-add-cart, \
`5479` .skinbtn.point1.btn-add-wish { \
`5480` <mark style="background-color:orange;">**width**</mark><mark style="background-color:orange;">:152px;</mark> \
`5481` <mark style="background-color:orange;">**height**</mark><mark style="background-color:orange;">:61px;</mark> \
`5482` **line**-**height**:59px; \
`5483` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**size**</mark><mark style="background-color:orange;">:16px;</mark> \
`5484` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**weight**</mark><mark style="background-color:orange;">:bold;</mark> \
`5485` }

3. 바로 구매 버튼의 color(색상), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다.

**css > gd\_common.css&#x20;**<mark style="color:red;">**938줄**</mark>

`938` .skinbtn.point2 { \
`939` **background**:#3e3d3c; \
`940` **border**: 1px solid #3e3d3c; \
`941` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">:#fff;</mark> \
`942` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**weight**</mark><mark style="background-color:orange;">:bold;</mark> \
`943` }\
`944` .skinbtn.point2:hover { \
`945` **background**:#4f4e4d; \
`946` **order**:1px solid #4f4e4d; \
`947` }

4. 바로 구매 버튼의 width(가로), height(높이), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다.

**css > gd\_contents.css&#x20;**<mark style="color:red;">**5486줄**</mark>

`5486` .skinbtn.point2.btn-add-order {\
`5487` <mark style="background-color:orange;">**width**</mark><mark style="background-color:orange;">:242px;</mark> \
`5488` <mark style="background-color:orange;">**height**</mark><mark style="background-color:orange;">:61px;</mark> \
`5489` **line**-**height**:59px; \
`5490` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**size**</mark><mark style="background-color:orange;">: 20px;</mark> \
`5491` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**weight**</mark><mark style="background-color:orange;">:bold;</mark> \
`5492` }







</details>

<details>

<summary>상품상세 탭스타일 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FSd4VtpSLzwFaRGzFa0ar%2Fimage.png?alt=media\&token=ab5ed01c-74db-47c4-86cd-4a6e2d10550c)

1. 선택된 탭의 border(선), color(색상) 값을 변경합니다.

**css > gd\_goods\_view.css&#x20;**<mark style="color:red;">**708줄**</mark>

`708` .multiple-topics .tab a.on { \
`709` **position**: relative; \
`710` <mark style="background-color:orange;">**border**</mark><mark style="background-color:orange;">: 1px solid #707070;</mark> \
`711` **border**-**bottom**: 1px solid #fff; \
`712` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">: #111;</mark> \
`713` **font**-**weight**: bold; \
`714` }



2. 비활성화 탭의 border(선), color(색상), font-size(사이즈) 값을 변경합니다.

**css > gd\_goods\_view.css&#x20;**<mark style="color:red;">**688줄**</mark>

`688` .multiple-topics .tab a { \
`689` **float**: left; \
`690` **width**: 20%; \
`691` **height**: 54px; \
`692` **padding**: 16px 0 0; \
`693` **margin**: 0 0 0 -1px; \
`694` <mark style="background-color:orange;">**border**</mark><mark style="background-color:orange;">: 1px solid #dfdfdf;</mark> \
`695` **border**-**bottom**: 1px solid #707070; \
`696` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">: #787878;</mark> \
`697` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**size**</mark><mark style="background-color:orange;">: 13px;</mark> \
`698` **text**-**align**: center; \
`699` -webkit-box-sizing: border-box; \
`700` -moz-box-sizing: border-box; \
`701` **box**-**sizing**: border-box; \
`702` }



3. 수량 표시의 font-color(색상) 값을 변경합니다.

**스타일시트 > gd\_goods\_view.css | css/gd\_goods\_view.css&#x20;**<mark style="color:red;">**716줄**</mark>

`716` .multiple-topics .tab a strong { \
`717` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">: #3e3d3c;</mark> \
`718` }

</details>

<details>

<summary>상품상세 리스트 항목 폰트 변경하기(컬러/사이즈/굵기)</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FIVbDgKShaMymeydbF2HN%2Fimage.png?alt=media\&token=0b805304-692e-45dd-98a0-0923da3c4049)

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

**css > gd\_goods\_view.css&#x20;**<mark style="color:red;">**304줄**</mark>

`304` .goods-view .goods .info .top .tit h2 { \
`305` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">: #111;</mark> \
`306` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**size**</mark><mark style="background-color:orange;">: 22px;</mark> \
`307` }

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

**css > gd\_goods\_view.css&#x20;**<mark style="color:red;">**420줄**</mark>

`420` .goods-view .goods .info .item ul li.price > div strong { \
`421` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">: #3e3d3c;</mark> \
`422` **font**-**family**: arial; \
`423` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**size**</mark><mark style="background-color:orange;">: 20px;</mark> \
`424` }

</details>

> #### 주문결제

<details>

<summary>장바구니 폰트/버튼 변경하기(컬러/사이즈/굵기)</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FytQcU3gclqP2lF0slz6w%2Fimage.png?alt=media\&token=b4c7efff-eed3-4b37-b1dd-d21429a27c93)

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

**css > gd\_contents.css&#x20;**<mark style="color:red;">**1319줄**</mark>

`1319` .order-page .price-box > div p .total { \
`1320` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">:#fa2828;</mark> \
`1321` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**size:**</mark> <mark style="background-color:orange;"></mark><mark style="background-color:orange;">20px;</mark> \
`1322` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**weight**</mark><mark style="background-color:orange;">:bold;</mark> \
`1323` }



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

**css > gd\_common.css&#x20;**<mark style="color:red;">**927줄**</mark>

`927` .skinbtn.point1 { \
`928` <mark style="background-color:orange;">**border**</mark><mark style="background-color:orange;">: 1px solid #fa2828;</mark> \
`929` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">:#fa2828;</mark> \
`930` } \
`931` .skinbtn.point1:hover { \
`932` <mark style="background-color:orange;">**border**</mark><mark style="background-color:orange;">: 1px solid #fa2828;</mark> \
`933` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">:#fa2828;</mark> \
`934` } \
`935` .skinbtn.point1.cart-orderselect { \
`936` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**size**</mark><mark style="background-color:orange;">:14px;</mark> \
`937` }

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

**css > gd\_common.css&#x20;**<mark style="color:red;">**938줄**</mark>

`938` .skinbtn.point2 { \
`939` <mark style="background-color:orange;">**background**</mark><mark style="background-color:orange;">:#fa2828;</mark> \
`940` <mark style="background-color:orange;">**border**</mark><mark style="background-color:orange;">: 1px solid #fa2828;</mark> \
`941` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">:#fff; font-weight:bold;</mark> \
`942` } \
`943` .skinbtn.point2:hover { \
`944` <mark style="background-color:orange;">**background**</mark><mark style="background-color:orange;">:#fa2828;</mark> \
`945` <mark style="background-color:orange;">**border**</mark><mark style="background-color:orange;">:1px solid #fa2828;</mark> \
`946` } \
`947` .skinbtn.point2.cart-orderall { \
`948` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**size**</mark><mark style="background-color:orange;">:14px;</mark> \
`949` }

</details>

<details>

<summary>결제정보 폰트 변경하기(컬러)</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FkByEdSY1o4Vsi4OGCKJ9%2Fimage.png?alt=media\&token=b84f49e4-489b-4d7b-8d14-9b59e8ab688a)

최종 결제금액의 color(색상) 값을 변경해줍니다.

**css > gd\_contents.css&#x20;**<mark style="color:red;">**2141줄**</mark>

`2141` .table1 > table > tbody > tr >td {\
`2142` **border**-**bottom**: 1px solid #dbdbdb; \
`2143` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">: #fa2828;</mark> \
`2144` }

</details>

<details>

<summary>결제금액 스타일 변경하기(컬러/사이즈/굵기)</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FZhZPQFcCYkP4GPE1mwDT%2Fimage.png?alt=media\&token=1c491cf1-962c-4a5c-aa37-53fe5cd0acb8)

1. 원하는 배경색상의 background(배경) 컬러 값으로 변경해줍니다.

**css > gd\_contents.css&#x20;**<mark style="color:red;">**1546줄**</mark>

`1546` .order-page .how-to-pay .method .receipt .selection { \
`1547` **padding**:15px 0; \
`1548` <mark style="background-color:orange;">**background**</mark><mark style="background-color:orange;">: #fa2828;</mark> \
`1549` }

2. 최종 결제금액의 font-size(사이즈) 값을 변경하고 color(색상) 값을 추가해줍니다.

**css > gd\_contents.css&#x20;**<mark style="color:red;">**1599줄**</mark>

`1599` .order-page .how-to-pay .buy .final-settlement span strong { \
`1600` **position**:relative; \
`1601` **top**:5px; \
`1602` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**size**</mark><mark style="background-color:orange;">: 30px;</mark> \
`1603` <mark style="background-color:orange;">**color**</mark> <mark style="background-color:orange;"></mark><mark style="background-color:orange;">: #fa2828;</mark> \
`1604` }

3. 박스라인의 border(선) 컬러 값을 변경해줍니다.

**css > gd\_contents.css&#x20;**<mark style="color:red;">**1584줄**</mark>

`1584` .order-page .how-to-pay .buy .final-settlement { \
`1585` **padding**:13px 46px 20px 0; \
`1586` <mark style="background-color:orange;">**border**</mark><mark style="background-color:orange;">:2px solid #d6d6d6;</mark> \
`1587` **text**-**align**:right; \
`1588` }

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

**css > gd\_common.css&#x20;**<mark style="color:red;">**938줄**</mark>

`938` .skinbtn.point2 { \
`939` **background**:#3e3d3c; \
`940` **border**: 1px solid #3e3d3c; \
`941` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">:#fff;</mark> \
`942` **font**-**weight**:bold; \
`943` }

\


</details>
