📱PURE_Mobile 스킨 가이드

공통

포인트 컬러 일괄 변경하기

1. 컬러코드값 확인 PURE 스킨에 적용되어 있는 기본 컬러 코드 #ab3e55을 확인합니다.

1. 디자인 스킨 리스트 접속 | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트

1. 스타일시트/CSS 변경 | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈합니다.

1. 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개)

푸터 변경하기

1. 푸터 메뉴버튼의 font-size(크기), color(색상), background(배경), border(선) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 136줄

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;
}

1. 푸터 정보 부분의 text-align(정렬), font-size(크기), color(색상) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 153줄

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;
}

1. 푸터 카피라잇 영역의 color(색상), font-size(크기), text-align(정렬) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 159줄

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;
}

상단 헤더 영역 변경하기(아이콘/컬러)

1. GNB영역의 border-bottom(선) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 15줄

css > gd_layout.css 15줄

#header_wrap header .header_box {
1px solid #cbcbcb;
}

1. 장바구니 담긴상품 수량의 배경 background(배경) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 35줄

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;
}

1. GNB영역의 font-size(크기), color(색상) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 15줄

css > gd_layout.css 15줄

#header_wrap header .header_box {
    display: block;
    padding: 13px 0 13px 0;
    font-size: 14px;
    color: #333333;

메인

고객센터 폰트 변경하기

1. 고객센터 타이틀의 font-size(크기), font-weight(굵기), border-bottom(선) 값을 변경해줍니다. 변경 위치 css > main > main.css 52줄

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;
}

1. 고객센터 전화번호 font-size(크기), color(색상) 값을 변경해줍니다. 변경 위치 css > main > main.css 57줄

css > main > main.css 57줄

.main .main_info dl dd p.phone a {
    font-size: 19px;
    color: #e38bac;
    font-weight: bold;
}

1. 고객센터 이용시간 font-size(크기), color(색상) 값을 변경해줍니다. 변경 위치 css > gd_reset.css 58줄

css > gd_reset.css 58줄

.main .main_info dl dd p.business_hours {
    font-size: 11px;
    color: #666;
}

상품 리스트 스타일 변경하기

1. 상품리스트 이미지의 border(라인) 값을 변경해줍니다. 변경 위치 css > goods > list > list_01.css 10줄

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;
}

1. 상품리스트 상품명 폰트의 color(색상), font-size(크기) 값을 변경해줍니다. 변경 위치 css > goods > list > list_01.css 17줄

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;

1. 상품리스트 가격 폰트의 color(색상) 값을 변경해줍니다. 변경 위치 css > goods > list > list_01.css 30줄

css > goods > list > list_01.css 30줄

.goods_prd_item2 .goods_prd_content .goods_info_list li.price .c_price {
color: #e38bac;
}

NOTICE 게시판 변경하기

1. NOTICE 게시판의 background(배경), margin(여백) 값을 변경해줍니다. 변경 위치 css > main > main.css 19줄

css > main > main.css 19줄

.main .main_notice .tit {
    min-height: 139px;
    margin: 0 15px;
    padding: 20px 20px 8px 20px;
    background: #ffffff;
}

1. NOTICE 게시판의 font-size(크기), fone-weight(굵기), color(색상), border(선) 값을 변경해줍니다. 변경 위치 css > gd_reset.css 20줄

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;
}

1. 게시판 리스트의 폰트 color(색상) 값을 변경해줍니다. 변경 위치 css > gd_reset.css 24줄

css > gd_reset.css 24줄

a, img, input, select, textarea {
    display: block;
    width: 100%;
    color: #7f7f7f;
}

NOTICE 게시판 변경 - 메인화면에 공지사항 삭제하기

✔️ 메인화면에 노출되는 공지사항 영역 첫 줄에 dispaly 값을 display: none; 으로 변경합니다. 변경 위치 css > main > main.css 18줄

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;

상품상세

상품 상세 - 상품문의 리스트 변경하기

1. 상품문의 게시판 문의 상태표시 아이콘의 font-size(크기), line-height(행간), background(배경), color(색상), border-radius(둥근선), border(선) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 24줄

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;
}

1. 작성자 font-size(크기), color(색상), line-height(행간) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 29줄

css > goods > goods.css 29줄

.goods_board_qa_list li .item_list_summary .board_left .title a {
    color: #999;
    font-size: 12px;
}

1. 접수 아이콘 font-size(크기), color(색상), line-height(행간) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 27줄

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줄

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;
 
}

상품 상세 타이틀 및 상세 탭 변경하기

1. 상품 상세 타이틀의 font-size(크기), line-height(행간), text-align(정렬) 값을 변경해줍니다. 변경 위치 css > gd_layout.css 46줄

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;
}

1. info 상품 상세페이지 탭 폰트의 color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 387줄

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;
}

1. info 게시글 등록 수량 폰트의 font-size(크기), color(색상), line-height(행간) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 388줄

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;
}

상품 상세페이지 리스트 영역 변경하기

1. 상품명 폰트의 font-size(크기), color(색상) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 339줄

css > goods > goods.css 339줄

.goods_view .detail_info h3 {
    font-size: 18px;
    color: #333333;
}

1. 상품 할인가격 폰트의 font-size(크기), color(색상) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 346줄

css > goods > goods.css 346줄

.goods_view .detail_info .detail_info_top .price_box .price {
    font-size: 24px;
    color: #333333;
}

1. 상품 할인 전 가격 폰트의 color(색상) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 348줄

css > goods > goods.css 348줄

.goods_view .detail_info .detail_info_top .price_box del {
    color: #999999;
}

1. 상품 상세페이지 리스트 제목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;
}

1. 상품 상세페이지 리스트 내용 폰트의 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;
}

1. 공유하기, 찜하기 버튼의 font-size(크기), text-align(정렬), background(배경), color(색상), font-weight(굵기) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 331줄

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;
}

상품 상세 버튼 변경하기

1. 장바구니 버튼의 font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다. 변경 위치 css > gd_button.css 166줄

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;
}

1. 바로구매 버튼의 font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다. 변경 위치 css > gd_button.css 168줄

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;
}

주문결제

주문완료 페이지 변경하기 (사이즈/컬러/배경/테두리)

1. 주문번호 폰트의 font-size(크기), color(색상) 값을 변경해줍니다. 변경 위치 css > order > order.css 219줄

css > order > order.css 219줄

.order_end .order_end_box h2 {
    padding: 0 0 10px 0;
    font-size: 13px;
    color: #333333;
}

1. 입금금액 폰트의 color(색상) 값을 변경해줍니다. 변경 위치 css > gd_common.css 4줄

css > gd_common.css 4줄

.c_red, .c-red, .c_point {
    color: #ab3e55;
}

1. 구매안내 폰트의 color(색상) 값을 변경해줍니다. 변경 위치 css > order > order.css 229줄

css > order > order.css 229줄

.order_end .tx2 strong {
    color: #e38bac;
}

1. 박스 영역의 background(배경), border(선), border-radius(둥근선) 값을 변경해줍니다. 변경 위치 css > order > order.css 219줄

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;
}

장바구니 폰트 변경하기

1. 장바구니 상품명 폰트의 font-weight(굵기), color(색상) 값을 변경해줍니다. 변경 위치 css > order > order.css 52줄

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;
}

1. 장바구니 상품 옵션 폰트의 font-size(크기), line-height(행간), color(색상) 값을 변경해줍니다. 변경 위치 css > order > order.css 51줄

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;
}

1. 장바구니 상품 가격 폰트의 font-size(크기), color(색상), font-weight(굵기) 값을 변경해줍니다. 변경 위치 css > order > order.css 54줄

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;
}

1. 장바구니 항목 타이틀 폰트의 font-size(크기), color(색상) 값을 변경해줍니다. 변경 위치 css > order > order.css 85줄

css > order > order.css 85줄

.cart .my_buy dl dt {
    display: table-cell;
    width: 50%;
    font-size: 13px;
    color: #5e5e5e;
}

1. 장바구니 총 상품금액 폰트의 font-size(크기), color(색상) 값을 변경해줍니다. 변경 위치 css > order > order.css 86줄

css > order > order.css 86줄

.cart .my_buy dl dd {
    display: table-cell;
    width: 50%;
    text-align: right;
    font-size: 15px;
    color: #5e5e5e;
}

1. 장바구니 총 합계금액 폰트의 color(색상), font-size(크기) 값을 변경해줍니다. 변경 위치 css > order > order.css 88줄

css > order > order.css 88줄

.cart .my_buy dl.total dd {
    color: #e38bac;
    font-size: 17px;
}

장바구니 버튼 변경하기

1. 쿠폰적용 버튼의 text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다. 변경 위치 css > gd_button.css 222줄

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;
}

1. 옵션변경 버튼의 text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다. 변경 위치 css > gd_button.css 225줄

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;
}

1. 선택상품 삭제, 주문 버튼의 text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다. 변경 위치 css > gd_button.css 227줄

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;
}

1. 전체주문 버튼의 text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다. 변경 위치 css > gd_button.css 229줄

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;
}