# Verde\_PC 스킨 가이드

> 공통

<details>

<summary>컬러 코드 변경하기</summary>

1. Verde 스킨에 적용되어 있는 기본 컬러 코드는 **#2D4F06**이다.
2. \[관리자 > 디자인 > 디자인 스킨 리스트] 메뉴에 접속한다.
3. **스타일시트/CSS 변경**
   * 좌측 하단 폴더 트리 내 \[스타일시트/CSS]를 더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈한다.
   * common.css를 더블 클릭하여 *common/common.css* 파일을 연다. ![common디렉토리](https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FJ1umAa3qnn7tgf3lLWSb%2F2024-12-11%2011_59_39.281.png?alt=media\&token=67add14c-09e9-4b89-bb9c-c1291394ed7f)
4. 화면 최상단에서 `--primary-default`의 값을 원하는 포인트 컬러 코드로 변경할 수 있다. 아래는 스킨에서 자주 사용하는 값들을 변수화 하였다. 해당 값을 변경하면 일괄적으로 적용될 것이다.

```css
:root {
  --primary-default: #2D4F06; /* 포인트 컬러 */
  --primary-hover: #213E00; /* 포인트 컬러 hover */
  --secondary-default: #E4E9D3; /* 서브 컬러 */
  --neutrals-gray: #F6F6F6;
  --neutrals-dark: #000;
  --font-size: 14px; /* 기본 폰트 사이즈 */
  --font-family: "Pretendard Variable"; /* 기본 폰트 명 */
  --font-regular: 400;
  --font-medium: 500;
  --font-bold: 700;
  --min-width: 1680px; /* 화면이 최소로 작아질 수 있는 너비 */
  --max-width: 1920px; /* 화면이 최대한 넓어 질 수 있는 너비 */
}
```

</details>

<details>

<summary>HEADER 스타일 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FzUJyTBrj8ET8b22zOrVg%2Fimage.png?alt=media\&token=7e7bcc52-b7ca-4f86-877d-43b8d2967794)

파일명: css/layout/layout.css

1. 헤더의 높이 값, 배경색을 변경 할 수 있다.

```
#header_warp {
	position: sticky;
	top: 0;
	z-index: 55;
	background-color: #fff;
	height: 50px;
}
```

2. 사용자 메뉴 (LOGIN, JOIN, MYPAGE, CART) 스타일을 변경할 수 있다.

```
.top_member_box > li a {
  display: inline-block;
  color: #fff; // font 색 변경
  text-transform: uppercase; // 영문 대문자로 표시
}
```

3. CART 숫자 영역 스타일을 변경할 수 있다.

```
.top_member_box > li strong {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primary-default); // 배경색 변경
  color: #fff; // 숫자 색 변경
  block-size: 20px; // 높이 변경
  min-inline-size: 20px; // 너비 변경
  margin-inline-start: 4px;
  font-weight: var(--font-medium);
  font-size: calc(var(--font-size) - 3px); // 폰트 사이드 변경
  border-radius: 10px;
}
```

</details>

<details>

<summary>푸터(하단 공통) 스타일 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FcnYtDL5uIoGeFZCYTai2%2Fimage.png?alt=media\&token=2f6dadd6-9b04-481a-bceb-182750b8f314)

파일명 : *css/layout/layout.css*

1. 푸터 메뉴의 스타일을 변경할 수 있다.

```css
.foot_list ul li a {
    padding: 0 16px;
    font-weight: 700;
}

.foot_list ul .divider {
    display: inline-block;
    width: 1px;
    background-color: #fff;
    height: 12px;
}
```

2. 푸터 정보 영역의 스타일을 변경할 수 있다.

```css
.foot_cont .foot_info {
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.content_info .cs_center p,
.content_info .bank_info p,
.content_info .notice_list li a {
    color: #fff;
    font-family: 'Pretendard Variable';
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}
```

</details>

<details>

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

1. \[관리자 페이지 > 디자인 > 디자인 스킨 리스트] 메뉴에 접속한다.
2. 좌측 하단 폴더트리 내 \[스타일시트/CSS]를 더블 클릭하여 스타일시트 리스트 중 *reset.css* 파일을 연다.
3. *reset.css* 스타일시트의 3번째 줄에 `@import url(’외부 스타일시트 경로’)`을 추가한다.

```css
/* css/reset.css */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
```

4. `font-family`의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Pretendard variable(변경할 폰트명)으로 수정한다. (한글 폰트 파일명의 경우 " "입력)

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

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

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

⚠️ 주의) 웹 폰트 사용시 속도 저하가 발생할 수 있다.

</details>

> 메인

<details>

<summary>메인 우측 - 최근 본 상품 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F5T1x3QZFhgH0OBXCzjAu%2Fimage.png?alt=media\&token=398b7178-a43b-42d7-91af-c0c7e0b582e0)

파일명 : *css/layout/layout.css*

최근 본 상품 영역의 스타일을 지정할 수 있다.

```css
/* 최근 본 상품 목록 영역 */
.scroll_right_cont {
    min-width: 72px;
    padding: 0px;
    background: none;
    color: #333;
}

/* 타이틀 (예: TODAY VIEW) */
.scroll_right_cont h4 {
    text-align: center;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 12px;
    text-transform: uppercase;
}

/* 상품 마우스 오버 시 노출되는 영역 */
.scroll_right_cont .src_box {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 191px;
    height: 72px;
    padding: 5px 0 0 7px;
    border: 1px solid #999999;
    background: #ffffff;
    text-align: left;
    z-index: 10;
}

/* 가격 스타일 */
.scroll_right_cont .src_box strong {
    display: block;
    color: var(--primary-default);
}

/* 탑 버튼 스타일 */
#scroll_right .btn_scroll_top {
    text-align: center;
    display: flex;
    width: 72px;
    height: 24px;
    padding: 4px 9px;
    justify-content: center;
    align-items: center;
    gap: 3px;
    border: 1px solid #d2d2d2;
    background: #fff;
    margin-top: 20px;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    color: var(--black);
}
```

</details>

<details>

<summary>상품 진열 스타일 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FMrpQUiFw89cKuE42wRiu%2Fimage.png?alt=media\&token=16c04457-2e65-4a1e-ba02-3bc785a26a45)

파일명 : *css/main/main.css*

1. 상품 진열 영역의 공통 스타일을 변경할 수 있다.

```css
/* 상품 진열 타이틀 추가 */
.goods_list_tit h3 {	
    text-align: center;
    font-size: 42px;
    font-weight: var(--font-bold);
    line-height: 50px;
}

/* 상단 더보기 버튼 */
.main_content .btn_goods_view_more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    block-size: 24px;
    inline-size: 77px;
    border-radius: 12px;
    color: #fff;
    background-color: #343434;
    font-size: var(--font-size);
}


/* css/goods/list.css */
/* 하단 더보기 버튼 컨테이너 */
.btn_goods_down_more {
    width: 100%;
    margin: 30px 0 30px 0;
    border-top: 1px solid #ececec;
    text-align: center;
}

/* 하단 더보기 버튼 */
.btn_goods_down_more .btn_goods_view_down_more {
    display: inline-block;
    margin-top: -1px;
    padding: 5px 28px 6px 20px;
    font-weight: bold;
    border: 1px solid #dbdbdb;
    border-top: none 0;
    background: url(../../img/icon/goods_icon/icon_down_more.png) no-repeat right center;
    background-color: #ffffff;
}
```

2. 상품 아이템의 스타일을 변경할 수 있다.

```css
/* 브랜드명 */
.item_tit_box .item_brand {
    display: block;
    color: var(--primary-default);
    font-size: 12px;
    line-height: 18px;
    font-weight: normal;
    margin-bottom: 4px;
}

/* 상품명 */
.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;
}

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

</details>

> 상품 상세

<details>

<summary>상품 상세 페이지 - 상단 영역 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FqzKt3RT9ELlOoM6xDR9w%2Fimage.png?alt=media\&token=3bf214f8-6136-4e82-adf9-ad434a58e184)

파일명 : *css/goods/goods.css*

1. 상품 상세 페이지에서 상품명과 상품 항목 레이블의 스타일을 지정할 수 있다.

```css
/* 상품 상세 - 상품명 */
.item_detail_tit h3 {
    width: 405px;
    font-size: 18px;
    word-break: break-all;
}

/* 항목 레이블 (제목) */
.item_detail_list dt {
    float: left;
    width: 80px;
    margin: 0 10px 0 0;
    color: #888888;
    font-weight: normal;
    word-wrap: break-word;
}
```

2. \[공유], \[조건별배송] 버튼의 스타일을 지정할 수 있다.

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

3. 총 합계 금액의 스타일을 지정할 수 있다.

```css
.item_tatal_box .total_amount dd {
    color: var(--primary-default);
}
.item_tatal_box .total_amount dd strong {
    font-size: 20px;
    font-size: 25px;
}
```

4. \[장바구니], \[찜하기], \[바로 구매] 버튼의 스타일을 지정할 수 있다.

```css
/* 장바구니, 찜하기 버튼 */
.btn_add_cart, .btn_add_wish {
    display: inline-block;
    width: 152px;
    height: 52px;
    padding: 0 10px 0 10px;
    color: #3e3d3c;
    font-size: 16px;
    border: 1px solid #cccccc;
    background: #ffffff;
    text-align: center;
}

/* 바로구매 버튼 */
.btn_add_order, .btn_add_order_related, .btn_add_cart_related {
    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 var(--primary-default);
    background: var(--primary-default);
    text-align: center;
    font-weight: 400;
}
```

</details>

<details>

<summary>상품 상세 페이지 - 탭 스타일 변경하기</summary>

<img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FCNPAx8xNYIeOXYiDaKBQ%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-12-11%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.09.51.png?alt=media&#x26;token=e2307f6a-3ca6-4e99-98d8-19bdf9c56e96" alt="상품상세-탭" data-size="original">

파일명 : `css/goods/goods.css` 탭 메뉴의 스타일을 지정할 수 있다.

```css
/* 탭 메뉴 아이템 */
.item_goods_tab li a {
    display: block;
    margin: 0 0 0 -1px;
    padding: 10px 0 12px 0;
    color: #999999;
    font-size: var(--font-size);
    border: solid #dadada;
    border-width: 1px 1px 0;
    background: #ffffff;
}

/* 선택된 탭 메뉴 아이템 */
.item_goods_tab li.on a {
    padding-top: 18px;
    margin-top: 8px;
    color: #333333;
    font-weight: bold;
    border-bottom: 2px solid #ffffff;
}

/* 탭 메뉴 아이템 텍스트 강조 시 (상품후기, 문의 몇건인지 표시할 때 사용) */
.item_goods_tab li a strong {
    color: var(--primary-default);
}
```

</details>

> 주문결제

<details>

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

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FrC33QNVWClTA4NmqBjui%2Fimage.png?alt=media\&token=00b47cc3-f29f-49cf-98da-3afde3b9ce29)

파일명 : *css/order/order.css*

1. 장바구니 타이틀의 스타일을 지정할 수 있다. (주문서 공통)

```css
/* 상품 상세 - 상품명 */
.order_wrap .order_tit h2 {
    float: left;
    font-size: 28px;
    color: #222222;
}
```

2. 브레드크럼(주문 단계)의 스타일을 변경할 수 있다. (주문서 공통)

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

/* 현재 단계를 나타내는 스타일 */
.order_wrap .order_tit .page_on {
    color: #000;
    font-weight: bold;
}
```

3. 장바구니에 담긴 상품 목록 테이블의 스타일을 변경할 수 있다. (주문서 공통)

```css
.order_table_type table {
    width:100%;
    border:0;
    border-spacing:0;
    border-collapse:collapse;
    text-align:center;
}
.order_table_type th {
    padding:9px 10px 10px 10px;
    border-top:1px solid #999999;
    border-bottom:1px solid #dbdbdb;
    background:#f7f7f7;
}
.order_table_type td { 
    height: 31px;
    padding: 15px 10px 14px 10px;
    color: #777777;
    border-bottom: 1px solid #dbdbdb;
    background:#ffffff;
}
```

4. \[선택 상품 주문], \[전체 상품 주문] 버튼의 스타일을 변경할 수 있다.

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

/* 전체 상품 주문 */
.btn_order_whole_buy {
    min-width: 190px;
    height: 55px;
    padding: 0 20px 0 20px;
    color: #ffffff;
    font-size: 14px;
    border: 1px solid var(--primary-default);
    background: var(--primary-default);
    cursor: pointer;
    font-weight: bold;
}
```

</details>

<details>

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

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2Fw2MPTtcV1HBgniOU98vL%2Fimage.png?alt=media\&token=6b58987c-af76-4158-97bf-86fc1d8181e0)

파일명 : *css/order/order.css*

1. 서브 타이틀, 설명 텍스트 및 최종 결제 금액 등 스타일을 변경할 수 있다.

```css
/* 서브 타이틀 */
.order_zone_tit h4 {
    font-size: 16px;
}

/* 설명 */
.order_zone_tit span {
    padding: 0 0 0 10px;
    color: #777777;
    font-size: 12px;
    font-weight: normal;
}

/* 결제 최종 금액 */
.payment_final_total dd {
    display: inline-block;
    font-size: 30px;
    color: var(--primary-default);
}
```

2. \[결제하기]버튼의 스타일을 변경할 수 있다.

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

</details>