📱Mygreek_Mobile 스킨 가이드
Last updated
Last updated
공통
컬러코드값 확인 Mygreek 스킨에 적용되어 있는 기본 컬러 코드 #0CC472을 확인합니다.
디자인 스킨 리스트 접속 | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트
스타일시트/CSS 변경 | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈합니다.
ctrl+F 검색 후 수정하기 스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 #0CC472를 검색하여 원하는 포인트 컬러 코드로 변경합니다. 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(색상), text-align(정렬), letter-spacing(자간) 값을 변경해줍니다.
스타일시트 > gd_layout.css | css/gd_layout.css
#footer footer .ft_info2_box .ft_menu li a {
display: block;
padding: 18px 0 18px 0;
font-size: 11px;
color: #d1d1d1;
text-align: center;
letter-spacing: -1px;
}2. 푸터 메뉴버튼의 color(색상), font-weight(굵기) 값을 변경해줍니다.
스타일시트 > gd_layout.css | css/gd_layout.css
#footer footer .ft_info2_box .ft_menu li a.privacy {
color: #fff;
font-weight: bold;
}3. 푸터 정보 부분의 text-align(정렬), font-size(크기), color(색상) 값을 변경해줍니다.
스타일시트 > gd_layout.css | css/gd_layout.css
#footer footer .ft_info2_box .ft_address {
padding:0px;
text-align:left;
font-size:12px;
color:#e0e0e0;
word-break:keep-all;
}4. 푸터 카피라잇 영역의 color(색상), font-size(크기), text-align(정렬) 값을 변경해줍니다.
스타일시트 > gd_layout.css | css/gd_layout.css
#footer footer .ft_copy {
padding:15px 0 30px 0;
color:#e0e0e0;
font-size:11px;
text-align:left;
font-style:normal;
}1. 고객센터, PC화면 버튼의 background(배경), color(색상), font-size(크기) 값을 변경해줍니다.
스타일시트 > gd_layout.css | css/gd_layout.css
#footer footer .ft_button_box ul li a {
display:block;
padding:10px 0;
background:#484848;
color:#aeaeae;
font-size:13px;
border-radius:20px;
}1. GNB영역의 border-bottom(선) 값을 변경해줍니다.
> gd_layout.css | css/gd_layout.css
#header_wrap header .header_box {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 12px;
border-bottom:1px solid #000;
height: 62px;
}2. 장바구니 담긴상품 수량의 배경 background(배경) 값을 변경해줍니다.
> gd_layout.css | css/gd_layout.css
#header_wrap header .header_box .cart_count {
position: absolute;
top: 8px;
right: 0;
display: block;
padding: 3px 6px 1px 6px;
line-height: 15px;
border-radius: 100%;
color: #fff;
background: #0CC472;
vertical-align: middle;
font-size: 9px;
}1. 상단배너의 font-size(크기), color(색상) 값을 변경해줍니다.
스타일시트 > gd_layout.css | css/gd_layout.css
.nav_banner .nav_login ul li a {
display: inline-block;
font-size: 15px;
color: #222222;
}2. 아이콘 메뉴 영역의 font-size(크기), color(색상) 값을 변경해줍니다.
스타일시트 > gd_layout.css | css/gd_layout.css
.nav_link ul li a {
display: block;
padding: 36px 0 0 0;
font-size: 15px;
color: #888;
}3. 탭버튼 활성화 시 background(배경), color(색상), font-weight(굵기) 값을 변경해줍니다.
스타일시트 > gd_layout.css | css/gd_layout.css
.nav_tabmenu_box .nav_tabmenu li.on span {
background: #ab3e55;
color: #fff;
font-weight: bold;
}4. 탭버튼 비활성화 시 background(배경), color(색상) 값을 변경해줍니다.
스타일시트 > gd_layout.css | css/gd_layout.css
.nav_tabmenu_box .nav_tabmenu li span {
display: block;
padding: 10px 0 10px 0;
background: #e8e8e8;
color: #acacac;
}5. 메뉴 텍스트 스타일 font-size(크기), color(색상) 값을 변경해줍니다.
proc > proc.css | css/proc/proc.css
.category_side > li a {
position: relative;
display: block;
padding: 12px 0 12px 0;
font-size: 16px;
color: #262626;
}메뉴 폰트 font-weight(굵기) 값을 변경해줍니다.
proc > proc.css | css/proc/proc.css
.category_side > li > a {
font-weight: bold;
}6. 메뉴 폰트 선택 시 color(색상) 값을 변경해줍니다.
proc > proc.css | css/proc/proc.css
.category_side > li > a.on {
color: #0CC472;
}메인
1. 고객센터 타이틀의 font-size(크기), font-weight(굵기), border-bottom(선) 값을 변경해줍니다.
main > main.css | css/main/main.css
.main .main_info_box .main_info dl dt {
font-size: 13px;
margin: 0 5px;
font-weight: bold;
border-bottom: 1px solid #999;
}2. 고객센터 전화번호 font-size(크기), color(색상) 값을 변경해줍니다.
main > main.css | css/main/main.css
.main .main_info dl dd p.phone a {
font-size: 22px;
color: #0CC472;
}3. 고객센터 이용시간 font-size(크기), color(색상) 값을 변경해줍니다.
main > main.css | css/main/main.css
.main .main_info dl dd p.business_hours {
font-size: 11px;
color: #666;
}1. 상품리스트 이미지의 border(라인) 값을 변경해줍니다.
list > list_01.css | css/goods/list/list_01.css
.goods_prd_item2 .goods_prd_img .img_box .img img {
width: 100%;
border: 1px solid #e5e5e5;
box-sizing: border-box;
}2. 상품리스트 상품명 폰트의 color(색상), font-size(크기) 값을 변경해줍니다.
list > list_01.css | css/goods/list/list_01.css
.goods_prd_item2 .goods_prd_content .goods_info_list li {
padding: 1px 0 1px 0;
word-break: break-all;
color: #3e3d3c;
font-size: 14px;
}3. 상품리스트 가격 폰트의 color(색상) 값을 변경해줍니다.
main > list_01.css | css/goods/list/list_01.css
.goods_prd_item2 .goods_prd_content .goods_info_list li.price .c_price {
color: #000;
}1. 타이틀의 font-size(크기), color(색상), border-bottom(선), font-weight(굵기) 값을 변경해줍니다.
proc > proc.css | css/proc/proc.css
._goods_display_main h3 {
position:relative;
display:block;
padding:40px 0px 0px 16px;
font-size:24px;
color:#181818;
/* border-bottom:1px solid #f3f2f2; */
text-align:left;
font-weight:400px;
}2. 더보기 버튼의 background(배경), font-size(크기), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.
스타일시트 > gd_button.css | css/gd_button.css
.main_more_btn2 {
display: block;
width: 70px;
padding: 2px 8px;
text-align: center;
background: #000;
font-size: 12px;
font-weight: 600;
/* border: 1px solid #9f9f9f; */
color: #fff;
box-sizing: border-box;
position: absolute;
top: 50px;
right: 0px;
}상품상세
1. 상품 후기 게시판 타이틀의 background(배경), border-bottom(선) 값을 변경해줍니다.
스타일시트 > gd_plus_review.css | css/gd_plus_review.css
.plus_review_container .plus_review_top_box {
display: table;
width: 100%;
padding: 2px 0;
background: #f2f3f3;
border-bottom: 1px solid #e2e2e2;
}2. 평가, 리뷰수 타이틀 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.
스타일시트 > gd_plus_review.css | css/gd_plus_review.css
.plus_review_container .plus_review_top_box dl dt {
display: table-cell;
font-size: 13px;
color: #606060;
vertical-align: middle;
}3. 평가, 리뷰 갯수 폰트의 font-weight(굵기), font-size(크기), color(색상) 값을 변경해줍니다.
스타일시트 > gd_plus_review.css | css/gd_plus_review.css
.plus_review_container .plus_review_top_box dl dd {
display: table-cell;
padding: 0 8px 0 8px;
font-weight: bold;
font-size: 24px;
color: #fa2828;
vertical-align: middle;
}4. 리뷰등록 버튼의 background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.
스타일시트 > gd_plus_review.css | css/gd_plus_review.css
.plus_reivew_write_btn {
display: inline-block;
width: 80px;
margin: 0 10px 0 0;
padding: 4px 0 4px 0;
text-align: center;
background: #3e3d3c;
border: 1px solid #3e3d3c;
color: #ffffff;
font-weight: bold;
box-sizing: border-box;
}5. 후기작성 버튼의 text-align(정렬), color(색상), font-size(크기), font-weight(굵기), background(배경), border(선) 값을 변경해줍니다.
스타일시트 > gd_button.css | css/gd_button.css
.detail_write_btn {
display:inline-block;
width:100%;
padding:10px 0 10px 0;
text-align:center;
color:#0CC472;
font-size:15px;
font-weight:bold;
background:#ffffff;
border:1px solid #0CC472;
box-sizing:border-box;
}6. 상품평 더보기 버튼의 text-align(정렬), color(색상), font-size(크기), background(배경) 값을 변경해줍니다.
스타일시트 > gd_button.css | css/gd_button.css
.detail_more_btn {
display:inline-block;
width:100%;
padding:10px 0 10px 0;
text-align:center;
color:#494949;
font-size:15px;
background:#ffffff;
border:1px solid #9f9f9f;
font-weight:bold;
}1. 옵션 레이어의 기본 옵션 폰트의 font-size(크기), color(색상), text-align(정렬), background(배경) 값을 변경해줍니다.
스타일시트 > gd_common.css | css/gd_common.css
.layer_option .ly_buy_info .ly_opt .bn_opt {
display:block;
position:relative;
width:100%;
height:33px;
border:1px solid #c7c7c7;
font-size:13px;
color:#777;
text-align:left;
text-indent:11px;
z-index:100;
background:#fff url('../img/icon/icon_bg_select.png') no-repeat 100% 0;
background-size:400px 31px;
}2. 옵션 레이어 활성화 시 border(선) 값을 변경해줍니다.
스타일시트 > gd_common.css | css/gd_common.css
.layer_option .ly_buy_info .ly_opt .bn_opt.selected {
border: 1px solid #999;
}3. 옵션 레이어 옵션 폰트의 border-bottom(선), font-weight(굵기), font-size(크기), color(색상) 값을 변경해줍니다.
스타일시트 > gd_common.css | css/gd_common.css
.layer_option .ly_buy_info .ly_opt li .optbx .optlst li {
position: relative;
min-height: 42px;
text-indent: 10px;
border-bottom: 1px solid #c7c7c7;
font-weight: bold;
font-size: 13px;
color: #555;
line-height: 42px;
vertical-align: middle;
}1. 옵션 레이어 쿠폰적용 버튼의 background(배경), color(색상), border-radius(둥근선), border(선) 값을 변경해줍니다.
스타일시트 > gd_button.css | css/gd_button.css
.coupon_apply_btn {
display: inline-block;
height: 21px;
margin: 0 0 0 5px;
padding: 0 6px;
background: #000;
color: #ffffff;
border-radius: 4px;
border: 1px solid #000;
}2. 상품 가격 금액 폰트의 font-size(크기), font-weight(굵기), text-align(정렬) 값을 변경해줍니다.
스타일시트 > css/gd_common.css | css/gd_common.css
.view_order_goods dl dd .price_info .right .price {
padding: 5px 0 0 0;
font-size: 15px;
font-weight: bold;
text-align: right;
}3. 상품 가격 제목 폰트의 font-size(크기), text-align(정렬) 값을 변경해줍니다.
스타일시트 > css/gd_common.css | css/gd_common.css
.total_price_box ul li dl dt {
display: table-cell;
width: 90px;
font-size: 13px;
text-align: left;
vertical-align: middle;
}4. 상품 가격 금액 폰트의 font-size(크기), font-weight(굵기), text-align(정렬) 값을 변경해줍니다.
스타일시트 > css/gd_common.css | css/gd_common.css
.total_price_box ul li dl dd {
display: table-cell;
font-size: 15px;
font-weight: bold;
text-align: right;
vertical-align: middle;
}1. 상품문의 게시판 문의 상태표시 아이콘의 font-size(크기), line-height(행간), background(배경), color(색상), border-radius(둥근선), border(선) 값을 변경해줍니다.
goods > goods.css | css/goods/goods.css
.goods_board_qa_list li .item_list_summary .board_left .author_box .ico_ans1 {
display: inline-block;
padding: 5px 5px 3px 5px;
font-size: 10px;
line-height: 12px;
background: #ffffff;
color:#0CC472;
border-radius: 15px;
border: 1px solid #0CC472;
}2. 문의 제목 폰트의 font-size(크기), color(색상), line-height(행간) 값을 변경해줍니다.
goods > goods.css | css/goods/goods.css
.goods_board_qa_list li .item_list_summary .board_left .title a {
font-size: 14px;
color: #333333;
line-height: 22px;
word-break: break-all;
}1. 비밀번호 인증 레이어의 height(높이), background(배경), border(선) 값을 변경해줍니다.
board > board.css | css/board/board.css
.cite_layer .wrap {
position: relative;
height: 190px;
background: #ffffff;
border: 1px solid #555555;
}2. 비밀번호 인증 타이틀의 height(높이), background(배경), border(선) 값을 변경해줍니다.
board > board.css | css/board/board.css
.cite_layer .wrap h4 {
height: 27px;
padding: 13px 0 0 17px;
background: #f4f4f4;
color: #222222;
}3. 비밀번호 인증 레이어 확인 버튼의 color(색상), border-radius(둥근선), background(배경) 값을 변경해줍니다.
스타일시트 > gd_button.css | css/gd_button.css
.d_pw_confirm_btn {
display:inline-block;
padding:5px 15px 5px 15px;
color:#ffffff;
border:1px solid #0CC472;
border-radius:3px;
background:#0CC472;
}1. 상품문의 내용 폰트의 color(색상) 값을 변경해줍니다.
goods > goods.css | css/goods/goods.css
.goods_board_view .contents_holder {
table-layout: fixed;
color: #777777;
word-break: break-all;
word-wrap: break-word;
}2. 수정, 삭제 버튼의 color(색상), font-size(크기), border(선), background(배경), border-radius(둥근선) 값을 변경해줍니다.
스타일시트 > gd_button.css | css/gd_button.css
.d_comment_modify_btn {
display: inline-block;
padding: 2px 10px;
color: #333333;
font-size: 11px;
border: 1px solid #c7c7c7;
background: #ffffff;
border-radius: 2px;
}1. 상품 상세 타이틀의 font-size(크기), line-height(행간), text-align(정렬) 값을 변경해줍니다.
스타일시트 > gd_layout.css | css/gd_layout.css
.sub_top h2 {
overflow: hidden;
display: block;
width: 100%;
padding: 12px 0;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 15px;
line-height: 15px;
text-align: center;
}2. info 레이어 영역의 font-size(크기), color(색상), line-height(행간), font-weight(굵기) 값을 변경해줍니다.
goods > goods.css | css/goods/goods.css
.goods_view .detail_tab_info .ly_info li a {
position: relative;
display: block;
width: 100%;
height: 36px;
font-size: 13px;
color: #222222;
line-height: 36px;
font-weight: bold;
}1. 상품 상세페이지 탭 폰트의 color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬) 값을 변경해줍니다.
goods > goods.css | css/goods/goods.css
.goods_view .detail_btm_tab_menu_box .detail_btm_tab_menu ul li a {
display: inline-block;
width: 100%;
color: #000;
font-size: 13px;
line-height: 13px;
font-weight: bold;
text-align: center;
}2. 게시글 등록 수량 폰트의 font-size(크기), color(색상), line-height(행간) 값을 변경해줍니다.
goods > goods.css | css/goods/goods.css
.goods_view .detail_btm_tab_menu_box .detail_btm_tab_menu ul li a span {
display: block;
padding: 2px 0 0 0;
font-size: 11px;
color: #0CC472;
line-height: 11px;
}3. 현재위치 탭표시 라인의 border-bottom(선) 값을 변경해줍니다.
goods > goods.css | css/goods/goods.css
.goods_view .detail_btm_tab_menu_box .detail_btm_tab_menu ul li.selected {
padding: 1px 0 0 0;
height: 49px;
border-bottom: 2px solid #000;
}1. 장바구니 버튼의 font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.
스타일시트 > gd_button.css | css/gd_button.css
.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;
}2. 바로구매 버튼의 font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.
스타일시트 > gd_button.css | css/gd_button.css
.detail_order_btn {
display: block;
width: 100%;
padding: 10px 0 10px 0;
font-size: 16px;
text-align: center;
background: #0CC472;
border: 1px solid #0CC472;
color: #ffffff;
font-weight: bold;
box-sizing: border-box;1. 상품명 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.
goods > goods.css | css/goods/goods.css
.goods_view .detail_info h3 {
font-size: 18px;
color: #333333;
word-break: break-all;
}2. 상품 할인가격 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.
goods > goods.css | css/goods/goods.css
.goods_view .detail_info .detail_info_top .price_box .price {
font-size: 20px;
color: #333333;
}3. 상품 할인 전 가격 폰트의 color(색상) 값을 변경해줍니다.
goods > goods.css | css/goods/goods.css
.goods_view .detail_info .detail_info_top .price_box del {
color: #999999;
}4. 상품 상세페이지 리스트 제목font-size(크기), color(색상) 값을 변경해줍니다.
goods > goods.css | css/goods/goods.css
.goods_view .detail_info .detail_sub_info dl dt {
display: table-cell;
width: 25%;
font-size: 12px;
color: #888888;
}5. 상품 상세페이지 리스트 내용 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.
goods > goods.css | css/goods/goods.css
.goods_view .detail_info .detail_sub_info dl dd {
display: table-cell;
width: 75%;
font-size: 12px;
color: #333333;
}6. 공유하기, 찜하기 버튼의 font-size(크기), text-align(정렬), background(배경), color(색상), font-weight(굵기) 값을 변경해줍니다.
goods > goods.css | css/goods/goods.css
.goods_view .share_btn_box ul li button {
display:block;
margin:0 auto;
padding:16px 0;
font-size:13px;
text-align:center;
background:none;
border:none;
color:#333333;
font-weight:bold;
}
주문결제
1. 쿠폰적용 버튼의 text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.
스타일시트 > gd_button.css | css/gd_button.css
.cart_coupon_apply {
display:inline-block;
padding:4px 8px;
text-align:center;
background:#000;
border:1px solid #000;
color:#ffffff;
font-weight:normal;
box-sizing:border-box;
border-radius:4px;
}2. 옵션변경 버튼의 text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.
스타일시트 > gd_button.css | css/gd_button.css
.cart_option_modify {
display:inline-block;
padding:4px 8px;
text-align:center;
background:#000;
border:1px solid #000;
color:#ffffff;
font-weight:normal;
box-sizing:border-box;
border-radius:4px;
}3. 선택상품 삭제, 주문 버튼의 text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.
스타일시트 > gd_button.css | css/gd_button.css
.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;
}4. 전체주문 버튼의 text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.
스타일시트 > gd_button.css | css/gd_button.css
.cart_all_order_btn {
display:inline-block;
width:100%;
padding:10px 0 10px 0;
text-align:center;
background:#0CC472;
border:1px solid #0CC472;
color:#ffffff;
font-weight:bold;
box-sizing:border-box;
font-size:14px;
}1. 장바구니 상품명 폰트의 font-weight(굵기), color(색상) 값을 변경해줍니다.
order > order.css | css/order/order.css
.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;
}2. 장바구니 상품 옵션 폰트의 font-size(크기), line-height(행간), color(색상) 값을 변경해줍니다.
order > order.css | css/order/order.css
.cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody p {
font-size: 12px;
line-height: 16px;
color: #9d9d9d;
}3. 장바구니 상품 가격 폰트의 font-size(크기), color(색상), font-weight(굵기) 값을 변경해줍니다.
order > order.css | css/order/order.css
.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:#000;
font-weight:bold;
}4. 장바구니 항목 타이틀 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.
order > order.css | css/order/order.css
.cart .my_buy dl dt {
display: table-cell;
width: 50%;
font-size: 13px;
color: #5e5e5e;
}5. 장바구니 총 상품금액 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.
order > order.css | css/order/order.css
.cart .my_buy dl dd {
display: table-cell;
width: 50%;
text-align: right;
font-size: 15px;
color: #5e5e5e;
}6. 장바구니 총 합계금액 폰트의 color(색상), font-size(크기) 값을 변경해줍니다.
order > order.css | css/order/order.css
.cart .my_buy dl.total dd {
color: #000;
font-size: 17px;
}