# Honglife\_PC 스킨 가이드

> 공통

<details>

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

1. Honglife 스킨에 적용되어 있는 기본 컬러 코드는 **#c62323**이다.
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: #c62323; /* 포인트 컬러 */
  --primary-hover: #990416; /* 포인트 컬러 hover */
  --secondary-default: #264642; /* 서브 컬러 */
  --neutrals-gray: #f5f5f5;
  --neutrals-dark: #000;
  --font-size: 14px; /* 기본 폰트 사이즈 */
  --font-family: "Pretendard Variable"; /* 기본 폰트 명 */
  --font-regular: 400;
  --font-medium: 500;
  --font-bold: 700;
  --min-width: 1800px; /* 화면이 최소로 작아질 수 있는 너비 */
  --max-width: 1920px; /* 화면이 최대한 넓어 질 수 있는 너비 */
  --header-height: 56px;
}
```

</details>

<details>

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

![](/files/KrC61NCnl2LAMKdQjKdl)

파일명: css/layout/layout.css

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

```
// css/common/common.css

--header-height: 56px; // 높이 값 변경
```

2. GNB 메뉴 스타일을 변경할 수 있다.

```
#header .header__gnb a {
  font-size: calc(var(--font-size) + 1px); // 폰트 사이즈 변경
  font-weight: var(--font-medium);
  color: #fff; // 폰트 색 변경
}

```

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

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

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

5. 스크롤시 헤더 영역 배경색을 변경 할 수 있다. (서브 페이지에서는 기본 배경 색 --primary-hover)

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

````
```
.body-main .is-fixed #header {
  background-color: var(--primary-hover);
}

```
````

</details>

<details>

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

![](/files/XvqBvo8Hl7KkakmcEf5f)

파일명 : *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>

![](/files/fiCOrO3ySFkw0OV427qN)

파일명 : *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>

![](/files/i2Hd80IiLPFmPHS5ukJk)

파일명 : *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>

![](/files/VXijDbaCL298UQbbvOaQ)

파일명 : *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>

![](/files/Bk9v3DoF98qrV13dZaao)

파일명 : *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>

![](/files/NDam837bceC7pPt2Mege)

파일명 : *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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://godomall-help.nhn-commerce.com/beginner/design/freeskin/honglife/pc-guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.