🖥️Honglife_PC 스킨 가이드
공통
컬러 코드 변경하기
Honglife 스킨에 적용되어 있는 기본 컬러 코드는 #c62323이다.
[관리자 > 디자인 > 디자인 스킨 리스트] 메뉴에 접속한다.
스타일시트/CSS 변경
좌측 하단 폴더 트리 내 [스타일시트/CSS]를 더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈한다.
common.css를 더블 클릭하여 common/common.css 파일을 연다.
화면 최상단에서
--primary-default의 값을 원하는 포인트 컬러 코드로 변경할 수 있다. 아래는 스킨에서 자주 사용하는 값들을 변수화 하였다. 해당 값을 변경하면 일괄적으로 적용될 것이다.
: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;
}HEADER 스타일 변경하기
파일명: css/layout/layout.css
헤더의 높이 값을 변경 할 수 있다.
// css/common/common.css
--header-height: 56px; // 높이 값 변경GNB 메뉴 스타일을 변경할 수 있다.
#header .header__gnb a {
font-size: calc(var(--font-size) + 1px); // 폰트 사이즈 변경
font-weight: var(--font-medium);
color: #fff; // 폰트 색 변경
}
사용자 메뉴 (LOGIN, JOIN, MYPAGE, CART) 스타일을 변경할 수 있다.
.top_member_box > li a {
display: inline-block;
color: #fff; // font 색 변경
text-transform: uppercase; // 영문 대문자로 표시
}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;
}스크롤시 헤더 영역 배경색을 변경 할 수 있다. (서브 페이지에서는 기본 배경 색 --primary-hover)
파일 명: css/main/main.css```
.body-main .is-fixed #header {
background-color: var(--primary-hover);
}
```푸터(하단 공통) 스타일 변경하기
파일명 : css/layout/layout.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;
}푸터 정보 영역의 스타일을 변경할 수 있다.
.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;
}메인
메인 우측 - 최근 본 상품 변경하기
파일명 : css/layout/layout.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);
}
상품 상세
상품 상세 페이지 - 상단 영역 변경하기
파일명 : css/goods/goods.css
상품 상세 페이지에서 상품명과 상품 항목 레이블의 스타일을 지정할 수 있다.
[공유], [조건별배송] 버튼의 스타일을 지정할 수 있다.
총 합계 금액의 스타일을 지정할 수 있다.
[장바구니], [찜하기], [바로 구매] 버튼의 스타일을 지정할 수 있다.
주문결제
Last updated
Was this helpful?