# Roastrive\_Mobile 스킨 가이드

> 공통

<details>

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

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FZDw3Ky0CoA9tg5AEOckU%2Fimage.png?alt=media\&token=1efe7228-6616-4665-85f4-1e395ed7243a)\
\
1\.  컬러코드값 확인\
roastrive 스킨에 적용되어 있는 전역변수 --primary-default 컬러코드 **#772614** 를 확인합니다.<br>

2. **관리자 > 디자인 메뉴 접속** &#x20;
3. **스타일시트/CSS 변경** \
   좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 gd\_common.css 스타일 시트를 오픈합니다.
4. ctrl+F 검색 후 수정하기\
   스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 **#772614**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.
5. 아래는 스킨에서 자주 사용하는 값들을 변수화 하였습니다.\
   원하는 값으로 변경하면 일괄 수정되어 적용됩니다.

   ```css
   :root {
   	--primary-default: #772614;
   	--primary-hover: #450000;
   	--secondary-default: #c52323;
   	--neutrals-default:#f4f0e9;
   	--neutrals-dark: #000;
   	--font-size: 12px;
   	--font-family: 'Pretendard variable';
   	--font-regular: 400;
   	--font-medium: 500;
   	--font-bold: 700;
   }
   ```

</details>

<details>

<summary>상단 영역 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F2rFeVbCtqpH7OLSL0Pz4%2Fimage.png?alt=media\&token=388c018d-fdaa-49ca-93c5-83e70e0c2285)

1\. 상단 영역의 **background(배경)** 값을 변경합니다. \
**css/main/main.css**

```css
#header_wrap header {
	backdrop-filter: blur(30px);
	background: rgba(244, 240, 233, 0.6);
}
```

&#x20;**css/gd\_layout.css**

```css
#header_wrap header {
	width: 100%;
	min-width: 320px;
	z-index: 300;
	background: var(--neutrals-default);
}
```

2\. 장바구니 담긴상품 수량의 배경 **background(배경)** 값을 변경합니다.&#x20;

**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;
}
```

</details>

<details>

<summary>슬라이드 메뉴 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FssCo6Nbz3xOkWix3tmPf%2Fimage.png?alt=media\&token=4017dbf8-956b-41d1-a1a5-04caa14e35ae)

1\. 상단배너 로그인, 회원가입의 **font-size(크기), color(색상)** 값을 변경합니다.&#x20;

**css/gd\_layout.css**

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

2\. 아이콘 메뉴 영역 메뉴명의 **font-size(크기), color(색상)** 값을 변경합니다.&#x20;

**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(굵기)** 값을 변경합니다.&#x20;

**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(색상)** 값을 변경합니다.&#x20;

**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(굵기)**&#xAC12;을 변경합니다.&#x20;

**css/proc/proc.css**

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

```css
.category_side > li > a {
	font-weight: var(--font-bold);
}
```

6\. 메뉴 선택 시 **color(색상), border-top(선)** 값을 변경합니다.&#x20;

**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);
}
```

</details>

<details>

<summary>하단 영역 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FNauNOoLAzJOkMQzIDp2r%2Fimage.png?alt=media\&token=1de43418-d7e3-4bb2-8207-4c9bf60a3850)

1\. 하단 메뉴버튼의 **font-size(크기), text-align(정렬), font-weight(굵기)**&#xAC12;을 변경합니다.&#x20;

&#x20;**css/gd\_layout.css**

```css
#footer footer .ft_info2_box .ft_menu li a {
	display: block;
	font-size: var(--font-size);
	text-align: left;
	font-weight: var(--font-bold);
}
```

2\. 하단 회사정보 부분의 **text-align(정렬), font-size(크기)** 값을 변경합니다.&#x20;

**css/gd\_layout.css**

```css
#footer footer .ft_info2_box .ft_address {
	padding: 0px;
	text-align: left;
	font-size: var(--font-size);
	word-break: keep-all;
}
```

4\.  하단 카피라이터 영역의 **font-size(크기), text-align(정렬)** 값을 변경합니다.&#x20;

**css/gd\_layout.css**

```css
#footer footer .ft_copy {
	margin: 24px 0;
	font-size: 10px;
	line-height: 15px;
	text-align: left;
	font-style: normal;
}
```

5. 고객센터, PC화면 버튼의 **background(배경), color(색상), font-size(크기)** 값을 변경합니다.&#x20;

**css/gd\_layout.css**

```css
#footer footer .ft_button_box ul li a {
	display: block;
	padding: 12px 0;
	background: #484848;
	color: #fff;
	font-size: 13px;
}
```

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 var(--neutrals-dark);
	padding-bottom: 5px;
}
```

7. cs center 영역 고객센터 번호 **font-size(크기), color(색상)** 값을 변경합니다.

**css/gd\_layout.css**

```css
#footer .main_info dl dd p.phone a {
	font-size: 14px;
	font-weight: var(--font-bold);
}
```

</details>

> 메인

<details>

<summary>메인 상품 진열 타이틀/버튼 영역 변경하기(폰트/컬러)</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FkEq5tzwEpVygyBiAfq0k%2Fimage.png?alt=media\&token=336f98e7-e633-4c93-9e6a-7d816bea0d56)

1\. 타이틀의 **font-size(크기), color(색상), font-weight(굵기**) 값을 변경합니다.&#x20;

**css/proc/proc.css**

```css
._goods_display_main h3 {
	position: relative;
	display: block;
	margin-top: 40px;
	margin-left: 16px;
	font-size: 24px;
	color: #181818;
	text-align: left;
	font-weight: var(--font-regular);
}
```

2\. 상단 더보기 버튼의 **font-size(크기), color(색상), font-weight(굵기)** 값을 변경합니다.&#x20;

**css/gd\_button.css**

```css
.main_more_btn2 {
	display: block;
	width: 70px;
	padding: 2px 8px;
	text-align: center;
	font-size: 14px;
	font-weight: 600; /* border: 1px solid #9f9f9f; */
	color: var(--primary-default);
	box-sizing: border-box;
}
```

&#x20;3\. 하단 더보기 버튼의 **font-size(크기), color(색상), background(배경), text-align(정렬)** 값을 변경합니다.&#x20;

**css/gd\_button.css**

```css
.main_more_btn {
	display: block;
	width: calc(100%);
	padding: 12px 8px;
	margin: 0 auto;
	text-align: center;
	background: #000;
	font-size: 14px; /* border: 1px solid #9f9f9f; */
	color: #fff;
	box-sizing: border-box;
}
```

</details>

<details>

<summary>상품 리스트 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FBURkeSAB43F8wRuYoEc0%2Fimage.png?alt=media\&token=6f4248f9-5950-40c4-8d9d-fe107be9e8f9)

1\. 상품리스트 이미지의 **border(라인)** 값을 변경합니다.&#x20;

**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\. 상품리스트 상품명 폰트의 **font-weight(굵기), font-size(크기)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

```css
.prd_name {
	font-weight: var(--font-medium);
	line-height: 20px;
	font-size: calc(var(--font-size) + 2px);
}
```

3\. 상품리스트 가격 폰트의 **font-size(크기)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

```css
.fixed_price,
.origin-price,
.price,
.coupon_price1,
.dc_price {
	font-size: calc(var(--font-size) + 2px);
}
```

</details>

> 상품상세

<details>

<summary> info 레이어 폰트 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FCNWo5gNbOTEDoUNr50ty%2Fimage.png?alt=media\&token=5b97f15b-4757-41c0-ad5c-d137c5392348)

* info 레이어 영역의 **font-size(크기), color(색상), line-height(행간), font-weight(굵기)** 값을 변경합니다.&#x20;

**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);
}
```

</details>

<details>

<summary> 상품 상세 상단 영역 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FTLHAtOao9cbhX2djPSii%2Fimage.png?alt=media\&token=105efe78-e700-47b0-904d-39fabf87133c)

1\. 상품명 폰트의 **font-size(크기), color(색상)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

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

2\.  상품 가격 폰트의 **font-size(크기), color(색상)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

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

3\.  상품 정가(취소선) 폰트의 **color(색상)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

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

4\.  상품 상세 정보 제목의 **font-size(크기), color(색상)** 값을 변경합니다.&#x20;

**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(색상)** 값을 변경합니다.&#x20;

**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(굵기)** 값을 변경합니다.&#x20;

**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);
}
```

</details>

<details>

<summary>상품 상세 버튼 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F3PoBAwWA35vEN4hVcyXf%2Fimage.png?alt=media\&token=ccf65ff8-4de8-4cfa-a67b-7ac505dd57a9)

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

**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(굵기)** 값을 변경해줍니다.&#x20;

**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;
}
```

</details>

<details>

<summary>상품 옵션 레이어-셀렉트박스 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FreN3c6vaCt86LL4JcHBN%2Fimage.png?alt=media\&token=4c3877ca-f612-4c30-baf7-5376cb0bb82c)

1\.  옵션 레이어의 기본 옵션 폰트의 **font-size(크기), color(색상), text-align(정렬), background(배경)** 값을 변경합니다.&#x20;

**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(선)** 값을 변경합니다.&#x20;

**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(색상)** 값을 변경합니다.&#x20;

**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;
}
```

</details>

<details>

<summary> 상품 옵션 레이어-항목 변경하기(폰트/버튼)</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FJHWawOeahuQ7eKKHvvft%2Fimage.png?alt=media\&token=dcb9b2ba-3de9-400b-b860-7433d92f4779)

1\. 옵션 레이어 쿠폰적용 버튼의 **background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경합니다.&#x20;

**css/gd\_button.css**

```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(정렬)** 값을 변경합니다.&#x20;

**css/gd\_common.css**

```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(정렬)** 값을 변경합니다.&#x20;

**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(정렬)** 값을 변경합니다.&#x20;

**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;
}
```

</details>

<details>

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

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FAfBHy6Vq8Cc7UvLBCFzK%2Fimage.png?alt=media\&token=313aa7c5-702c-49e4-9b5d-a1297e9464dd)

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

**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(행간)** 값을 변경합니다.&#x20;

**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(선)** 값을 변경합니다.&#x20;

**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);
}
```

</details>

<details>

<summary>상품후기 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F1J8gK9n8dDkUs1h4lOzs%2Fimage.png?alt=media\&token=609df8f1-7ae1-4736-8bf5-c03ad1fda07e)

1\. 상품후기 작성자 및 작성일의 **font-size(크기), color(색)**&#xC744; 변경합니다.

**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(색상)** 값을 변경합니다.&#x20;

**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(색상)** 값을 변경합니다.&#x20;

**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(선)** 값을 변경합니다.&#x20;

**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(배경)** 값을 변경합니다.&#x20;

**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;
}
```

</details>

<details>

<summary>상품문의-리스트 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FSDIvRLdoDr1rfyFcn1R2%2Fimage.png?alt=media\&token=128bc945-d5cb-4524-b835-c89b483db152)

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

**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(행간)** 값을 변경합니다.&#x20;

**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;
}
```

</details>

<details>

<summary>상품문의-리스트 내용 변경하기(폰트/버튼)</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FB0lve1KLzThk8xOupoXV%2Fimage.png?alt=media\&token=134c773c-803f-4f50-82ee-397bc9875f1c)

1\. 상품문의 내용 폰트의  **color(색상)** 값을 변경합니다.&#x20;

**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(둥근선)** 값을 변경합니다.&#x20;

**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;
}
```

</details>

> #### 주문결제

<details>

<summary>장바구니 페이지 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F3wIHanzRk41HyqLQfVsE%2Fimage.png?alt=media\&token=f7a5cd84-79ec-4a10-856b-cba4a23f9368)

1\. 쿠폰적용 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경합니다.&#x20;

**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(굵기)** 값을 변경합니다.&#x20;

**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(굵기)** 값을 변경합니다.&#x20;

**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(굵기)** 값을 변경합니다.&#x20;

**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(크기)**&#xB97C; 변경합니다.

**css/order/order.css**

```css
.cart .my_buy dl.total dd {
	color: var(--neutrals-dark);
	font-size: 17px;
}
```

</details>

<details>

<summary> 주문페이지 변경하기</summary>

1\.  주문 상품명의 **font-weight(굵기), color(색상)** 값을 변경합니다. \
![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FSz7vcr3lV5zr23J1S9vt%2Fimage.png?alt=media\&token=ad401895-ae71-4daa-add4-332e12159f81)

**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(색상)** 값을 변경합니다.&#x20;

**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(굵기)** 값을 변경합니다. \
![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F4fUlCmDp5mrdZbITksAc%2Fimage.png?alt=media\&token=290bd32d-ba0e-4836-9bd3-3f7ec0242f6b)

**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(선)** 값을 변경합니다.&#x20;

**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(선)** 값을 변경합니다. \
![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F0n9kAJIJUSZS73Dd47eI%2Fimage.png?alt=media\&token=d6dbe136-3b35-4011-8ae3-1fcaae0a8b47)

**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(선)** 값을 변경합니다.&#x20;

**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;
}
```

</details>