🖥️Macaroom_PC 스킨 가이드
Last updated
Last updated
공통
Macaroom 스킨에 적용되어 있는 기본 컬러 코드는 #ff5f57이다.
[관리자 > 디자인 > 디자인 스킨 리스트] 메뉴에 접속한다.
스타일시트/CSS 변경
좌측 하단 폴더 트리 내 [스타일시트/CSS]를 더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈한다.
common.css를 더블 클릭하여 common/common.css 파일을 연다. 
화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경할 수 있다. 아래는 스킨에서 자주 사용하는 값들을 변수화 하였다. 해당 값을 변경하면 일괄적으로 적용될 것이다.
:root {
--primary-default: #ff5f57; /* 포인트 컬러 */
--primary-hover: #ff8680; /* 포인트 컬러 hover */
--secondary-default: #ffae44; /* 서브 컬러 */
--gray-dark: #e2dede;
--gray: #ededed;
--black: #272727;
--font-size: 14px; /* 기본 폰트 사이즈 */
--font-family: "Pretendard Variable"; /* 기본 폰트 명 */
--second-font-family: "Afacad";
--font-regular: 400;
--font-medium: 500;
--font-bold: 700;
--min-width: 1440px; /* 화면이 최소로 작아질 수 있는 너비 */
--max-width: 1920px; /* 화면이 최대한 넓어 질 수 있는 너비 */
}
파일명 : css/layout/layout.css
상단 메뉴 텍스트의 스타일을 변경할 수 있다.
.top_member_box > li a {
display: inline-block;
color: #4F4F4F;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.8px;
text-transform: uppercase;
}장바구니 담긴상품 수량 스타일을 변경할 수 있다.
.cart-count {
width: 20px;
height: 20px;
background-color: var(--primary-default);
color: #fff;
display: inline-block;
border-radius: 50%;
text-align: center;
font-size: 11px;
font-style: normal;
font-weight: 500;
line-height: 20px;
transform: translate(2px, -3px);
}상단 메뉴의 배경색을 변경할 수 있다.
#header .header_top {
background-color: #fff;
max-width: var(--max-width);
min-width: calc(var(--max-width) - 20px);
margin-inline: auto;
}카테고리 전체보기 메뉴 패널의 스타일을 변경할 수 있다.
.gnb_allmenu_wrap {
display: none;
position: fixed;
top: 80px;
left: 0;
width: 100%;
background: #fff;
z-index: 999;
border-top: 2px solid #272727;
border-bottom: 2px solid #272727;
max-height: 672px;
min-height: 396px;
}카테고리 메뉴의 스타일을 변경할 수 있다.
.header_gnb .gnb_allmenu_box a,
.header_gnb .gnb_allmenu_box button {
color: var(--black);
font-size: 24px;
font-weight: 400;
height: 64px;
line-height: 64px;
width: 100%;
text-align: left;
display: block;
}검색창의 스타일을 변경할 수 있다. 6-1) 검색 아이콘을 변경할 수 있다.
.top-search-btn {
position: absolute;
top: 1px;
right: 1px;
border-radius: 8px;
width: 32px;
height: 32px;
background: #fff url(../../img/common/btn/btn_top_search.svg) no-repeat right;
text-indent: -9999em;
}6-2) 검색 인풋창의 스타일을 변경할 수 있다.
#header .top_search .top_text_cont .top_srarch_text {
display: block;
float: right;
width: 34px;
height: 34px;
border-radius: 8px;
box-sizing: border-box;
-moz-transition: all 0.35s;
-webkit-transition: all 0.35s;
border: 1px solid transparent;
}6-3) 최근 검색어 레이아웃의 스타일을 변경할 수 있다.
.recent_box {
float: left;
width: 333px;
min-height: 65px;
font-size: 12px;
text-align: center;
border-right: none 0;
vertical-align: top;
}6-4) 추천상품 레이아웃의 스타일을 변경할 수 있다.
.recom_box {
display: inline-block;
width: 148px;
min-height: 218px;
padding: 12px 15px 10px;
font-size: 10px;
}
파일명 : 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]를 더블 클릭하여 스타일시트 리스트 중 reset.css 파일을 연다.
reset.css 스타일시트의 3번째 줄에 @import url(’외부 스타일시트 경로’)을 추가한다.
/* css/reset.css */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
@import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap');font-family의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Pretendard variable(변경할 폰트명)으로 수정한다. (한글 폰트 파일명의 경우 " "입력)
/* css/common/common.css */
.:root {
...
--font-family: 'Pretendard variable';
--second-font-family: "Afacad";
...
}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;
}⚠️ 주의) 웹 폰트 사용시 속도 저하가 발생할 수 있다.
메인
파일명 : 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);
}
파일명 : css/goods/list.css
상품 진열 영역의 공통 스타일을 변경할 수 있다.
/* 상품 진열 타이틀 */
.goods_list_tit h3 {
color: var(--black);
text-align: center;
font-family: var(--second-font-family);
font-size: 44px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/* 상단 더보기 버튼 */
.btn_goods_more .btn_goods_view_more {
color: #7D7D7D;
font-size: 14px;
font-weight: 600;
line-height: 30px;
padding-right: 14px;
}
/* 하단 더보기 버튼 컨테이너 */
.btn_goods_down_more {
width: 100%;
text-align: center;
margin-top: 56px;
}
/* 하단 더보기 버튼 */
.btn_goods_down_more .btn_goods_view_down_more {
background-color: #272727;
padding: 0 48px;
color: #fff;
text-align: center;
font-family: Afacad;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 32px;
height: 56px;
}상품 아이템의 스타일을 변경할 수 있다.
/* 브랜드명 */
.item_tit_box .item_brand {
display: block;
color: var(--primary-default);
font-family: "Pretendard Variable";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: uppercase;
}
/* 상품명 */
.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: 500;
overflow: hidden;
line-height: 22px;
color: #272727;
}
/* 가격 */
.item_money_box .item_price {
padding: 0;
color: #272727;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 22px;
}상품 상세
파일명 : css/goods/goods.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;
}[공유], [조건별배송] 버튼의 스타일을 지정할 수 있다.
.btn_gray_list a, .btn_gray_list button {
display: inline-block;
padding: 0 0 0 11px;
border: 1px solid #999;
vertical-align: middle;
}총 합계 금액의 스타일을 지정할 수 있다.
.item_tatal_box .total_amount dd {
color: var(--primary-default);
font-weight: bold;
}
.item_tatal_box .total_amount dd strong {
font-size: 20px;
}[장바구니], [찜하기], [바로 구매] 버튼의 스타일을 지정할 수 있다.
/* 장바구니, 찜하기 버튼 */
.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: bold;
}
/* 바로구매 버튼 */
.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: bold;
}파일명 : css/goods/goods.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);
}주문결제
파일명 : css/order/order.css
장바구니 타이틀의 스타일을 지정할 수 있다. (주문서 공통)
/* 상품 상세 - 상품명 */
.order_wrap .order_tit h2 {
float: left;
font-size: 28px;
color: #222222;
}브레드크럼(주문 단계)의 스타일을 변경할 수 있다. (주문서 공통)
.order_wrap .order_tit ol li {
float: left;
font-size: 14px;
color: #d1d1d1;
}
/* 현재 단계를 나타내는 스타일 */
.order_wrap .order_tit .page_on {
color: #000;
font-weight: bold;
}장바구니에 담긴 상품 목록 테이블의 스타일을 변경할 수 있다. (주문서 공통)
.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;
}[선택 상품 주문], [전체 상품 주문] 버튼의 스타일을 변경할 수 있다.
/* 선택 상품 주문 */
.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;
}파일명 : css/order/order.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);
}[결제하기]버튼의 스타일을 변경할 수 있다.
.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;
}
