search

🖥️2AM_PC 스킨 가이드

hashtag
공통

chevron-right포인트 컬러 일괄 변경하기hashtag

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

  2. 관리자 > 디자인 메뉴 접속

  3. 스타일시트/CSS 변경 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈합니다.

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

  5. 마우스 오버시 컬러 #6908c3도 검색하여 원하는 포인트 컬러 코드로 변경합니다.

chevron-right상단메뉴(GNB) 변경하기hashtag

✔️상단 메뉴 영역의 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;}

chevron-right좌측형 메뉴 변경하기hashtag

✔️상단 메뉴 영역의 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;}

chevron-right검색창 폰트 변경하기hashtag

✔️ 검색창 인풋박스 입력 폰트의 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;}

chevron-right검색창 레이어 변경하기(배경/라인)hashtag

✔️ 검색창 레이어 영역의 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;}

chevron-right푸터 변경하기(폰트/컬러)hashtag

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

chevron-right퀵검색 변경하기hashtag

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

chevron-right쇼핑카트탭 변경하기(폰트/컬러)hashtag

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

chevron-right쇼핑카트탭 변경하기(옵션 시) hashtag

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

chevron-right웹폰트 적용하기hashtag

  1. 관리자 페이지 > 디자인 메뉴 접속

  2. 스타일시트 CSS 오픈 좌측 하단 폴더트리 내 “스타일시트/CSS”를 더블 클릭하여 스타일시트 리스트 중 reset.css를 오픈하세요.

  3. reset.css 스타일시트의 3번째 줄에 @import url(’외부 스타일시트 경로’) 추가 변경 위치 css > reset.css 3줄 3 @import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');} /

  4. 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값은 디자인 가이드에 맞게 작성하여야 합니다. ⚠️웹 폰트 사용 시, 속도 저하가 발생할 수 있어 권장하지 않습니다.

chevron-right최근 본 상품 변경하기(폰트/컬러) hashtag

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

chevron-right스크롤시 상단 고정메뉴 변경하기(폰트,배경)hashtag

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

hashtag
메인

chevron-right메인 상단 배너 영역 변경하기(배너 사이즈)hashtag

1. 2AM 스킨은의 메인 상단 배너는 1200 X 600로 세팅되어 있습니다. 상단영역에 꽉차는 이미지를 적용하려면 배너 사이즈를 100%로 변경해야합니다.

2. 배경이 투명한 png이미지를 등록해야 배너영역의 배경색이 보여집니다.

chevron-right메인 상단 배너 영역 변경하기(배경)hashtag

변경 위치 css > main > main.css 6줄 6 .main_visual {overflow: hidden; width: 100%; margin: 0 0 70px 0; background: #8917f3;}

chevron-righthashtag

hashtag
상품상세

hashtag
주문결제

Previous2AMNext2AM_Mobile 스킨 가이드

Last updated

Was this helpful?