# Happy Kids\_PC 스킨 가이드 > #### 공통
포인트 컬러 일괄 변경하기 1. 컬러코드값 확인\ Happy Kids 스킨에 적용되어 있는 기본 컬러 코드 **#f0bc0c**을 확인합니다. \ ![](/files/mfb1wClwZTJHaSa3qtvK)
2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ ![](/files/5QIfziwsSmtKIflGvU2N)
4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#f0bc0c**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. \ \ button.css (총 56개) \ board.css (총 13개) \ common.css (총 18개) \ common/layer.css (총 16개)\ event.css (총 6개) \ goods/goods.css (총 13개) \ goods/list.css (총 4개) \ layout.css (총 22개) \ member.css (총 18개) \ mypage.css (총 11개) \ order.css (총 7개) \ service.css (총 7개) 5. 마우스 오버시 컬러 **#e6b307**도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.
[상단 메뉴형] 메뉴영역 변경하기 - 검색창 포함 ![](/files/4caAlaRzCrGvVWxCshad) 1. 로그인메뉴 영역의**color(컬러)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **43줄**\ `43` .top\_member\_box > li a { display: inline-block; padding: 4px 0 4px 10px; color: #636363; font-size: 11px;} 2. All카테고리 메뉴의**img src(이미지)** 값을 변경해줍니다. \ 해당 영역은 이미지 형태로 제작되었습니다. 경로를 찾아서 이미지를 변경해주세요.\ `전체메뉴보기` 3. 메뉴 텍스트의**color(색상)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **209줄**\ `209` #header .gnb .depth0 > li > a { display: inline-block; padding: 0 30px 0 30px; font-size: 14px; font-weight: bold; text-align: center; line-height: 49px; color: #666666;} 4. 검색 영역의 밑줄**border-bottom의 색상(#ffdc5e)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **77줄**\ `77` #header .top\_search .top\_text\_cont { border-bottom: 2px solid #ffdc5e; background: #ffffff;} 5. 소메뉴의 오버 시, **background(배경색=#f0bc0c)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **213줄 \*221, 220, 216, 215줄 동일**\ `213` #header .gnb .depth1 li a.active { background: #f0bc0c; color: #ffffff;} 6. 소메뉴의 텍스트**color(색상)** 값을 추가해줍니다. \ `변경 위치` css > layout > layout.css **223줄**\ `223` #header .gnb .depth1 li a { display: block; /\* width: 100%; \*/ padding: 5px 10px 7px 19px; font-size: 12px; color:추가컬러값;} 7. 공지사항 텍스트의**color(색상)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **231줄**\ `231` .notice\_rolling ul li a { overflow: hidden; display: block; padding: 7px 5px 7px 13px; color: #636363; text-overflow: ellipsis; white-space: nowrap; word-wrap: break-word; line-height: 1; background: url(../../img/icon/etc/icon\_notice.png) no-repeat 0 center;} 8. 장바구니 상품수**background(배경색)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **46줄**\ `46` .top\_member\_box > li strong { display: inline-block; padding: 2px 5px 3px 5px; border-radius: 10px; color: #636363; background: #ffdc5e;}
하단영역 변경하기 ![](/files/qBQsfwb3bI6etu8FBAdS) 1. 퀵메뉴 영역의 텍스트**color(색상)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **415줄**\ `415` .foot\_list ul li a { color: #cccccc;} 2. 고객센터 번호의**color(색상)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **386줄**\ `386` .content\_info .cs\_center strong { display: block; padding: 8px 0 7px 0; color: #cccccc; font-size: 24px; line-height: 26px; font-weight: normal;} 3. 고객센터 상세내용의 텍스트**color(색상)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **387줄**\ `387` .content\_info .cs\_center p { color: #aba9a9;} 4. 무통장입금 번호의 **color(색상)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **390줄**\ `390` .content\_info .bank\_info strong { display: block; padding: 8px 0 7px 0; color: #cccccc; font-size: 24px; line-height: 26px; font-weight: normal;} 5. 무통장입금 번호의 상세내용 **color(색상)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **391줄**\ `391` .content\_info .bank\_info p { color: #aba9a9;} 6. 하단정보 텍스트의 **color(색상)** 값을 추가해줍니다. \ `변경 위치` css > layout > layout.css **421줄**\ `421` .foot\_cont .foot\_info { overflow: hidden; margin: 0 auto; padding: 50px 0 0 0; text-align: center; line-height: 14px; color:원하는색상;} 7. 하단영역의 타이틀 텍스트의**color(색상)** 값을 추가해줍니다. \ `변경 위치` css > layout > layout.css **383줄**\ `383` .content\_info h3 { padding: 0 0 5px 0; margin-top: -7px; color: #ffdc5e; font-size: 14px;}
오른쪽배너 투데이뷰 영역수정 ![](/files/tI6nZ1G86wefKcYY6Cwl) 1. 상품명의 텍스트**color(컬러)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **458줄**\ `458` .scroll\_right\_cont .src\_box em { display: block; overflow: hidden; width: 115px; height: 43px; color: #939393; word-break: break-all;} 2. 금액 텍스트의**color(색상)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **459줄**\ `459` .scroll\_right\_cont .src\_box strong { display: block; color: #f0bc0c;}
> #### 메인
인기TOP3 상품리스트 변경 (마우스 Over시 컬러변경) ![](/files/5OEJ3AAyNowwYPt67mJj) 1. Happy Kids 스킨을 다운로드 하였을 때, 진열타입은 기본형태로 설정되어있습니다. (모든스킨동일)\ 샘플사이트처럼 진열형태를 변경하고 싶다면 별도의 설정이 필요합니다.\ 리스트 상세설정은 **상품 > 상품 노출형태관리 > 테마관리**에서 변경하기 바랍니다.\ ![](/files/lypGxarhnypZXWtNyUsF) 2. 설정된 리스트형태에서 Over 했을때의 배경색**background-color(배경색상)**을 rgba를 아래와 같이 변경합니다.\ 기본설정으로 (background-color: rgba(0, 0, 0, 0.7);) 되어있는 영역이 있습니다. \ `변경 위치` css > goods > list.css **149줄**\ `149` .item\_simple\_type .item\_simple\_over{display:none; position:absolute; top:0px; left:0px; width:100%; height:100%; /\* z-index:10;\*/ background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#90000000,endColorstr=#90000000); background-color: rgba(255, 220, 94, 0.7); font-size:12px;}\ \ ⚠️ IE8이하는 rgba가 동작하지 않기 때문에 배경 투명도 적용을 위해 filter의 gradient을 대체 이용한다. \ 컬러값 60000000의 8자리 숫자의 의미: 앞 60 불투명도, 나머지 6자리 컬러값. startColorstr와 endColorstr의 색을 같게 하여 배경 투명도 처리를 하는 것. \ 하지만 원래는 그라데이션 처리하는 기법이기 때문에 같은 60% 투명도라고 해도 약간의 차이는 있다. 3. 상품명과 상품금액의 색상을 변경하기 위해서 아래 소스를 **css시트에** 추가합니다. \ `추가 위치` css > main > main.css **29줄**\ `29` .hk01 .item\_name{font-size: 24px;color: #695f59;} .hk01 .item\_simple\_type .item\_cont span{font-size: 24px;color: #695f59;} .hk01 .item\_simple\_type .item\_cont del{color: #695f59;} 4. main/index.html 파일에 **hk01 이라는 클래스를** main\_goods\_cont 이라는 클래스 뒤에 아래와 같이 적어줍니다. \ `추가 위치` main > index.html **26줄**\ `26` \
"main\_goods\_cont hk01"> \{=includeWidget('goods/\_goods\_display\_main.html', 'sno', '1')}\ \
추천테마 관련 상품 설정 ![](/files/QXn0RuWaC1meTg3VyH3V) 1. Happy Kids 스킨을 다운로드 하였을 때, 추천테마 관련상품의 진열 타입은 기본형태로 설정되어있습니다. (모든스킨동일)\ 샘플사이트처럼 진열 형태를 변경하고 싶다면 별도의 설정이 필요합니다.\ 리스트 상세설정은 **상품 > 메인페이지 상품진열 > 해당치환코드 {=includeWidget('goods/\_goods\_display\_main.html','sno','2')}**가 있는 부분에서 아래와 같이 수정하기 바랍니다.\ 해당 부분의 상품리스트 영역이 좁아 반드시 상품 영역은 가로 3개로 설정하는 것을 권장드립니다. \ ![](/files/Y8I4VipNBdw8Z5K9515M) 2. 기본셋팅되어 있는 노란색 테두리의 색상은**border(테두리의 #ffdc5)**변경해줍니다.\ `변경 위치` css > main > main.css **27줄**\ `27` .main\_content .best\_prd .goods\_list\_cont { border: 1px solid #ffdc5e;}
인스타그램 기능 사용하기 1. 관리자모드에서 **프로모션-인스고위젯관리** 를 설정해줍니다. 2. 인스고 위젯 관리에서 **치한코드 복사**로 복사합니다. 3. 디자인페이지 수정에서 **main/index.html** 에 붙여 넣습니다. \ 코드는 현재의 소스와 동일하게 넣어주시면 샘플샵처럼 배경을 설정할 수 있습니다.\ `변경 위치` main > index.html **72줄**\ `72` \
\
\
\
해피키즈 인스타그램\
{=includeWidget('proc/\_insgo.html', 'sno', '1')}\
\
\
4. CSS를 **main > main.css** 에 붙여 넣습니다.\ 코드는 현재의 소스와 동일하게 넣어주시면 샘플샵처럼 배경을 설정할 수 있습니다.\ `변경 위치` css > main > main.css **72줄**\ `72` .insgo { overflow: hidden; padding: 60px 0 80px 0; background: #eefbfe;}.ins\_box{position: relative; width: 1200px; margin: 0 auto;}.ins\_tit{ padding-bottom:20px;}
> #### 상품상세
상품 상세 변경하기 1. 상품명의 **font-size(폰트사이즈)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **44줄**\ `44` .item\_detail\_tit h3 { width: 405px; font-size: 18px;} 2. 정가의 **color(색상)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **52줄**\ `52` .item\_detail\_list del { color: #333333;} 3. 판매가의 **font-size(폰트사이즈)** 값을 변경해줍니다. color 색상을 추가할 수도 있습니다. \ `변경 위치` css > goods > goods.css **54줄**\ `54` .item\_price dd { margin: -2px 0 0 0; font-size: 16px; font-weight: bold;} 4. 총합계금액의 **color(색상)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **92줄**\ `92` .item\_tatal\_box .total\_amount dd { color: #f0bc0c; font-weight: bold;}
> #### 주문결제
장바구니 타이틀 영역 변경하기 ![](/files/fKfLeUoM6Z7VdnBvjNQk) 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: #f0bc0c; 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;}
주문서 금액 변경하기 ![](/files/157VBjFyz3kdDU3DAALb) 1. 금액에 관련된 **color(색상), font-size(크기)** 값을 변경해줍니다. \ `변경 위치` css > order > order.css **138줄**\ `138` .price\_sum\_cont .price\_sum\_list dd strong { font-weight: 700; font-size: 18px; color: #f0bc0c;} 2. 원 텍스트에 관련된 **color(색상), font-size(크기)** 값을 변경해줍니다. \ `변경 위치` css > order > order.css **137줄**\ `137` .price\_sum\_cont .price\_sum\_list dd { color: #f0bc0c;}
최종금액, 결제하기버튼 변경하기 ![](/files/1vcFbdi8oE3OQuiV26H0) 1. 최종결제 금액 폰트의 **color(색상)** 값을 변경해줍니다. \ `변경 위치` css > order > order.css **323줄**\ `323` .payment\_final\_total dd { display: inline-block; font-size: 30px; color: #f0bc0c;} 2. 결제하기 버튼의 **background(배경색), border(#f0bc0c - 테두리색상)** 값을 변경해줍니다.\ `변경 위치` css > order > order.css **137줄**\ `137` .btn\_order\_buy { display: inline-block; width: 300px; height: 61px; line-height: 59px; color: #fff; font-size: 20px; border: 1px solid #f0bc0c; background: #f0bc0c; 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/pc-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.