# Case\_PC 스킨 가이드

> 공통

<details>

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

1. Case 스킨에 적용되어 있는 기본 컬러 코드 **#0CC472 입니다**
2. **관리자 > 디자인 메뉴 접속** &#x20;
3. **스타일시트/CSS 변경** \
   \- 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\
   \- common.css를 더블 클릭 하여 common/common.css 파일을 엽니다.\
   ![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FHrbzb7TPSVj4LcH5Nk7t%2Fimage.png?alt=media\&token=7926151d-adfa-417d-bd37-da4ae7b2b24b)<br>
4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경합니다.

```
:root {
	--primary-default: #0057FF; /* 포인트 컬러 */
	--primary-hover: #00308D; /* 포인트 컬러 hover */
	--secondary-default: #EF78FF; /* 서브 컬러 */
	--neutrals-gray: #D4D4D4;
	--neutrals-gray-bright: #F5F5F5;
	--neutrals-dark: #000;
	--font-size: 14px; /* 기본 폰트 사이즈 */
	--font-family: 'Pretendard variable'; /* 기본 픈트 명 */
	--font-family-oswald: 'Oswald';
	--font-regular: 400;
	--font-medium: 500;
	--font-bold: 700;
	--min-width: 1450px; /* 최소 너비 */
	--max-width: 1200px; /* 최대 너비 */
}
```

5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다.

</details>

<details>

<summary><strong>메뉴 변경하기</strong><br></summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FXkY1LGFDBaHJF85iN3ep%2Fimage.png?alt=media\&token=29c0e10a-855c-4463-abfc-10ee87c74f1a)

1. 상단 메뉴의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다.&#x20;

**css > layout/layout.css**

```css
.gnb .depth0 > li > a {
	display: inline-block;
	padding: 0 20px; /* 좌우 여백 수정 */
	font-size: calc(var(--font-size) + 2px); /*폰트 사이즈 변경*/
	font-weight: var(--font-medium);
	text-align: center;
	line-height: 49px;
	color: #000; /* 폰트 색 변경 */
}
```

2. 서브 메뉴 color(색상), border-radius(보더 라운드), font-size(폰트 크기)를 변경할 수 있습니다

```css
.depth1 a {
	position: relative;
	font-size: calc(var(--font-size) + 2px); /* 폰트 크기 변경 */
	font-weight: var(--font-medium);
	color: var(--neutrals-dark); /* 컬러 */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	height: 39px;
	border-radius: 10px; /* 보더 라운드 */
	padding-inline: 10px;
}

.depth1 li:hover > a {
	background-color: var(--neutrals-gray-bright); /* hover 배경색 변경 */
	height: 39px;
	width: 100%;
	border-radius: 10px;
	padding-inline: 10px;
}
```

3. 장바구니 담긴상품 수량 폰트의 color(색상) 값을 변경할 수 있습니다. \
   (현재는 기본 포인트 컬러 전역변수로 지정되어 있습니다.)\
   css > layout/layout.css

```css
.top_member_box > li strong { 
    display: inline-flex;
    padding: 4px 6px;
    font-weight: var(--font-bold);
    font-size: calc(var(--font-size) - 4px); /* 폰트 사이즈 변경 */
    align-items: center;
    background-color: var(--primary-default); /* 배경색 변경 */
    color: #fff; /* 폰트 색 변경 */
    vertical-align: top;
    border-radius: 50%;
    transform: translate(5px, -2px);
}
```

</details>

<details>

<summary><strong>검색창 폰트 변경하기</strong></summary>

1. 검색창 인풋박스 입력 폰트의 font-size(크기), color(폰트 색) 값을 추가해 변경할 수 있습니다.

**css/layout/layout.css**

```css
.top_search input {
	flex: 1;
	border: none 0;
	vertical-align: top;
	/* 
	  color: #333;
	  font-size: 14px;
 	*/
}
```

2\. 최근검색어 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. \
**css/layout/layout.css**

```css
.recent_box dt {
    font-size: 13px; /* 폰트 사이즈 변경 */
    margin-bottom: 10px;
    font-weight: bold;
}
```

3\. 추천상품 폰트의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다.&#x20;

**css/layout/layout.css**

```css
.recom_box dt {
    width: 100%;
    font-size: 13px; /* 폰트 사이즈 변경 */
    font-weight: var(--font-bold);
    line-height: 19px;
    text-align: center;
    margin-bottom: 10px;
}
```

</details>

<details>

<summary><strong>푸터 변경하기 (폰트/컬러)</strong></summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FwikcYHR44bAaZRezvY34%2Fimage.png?alt=media\&token=26df5188-6c26-4eb6-83d3-a85c3ea804a2)

1\. 푸터 메뉴 폰트의 **color(색상)** 값을 변경할 수 있습니다.&#x20;

**css/layout/layout.css**

```css
.footer__cs-agree a {
	display: block;
	padding-inline: 6px;
	color: inherit; /* color 변경 */
	font-weight: inherit;
}
```

2\. 푸터 정보영역 폰트의 color(색상), background-color(푸터 배경색) 값을 변경할 수 있습니다.

**css/layout/layout.css**

```css
.footer {
	border-top: 1px solid #ebebeb;
	background-color: #fafafa; /* 배경색 변경 */
	color: #888; /* color 변경 */
}
```

</details>

<details>

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

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

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

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FqGxmz8UTMBEgW9fZpt8B%2Fimage.png?alt=media\&token=7911faae-7f22-4aa7-a976-2cca6edbf3a3)

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

**css/reset.css**

```css
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
/* 5번째줄에 추가 */
```

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

**css/common/common.css**

```css
.:root {
    ...
    --font-family: 'Pretendard variable';
    ...
}

```

5. common.css --font-family에서 변경된 폰트는 reset.css 에서 하위 코드에 적용 됩니다.

**css/reset.css**

```
.godo * {
	font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont,
		system-ui, Roboto, sans-serif;
}

...

body,
th,
td,
input,
select,
textarea,
button {
	font-size: var(--font-size);
	line-height: 1.5;
	font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont,
		system-ui, Roboto, Dotum, '돋움', sans-serif;
	color: #333;
}
```

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

</details>

> 메인

<details>

<summary><strong>최근 본 상품 변경하기</strong></summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FO6FYFTdyqBgyF0ghLJvt%2Fimage.png?alt=media\&token=4aeed332-fc42-40e0-85d5-e9fa1bdb7370)

1\. 최근 본 상품 영역의 **background(배경)** 값을 변경할 수 있습니다.&#x20;

**css/layout/layout.css**

```css
.scroll_right_cont {
	width: 88px;
	text-align: start;
	border-radius: 10px;
	padding: 13px 14px 16px;
	background: var(--secondary-default); /* 배경색 변경 */
	color: #fff;
}
```

2\. 타이틀 폰트의 **color(색상), text-align(정렬)** 값을 변경할 수 있습니다.&#x20;

**css/layout/layout.css**

```css
.scroll_right_cont h4 {
	padding: 0;
	color: inherit;
	font-size: calc(var(--font-size) + 6px);
	font-weight: var(--font-medium);
	line-height: 23px;
	letter-spacing: -0.2px;
	font-family: var(--font-family-oswald);
}
```

3\. 상품 가격 폰트의 color(색상) 값을 변경할 수 있습니다.&#x20;

**css/layout/layout.css**

```css
.scroll_right_cont .src_box strong {
    display: block;
    color: #0CC472;
}
```

5\. 페이징 폰트의**color(색상)** 값을 변경할 수 있습니다.&#x20;

**css/layout/layout.css**

```css
.scroll_right_cont .scr_paging strong {
    padding: 0 2px 0 2px;
    color: #0CC472;
}
```

</details>

<details>

<summary><strong>진열타입 타이틀 변경하기(폰트/컬러)</strong></summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FZwjhqPfJfA7EhS9iSddz%2Fimage.png?alt=media\&token=7feaf75c-1ff9-4359-8ef7-4b4c465e815a)

1\. 타이틀 폰트의**font-size(크기)** 값을 변경할 수 있습니다.&#x20;

**css/goods/list.css**

```css
.goods_list_tit h3 {
    font-size:60px;
    font-weight: 400;
}
```

2\. 타이틀 영역 하단의 **border-bottom(선)** 값을 변경할 수 있습니다.&#x20;

**css/goods/list.css**

```css
.goods_list_tit {
    padding:100px 0 10px 0;
    /* border-bottom:1px solid #ececec;*/ 
    line-height:1;
    position:relative;
}
```

3\. 더보기 버튼의 **font-size(크기), font-weight(굵기), border(선)** 값을 변경할 수 있습니다.&#x20;

**css/goods/list.css**

```css
.btn_goods_more .btn_goods_view_more {
    padding:2px 5px 3px 5px;
    font-size:14px;
    font-weight:400;
    border:0px solid #dbdbdb;
}
```

</details>

<details>

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

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2Fv3aooHkyGjtKHYPE5n44%2Fimage.png?alt=media\&token=c9d75322-3f2d-4a36-a780-e4131647487d)

1\. 상품명 **color(색상)** 값을 변경할 수 있습니다. \
(한줄 말줄임이 처리가 되어 있습니다.)

**css/goods/list.css**

```css
.item_tit_box .item_name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    padding: 0;
    font-size: 16px;
    text-overflow: ellipsis;
    font-weight: normal;
    overflow: hidden;
    line-height: 22px;
    color: var(--primary-default); /* color 추가 */
}
```

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

**css/goods/list.css**

```css
.item_money_box .item_price {
    /*display:block;*/
    padding:0px;
    font-size:16px;
    color:#000000;
    font-weight:bold;
}
```

</details>

> 상품상세

<details>

<summary><strong>상품 상세 상단 변경하기(폰트)</strong></summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2Fv2LTvEVQlc4hNp7Oz7sg%2Fimage.png?alt=media\&token=e88ac877-5f4b-4979-877e-29065a52b622)

1\.  상품명 폰트의 **font-size(크기)** 값을 변경할 수 있습니다.&#x20;

**css/goods/goods.css**

```css
.item_detail_tit h3 {
    width:405px;
    font-size:18px;
    word-break: break-all;
}
```

2\.  상품 정보 타이틀 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다.&#x20;

**css/goods/goods.css**

```css
.item_detail_list dt {
    ffloat:left;
    width:80px;
    margin:0 10px 0 0;
    color:#888888;
    font-weight:normal;
    word-wrap:break-word;
}
```

3\.  상품 가격 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다.&#x20;

**css/goods/goods.css**

```css
.item_price dd {
    margin: -2px 0 0 0;
    font-size: 16px;
    font-weight: bold;
}
```

4\.  총 합계금액 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다.&#x20;

**css/goods/goods.css**

```css
.item_tatal_box .total_amount dt {
    font-size: 16px;
    font-weight: bold;
}
```

5\.  총 합계금액 가격 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다.&#x20;

**css/goods/goods.css**

```css
.item_tatal_box .total_amount dd {
    color:#0CC472;
    font-weight:bold;
}
```

6\. 총 합계금액 가격 폰트의 **font-size(크기)** 값을 변경할 수 있습니다.&#x20;

**css/goods/goods.css**

```css
.item_tatal_box .total_amount dd strong {
    font-size: 20px;
}
```

</details>

<details>

<summary><strong>상품 상세 상단 변경하기(버튼)</strong></summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F8up1DrQf3DOx2vbiS7ZX%2Fimage.png?alt=media\&token=30d49e6e-3186-4c24-9d5b-953c80486286)

1\.  공유하기 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다.&#x20;

**css/button.css**

```css
.btn_gray_list a, .btn_gray_list button {
    display:inline-block;
    padding:0 0 0 11px;
    border:1px solid #999;
    vertical-align:middle;
}
```

2\.  조건별 배송 버튼의 **font-size(크기), background(배경)** 값을 변경할 수 있습니다.&#x20;

**css/button.css**

```css
.btn_gray_list .btn_gray_small {
    font-size:11px;
}
```

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

**css/button.css**

```css
.btn_add_cart, .btn_add_wish {
    display:inline-block;
    width:152px;
    height:52px;
    margin:0 0 0 6px;
    padding:0 10px 0 10px;
    color:#3e3d3c;
    font-size:16px;
    border:1px solid #cccccc;
    background:#ffffff;
    text-align:center;
    font-weight:regular;
}
```

4\.  바로구매 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다.&#x20;

**css/button.css**

```css
.btn_add_order {
    display:inline-block;
    width:230px;
    height:52px;
    margin:0 0 0 6px;
    padding:0 10px 0 10px;
    color:#ffffff;
    font-size:16px;
    border:1px solid #0CC472;
    background:#0CC472;
    text-align:center;
    font-weight:regular;
}
```

</details>

<details>

<summary><strong>상품 상세 상단 변경하기(라인)</strong></summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FbwFUoH27XfoVIduLWxv8%2Fimage.png?alt=media\&token=7a1d8e45-f393-4d92-b4cb-f44c20caf0d0)

1\.  셀렉트 영역의 **border(선), background(배경)** 값을 변경할 수 있습니다.&#x20;

**css/layout/layout.css**

```css
.location_select {
    display:inline-block;
    position:relative;
    min-width:150px;
    margin:7px 0 0 0;
    border:1px solid #999999;
    background:#ffffff;
    z-index:50;
}
```

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F4tXwoLu68qlIbpgETF5d%2Fimage.png?alt=media\&token=30a83040-c23e-4224-9471-fede8707930f)

2\.  상품명 아래  **border-bottom(선) 값을** 변경할 수 있습니다.&#x20;

**css/goods/goods.css**

```css
.item_detail_tit {
    position: relative;
    padding: 0 0 10px 0;
    border-bottom: 1px solid #dbdbdb;
}
```

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F7hxuuguz4FwIb68IErg0%2Fimage.png?alt=media\&token=8e4cff06-fe4d-4a21-93e9-f2a61660f041)\
3\.  선택한 옵션 영역의  **border-bottom(선) 값을** 변경할 수 있습니다.&#x20;

**css/layout/layout.css**

```css
.item_detail_list + .item_choice_list table {
    width: 100%;
    border-bottom: 1px solid #999999;
}
```

4. 선택한 옵션영역의 background(배경) 값을 변경할 수 있습니다.

**css/layout/layout.css**

```css
.item_choice_list table {
    width: 100%;
    background: #f5f5f5;
}
```

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FE4TGTdpyeelWjnxRMO2V%2Fimage.png?alt=media\&token=3c5239a7-3f03-4760-b0bc-51254ed0562e)

5. ![](broken-reference)총 합계금액 구분 영역의 border-top(선) 값을 변경할 수 있습니다.

**css/goods/goods.css**

```css
.item_tatal_box .total_amount {
    margin: 15px 0 0 0;
    padding-top: 10px;
    border-top: 1px solid #dbdbd
```

</details>

<details>

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

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FlSwSAWG3a6M1fLZF9ra7%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-10-16%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.33.31.png?alt=media\&token=a4803076-5bdb-4f40-a5c5-d3c78d3e8dc0)

1\. 상품 상세 탭 선택시 **color(색상), font-weight(굵기), border(선)** 값을 변경할 수 있습니다.&#x20;

**css/goods/goods.css**

```css
.item_goods_tab li.on a {
	padding-top: 18px;
	margin-top: 8px;
	color: #333333;
	font-weight: bold;
	border-bottom: 2px solid #ffffff;
}
```

2\. 글 등록 수량 폰트의 **color(색상)** 값을 변경할 수 있습니다.&#x20;

**css/goods/goods.css**

```css
.item_goods_tab li a strong {
    color: #ab3e55;
}
```

</details>

<details>

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

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FHUdweyA4o4ZGiFQ6mN3a%2Fimage.png?alt=media\&token=675ba56c-f3d6-4fa0-80dd-8a0084175804)

1\. 상품 문의 타이틀 폰트의 **font-size(크기)** 값을 변경할 수 있습니다.&#x20;

**css/goods/goods.css**

```css
.item_goods_sec h3 {
    padding: 45px 0 10px 0;
    font-size: 18px;
}
```

2\. 상품문의 전체보기 버튼의 **color(색상),  font-weight(굵기), border(선), background(배경), text-align(정렬)** 값을 변경할 수 있습니다.&#x20;

**css/button.css**

```css
.btn_reviews_more, .btn_qna_more {
    display: inline-block;
    min-width: 120px;
    padding: 10px 10px 10px 10px;
    color: #ab3e55;
    font-weight: bold;
    border: 1px solid #ab3e55;
    background: #ffffff;
    text-align: center;
}
```

3\. 상품문의 글쓰기 버튼의 **color(색상),  font-weight(굵기), border(선), background(배경), text-align(정렬)** 값을 변경할 수 있습니다.&#x20;

**css/button.css**

```css
.btn_reviews_write, .btn_qna_write {
    display: inline-block;
    min-width: 120px;
    padding: 10px 10px 10px 10px;
    color: #ffffff;
    font-weight: bold;
    border: 1px solid #ab3e55;
    background: #ab3e55;
    text-align: center;
}
```

4\. 페이징 버튼의 **color(색상),  font-weight(굵기), border(선)** 값을 변경할 수 있습니다.&#x20;

**css/button.css**

```css
.pagination .on {
    color: #ab3e55;
    font-weight: bold;
    border: 1px solid #ab3e55
```

</details>

<details>

<summary><strong>상품 상세 상품문의 영역-리스트 내용 변경하기</strong></summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FlivFsV1BWAdC1cRJK5fS%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-10-16%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.37.05.png?alt=media\&token=2bc6ae64-7bda-4c10-819c-f6dc779a6590)

1\. 수정 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다.&#x20;

**css/button.css**

```css
.btn_gray_list a, .btn_gray_list button {
    display: inline-block;
    padding: 0 0 0 11px;
    background: url(../img/common/btn/btn_gray_bg.png) repeat-x;
    border: 1px solid #dbdbdb;
    vertical-align: middle;
}
```

2\. 상품문의 내용 펼침 영역의 **background(배경)** 값을 변경할 수 있습니다.&#x20;

**css/goods/goods.css**

```css
.qna_new_box {
    text-align: left;
    background: #f8f8f8;
}
```

</details>

> 주문결제

<details>

<summary><strong>장바구니 화면 변경하기</strong></summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F70BBAakGwfBw4EQFerbO%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-10-16%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.08.53.png?alt=media\&token=e97de53f-8a14-4a87-a22e-e67b47a6f6aa)

1\. 장바구니 타이틀 폰트의 **color(색상), font-size(크기), color(색상)** 값을 변경할 수 있습니다.&#x20;

**css/order/order.css**

```css
.order_wrap .order_tit h2 {
    float: left;
    font-size: 28px;
    color: #222222;
}
```

\
2\. 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다.&#x20;

**css/order/order.css**

```css
.order_wrap .order_tit .page_on {
    color: #ab3e55;
    font-weight: bold;
}
```

3\. 다음 진행 스텝 표시 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다.&#x20;

**css/order/order.css**

```css
.order_wrap .order_tit ol li {
    float: left;
    font-size: 14px;
    color: #d1d1d1;
}
```

4\. 장바구니 타이틀 폰트 하단의  **border-bottom(선)** 값을 변경할 수 있습니다.&#x20;

**css/order/order.css**

```css
.order_wrap .order_tit {
    overflow: hidden;
    border-bottom: 1px solid #dbdbdb;
}
```

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FUhdS5DdUtbsPAp2CGsvQ%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-10-16%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.38.00.png?alt=media\&token=50073ad7-bb96-4064-be89-5323fae8d67a)

5\. 장바구니 상품금액/배송비/최종 결제금액의 **color(색상), font-size(사이즈), font-weight(굵기)** 값을 변경할 수 있습니다.

**css/order/order.css**

```css
.price_sum_cont .price_sum_list dd {
    color:#000;
}
```

```css
.price_sum_cont .price_sum_list dd strong {
    font-weight:700;
    font-size:18px;
    color:#000;
}
```

6\. 선택상품주문 버튼은 마우스 오버 전(.btn\_order\_choice\_buy) 과 오버 시(.btn\_order\_choice\_buy:hover)의 **border(선), font-size(사이즈), color(색상)** 값으로 각각 변경할 수 있습니다.

**css/order/button.css**

```css
.btn_order_choice_buy { 
    min-width:190px;
    height:55px;
    padding:0 20px 0 20px;
    color:#3e3d3c;
    font-weight:bold;
    font-size:14px;
    border:1px solid #cccccc;
    background:#fff;
    cursor:pointer;
}
```

```css
.btn_order_choice_buy:hover {
    color:#333333;
    border:1px solid #bbbbbb;
}
```

7\. 전체상품주문 버튼은 마우스 오버 전(.btn\_order\_whole\_buy) 과 오버 시(.btn\_order\_whole\_buy:hover) 의 **background(배경) 컬러, border(선), color(색상), font-size(사이즈)** 값으로 각각 변경할 수 있습니다.

**css/button.css**

```css
.btn_order_whole_buy {
    min-width:190px;
    height:55px;
    padding:0 20px 0 20px;
    color:#ffffff;
    font-size:14px;
    border:1px solid #ab3e55;
    background:#0CC472;
    cursor:pointer;
    font-weight:bold;
}
```

<pre class="language-css"><code class="lang-css">.btn_order_whole_buy:hover {
<strong>    border:1px solid #02B666;
</strong><strong>    background:#02B666;
</strong>}
</code></pre>

</details>

<details>

<summary><strong>주문서 작성/결제 화면 변경하기</strong></summary>

**주문서 금액 변경하기**

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F3UwLyy8pBd9PtLHSS7YI%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-10-16%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.09.31.png?alt=media\&token=117fcf31-3c39-4cda-bead-ad3b79d936a1)

\- 상품금액/배송비/합계 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다.

**css/order/order.css**

```css
.price_sum_cont .price_sum_list dd {
    color:#000;
}
```

```css
.price_sum_cont .price_sum_list dd strong {
    font-weight:700;
    font-size:18px;
    color:#000;
}
```

**최종결제금액, 결제하기 버튼 변경하기**

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2Fjx61GXxdAUFCEn6H6bXk%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-10-16%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.10.07.png?alt=media\&token=b0a50dd6-ffad-4c17-a2c7-a1c12a7845f6)

1\. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다.

**css/order/order.css**

```css
.payment_final_total dd {
    display:inline-block;
    font-size:30px;
    color:#0CC472;
}
```

2\. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경할 수 있습니다.

**css/button.css**

```css
.btn_order_buy {
    display:inline-block;
    width:300px;
    height:61px;
    line-height:59px;
    color:#fff;
    font-size:20px;
    border:1px solid #0CC472;
    background:#0CC472;
    text-align:center;
}
```

</details>