# Happy Kids\_Mobile 스킨 가이드 > #### 공통
포인트 컬러 일괄 변경하기 1. 컬러코드값 확인\ Happy Kids 스킨에 적용되어 있는 기본 컬러 코드 **#f0bc0c**을 확인합니다. 2. **디자인 스킨 리스트 접속** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트 3. **스타일시트/CSS 변경** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트\ 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ \ ![](/files/qYwzYQrs6Xwqnf4wWXc0)
4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#f0bc0c**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. \ \ gd\_button.css (총 154개)\ gd\_common.css (총 5개) \ gd\_layout.css (총 1개) \ gd\_plus\_review\.css (총 7개) \ goods/goods.css (총 1개) \ goods/list/list\_01.css (총 4개) \ goods/list/list\_02.css (총 4) \ goods/list/list\_04.css (총 4개) \ goods/list/list\_06.css (총 4개) \ goods/list/list\_07.css (총 4개) \ goods/list/list\_09.css (총 3개) \ goods/list/list\_11.css (총 7개) \ mypage/mypage.css (총 10개) \ order/order.css (총 12개) \ proc/proc.css (총 2개)
상단 메뉴영역 변경하기 ![](/files/rXcxmDrwBTfuIHjzPmdj) 1. 로고가 있는 가장 상단의**background(배경색)** 값을 변경해줍니다. \ `변경 위치` css > gd\_layout.css **15, 16줄**\ `15` #header\_wrap header .header\_box { background: #aedcf8; height: 61px;}\ `16` .h\_logo { padding: 20px 0 40px 0; margin: 0 auto; line-height: 0; text-align: center; background: #aedcf8; z-index: 300;} 2. 장바구니의 갯수가 노출되는**background(배경색)** 값을 변경해줍니다. \ `변경 위치` css > gd\_layout.css **36줄**\ `36` #header\_wrap header .header\_box .cart\_count { position: absolute; top: 8px; left: 20px; display: block; padding: 3px 6px 1px 6px; line-height: 15px; border-radius: 100%; color: #636363; background: #fff2c2; vertical-align: middle; font-size: 12px;} 3. 상단 메뉴의 텍스트**font-size(폰트사이즈), color(색상)** 값을 변경해줍니다. \ `변경 위치` main > main.css **15줄**\ `15` .main .main\_top\_menu li a { display: block; padding: 13px 0 13px 0; font-size: 14px; color: #333333;}
슬라이드 메뉴 영역 변경하기 ![](/files/OmTKZgnnmLaEnhlUN2q9) 1. 슬라이드메뉴 영역의**background(배경색)** 값을 변경해줍니다. \ `변경 위치` css > gd\_layout.css **72줄**\ `72` #wrap nav .nav\_bg\_box .nav\_box { position: fixed; top: 0; left: 0; width: 290px; height: 100%; margin: 0 0 0 -290px; background: #ffe999; z-index: 1001;} 2. 로그인, 회원가입 텍스트의**background(배경색)** 값을 변경해줍니다. \ `변경 위치` css > gd\_layout.css **87줄**\ `87` .nav\_banner .nav\_login ul li a { display: inline-block; font-size: 15px; color: #666666;} 3. **브랜드. 카테고리. 커뮤니티 텍스트의**color(색상)값을 변경해줍니다. \ `변경 위치` css > gd\_layout.css **108줄**\ `108` .nav\_tabmenu\_box .nav\_tab\_list .nav\_tabmenu\_tit { display: block; margin: 0 25px; padding: 9px 0; font-size: 17px; color: #666666; font-weight: bold; background: url(../img/icon/icon\_left\_arrow\.png) no-repeat right center; background-size: 12px 7px; border-top: 1px solid #e0cf8f;} 4. 카테고리 텍스트의**color(색상)** 값을 변경해줍니다. \ `변경 위치` css > proc.css **7줄**\ `7` .category\_side > li a { position: relative; display: block; padding: 4px 0 4px 0; font-size: 19px; color: #666666;} 5. 카테고리On일때엔 **font-weight(폰트굵기)** 값을 변경해줍니다. \ `변경 위치` css > proc.css **11줄**\ `11` .category\_side > li > a.on { font-weight: bold;} 6. 실선의**border-top(선 컬러 - #e0cf8f)** 값을 변경해줍니다. \ `변경 위치` css > gd\_layout.css **111줄**\ `111` .category\_side > li ul { display: none; border-top: 1px solid #e0cf8f;}\ \ `변경 위치` css > proc.css **6줄**\ `6` .nav\_tabmenu\_box .nav\_tab\_list > \* { padding: 17px 0; margin: 0 25px; border-top: 1px solid #e0cf8f;}
하단 영역 변경하기 ![](/files/VhxKnYFZOYXEJpVp4Kq3) 1. 하단영역의 배경색인**background(배경색)** 값을 변경해줍니다. \ `변경 위치` css > gd\_layout.css **155줄,161줄,131줄,137줄**\ `155` #footer footer .ft\_btn\_top a { display: inline-block; width: 100%; height: 46px; border-top: 1px solid #505050; border-bottom: 1px solid #787878; text-align: center; color: #ffffff; background: #6b6867; line-height: 46px; font-size: 13px; font-weight: bold; }\ `161` #footer .main\_info\_box { padding: 0 10px; background: #6b6867;}\ `131` #footer footer .ft\_button\_box { padding: 0 25px; background: #6b6867;}\ `137` #footer footer .ft\_info2\_box { background: #6b6867;} 2. top텍스트의**color(색상)** 값을 변경해줍니다. \ `변경 위치` css > gd\_layout.css **155줄**\ `155` #footer footer .ft\_btn\_top a { display: inline-block; width: 100%; height: 46px; border-top: 1px solid #505050; border-bottom: 1px solid #787878; text-align: center; color: #ffffff; background: #6b6867; line-height: 46px; font-size: 13px; font-weight: bold;} 3. top버튼과 아래영역의 구분선인**border-bottom에 #787878 색상** 값을 변경해줍니다. \ `변경 위치` css > gd\_layout.css **155줄**\ `155` #footer footer .ft\_btn\_top a { display: inline-block; width: 100%; height: 46px; border-top: 1px solid #505050; border-bottom: 1px solid #787878; text-align: center; color: #ffffff; background: #6b6867; line-height: 46px; font-size: 13px; font-weight: bold;} 4. 고객센터,무통장입금 텍스트의 노란색은**color(색상)** 값을 변경해줍니다. \ `변경 위치` css > gd\_layout.css **164줄**\ `164` #footer .main\_info\_box .main\_info dl dt { font-size: 13px; margin: 0 5px; font-weight: bold; color: #ffdc5e;} 5. 고객센터 번호의**color(색상)** 값을 변경해줍니다. \ `변경 위치` css > gd\_layout.css **169줄**\ `169` #footer .main\_info dl dd p.phone a { font-size: 22px; color: #cccccc;} 6. 고객센터 상세내용의**color(색상)** 값을 변경해줍니다. \ `변경 위치` css > gd\_layout.css **170줄**\ `170` #footer .main\_info dl dd p.business\_hours { font-size: 14px; color: #b5b4b3;} 7. 무통장입금 번호의**color(색상)** 값을 변경해줍니다. \ `변경 위치` css > gd\_layout.css **175줄**\ `175` #footer .main\_info dl dd .account\_num { font-size: 22px; color: #cccccc;} 8. 무통장입금 정보의**color(색상)** 값을 변경해줍니다. \ `변경 위치` css > gd\_layout.css **176줄**\ `176` #footer .main\_info dl dd .account\_bank { font-size: 14px; color: #b5b4b3; padding: 11px 0 0;}\ `174` #footer .main\_info dl dd .account\_holder { font-size: 14px; color: #b5b4b3;} 9. 회사소개,이용약관,개인정보처리방침,이용안내 폰트**color(색상)** 값을 변경해줍니다. \ `변경 위치` css > gd\_layout.css **151줄**\ `151` #footer footer .ft\_copy { padding-bottom: 23px; color: #e0e0e0; font-size: 12px; text-align: center; font-style: normal;} 10. 쇼핑몰정보들의**color(색상), font-size(폰트크기)** 값을 변경해줍니다. \ `변경 위치` css > gd\_layout.css **142줄**\ `142` #footer footer .ft\_info2\_box .ft\_address { padding: 0 50px 0 50px; text-align: center; font-size: 12px; color: #e0e0e0; word-break: keep-all;}
> #### 메인
추천테마 테두리 변경하기 ![](/files/pTVCvSu4q9rH9LPqb42b) ✔️ Happy Kids 모바일 스킨은 추천 테마에 노란색 테두리가 설정되어 있습니다.\ 테두리를 변경하기 위해서**border(테두리)의 색상:#fee99e, 테두리굵기:10px의** 값을 변경해줍니다.\ `변경 위치` css > main > main.css **27줄**\ `27` .recommend\_prd { position: relative; padding: 97px 5px 0; border: #fee99e 10px solid;}
인스타그램 기능 사용하기 ![](/files/ihdMh5mw8l1CfA4CYr1X) 1. 관리자모드에서**프로모션 -> 인스고위젯관리**를 모바일 기준에 맞춰 설정해줍니다(아래 이미지 참고)\ ![](/files/TFBA4TVVPmyVlMgabqAR) 2. 관리자모드에서 **모바일샵 → 모바일샵 디자인 관리 → 메인폴더 → 쇼핑몰메인본문** 경로를 찾습니다. 3. 복사한 소스를 아래 영역처럼 **main/index.html**에 붙여넣습니다.(코드값은 아래와 다를수 있음)\ `복사 위치` main > index.html **48줄**\ \
\ \
해피키즈 인스타그램\
\ {=includeWidget('proc/\_insgo.html', 'sno', '2')} \ \
> #### 상품상세
상품명, 가격변경하기 ![](/files/WtzJNbnnSUI4HFUk28W5) 1. 상품명 텍스트**color(색상),font-size(폰트크기)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **339줄**\ `339` .goods\_view .detail\_info h3 { font-size: 18px; color: #333333;} 2. 판매가격 텍스트**color(색상),font-size(폰트크기)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **346줄**\ `346` .goods\_view .detail\_info .detail\_info\_top .price\_box .price { font-size: 24px; color: #333333; }
상품 구매하기, 장바구니 버튼 변경하기 ![](/files/HjY4CdNBRQJvdxA95p2N) 1. 장바구니 버튼**background(배경색), color(색상),font-size(폰트크기), border(테두리색상:#9f9f9f;)** 값을 변경해줍니다. \ `변경 위치` 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(테두리색상:#9f9f9f;)** 값을 변경해줍니다. \ `변경 위치` 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: #f0bc0c; border: 1px solid #f0bc0c; color: #ffffff; font-weight: bold; box-sizing: border-box;} box-sizing: border-box;}
> #### 주문결제
장바구니 페이지 변경하기 ![](/files/eok8rboRkDsVaUnodT5x) 1. 상품명의**font-weight(글씨굵음), font-size(폰트크기)** 값을 변경합니다. \ **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. 주문수량의**color(색상), font-size(폰트크기)** 값을 변경합니다. \ **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. 상품금액의**color(색상), font-size(폰트크기), font-weight(폰트굵기)** 값을 변경합니다. \ **color**값을 추가하여 색상을 변경할 수 있습니다.\ `변경 위치` 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: #f0bc0c; font-weight: bold;} 4. 상품금액, 배송비의**color(색상), 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;} 5. 총 합계금액의**color(색상), font-size(폰트크기)** 값을 변경합니다. \ **color**값을 추가하여 색상을 변경할 수 있습니다.\ `변경 위치` css > order > order.css **88줄**\ `88` .cart .my\_buy dl.total dd { color: #f0bc0c; font-size: 17px;} 6. 항목 텍스트의**color(색상), font-size(폰트크기)** 값을 변경합니다. \ **color**값을 추가하여 색상을 변경할 수 있습니다.\ `변경 위치` css > order > order.css **85줄**\ `85` .cart .my\_buy dl dt { display: table-cell; width: 50%; font-size: 13px; color: #5e5e5e;}
주문완료 페이지 변경하기 ![](/files/DVFfsWmTxjphj6pPA2ej) 1. 주문번호의**color(색상)** 값을 변경해줍니다. \ **color**값을 추가하여 색상을 변경할 수 있습니다.\ `변경 위치` css > order > order.css **220줄**\ `220` .order\_end .order\_end\_box h2 { padding: 0 0 10px 0; font-size: 13px; color: #333333;} 2. 주문번호의**color(색상)** 값을 변경해줍니다. \ **color**값을 추가하여 색상을 변경할 수 있습니다.\ `변경 위치` css > order > order.css **224줄**\ `224` .order\_end .order\_end\_box .tx ul li { text-align: left; color: #5e5e5e;} 3. 주문완료 영역의**background(배경색), border(#e1e1e1 - 컬러)** 값을 변경해줍니다. \ **color**값을 추가하여 색상을 변경할 수 있습니다.\ `변경 위치` css > order > order.css **218줄**\ `218` .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;}
--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://godomall-help.nhn-commerce.com/beginner/design/freeskin/happy-kids/mobile-guide.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.