📱PURE_Mobile 스킨 가이드
Last updated
Last updated
공통
컬러코드값 확인 PURE 스킨에 적용되어 있는 기본 컬러 코드 #ab3e55을 확인합니다.
디자인 스킨 리스트 접속 | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트
스타일시트/CSS 변경 | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈합니다.
ctrl+F 검색 후 수정하기 스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 #e38bac를 검색하여 원하는 포인트 컬러 코드로 변경합니다. mypage.css (총 4개) proc.css (총 5개) main.css (총 1개) order.css (총 11개) list_06.css (총 4개) list_09.css (총 4개) list_04.css (총 4개) list_07.css (총 4개)
list_01.css (총 4개) list_11.css (총 7개) list_02.css (총 4개) gd_layout.css (총 3개) gd_button.css (총 160개) gd_common.css (총 1개)
푸터 메뉴버튼의 font-size(크기), color(색상), background(배경), border(선) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 136줄
#footer footer .ft_info2_box .ft_menu li a {
display: block;
padding: 10px 0;
background: #ffffff;
border: 1px solid #cccccc;
border-radius: 3px;
color: #888888;
font-size: 13px;
}푸터 정보 부분의 text-align(정렬), font-size(크기), color(색상) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 153줄
#footer footer .ft_info2_box .ft_address {
padding: 0 50px 0 50px;
text-align: center;
font-size: 12px;
color: #737373;
word-break: keep-all;
}푸터 카피라잇 영역의 color(색상), font-size(크기), text-align(정렬) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 159줄
#footer footer .ft_copy {
padding-bottom: 23px;
margin: 23px 0 0 0;
color: #545454;
font-size: 12px;
text-align: center;
font-style: normal;
}GNB영역의 border-bottom(선) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 15줄
#header_wrap header .header_box {
1px solid #cbcbcb;
}장바구니 담긴상품 수량의 배경 background(배경) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 35줄
#header_wrap header .header_box .cart_count {
position: absolute;
top: 30px;
right: 0;
display: block;
padding: 3px 6px 1px 6px;
line-height: 15px;
border-radius: 100%;
color: #fff;
background: #e38bac;
vertical-align: middle;
font-size: 12px;
}GNB영역의 font-size(크기), color(색상) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 15줄
#header_wrap header .header_box {
display: block;
padding: 13px 0 13px 0;
font-size: 14px;
color: #333333;
메인
고객센터 타이틀의 font-size(크기), font-weight(굵기), border-bottom(선) 값을 변경해줍니다.
변경 위치 css > main > main.css 52줄
.main .main_info_box .main_info dl dt {
font-size: 13px;
margin: 0 5px 0 0;
font-weight: bold;
color: #454545;
}고객센터 전화번호 font-size(크기), color(색상) 값을 변경해줍니다.
변경 위치 css > main > main.css 57줄
.main .main_info dl dd p.phone a {
font-size: 19px;
color: #e38bac;
font-weight: bold;
}고객센터 이용시간 font-size(크기), color(색상) 값을 변경해줍니다.
변경 위치 css > gd_reset.css 58줄
.main .main_info dl dd p.business_hours {
font-size: 11px;
color: #666;
}상품리스트 이미지의 border(라인) 값을 변경해줍니다.
변경 위치 css > goods > list > list_01.css 10줄
.goods_prd_item2 .goods_prd_img .img_box .img img {
width: 100%;
border: 1px solid #e5e5e5;
box-sizing: border-box;
}상품리스트 상품명 폰트의 color(색상), font-size(크기) 값을 변경해줍니다.
변경 위치 css > goods > list > list_01.css 17줄
.goods_prd_item2 .goods_prd_content .goods_info_list li {
padding: 1px 0 1px 0;
word-break: break-all;
color: #3e3d3c;
font-size: 14px;상품리스트 가격 폰트의 color(색상) 값을 변경해줍니다.
변경 위치 css > goods > list > list_01.css 30줄
.goods_prd_item2 .goods_prd_content .goods_info_list li.price .c_price {
color: #e38bac;
}NOTICE 게시판의 background(배경), margin(여백) 값을 변경해줍니다.
변경 위치 css > main > main.css 19줄
.main .main_notice .tit {
min-height: 139px;
margin: 0 15px;
padding: 20px 20px 8px 20px;
background: #ffffff;
}NOTICE 게시판의 font-size(크기), fone-weight(굵기), color(색상), border(선) 값을 변경해줍니다.
변경 위치 css > gd_reset.css 20줄
a, img, input, select, textarea {
display: block;
width: 100%;
padding: 0 0 3px 0;
font-size: 13px;
font-weight: bold;
color: #282828;
text-align: left;
border-bottom: 2px solid #070707;
}게시판 리스트의 폰트 color(색상) 값을 변경해줍니다.
변경 위치 css > gd_reset.css 24줄
a, img, input, select, textarea {
display: block;
width: 100%;
color: #7f7f7f;
}✔️ 메인화면에 노출되는 공지사항 영역 첫 줄에 dispaly 값을 display: none; 으로 변경합니다.
변경 위치 css > main > main.css 18줄
.main .main_notice .main_notice_box .tit {
display: none;
width: 100%;
padding: 0 0 3px 0;
font-size: 13px;
font-weight: bold;
color: #282828;
text-align: left;
border-bottom: 2px solid #070707;
상품상세
상품문의 게시판 문의 상태표시 아이콘의 font-size(크기), line-height(행간), background(배경), color(색상), border-radius(둥근선), border(선) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 24줄
.goods_board_qa_list li .item_list_summary .board_left .author_box .ico_ans1 {
display: block;
width: calc(100% - 70px);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px;
color: #222222;
font-weight: bold;
}작성자 font-size(크기), color(색상), line-height(행간) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 29줄
.goods_board_qa_list li .item_list_summary .board_left .title a {
color: #999;
font-size: 12px;
}접수 아이콘 font-size(크기), color(색상), line-height(행간) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 27줄
.goods_board_qa_list li .item_list_summary .board_left .title a {
display: inline-block;
padding: 1px 5px 1px 5px;
font-size: 11px;
border: 1px solid #9f9f9f;
color: #494949;
font-weight: bold;
box-sizing: border-box;✔️상품문의 수정 버튼의 font-size(크기), color(색상), background(배경) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 283줄
.goods_board_view .contents_holder {
display: block;
width: 100%;
padding: 8px 0 8px 0;
text-align: center;
background: #e38bac;
border: 1px solid #e38bac;
color: #ffffff;
font-weight: bold;
box-sizing: border-box;
font-size: 15px;
}상품 상세 타이틀의 font-size(크기), line-height(행간), text-align(정렬) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 46줄
.sub_top h2 {
overflow: hidden;
display: block;
width: 100%;
padding: 12px 0;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 20px;
line-height: 15px;
text-align: center;
}info 상품 상세페이지 탭 폰트의 color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 387줄
.goods_view .detail_tab_info .ly_info li a {
display: inline-block;
width: 100%;
color: #484848;
font-size: 13px;
line-height: 13px;
font-weight: bold;
text-align: center;
}info 게시글 등록 수량 폰트의 font-size(크기), color(색상), line-height(행간) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 388줄
.goods_view .detail_tab_info .ly_info li a {
display: block;
padding: 2px 0 0 0;
font-size: 11px;
color: #e38bac;
line-height: 11px;
}상품명 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 339줄
.goods_view .detail_info h3 {
font-size: 18px;
color: #333333;
}상품 할인가격 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 346줄
.goods_view .detail_info .detail_info_top .price_box .price {
font-size: 24px;
color: #333333;
}상품 할인 전 가격 폰트의 color(색상) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 348줄
.goods_view .detail_info .detail_info_top .price_box del {
color: #999999;
}상품 상세페이지 리스트 제목font-size(크기), color(색상) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 361줄
.goods_view .detail_info .detail_sub_info dl dt {
display: table-cell;
width: 25%;
font-size: 12px;
color: #888888;
}상품 상세페이지 리스트 내용 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 362줄
.goods_view .detail_info .detail_sub_info dl dd {
display: table-cell;
width: 75%;
font-size: 12px;
color: #333333;
}공유하기, 찜하기 버튼의 font-size(크기), text-align(정렬), background(배경), color(색상), font-weight(굵기) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 331줄
.goods_view .share_btn_box ul li button {
display: block;
margin: 0 auto;
padding: 10px 0;
font-size: 13px;
text-align: center;
background: none;
border: none;
color: #333333;
font-weight: bold;
}장바구니 버튼의 font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.
변경 위치 css > gd_button.css 166줄
.detail_cart_btn {
display: block;
width: 100%;
padding: 10px 0 10px 0;
font-size: 16px;
text-align: center;
background: #ffffff;
border: 1px solid #9f9f9f;
color: #494949;
font-weight: bold;
box-sizing: border-box;
}바로구매 버튼의 font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.
변경 위치 css > gd_button.css 168줄
.detail_order_btn {
display: block;
width: 100%;
padding: 10px 0 10px 0;
font-size: 16px;
text-align: center;
background: #e38bac;
border: 1px solid #e38bac;
color: #ffffff;
font-weight: bold;
box-sizing: border-box;
}
주문결제
주문번호 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.
변경 위치 css > order > order.css 219줄
.order_end .order_end_box h2 {
padding: 0 0 10px 0;
font-size: 13px;
color: #333333;
}입금금액 폰트의 color(색상) 값을 변경해줍니다.
변경 위치 css > gd_common.css 4줄
.c_red, .c-red, .c_point {
color: #ab3e55;
}구매안내 폰트의 color(색상) 값을 변경해줍니다.
변경 위치 css > order > order.css 229줄
.order_end .tx2 strong {
color: #e38bac;
}박스 영역의 background(배경), border(선), border-radius(둥근선) 값을 변경해줍니다.
변경 위치 css > order > order.css 219줄
.order_end .order_end_box {
position: relative;
margin: 15px 15px 5px 15px;
padding: 20px 0 20px 0;
background: #f3f3f3;
border: 1px solid #e1e1e1;
border-radius: 2px;
text-align: center;
}장바구니 상품명 폰트의 font-weight(굵기), color(색상) 값을 변경해줍니다.
변경 위치 css > order > order.css 52줄
.cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody p.name {
padding: 0 0 3px 0;
font-weight: bold;
color: #333;
}장바구니 상품 옵션 폰트의 font-size(크기), line-height(행간), color(색상) 값을 변경해줍니다.
변경 위치 css > order > order.css 51줄
.cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody p {
font-size: 12px;
line-height: 16px;
color: #9d9d9d;
}장바구니 상품 가격 폰트의 font-size(크기), color(색상), font-weight(굵기) 값을 변경해줍니다.
변경 위치 css > order > order.css 54줄
.cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody .prc {
display: block;
padding: 10px 0 0 0;
font-size: 15px;
color: #e38bac;
font-weight: bold;
}장바구니 항목 타이틀 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.
변경 위치 css > order > order.css 85줄
.cart .my_buy dl dt {
display: table-cell;
width: 50%;
font-size: 13px;
color: #5e5e5e;
}장바구니 총 상품금액 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.
변경 위치 css > order > order.css 86줄
.cart .my_buy dl dd {
display: table-cell;
width: 50%;
text-align: right;
font-size: 15px;
color: #5e5e5e;
}장바구니 총 합계금액 폰트의 color(색상), font-size(크기) 값을 변경해줍니다.
변경 위치 css > order > order.css 88줄
.cart .my_buy dl.total dd {
color: #e38bac;
font-size: 17px;
}쿠폰적용 버튼의 text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.
변경 위치 css > gd_button.css 222줄
.cart_coupon_apply {
display: inline-block;
padding: 5px 5px 5px 5px;
text-align: center;
background: #e38bac;
border: 1px solid #e38bac;
color: #ffffff;
font-weight: bold;
box-sizing: border-box;
border-radius: 2px;
}옵션변경 버튼의 text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.
변경 위치 css > gd_button.css 225줄
.cart_option_modify {
display: inline-block;
padding: 5px 5px 5px 5px;
text-align: center;
background: #ffffff;
border: 1px solid #9f9f9f;
color: #494949;
font-weight: bold;
box-sizing: border-box;
border-radius: 2px;
}선택상품 삭제, 주문 버튼의 text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.
변경 위치 css > gd_button.css 227줄
.cart_select_del_btn {
display: inline-block;
width: 100%;
padding: 10px 0 10px 0;
text-align: center;
background: #ffffff;
border: 1px solid #9f9f9f;
color: #494949;
font-weight: bold;
box-sizing: border-box;
font-size: 14px;
}전체주문 버튼의 text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.
변경 위치 css > gd_button.css 229줄
.cart_all_order_btn {
display: inline-block;
width: 100%;
padding: 10px 0 10px 0;
text-align: center;
background: #e38bac;
border: 1px solid #e38bac;
color: #ffffff;
font-weight: bold;
box-sizing: border-box;
font-size: 14px;
}
