🖥️2AM_PC 스킨 가이드
Last updated
Last updated
공통
컬러코드값 확인 2AM 스킨에 적용되어 있는 기본 컬러 코드 #8917f3을 확인합니다.
관리자 > 디자인 메뉴 접속
스타일시트/CSS 변경 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈합니다.
ctrl+F 검색 후 수정하기 스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 #8917f3를 검색하여 원하는 포인트 컬러 코드로 변경합니다. css/main/main.css (총 1개) css/mypage/mypage.css (총 11개) css/member/member.css (총 18개) css/event/event.css (총 6개) css/board/board.css (총 13개) css/order/order.css (총 7개) css/layout/layout.css (총 20개) css/goods/list.css (총 4개) css/goods/goods.css (총 13개) css/common/layer/layer.css (총 16개) css/common/common.css (총 18개) css/service/service.css (총 7개) css/button.css (총 52개)
마우스 오버시 컬러 #6908c3도 검색하여 원하는 포인트 컬러 코드로 변경합니다.
✔️상단 메뉴 영역의 background(배경색) 변경
변경 위치 css > layout > layout.css 8줄
8 #header_warp{background:#8917f3; z-index:101;}
✔️상단 메뉴 영역의 color(색상), font-size(크기) 값 변경
변경 위치 css > layout > layout.css 44줄
44 .top_member_box > li a{ display:inline-block; padding:4px 0 4px 19px; color:#e1c1ff; font-size:13px;}
✔️장바구니 담긴상품 수량 폰트의 color(색상) 값 변경
변경 위치 css > layout > layout.css 47줄
47 .top_member_box > li strong {color: #23ebe4;}
✔️ 전체보기 메뉴의 background-color(배경) 값 변경
변경 위치 css > layout > layout.css 165줄
165 .btn_all_menu_open {position: absolute; top: -1px; left: 0px; background-color: #23ebe4;}
✔️ 카테고리 메뉴의 border-top(위 선), border-bottom(아래 선) 선굵기, 색상 변경
변경 위치 css > layout > layout.css 134줄
134 #header .gnb {position: relative; /* font-size: 0; */ border-top: 1px solid #4a058a; border-bottom: 1px solid #4a058a; box-sizing: border-box;}
✔️ 카테고리 메뉴의 기본 font-size(크기), font-weight(굵기), text-align(정렬) 값 변경
변경 위치 css > layout > layout.css 205줄
205 #header .gnb .depth0 > li > a {display: inline-block; padding: 0 55px 0 10px; font-size: 14px; font-weight: bold; text-align: left; line-height: 49px; color: #fff; min-width: 60px;}
✔️ 카테고리 메뉴의 마우스 오버 시 color(색상) 변경
변경 위치 css > layout > layout.css 206줄
206 #header .gnb .depth0 > li > a:hover, #header .gnb .depth0 > li > a.active {color: #23ebe4;}
✔️ 2차 카테고리의 font-size(크기), color(색상) 값 변경
변경 위치 css > layout > layout.css 216줄
216 #header .gnb .depth1 li a {display: block; /* width: 100%; */ padding: 5px 10px 7px 19px; font-size: 12px; color: #ffffff;}
✔️ 2차 카테고리의 background(배경) 값 변경
변경 위치 css > layout > layout.css 220줄
220 #header .gnb .depth1 {display: none; position: absolute; top: 49px; left: 0; width: 160px; background: #340560; z-index: 100;}
✔️ 3차 카테고리의 background(배경) 값 변경
변경 위치 css > layout > layout.css 221줄
221 #header .gnb .depth2 {display: none; position: absolute; top: 0; left: 160px; width: 160px; background: #480d7f;}
✔️상단 메뉴 영역의 background(배경색) 변경
변경 위치 css > layout > layout.css 142줄
142 .side_cont { position: absolute; top: 0px; left: 0px; width: 250px; min-height: 100%; background: #4c058e; z-index: 150;}
✔️ALL CATEGORY background(배경색), color(색상) 값 변경
변경 위치 css > layout > layout.css 149줄
149 .gnb .gnb_all strong {display: table-cell; width: 170px; height: 51px; padding: 0 0 0 30px; font-size: 14px; vertical-align: middle; background: #8917f3; color: #ffffff;}
✔️전체보기 메뉴 아이콘의 background(배경색) 값 변경
변경 위치 css > layout > layout.css 156줄
156 .btn_all_menu_open {position: absolute; top: 0px; right: 0; background-color: #23ebe4;}
✔️ 1차 카테고리 메뉴의 font-size(크기), font-weight(굵기), text-align(정렬) 값 변경
변경 위치 css > layout > layout.css 189줄
189 .sub_menu_box .sub_depth0 > li > a {display: block; padding: 20px 0 20px 10px; font-size: 14px; font-weight: bold; text-align: left; color: #ffffff;}
✔️ 1차 카테고리 메뉴의 마우스 오버시 color(색상) 값 변경
변경 위치 css > layout > layout.css 190줄
190 .sub_menu_box .sub_depth0 > li > a.active {background: url(../../img/common/btn/btn_gnb_list_over.png) repeat-x left center; color: #23ebe4;}
✔️ 2차 카테고리의 font-size(크기), color(색상) 값 변경
변경 위치 css > layout > layout.css 204줄
204 .sub_menu_box .sub_depth1 li a {display: block; padding: 8px 10px 10px 19px; font-size: 12px; color: #fff;}
✔️ 2차 카테고리의 background(배경) 값 변경
변경 위치 css > layout > layout.css 208줄
208 .sub_menu_box .sub_depth1 {display: none; position: absolute; top: 0px; left: 249px; min-width: 160px; background: #340560; z-index: 100;}
✔️ 3차 카테고리의 background(배경) 값 변경
변경 위치 css > layout > layout.css 209줄
209 .sub_menu_box .sub_depth2 {display: none; position: absolute; top: -10px; left: 160px; min-width: 160px; background: #480d7f;}
✔️ 하단 메뉴(LOGIN, JOIN, 장바구니 등)의 background(배경색상) 값 변경
변경 위치 css > layout > layout.css 40줄
40 .header_top_cont {background: #3d0571; padding: 30px 0 30px 30px; margin-top: 50px;}
✔️ 상단 메뉴(LOGIN, JOIN, 장바구니 등)의 color(색상), font-size(크기) 값 변경
변경 위치 css > layout > layout.css 44줄
44 .top_member_box > li a {display: inline-block; padding: 0; color: #e1c1ff; font-size: 13px; letter-spacing: -.5px;}
✔️ 장바구니 담긴상품 수량 폰트의 color(색상) 값 변경
변경 위치 css > layout > layout.css 47줄
47 .top_member_box > li strong {color: #23ebe4;}
✔️ 검색창 인풋박스 입력 폰트의 font-size(크기) 값 변경
변경 위치 css > layout > layout.css 84줄
84 #header .top_search .top_text_cont .top_srarch_text { width: 100%; height: 30px; padding: 0 45px 0 15px; box-sizing: border-box; background: transparent; color: #23ebe4;}
✔️ 검색창 인풋박스에 노출되는 키워드 color(색상) 값 변경
변경 위치 css > layout > layout.css 85줄
85 #header .top_search .top_text_cont .top_srarch_text::placeholder{color:#23ebe4;}
✔️ 최근검색어 폰트의 font-size(크기), font-weight(굵기) 값 변경
변경 위치 css > layout > layout.css 94줄
94 .recent_box dt {font-size: 13px; font-weight: bold;}
✔️ 추천상품 폰트의 font-size(크기), font-weight(굵기), text-align(정렬) 값 변경
변경 위치 css > layout > layout.css 104줄
104 .recom_box dt {width: 122px; padding: 0 0 10px 0; font-size: 13px; font-weight: bold; text-align: center; }
✔️ 추천상품명 폰트의 letter-spacing(자간) 값 변경
변경 위치 css > layout > layout.css 122줄
122 .recom_tit_box .item_name {display: block; letter-spacing: -1px;}
✔️ 추천상품 가격 폰트의 font-size(크기) 값 변경
변경 위치 css > layout > layout.css 128줄
128 .recom_money_box .item_price {display: block; padding: 7px 0 5px 0; font-size: 14px;}
✔️ 추천상품 검색창 닫기 폰트의 color(색상), font-size(크기), line-height(행간) 값 변경
변경 위치 css > layout > layout.css 148줄
148 .seach_top_all .btn_top_search_close {float: right; padding: 0 15px 0 15px; color: #999999; font-size: 11px; line-height: 30px;}
✔️ 검색창 레이어 영역의 background(배경), border(선) 값 변경
변경 위치 css > layout > layout.css 87줄
87 #header .top_search .search_cont {display: block; margin: 0; font-size: 0; background: #ffffff; position: absolute; top: 33px; left: 0; width: 334px; border: #ccc 1px solid;}
✔️ 추천상품 이미지 영역의 border(선) 값 변경
변경 위치 css > layout > layout.css 106줄
106 .recom_box .recom_photo {display: table-cell; position: relative; width: 120px; height: 120px; border: 1px solid #ececec; vertical-align: middle;}
✔️ 검색창 레이어 하단 영역의 height(높이), background(배경) 값 변경
변경 위치 css > layout > layout.css 146줄
146 .seach_top_all {overflow: hidden; width: 100%; height: 30px; background: #f5f5f5; clear: both;}
1-1. 푸터 메뉴 폰트의 color(색상) 값 변경
변경 위치 css > layout > layout.css 407줄
407 .foot_list ul li a {padding: 0 15px 0 14px; color: #b88dde; font-size: 13px;}
1-2. 푸터 메뉴 중 개인정보처리방침 폰트의 color(색상) 값 변경
변경 위치 css > layout > layout.css 408줄
408 .foot_list ul li a strong {color: #dfc2f9;
2-1. 푸터 정보영역(쇼핑몰정보, 고객센터정보, 계좌정보) 폰트의 color(색상), font-size(크기), line-height(행간) 값 변경
변경 위치 css > layout > layout.css 4117줄
411 .foot_cont {overflow: hidden; padding: 35px 0 35px 0; color: #9d78c0; font-size: 12px; line-height: 1.8;}
2-2. 푸터 정보영역 중 메일주소의 color(색상) 값 변경
변경 위치 css > layout > layout.css 420줄
420 .btn_email {color: #b88dde;}
3-1. CS CENTER, 계좌정보 타이틀 폰트의 font-size(크기), color(색상) 값 변경
변경 위치 css > layout > layout.css 380줄
380 .content_info h3 {padding: 0 0 5px 0; color: #c8a2ea; font-size: 16px; font-weight: normal;}
3-2. CS CENTER 전화번호 폰트의 font-size(크기), color(색상) 값 변경
변경 위치 css > layout > layout.css 383줄
383 .content_info .cs_center strong {display: block; padding: 0 0 7px 0; color: #c8a2ea; font-size: 16px; font-weight: normal; margin-top: 7px;}
4-1. 공지사항 타이틀 폰트의 font-size(크기), color(색상) 값 변경
변경 위치 css > layout > layout.css 391줄
391 .content_info .notice_list h3 > a {color: #c8a2ea; line-height: 1em;}
4-2. 공지사항 리스트 폰트의 color(색상) 값 변경
변경 위치 css > layout > layout.css 396줄
396 .content_info .notice_list a {display: inline-block; overflow: hidden; width: 93%; color: #9d78c0; text-overflow: ellipsis; white-space: nowrap; word-wrap: break-word;}
5. 푸터 영역의 background(배경색) 값 변경
변경 위치 css > layout > layout.css 401줄
401 #footer_wrap {position: relative; background: #573e6e;}
6. 푸터 메뉴 하단의border-bottom(선) 값 변경
변경 위치 css > layout > layout.css 404줄
404 .foot_list {border-bottom: 1px solid #79569a; line-height: 1;}
7. 푸터 카피라이트영역 상단의border-top(선) 값 변경
변경 위치 css > layout > layout.css 419줄
419 .copyright {width: 100%; text-align: center; padding: 24px 0 23px 0; border-top: #79569a 1px solid; color: #23ebe4; font-size: 12px;}
8. 푸터 카피라이트영역 상단의font-size(크기), color(색상) 값 변경
변경 위치 css > layout > layout.css 419줄
419 .copyright { width: 100%; text-align: center; padding: 24px 0 23px 0; border-top: #79569a 1px solid; color: #23ebe4; font-size: 12px;}
1. 퀵검색 타이틀 폰트의 border-bottom(선), font-size(크기) 값 변경
변경 위치 css > layout > layout.css 402줄
402 .quick_search_cont_box h2 {padding: 20px 0 10px 25px; border-bottom: 1px solid #cccccc; font-size: 20px; background: url(../../img/icon/goods_icon/icon_search.png) no-repeat left 26px;}
2. 퀵검색 항목 폰트의 font-size(크기), text-align(정렬) 값 변경
변경 위치 css > layout > layout.css 405줄
405 .quick_search_cont_box dl dt {width: 18%; display: inline-block; padding: 10px 0; font-size: 12px; text-align: left; font-weight: bold; vertical-align: top; word-break: break-word;}
3. 퀵검색 레이어의 border-left(선) 값 변경
변경 위치 css > layout > layout.css 453줄
453 #quick_search.q_right {right: -10000px; width: 400px; height: 100% !important; padding: 20px; border-left: 2px solid #323234;}
4. 검색 버튼의 border(선), background(배경), color(색상) 값 변경
변경 위치 css > layout > layout.css 431줄
431 .quick_search_cont_box .quick_btn input {display: inline-block; padding: 10px 30px; border: 1px solid #8917f3; background: #8917f3; color: #ffffff; cursor: pointer; font-weight: bold;}
1. 쇼핑카트탭 메뉴 선택 시 border-top(선), font-weight(굵기) 값 변경
변경 위치 css > layout > layout.css 549줄
549 .cart_tab_list .on {border-top: 2px solid #ab3e55; font-weight: bold; padding-top: 0;}
2. 쇼핑카트탭 상단의 height(높이), border-top(선), background(배경) 값 변경
변경 위치 css > layout > layout.css 544줄
544 #shop_cart_wrap .cart_tab_wrap { position: relative; height: 39px; border-top: 2px solid #333333; background: #f2f2f2;}
3. 쇼핑카트탭에 담긴 상품 이미지의 width(너비), height(높이) 값 변경
변경 위치 css > layout > layout.css 590줄
590 .shop_view_tab .prdt_photo_box a > img { width: 135px; height: 120px;}
4. 쇼핑카트탭에 담긴 상품명의 font-size(크기), color(색상) 값 변경
변경 위치 css > layout > layout.css 592줄
592 .shop_view_tab .prdt_tit { display: block; padding: 11px 0 3px 0; font-size: 12px; color: #4b4b4b;}
5. 쇼핑카트탭에 담긴 상품 금액의 font-size(크기), color(색상) 값 변경
변경 위치 css > layout > layout.css 594줄
594 .shop_view_tab .prdt_price strong { font-size: 18px; color: #000; }
1. 옵션 선택 버튼의 background(배경), color(색상), text-align(정렬), font-weight(굵기) 값 변경
변경 위치 css > layout > layout.css 558줄
558 .cart_tab_list .cart_tab_option a {display: block; padding: 10px 55px; background: #6a6a6a; color: #ffffff; text-align: center; font-weight: bold; line-height: 19px;}
2. 상품명의 font-size(크기) 값 변경
변경 위치 css > layout > layout.css 631줄
631 .shop_option_cont .shop_option_tit .shop_item_tit { display: block; padding: 0 0 7px 0; font-size: 14px;}
3. 배송비 내용 폰트의 color(색상) 값 변경
변경 위치 css > layout > layout.css 633줄
633 .shop_option_cont .shop_option_tit .shop_item_delivery { color: #717171;}
4. 항목 폰트의 color(색상) 값 변경
변경 위치 css > layout > layout.css 652줄
652 .option_total_box dl dt {float: left; color: #777777;}
5. 금액의 font-weight(굵기) 값 변경
변경 위치 css > layout > layout.css 653줄
653 .option_total_box dl dd { float: right; font-weight: bold; color: #444444;}
6. 총 결제 예정금액 폰트의 font-weight(굵기), color(색상) 값을 변경해줍니다.
변경 위치 css > layout > layout.css 654줄
654 .option_total_box .total_price_sec dt { font-weight: bold; color: #555555;}
7. 총 결제 예정금액 가격 폰트의 color(색상) 값을 변경해줍니다.
변경 위치 css > layout > layout.css 656줄
656 .option_total_box .total_price_sec strong { color: #9b344a;}
8. 장바구니 버튼의 border(선), background(배경), font-weight(굵기), font-size(크기), color(색상), text-align(정렬) 값을 변경해줍니다.
변경 위치 css > layout > layout.css 658줄
658 .option_total_box .btn_shop_cart { display: block; width: 200px; height: 43px; margin: 0; border: 1px solid #cccccc; background: #ffffff; font-weight: bold; font-size: 14px; color: #3e3d3c; text-align: center;}
9. 바로구매 버튼의 background(배경), font-weight(굵기), font-size(크기), color(색상), text-align(정렬) 값을 변경해줍니다.
변경 위치 css > layout > layout.css 546줄
546 #shop_cart_wrap .btn_shop_buy { display: block; width: 200px; height: 45px; background: #ab3e55; font-weight: bold; font-size: 14px; color: #ffffff; text-align: center;}
관리자 페이지 > 디자인 메뉴 접속
reset.css 스타일시트의 3번째 줄에 @import url(’외부 스타일시트 경로’) 추가
변경 위치 css > reset.css 3줄
3 @import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');} /
13번째 줄의 font-family의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Nanum Gothic(변경할 폰트명)으로 수정 (️한글 폰트 파일명의 경우 " "입력)
변경 위치 css > reset.css 13줄
13 body,th,td,input,select,textarea,button { font-size:12px; line-height:1.5; font-family:Malgun Gothic,"맑은 고딕",AppleGothic,Dotum,"돋움",sans-serif; color:#333}
⚠️ color값은 디자인 가이드에 맞게 작성하여야 합니다.
⚠️웹 폰트 사용 시, 속도 저하가 발생할 수 있어 권장하지 않습니다.
1-1. 최근 본 상품 타이틀(TODAY VIEW)의 color(색상) 값 변경
변경 위치 css >layout > layout.css 441줄
441 .scroll_right_cont h4 { padding: 0; color: #fff; text-align: center;}
1-2. 최근 본 상품 영역의 background(배경색) 값 변경
변경 위치 css >layout > layout.css 440줄
440 .scroll_right_cont { float: left; min-width: 74px; padding: 18px; background: #8917f3;}
2. 최근 본 상품 오버시 펼침 레이어 영역의width(가로), height(세로), border(선), background(배경) 값 변경
변경 위치 css >layout > layout.css 449줄
449 .scroll_right_cont .src_box { position: absolute; top: -1px; right: -1px; width: 191px; height: 69px; padding: 5px 0 0 7px; border: 1px solid #999999; background: #ffffff; text-align: left; z-index: 10;}
3. 최근 본 상품의 상품명 폰트의 color(색상) 값 변경
변경 위치 css >layout > layout.css 450줄
450 .scroll_right_cont .src_box em { display: block; overflow: hidden; width: 115px; height: 43px; color: #939393; word-break: break-all;}
4. 최근 본 상품의 가격 폰트의color(색상) 값 변경
변경 위치 css >layout > layout.css 451줄
451 .scroll_right_cont .src_box strong { display: block; color: #8917f3;}
5-1. 페이징 숫자 폰트의 color(색상) 값 변경
변경 위치 css >layout > layout.css 461줄
461 .scroll_right_cont .scr_paging { width: 74px; margin: 0 auto; color: #c99df2; text-align: center;}
5-2. 페이징 강조 숫자 폰트의 color(색상) 값 변경
변경 위치 css >layout > layout.css 463줄
463 .scroll_right_cont .scr_paging strong { padding: 0 2px 0 2px; color: #23ebe4;}
1. 스크롤시 상단 메뉴 폰트의 color(색상) 값 변경
변경 위치 css >layout > layout.css 205줄
205 #header .gnb .depth0 > li > a { display: inline-block; padding: 0 55px 0 10px; font-size: 14px; font-weight: bold; text-align: left; line-height: 49px; color: #fff; min-width: 60px;}
2-1. 스크롤시 상단 메뉴 영역의 background(배경) 값 변경
변경 위치 css >layout > layout.css 12줄
12 .headerFix{ position:fixed; top:-149px; left:0; z-index:101; width:100%; min-width:1200px; background:#1f1f1f !important; }
2-2. 스크롤시 상단 메뉴 영역의 border-top(위 선), border-bottom(아래 선) 값을 변경합니다.
변경 위치 css >layout > layout.css 158줄
158 .headerFix #header .gnb { border-top: 1px solid #1f1f1f; border-bottom: 1px solid #1f1f1f;}
메인
1. 2AM 스킨은의 메인 상단 배너는 1200 X 600로 세팅되어 있습니다. 상단영역에 꽉차는 이미지를 적용하려면 배너 사이즈를 100%로 변경해야합니다.
2. 배경이 투명한 png이미지를 등록해야 배너영역의 배경색이 보여집니다.
변경 위치 css > main > main.css 6줄
6 .main_visual {overflow: hidden; width: 100%; margin: 0 0 70px 0; background: #8917f3;}
1. 타이틀 폰트의font-size(크기), text-align(정렬) 값을 변경해줍니다.
변경 위치 css > goods > lsit.css 21줄
21 .goods_list_tit h3 { font-size: 22px; text-align: center;}
2. 더보기 버튼의 font-size(크기), font-weight(굵기), border(선) 값을 변경해줍니다.
변경 위치 css > goods > lsit.css 12줄
12 .btn_goods_more .btn_goods_view_more { padding: 2px 5px 3px 5px; font-size: 11px; font-weight: bold; border: 1px solid #dbdbdb;}
1. 상품 이미지의 border(테두리 색) 값을 변경해줍니다.
변경 위치 css > goods > lsit.css 30줄
30 .item_photo_box { display: inline-block !important; overflow: hidden; position: relative; text-align: center; border: 1px solid #ebebeb; vertical-align: middle;}
2. 상품명 폰트의 font-size(크기) 값을 변경해줍니다.
변경 위치 css > goods > lsit.css 45줄
45 .item_tit_box .item_name { display: block; padding: 5px 0 0 0; font-size: 13px;}
3. 짧은설명 폰트의 color(색상) 값을 변경해줍니다.
변경 위치 css > goods > lsit.css 46줄
46 .item_tit_box .item_name_explain { display: block; padding: 0 10px 0 0px; color: #a8a8a8;}
4. 정상가격 폰트의 color(색상) 값을 변경해줍니다.
변경 위치 css > goods > lsit.css 52줄
52 .item_money_box del { display: block; color: #888888;}
5. 할인가격 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.
변경 위치 css > goods > lsit.css 53줄
53 .item_money_box .item_price { display: block; padding: 7px 0 5px 0; font-size: 14px; color: #8917f3;}
6. 타임세일 할인가격 폰트의 font-size(크기) 값을 변경해줍니다.
변경 위치 css > goods > lsit.css 54줄
54 .item_money_box .item_price .time_sale_cost { display: inline-block; padding: 7px 0 5px 20px; font-size: 16px; background: url(../../img/icon/goods_icon/icon_time_sale_cost.png) no-repeat left 7px;}
상품상세
1. 타임세일 영역의 height(높이), border-bottom(선), background(배경) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 33줄
33 .item_info_box .time_sale { overflow: hidden; height: 49px; margin: 0 0 20px 0; padding: 10px 10px 0 10px; border-bottom: 1px solid #dbdbdb; background: #f5f5f5;}
2. 타임세일 할인율의 color(색상), font-size(크기), background(배경), text-align(정렬) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 35줄
35 .time_sale .time_sale_num { width: 59px; height: 44px; padding: 5px 0 0 0; color: #ffffff; font-size: 18px; background: url(../../img/common/bg/bg_sale.png) no-repeat 0 0; text-align: center; }
3. 남은 시간 폰트의 font-size(크기), letter-spacing(정렬) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 37줄
37 .time_sale .time_day { margin: 7px 0 0 16px; font-size: 18px; letter-spacing: 2px;}
4. 남은 재고 수량 폰트의 color(색상), font-size(크기) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 40줄
40 .time_sale .time_now_order span { color: #8917f3; font-size: 18px;}
5. 타임세일 가격 폰트의 font-size(크기) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 58줄
58 .time_sale_price dd strong { margin: 0 0 0 5px; font-size: 18px;}
1. 상품명 폰트의 font-size(크기) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 44줄
44 .item_detail_tit h3 { width: 405px; font-size: 18px;}
2. 상품 정보 타이틀 폰트의 color(색상), font-weight(굵기) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 50줄
50 .item_detail_list dt { float: left; width: 70px; margin: 0 10px 0 0; color: #888888; font-weight: normal; word-wrap: break-word;}
3. 상품 판매가 폰트의 font-size(크기), font-weight(굵기) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 54줄
54 .item_price dd { margin: -2px 0 0 0; font-size: 16px; font-weight: bold;}
4. 총 합계금액 폰트의 font-size(크기), font-weight(굵기) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 91줄
91 .item_tatal_box .total_amount dt { font-size: 16px; font-weight: bold;}
5-1. 총 합계금액 가격 폰트의 color(색상), font-weight(굵기) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 92줄
92 .item_tatal_box .total_amount dd { color: #8917f3; font-weight: bold;}
5-2. 총 합계금액 가격 폰트의 font-size(크기) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 93줄
93 .item_tatal_box .total_amount dd strong { font-size: 20px;}
공유하기 버튼의 background(배경), border(선) 값을 변경해줍니다.
변경 위치 css > button > button.css 7줄
7 .btn_gray_list a, .btn_gray_list button { display: inline-block; padding: 0 0 0 11px; background: url(../img/common/btn/btn_gray_bg.png) repeat-x; border: 1px solid #dbdbdb; vertical-align: middle;}
조건별 배송 버튼의 font-size(크기), background(배경) 값을 변경해줍니다.
변경 위치 css > button > button.css 16줄
16 .btn_gray_list .btn_gray_small { font-size: 11px; background: url(../img/common/btn/btn_gray_bg_02.png) repeat-x bottom;}
장바구니 버튼의 color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기) 값을 변경해줍니다.
변경 위치 css > button > button.css 40줄
40 .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;}
바로구매 버튼의 color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기) 값을 변경해줍니다.
변경 위치 css > button > button.css 44줄
44 .btn_add_order { 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 #8917f3; background: #8917f3; text-align: center; font-weight: bold;}
1. 셀렉트 영역의 border(선), background(배경) 값을 변경해줍니다.
변경 위치 css > layout > layout.css 247줄
247 .location_select { display: inline-block; position: relative; min-width: 150px; margin: 7px 0 0 0; border: 1px solid #999999; background: #ffffff; z-index: 50;}
2. 상품 이미지 영역의 border(선) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 10줄
10 .item_photo_big { display: table-cell; position: relative; width: 600px; height: 600px; text-align: center; vertical-align: middle; border: 1px solid #ebebeb;}
3. 상품명 아래 border-bottom(선) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 43줄
43 .item_detail_tit { position: relative; padding: 0 0 10px 0; border-bottom: 1px solid #dbdbdb;}
4. 리스트 항목 구분선의 border-top(선) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 71줄
71 .item_add_option_box { float: left; margin: 5px 0 0 0; padding: 10px 0 5px 0; border-top: 1px solid #dbdbdb;}
5-1. 선택한 옵션영역의 border-bottom(선) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 690줄
690 .item_detail_list + .item_choice_list table { width: 100%; border-bottom: 1px solid #999999;}
5-2. 선택한 옵션영역의 background(배경) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 695줄
695 .item_choice_list table { width: 100%; background: #f5f5f5;}
6. 총 합계금액 구분 영역의 border-top(선) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 90줄
90 .item_tatal_box .total_amount { margin: 15px 0 0 0; padding-top: 10px; border-top: 1px solid #dbdbdb;}
1-1. 상품 상세 탭 color(색상), border(선) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 118줄
118 .item_goods_tab li a { display: block; margin: 0 0 0 -1px; padding: 10px 0 12px 0; color: #999999; font-size: 13px; border: 1px solid #dadada; border-bottom: 1px solid #bbbbbb; background: #ffffff;}
1-2. 상품 상세 탭 선택시 color(색상), font-weight(굵기), border(선) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 119줄
119 .item_goods_tab li.on a { padding-top: 18px; margin-top: 8px; color: #333333; font-weight: bold; border: 1px solid #bbbbbb; border-bottom: 1px solid #ffffff;}
1-3. 상품 상세 탭 양쪽 끝의 border(선) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 114줄
114 .item_goods_tab { padding: 80px 0 0 0; border-bottom: 1px solid #bbbbbb;}
2. 글 등록 수량 폰트의 color(색상) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 122줄
122 .item_goods_tab li a strong { color: #ab3e55;}
주문결제
1. 장바구니 타이틀 폰트의 color(색상), font-size(크기), color(색상) 값을 변경해줍니다.
변경 위치 css > order > order.css 14줄
14 .order_wrap .order_tit h2 { float: left; font-size: 28px; color: #222222;}
2. 현재 스텝 표시 폰트의 color(색상), font-weight(굵기) 값을 변경해줍니다.
변경 위치 css > order > order.css 17줄
17 .order_wrap .order_tit .page_on { color: #8917f3; font-weight: bold;}
3. 다음 진행 스텝 표시 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.
변경 위치 css > order > order.css 16줄
16 .order_wrap .order_tit ol li { float: left; font-size: 14px; color: #d1d1d1;}
4. 장바구니 타이틀 폰트 하단의 border-bottom(선) 값을 변경해줍니다.
변경 위치 css > order > order.css 13줄
13 .order_wrap .order_tit { overflow: hidden; border-bottom: 1px solid #dbdbdb;}
1-1. 상품금액/배송비/합계 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.
변경 위치 css > order > order.css 137줄
137 .price_sum_cont .price_sum_list dd {color:#8917f3;}
1-2. 상품금액/배송비/합계 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.
변경 위치 css > order > order.css 138줄
138 .price_sum_cont .price_sum_list dd strong {font-weight:700;font-size:18px;color:#8917f3;}
1. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.
변경 위치 css > order > order.css 323줄
323 .payment_final_total dd {display:inline-block;font-size: 30px;color:#8917f3;}
2. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경해줍니다.
변경 위치 css > order > order.css 187줄
187 .btn_order_buy { display: inline-block; width: 300px; height: 61px; line-height: 59px; color: #fff; font-size: 20px; border: 1px solid #8917f3; background: #8917f3; text-align: center;}
스타일시트 CSS 오픈 좌측 하단 폴더트리 내 “스타일시트/CSS”를 더블 클릭하여 스타일시트 리스트 중 reset.css를 오픈하세요.
