📱2AM_Mobile 스킨 가이드
공통
스크롤 상단 고정메뉴 변경하기
✔️ 스크롤시 상단 메뉴 영역의 background(배경), opacity(투명도) 값을 변경합니다.
변경 위치 css > main > main.css 14줄
14 #header_wrap header.on {background: #222323; opacity: 0.95;}
푸터 변경하기
1. 푸터 TOP버튼 영역의 height(높이), border-bottom(아래 선), color(텍스트 색상), background(배경), font-size(크기), fone-weight(굵기) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 150줄
150 #footer footer .ft_btn_top a { display: inline-block; width: 100%; height: 38px; border-bottom: 1px solid #79569a; text-align: center; color: #c8a2ea; background: #573e6e; line-height: 42px; font-size: 13px; font-weight: bold;}
2-1. 쇼핑몰 정보 버튼(회사소개, 이용약관, 이용안내)의 color(색상), font-size(크기) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 146줄
146 #footer footer .ft_info2_box .ft_menu li a { display: block; padding: 0 0 15px 0; font-size: 11px; color: #c8a2ea; letter-spacing: -1px;}
2-2. 개인정보처리방침 버튼의 color(색상) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 147줄
147 #footer footer .ft_info2_box .ft_menu li a.privacy { color: #c8a2ea; font-weight: bold;}
3. 푸터 컨텐츠 정보 영역의 font-size(크기), color(색상) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 148줄
148 #footer footer .ft_info2_box .ft_address { float: right; width: 60%; font-size: 11px; color: #9d78c0; word-break: keep-all; line-height: 20px;}
4. 카피라잇 영역의 color(텍스트 색상), font-size(크기), border-top(위 선) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 157줄
157 #footer footer .ft_copy { padding: 11px 0 15px 0; border-top: 1px solid #79569a; color: #23ebe4; font-size: 12px; text-align: center; font-style: normal;}
슬라이드 메뉴 변경하기
1-1. 상단 영역의 background(배경색) 값을 변경합니다.
변경 위치 css > gd_layout.css 82줄
82 .nav_banner { overflow: hidden; margin: 0 auto; padding: 17px 15px 13px 17px; text-align: center; background: #8917f3;}
1-2. 로그인, 회원가입 폰트의 font-size(크기), color(색상) 값을 변경합니다.
변경 위치 css > gd_layout.css 87줄
87 .nav_banner .nav_login ul li a { display: inline-block; font-size: 13px; color: #e3c8fc;}
2-1. 아이콘 버튼 영역의 background(배경색) 값을 변경합니다.
변경 위치 css > gd_layout.css 95줄
95 .nav_link { background: #5e0bab;}
2-2. 아이콘 버튼 영역의 border-right(구분선) 값을 변경합니다.
변경 위치 css > gd_layout.css 97줄
97 .nav_link ul li { display: table-cell; width: 33.3%; padding: 15px 0 15px 0; border-right: 1px solid #8917f3; text-align: center;}
2-3. 아이콘 버튼명의 font-size(크기), color(색상) 값을 변경합니다.
변경 위치 css > gd_layout.css 99줄
99 .nav_link ul li a { display: block; padding: 36px 0 0 0; font-size: 13px; color: #ffffff;}
3. 카테고리버튼(CATEGORY)의 font-size(크기), color(색상), border-bottom(하단구분 선 색상) 값을 변경합니다.
변경 위치 css > gd_layout.css 113줄
113 .nav_tabmenu_box .nav_tab_list .nav_tabmenu_tit { display: block; margin: 15px 10px 0 10px; padding: 0 0 6px 0; font-size: 17px; color: #333333; font-weight: bold; background: url(../img/icon/icon_left_title_arrow.png) no-repeat 244px center; background-size: 12px 7px; border-bottom: 1px solid #8917f3;}
4-1-1. 1차 카테고리버튼(SALE, BEST 등)의 기본 상태 background(배경색) 값을 변경합니다.
변경 위치 css > proc > proc.css 5줄
5 .category_side > li { background: #8917f3;}
4-1-2. 1차 카테고리버튼(SALE, BEST 등)의 기본 상태 font-size(크기), color(색상) 값을 변경합니다.
변경 위치 css > proc > proc.css 9줄
9 .category_side > li a { position: relative; display: block; padding: 12px 30px 12px 15px; margin: 0 0 1px 0; font-size: 16px; color: #ffffff; word-break: break-all;}
4-2-1. 1차 카테고리버튼(SALE, BEST 등)의 선택상태 background(배경색) 값을 변경합니다.
변경 위치 css > proc > proc.css 6줄
6 .category_side > li.on { background: #510696;}
4-2-2. 1차 카테고리버튼(SALE, BEST 등)의 선택 상태 color(색상) 값을 변경합니다.
변경 위치 css > proc > proc.css 13줄
13 .category_side > li > a.on { color: #23ebe4;}
5-1. 2차 카테고리버튼(Christmas Sale, SEASON OFF 등)의 기본 상태 color(색상) 값을 변경합니다.
변경 위치 css > proc > proc.css 15줄
15 .category_side > li > ul > li > a { padding-left: 10px; margin: 0; color: #313131;}
5-2. 2차 카테고리버튼(Christmas Sale, SEASON OFF 등)의 border-bottom(구분선) 값을 변경합니다.
변경 위치 css > proc > proc.css 8줄
8 .category_side > li ul > li { border-bottom: 1px solid #eaeaea;}
6. 2차 카테고리버튼(Christmas Sale, SEASON OFF 등)의 선택 상태 background(배경색) 값을 변경합니다.
변경 위치 css > proc > proc.css 16줄
16 .category_side > li > ul > li > a.on { background: #eaeaea;}
7. 3차 카테고리버튼(WINTER, SUMMER 등)의 color(색상), font-size(크기) 값을 변경합니다.
변경 위치 css > proc > proc.css 12줄
12 .category_side > li > ul > li > ul > li > a { padding-left: 15px; font-size: 14px; color: #909090;}
8. PC화면, 고객센터 버튼의 background(배경색), color(색상), font-size(크기) 값을 변경합니다.
변경 위치 css > gd_layout.css 134줄
134 .ft_button_box ul li a { display: block; padding: 10px 0; background: #a6a6a6; color: #ffffff; font-size: 13px;}
로그인화면 버튼 변경하기
✔️ 로그인, 주문조회 버튼의 text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기), font-size(크기) 값을 변경해줍니다.
변경 위치 css > gd_button.css 35줄
35 .member_login_order_btn { display: block; width: 100%; height: 40px; margin: 5px 0 0 0; border: 1px solid #8917f3; font-size: 14px; background: #8917f3; text-align: center; color: #ffffff; font-weight: bold; font-size: 15px;}
메인
상단영역 변경하기(로고영역, 메뉴영역)
1. 2AM 스킨은 로고와 전체메뉴가 있는 가장 상단의 배경이 투명으로 설정되어 있습니다.
배경색을 삽입하려면 background(배경색) 값을 변경해줍니다.
none으로 되어 있는 부분을 컬러값으로 수정하면 됩니다.
변경 위치 css > main > main.css 13줄
13 #header_wrap header { background: none;}
2. 장바구니의 갯수가 노출되는 원의background(배경색)과 숫자 폰트의 color(색상) 값을 변경해줍니다.
변경 위치 css > gd_laout.css 35줄
35 #header_wrap header .header_box .cart_count { position: absolute; top: 10px; right: -5px; display: block; padding: 3px 6px 1px 6px; line-height: 15px; border-radius: 100%; color: #8917f3; background: #23ebe4; vertical-align: middle; font-size: 11px;}
3-1. 게시판메뉴의background(배경색) 값을 변경해줍니다.
변경 위치 css > main > main.css 17줄
17 .main .main_top_menu { display: table; width: 100%; background: #8917f3;}
3-2. 게시판메뉴 텍스트의color(색상), font-size(크기) 값을 변경해줍니다.
변경 위치 css > main > main.css 19줄
19 .main .main_top_menu li a { display: block; padding: 13px 0 13px 0; font-size: 14px; color: #ffffff;}
공지사항, 고객센터, 계좌정보 변경하기
1-1. 공지사항 영역의background(배경색) 값을 변경해줍니다.
변경 위치 css > main > main.css 20줄
20 .main .main_notice { display: table; width: 100%; margin: 0 auto; padding: 15px 0 15px 0; background: #490984;}
1-2. 공지사항 타이틀 font-size(폰트크기), font-weight(폰트굵기), color(색상) 값을 변경해줍니다.
변경 위치 css > main > main.css 21줄
21 .main .main_notice .tit { display: table-cell; width: 84px; font-size: 13px; font-weight: bold; color: #23ebe4; text-align: center;}
1-3. 공지사항 내용의color(색상) 값을 변경해줍니다.
변경 위치 css > main > main.css 25줄
25 .main .main_notice ul li a { display: block; width: 100%; color: #ffffff;}
2. 고객센터, 계좌정보 타이틀 영역(CS CENTER, BANK INFO)의font-weigh(폰트굵기), font-size(폰트크기) 값을 변경해줍니다.
변경 위치 css > main > main.css 60줄
60 .main .main_info_box .main_info dl dt { display: table-cell; width: 30%; font-size: 13px; font-weight: bold; vertical-align: top;}
3. 전화번호의color(색상), font-weight(폰트굵기), font-size(폰트사이즈) 값을 변경해줍니다.
변경 위치 css > main > main.css 65줄
65 .main .main_info dl dd p.phone a { font-size: 22px; color: #8917f3; font-weight: bold; line-height: 22px;}
4. 영업시간의color(색상), font-size(폰트크기) 값을 변경해줍니다.
변경 위치 css > main > main.css 67줄
67 .main .main_info dl dd p.business_hours { font-size: 11px; color: #666;}
5. 예금주 텍스트font-size(폰트크기) 값을 변경해줍니다.
변경 위치 css > main > main.css 70줄
70 .main .main_info dl dd .account_holder { font-size: 14px;}
6. 계좌번호 텍스트font-size(폰트크기) 값을 변경해줍니다.
변경 위치 css > main > main.css 61줄
61 .main .main_info_box .main_info dl dd { display: table-cell; width: 70%; font-size: 11px;}
상품 리스트 스타일 변경하기
1. 상품리스트 이미지의 border(라인) 값을 변경해줍니다.
변경 위치 css > goods > list > list_01.css 10줄
10 .goods_prd_item2 .goods_prd_img .img_box .img img { width: 100%; border: 1px solid #e5e5e5; box-sizing: border-box;}
2. 상품리스트 상품명 폰트의 color(색상), font-size(크기) 값을 변경해줍니다.
변경 위치 css > goods > list > list_01.css 17줄
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;}
3. 상품리스트 가격 폰트의 color(색상) 값을 변경해줍니다.
변경 위치 css > goods > list > list_01.css 30줄
30 .goods_prd_item2 .goods_prd_content .goods_info_list li.price .c_price { color: #8917f3;}
진열타입 타이틀과 더보기 버튼 변경하기
1. 타이틀의 font-size(크기), color(색상), font-weight(굵기) 값을 변경해줍니다.
변경 위치 css > proc > proc.css 56줄
56 ._goods_display_main h3 { position: relative; display: block; padding: 8px 0 0 10px; font-size: 16px; color: #181818; text-align: center; font-weight: bold;}
2. 더보기 버튼의 background(배경), font-size(크기), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.
변경 위치 css > gd_button.css 298줄
298 .main_more_btn2 { display: inline-block; padding: 4px 8px 2px 8px; text-align: center; background: #ffffff; font-size: 12px; border: 1px solid #9f9f9f; color: #494949; font-weight: bold; box-sizing: border-box; border-radius: 2px;}
상품상세
상품상세 상단 배경 변경하기
✔️ 상단 메뉴 영역의 background(배경) 값을 변경합니다.
변경 위치 css > gd_layout.css 12줄
12 #header_wrap header { background: #8917f3;}
상단 제품 정보 영역 변경하기
1. 상품명 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.
변경 위치 css > gd_button.css 339줄
339 .goods_view .detail_info h3 { font-size: 18px; color: #333333;}
2. 상품 할인가격 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.
변경 위치 css > gd_button.css 346줄
346 .goods_view .detail_info .detail_info_top .price_box .price { font-size: 24px; color: #333333;}
3. 상품 할인 전 가격 폰트의 color(색상) 값을 변경해줍니다.
변경 위치 css > gd_button.css 348줄
348 .goods_view .detail_info .detail_info_top .price_box del { color: #999999;}
4. 상품 상세페이지 리스트 제목(배송정보 등) font-size(크기), color(색상) 값을 변경해줍니다.
변경 위치 css > gd_button.css 361줄
361 .goods_view .detail_info .detail_sub_info dl dt { display: table-cell; width: 25%; font-size: 12px; color: #888888;}
5. 상품 상세페이지 리스트 내용 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.
변경 위치 css > gd_button.css 362줄
362 .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(굵기) 값을 변경해줍니다.
변경 위치 css > gd_button.css 331줄
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. 장바구니 버튼background(배경색), color(색상),font-size(폰트크기), border(테두리색상) 값을 변경해줍니다.
변경 위치 css > gd_button.css 166줄
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;}
2. 바로구매 버튼background(배경색), color(색상),font-size(폰트크기), border(테두리색상) 값을 변경해줍니다.
변경 위치 css > gd_button.css 168줄
168 .detail_order_btn { display: block; width: 100%; padding: 10px 0 10px 0; font-size: 16px; text-align: center; background: #8917f3; border: 1px solid #8917f3; color: #ffffff; font-weight: bold; box-sizing: border-box;}
구매옵션 영역 변경하기
1. 상품명의font-weight(굵기), font-size(크기) 값을 변경해줍니다.
color값을 추가하여 색상을 변경할 수 있습니다.
변경 위치 css > gd_common.css 217줄
217 .view_order_goods dl dt { font-size: 12px; font-weight: bold;}
2. 상품금액의font-weight(굵기), font-size(크기) 값을 변경해줍니다.
color값을 추가하여 색상을 변경할 수 있습니다.
변경 위치 css > gd_common.css 228줄
228 .view_order_goods dl dd .price_info .right .price { padding: 5px 0 0 0; font-size: 15px; font-weight: bold;<strike></strike> text-align: right;}
3. 총 상품금액의font-weight(굵기), font-size(크기) 값을 변경해줍니다.
color값을 추가하여 색상을 변경할 수 있습니다.
변경 위치 css > gd_common.css 209줄
209 .total_price_box ul li dl dd { display: table-cell; font-size: 15px; font-weight: bold; text-align: right; vertical-align: middle;}
상품 상세 탭 변경하기
1. 상품 상세페이지 탭 폰트의 color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 387줄
387 .goods_view .detail_btm_tab_menu_box .detail_btm_tab_menu ul li a { display: inline-block; width: 100%; color: #484848; font-size: 13px; line-height: 13px; font-weight: bold; text-align: center;}
2. 게시글 등록 수량 폰트의 font-size(크기), color(색상), line-height(행간) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 388줄
388 .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: #8917f3; line-height: 11px;}
3. 현재위치 탭표시 라인의 border-bottom(선) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 393줄
393 .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 #8917f3;}
주문결제
장바구니화면 폰트 변경하기
1. 장바구니 상품명 폰트의 font-weight(굵기), color(색상) 값을 변경해줍니다.
변경 위치 css > order > order.css 52줄
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;}
2. 장바구니 상품 옵션 폰트의 font-size(크기), line-height(행간), color(색상) 값을 변경해줍니다.
변경 위치 css > order > order.css 51줄
51 .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(굵기) 값을 변경해줍니다.
변경 위치 css > order > order.css 54줄
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: #8917f3; font-weight: bold;}
4. 장바구니 항목 타이틀 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.
변경 위치 css > order > order.css 85줄
85 .cart .my_buy dl dt { display: table-cell; width: 50%; font-size: 13px; color: #5e5e5e;}
5. 장바구니 총 상품금액 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.
변경 위치 css > order > order.css 86줄
86 .cart .my_buy dl dd { display: table-cell; width: 50%; text-align: right; font-size: 15px; color: #5e5e5e;}
6. 장바구니 총 합계금액 폰트의 color(색상), font-size(크기) 값을 변경해줍니다.
변경 위치 css > order > order.css 88줄
88 .cart .my_buy dl.total dd { color: #8917f3; font-size: 17px;}
장바구니화면 버튼 변경하기
1. 쿠폰적용 버튼의 text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.
변경 위치 css > gd_button.css 222줄
222 .cart_coupon_apply { display: inline-block; padding: 5px 5px 5px 5px; text-align: center; background: #8917f3; border: 1px solid #8917f3; color: #ffffff; font-weight: bold; box-sizing: border-box; border-radius: 2px;}
2. 옵션변경 버튼의 text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.
변경 위치 css > gd_button.css 225줄
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;}
3. 선택상품 삭제, 주문 버튼의 text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.
변경 위치 css > gd_button.css 227줄
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;}
4. 전체주문 버튼의 text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.
변경 위치 css > gd_button.css 229줄
229 .cart_all_order_btn { display: inline-block; width: 100%; padding: 10px 0 10px 0; text-align: center; background: #8917f3; border: 1px solid #8917f3; color: #ffffff; font-weight: bold; box-sizing: border-box; font-size: 14px;}
Last updated
