# Mate\&Co\_PC 스킨 가이드
> 공통
포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\
Mate\&Co 스킨에 적용되어 있는 기본 컬러 코드 **#**197C43을 확인합니다.
2. **관리자 > 디자인 메뉴 접속**
3. **스타일시트/CSS 변경** \
\- 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\
\- common.css를 더블 클릭 하여 common/common.css 파일을 엽니다.\
4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경할 수 있습니다.
```
:root {
--primary-default: #197C43; /* 포인트 컬러 */
--primary-hover: #025023; /* 포인트 컬러 hover */
--secondary-default: #AC6F0D; /* 서브 컬러 */
--neutrals-gray: #EDEBE5;
--neutrals-dark: #000;
--font-size: 14px; /* 기본 폰트 사이즈 */
--font-family: 'Pretendard variable'; /* 기본 폰트 명 */
--font-regular: 400;
--font-medium: 500;
--font-bold: 700;
--min-width: 1440px; /* 화면이 최소로 작아질 수 있는 너비 */
--max-width: 1920px; /* 화면이 최대한 넓어 질 수 있는 너비 */
}
```
5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경할 수 있습니다.
메뉴 변경하기
1. 상단 메뉴의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다.
**css > layout/layout.css**
```css
.top_member_box > li a{
display:inline-block;
padding-left:20px;
color:#000; /* 컬러 변경 */
font-size:16px; /* 폰트사이즈 수정 */
font-style:normal;
}
```
2. 장바구니 담긴상품 수량 폰트의 **color(색상)** 값을 변경할 수 있습니다.\
(현재는 기본 포인트 컬러 전역변수로 지정되어 있습니다.)
**css > layout/layout.css**
```css
.top_member_box > li strong {
font-weight: 400;
color: var(--neutrals-default);/* 기본 포인트 컬러를 원하는 색상으로 변경 */
}
```
3. 상단 메뉴의 background-color(배경색)을 변경할 수 있습니다.
**css > layout/layout.css**
```css
#header .header_top {
position: relative;
display: flex;
align-items: center;
background-color: #fff; /* header 배경색 변경 */;
/*border-bottom: 1px solid #000;*/
height: 120px;
}
```
검색창 폰트 변경하기
검색창 인풋박스 입력 폰트의 **font-size(크기)** 값을 변경할 수 있습니다.
**css/layout/layout.css**
```css
#header .top_search .top_text_cont .top_srarch_text {
display: block;
float: right;
width: 34px;
height: 34px;
border: 0px solid #000;
border-radius: 50%;
box-sizing: border-box;
-moz-transition: all 0.35s;
-webkit-transition: all 0.35s;
color: #000;
font-size: var(--font-size); /* font size를 추가 할 수 있습니다. */
}
```
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(정렬)** 값을 변경할 수 있습니다.
**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;
}
```
푸터 변경하기 (폰트/컬러)
1\. 푸터 메뉴 폰트의 **color(색상)** 값을 변경할 수 있습니다.
**css/layout/layout.css**
```css
.foot_cont a {
color: #000;
}
```
2\. 푸터 정보영역 폰트의 **color(색상), font-size(크기), line-height(행간)** 값을 변경할 수 있습니다.
**css/layout/layout.css**
```css
.foot_cont .foot_info {
color: #000;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}
```
웹폰트 적용하기
1\. **관리자 페이지 > 디자인 메뉴**에 접속합니다.
2\. 좌측 하단 폴더트리 내 “**스타일시트/CSS**”를 더블 클릭하여 스타일시트 리스트 중 **reset.css**를 오픈하세요.
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;
}
```
※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.
> 메인
최근 본 상품 변경하기
1\. 최근 본 상품 영역의 **background(배경), color(색상)** 값을 변경할 수 있습니다.
**css/layout/layout.css**
```css
.scroll_right_cont {
float: left;
min-width: 72px;
padding: 0px;
background: none;
color: #000;
}
```
2\. 타이틀 폰트의 **text-align(정렬)** 값을 변경할 수 있습니다.
**css/layout/layout.css**
```css
.scroll_right_cont h4 {
font-size: 11px;
font-style: normal;
font-weight: 700;
line-height: 12px;
text-transform: uppercase;
text-align: center;
}
```
3\. 최근 본 상품 오버시 내용 **border(선), background(배경)** 값을 변경할 수 있습니다.
**css/layout/layout.css**
```css
.scroll_right_cont .src_box {
position: absolute;
top: 0;
right: 74px;
width: max-content;
height: 100%;
padding: 5px 5px 0 7px;
border: 1px solid #999999;
background: #ffffff;
text-align: left;
z-index: 10;
}
```
4\. 상품 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다.
**css/layout/layout.css**
```css
.scroll_right_cont .src_box strong {
display: block;
color: #0CC472;
}
```
5\. 페이징 폰트의**color(색상)** 값을 변경할 수 있습니다.
**css/layout/layout.css**
```css
.scroll_right_cont .scr_paging strong {
padding: 0 2px 0 2px;
color: #0CC472;
}
```
진열타입 타이틀 변경하기(폰트/컬러)
1\. 타이틀 폰트의 **font-size(크기)** 값을 변경할 수 있습니다.
**css/main/main.css**
```css
.main_goods_cont .goods_list_tit h3 {
font-size: 50px;
font-weight: 700;
color: #000;
font-family: "Bellota Text";
}
```
2\. 타이틀 영역 하단의 **border-bottom(선)** 값을 변경할 수 있습니다.
**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(선)** 값을 변경할 수 있습니다.
**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;
}
```
상품 리스트 변경하기
* **상품이미지 정렬은 기본 왼쪽 정렬입니다. 435px보다 작은 이미지일 경우 왼쪽 정렬로 노출 됩니다.**
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(색상)** 값을 변경할 수 있습니다.
**css/goods/list.css**
```css
.item_money_box .item_price {
/*display:block;*/
padding:0px;
font-size:16px;
color:#000000;
font-weight:bold;
}
```
> 상품상세
상품 상세 상단 변경하기(폰트)
* **상품 상세 이미지 크기가 600x600이상 일 경우 상품 영역에 맞춰 리사이징 됩니다.**
* **상품 상세 이미지 크기가 600x600보다 작을 경우 상품 이미지 크기대로 노출됩니다.**
1\. 상품명 폰트의 **font-size(크기)** 값을 변경할 수 있습니다.
**css/goods/goods.css**
```css
.item_detail_tit h3 {
width:405px;
font-size:18px;
word-break: break-all;
}
```
2\. 상품 정보 타이틀 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다.
**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(굵기)** 값을 변경할 수 있습니다.
**css/goods/goods.css**
```css
.item_price dd {
margin: -2px 0 0 0;
font-size: 16px;
font-weight: bold;
}
```
4\. 총 합계금액 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다.
**css/goods/goods.css**
```css
.item_tatal_box .total_amount dt {
font-size: 16px;
font-weight: bold;
}
```
5\. 총 합계금액 가격 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다.
**css/goods/goods.css**
```css
.item_tatal_box .total_amount dd {
color:#0CC472;
font-weight:bold;
}
```
6\. 총 합계금액 가격 폰트의 **font-size(크기)** 값을 변경할 수 있습니다.
**css/goods/goods.css**
```css
.item_tatal_box .total_amount dd strong {
font-size: 20px;
}
```
상품 상세 상단 변경하기(버튼)
1\. 공유하기 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다.
**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(배경)** 값을 변경할 수 있습니다.
**css/button.css**
```css
.btn_gray_list .btn_gray_small {
font-size:11px;
}
```
3\. 장바구니 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다.
**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(굵기)** 값을 변경할 수 있습니다.
**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;
}
```
상품 상세 상단 변경하기
1\. 셀렉트 영역의 **border(선), background(배경)** 값을 변경할 수 있습니다.
**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;
}
```
2\. 상품명 아래 **border-bottom(선) 값을** 변경할 수 있습니다.
**css/goods/goods.css**
```css
.item_detail_tit {
position: relative;
padding: 0 0 10px 0;
border-bottom: 1px solid #dbdbdb;
}
```
\
3\. 선택한 옵션 영역의 **border-bottom(선) 값을** 변경할 수 있습니다.
**css/layout/layout.css**
```css
.item_detail_list + .item_choice_list table {
width: 100%;
border-bottom: 1px solid #999999;
}
```
5. 선택한 옵션영역의 background(배경) 값을 변경할 수 있습니다.
**css/layout/layout.css**
```css
.item_choice_list table {
width: 100%;
background: #f5f5f5;
}
```
6. 총 합계금액 구분 영역의 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
```
상품 상세 탭 변경하기
1\. 상품 상세 탭 선택시 **color(색상), font-weight(굵기), border(선)** 값을 변경할 수 있습니다.
**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(색상)** 값을 변경할 수 있습니다.
**css/goods/goods.css**
```css
.item_goods_tab li a strong {
color: #ab3e55;
}
```
상품 상세 상품후기 영역-리스트 변경하기
1\. 상품후기 타이틀 폰트의 **font-size(크기)** 값을 변경할 수 있습니다.
**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(정렬)** 값을 변경할 수 있습니다.
**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(정렬)** 값을 변경할 수 있습니다.
**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(선)** 값을 변경할 수 있습니다.
**css/button.css**
```css
.pagination .on {
color: #ab3e55;
font-weight: bold;
border: 1px solid #ab3e55
```
상품 상세 상품문의 영역-리스트 내용 변경하기
1\. 수정 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다.
**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(배경)** 값을 변경할 수 있습니다.
**css/goods/goods.css**
```css
.qna_new_box {
text-align: left;
background: #f8f8f8;
}
```
> 주문결제
장바구니 화면 변경하기
1\. 장바구니 타이틀 폰트의 **color(색상), font-size(크기), color(색상)** 값을 변경할 수 있습니다.
**css/order/order.css**
```css
.order_wrap .order_tit h2 {
float: left;
font-size: 28px;
color: #222222;
}
```
\
2\. 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다.
**css/order/order.css**
```css
.order_wrap .order_tit .page_on {
color: #ab3e55;
font-weight: bold;
}
```
3\. 다음 진행 스텝 표시 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다.
**css/order/order.css**
```css
.order_wrap .order_tit ol li {
float: left;
font-size: 14px;
color: #d1d1d1;
}
```
4\. 장바구니 타이틀 폰트 하단의 **border-bottom(선)** 값을 변경할 수 있습니다.
**css/order/order.css**
```css
.order_wrap .order_tit {
overflow: hidden;
border-bottom: 1px solid #dbdbdb;
}
```
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;
}
```
.btn_order_whole_buy:hover {
border:1px solid #02B666;
background:#02B666;
}
주문서 작성/결제 화면 변경하기
**주문서 금액 변경하기**
\- 상품금액/배송비/합계 폰트의 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;
}
```
**최종결제금액, 결제하기 버튼 변경하기**
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;
}
```