# PURE\_PC 스킨 가이드 > #### 공통
포인트 컬러 일괄 변경하기 1. 컬러코드값 확인\ PURE 스킨에 적용되어 있는 기본 컬러 코드 **#e38bac**을 확인합니다. \ ![](/files/7cdddUjBTlw3oPLcSa2Q)
2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ ![](/files/cNxJHdERNjYm2FMzWplZ)
4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#e38bac**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. \ \ mypage.css (총 11개) \ layer.css (총 22개) \ common.css (총 26개) service.css (총 7개) \ order.css (총 7개) \ layout.css (총 22개) \ member.css (총 20개) \ goods.css (총 13개) \ list.css (총 4개) \ event.css (총 6개) \ board.css (총 15개) \ button.css (총 76개) 5. 마우스 오버시 컬러 **#db83a4**도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.
[상단 메뉴형] 메뉴 영역 변경하기 ![](/files/QX6gktPR0ouNFHA60oyX) 1. 상단 메뉴의 **color(색상), font-size(크기)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **42줄**\ `42` .top\_member\_box > li a { display: inline-block; padding: 4px 0 4px 10px; color: #888888; font-size: 11px;} 2. 장바구니 담긴상품 수량 폰트의 **color(색상)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **45줄**\ `45` .top\_member\_box > li strong { color: #e38bac;} 3. 카테고리 메뉴의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **203줄**\ `203` #header .gnb .depth0 > li > a { display: inline-block; padding: 0 63px; font-size: 14px; font-weight: bold; text-align: center; line-height: 49px;} 4. 카테고리 메뉴의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경해줍니다.\ `변경 위치` css > layout > layout.css **214줄**\ `214` #header .gnb .depth1 li a { display: block; /\* width: 100%; \*/ padding: 5px 10px 7px 19px; font-size: 12px;} 5. 2 depth 메뉴 마우스 오버 시의 **background(배경), color(색상)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **216줄**\ `216` #header .gnb .depth1 li a.active { background: #e38bac; color: #ffffff;}
[ 좌측 메뉴형] 메뉴 영역 변경하기 ![](/files/O3UFsYI1ITxjzOLkyUCV) 1. 상단 메뉴의 **color(색상), font-size(크기)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **41줄**\ `41` .top\_member\_box > li a { display: inline-block; padding: 4px 0 4px 10px; color: #888888; font-size: 11px;} 2. 장바구니 담긴상품 수량 폰트의 **color(색상)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **44줄**\ `44` .top\_member\_box > li strong { color: #e38bac;} 3. 카테고리 메뉴 오버 시 **font-size(폰트사이즈)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **181줄**\ `181` .sub\_menu\_box .sub\_depth0 > li > a.active { background: url(../../img/common/btn/btn\_gnb\_list\_over.png) no-repeat right center; background-color: #f8f8f8;} 4. 카테고리 메뉴의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경해줍니다.\ `변경 위치` css > layout > layout.css **194줄**\ `194` .sub\_menu\_box .sub\_depth0 > li > a.active { display: block; padding: 15px 10px 15px 20px; font-size: 18px; font-weight: bold; text-align: left;} 5. 2depth 메뉴 오버 시 **background-color(배경), color(색상)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **201줄**\ `201` .sub\_menu\_box .sub\_depth1 li a.active { background: #e38bac; color: #ffffff;}
검색창 폰트 변경하기 ![](/files/debWz5wBXItpOKmuzlBZ) 1. 검색창 인풋박스 입력 폰트의 **font-size(크기)** 값을 변경해줍니다. \ `변경 위치` css > common > common.css **42줄**\ `42` input\[type="text"], input\[type="password"] { padding: 0 10px; outline: none; font-size: 12px;} 2. 최근 검색어 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **90줄**\ `90` .recent\_box dt { font-size: 13px; font-weight: bold;} 3. 추천상품 폰트의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **102줄**\ 1`02` ;auto-links:false">.recom\_box dt { width: 122px; padding: 0 0 10px 0; font-size: 13px; font-weight: bold; text-align: center;} 4. 추천상품 가격 폰트의 **font-size(크기)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **100줄**\ `100` .recom\_money\_box .item\_price { display: inline-block; float: right; width: 138px; min-height: 218px; margin: 10px 0 0 -1px; padding: 0 0 20px 15px; font-size: 12px;} 5. 추천상품 검색창 닫기 폰트의 **color(색상), font-size(크기), line-height(행간)** 값을 변경해줍니다.\ `변경 위치` css > layout > layout.css **146줄**\ `146` .seach\_top\_all .btn\_top\_search\_close { float: right; padding: 0 15px 0 15px; color: #333333; font-size: 12px; line-height: 30px;}
검색창 사이즈 변경하기(배경/라인) ![](/files/gFRClO0prdV0UJwgYgJ8) 1. 검색창의 **height(높이)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **81줄**\ `81` #header .top\_search .top\_text\_cont .top\_srarch\_text { width: 100%; height: 45px; padding: 5px 45px 5px 15px; box-sizing: border-box;} 2. 검색창 레이어 영역의 **border(선), background(배경)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **70줄**\ `70` .#header .top\_search { position: absolute; top: 25px; right: 0; float: right; border: 1px solid #cccccc; background: #ffffff; z-index: 110;} 3. 추천상품 이미지 영역의 **border(선), background(배경)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **83줄**\ `83` .recom\_box .recom\_photo { display: block; margin: 0; font-size: 0; border-top: 1px solid #cccccc; background: #ffffff;}
푸터 변경하기(폰트/컬러) ![](/files/G31YGLBV1WSxXTHW0hyo) 1. 푸터 메뉴 폰트의 **color(색상), border-left(선)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **413줄**\ `413` .foot\_list ul li a { padding: 0 15px 0 14px; color: #1d1d1d; border-left: 1px solid #e0e0e0;} 2. 푸터 정보영역 폰트의 **color(색상), font-size(크기), line-height(행간)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **421줄**\ `421` .foot\_cont {overflow: hidden; padding: 27px 0 35px 0; color: #737373; font-size: 11px; line-height: 1.8;} 3. 고객센터 영역의 전화번호 **color(색상), font-size(크기), line-height(행간)** 값을 변경해줍니다.\ `변경 위치` css > layout > layout.css **381줄**\ `381` .foot\_cont {overflow: hidden; display: block; padding: 0 0 7px 0; color: #e38bac; font-size: 18px;}
> #### 메인
상품 리스트 변경하기 ![](/files/e1FqcQJdWENHgCayJhqP) 1. 상품 이미지의 **text-align(정렬), color(색상)** 값을 변경해줍니다. \ `변경 위치` css > goods > list.css **30줄**\ `30` .item\_cont { text-align: center; border: 1px solid #ebebeb; vertical-align: middle; } 2. 상품명 폰트의 **font-size(크기)** 값을 변경해줍니다. \ `변경 위치` css > goods > list.css **52줄**\ `52` .item\_tit\_box .item\_name { display: block; color: #888888;}} 3. 정상가격 폰트의 **color(색상)** 값을 변경해줍니다. \ `변경 위치` css > goods > list.css **30줄**\ `30` .item\_money\_box del { display: inline-block !important; overflow: hidden; position: relative; text-align: center; border: 1px solid #ebebeb; vertical-align: middle;}} 4. 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다. \ `변경 위치` css > goods > list.css **53줄**\ `53` .item\_money\_box .item\_price { display: block; padding: 7px 0 5px 0; font-size: 14px; color: #e38bac;}
최근 본 상품 변경하기 ![](/files/5e0Tr3eZjBprWELIWlgK) 1. 최근 본 상품 영역의 **border(선), background(배경)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **449줄**\ `449` .scroll\_right\_cont {float: left; min-width: 76px; padding: 18px 13px 18px 13px; background: #ffffff; border: 1px solid #e9e9e9;} 2. 타이틀 폰트의 **color(색상), text-align(정렬)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **450줄**\ `450` .scroll\_right\_cont h4 { padding: 0; color: #252525; text-align: center;} 3. 최근 본 상품 오버 시 **border(선), background(배경)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **458줄**\ `458` .scroll\_right\_cont .src\_box { position: absolute; top: -1px; right: -1px; width: 191px; height: 86px; padding: 5px 0 0 7px; border: 1px solid #999999; background: #ffffff; text-align: left; z-index: 10;} 4. 상품 가격 폰트의 **color(색상)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **459줄**\ `459` .scroll\_right\_cont .src\_box strong { display: block; overflow: hidden; width: 95px; height: 59px; color: #939393; word-break: break-all;}
sns링크 메뉴 변경하기 ![](/files/Hl6XI1Uxxf4VUYgWXMeF) 1. sns링크 이미지의 **display 값을 변경해줍니다.** \ `변경 위치` css > goods > list.css **415줄**\ `415` .item\_cont {position: relative; width: 1200px; margin: 0 auto; display: none; }
게시판 폰트 변경하기 ![](/files/uISWgBtaTkqHWBfBmOds) 1. 게시판 **background(배경) 컬러** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **393줄**\ `393` .recent\_box dt { float: left; overflow: hidden; width: 213px; height: 118px; padding: 16px 17px; margin: 0 18px 0 0; background: #ffffff;} 2. 게시판의 **font-size(사이즈), color(색상), border(선)** 값을 변경해줍니다.\ `변경 위치` css > order > button.css **394줄, 13줄**\ `394` .btn\_order\_choice\_buy { padding: 0 0 3px 0; border-bottom: 1px solid #797979;}\ `13` .btn\_order\_choice\_buy:hover { font-size: 12px; line-height: 1.5; font-family: Malgun Gothic,"맑은 고딕",AppleGothic,Dotum,"돋움",sans-serif; color: #333;}
메인화면에 공지사항, 배너 삭제하기 ![](/files/h0oxHMf44NrY0hu18Uxs) ✔️ 메인화면에 노출되는 공지사항과 배너 영역의 마지막 줄에 **display: none;** 값을 추가합니다. \ `변경 위치` css > layout > layout.css **390줄**\ `390` .main\_visual .main\_visual\_banner { float: left; position: absolute; top: 347px; left: 50%; width: 511px; margin-left: 82px; display: none;}
> #### 상품상세
상품 상세 변경하기(폰트) ![](/files/G95HhmaoHUlzGQMfY1sR) 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: #e38bac; font-weight: bold;} 5-2. 총 합계금액 가격 폰트의 **font-size(크기)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **93줄**\ `93` .item\_tatal\_box .total\_amount dd strong { font-size: 20px;}
상품 상세 변경하기(버튼) ![](/files/LpsjR6ZycEFqrPk7xt6Y) 1. 공유하기 버튼의 **background(배경), border(선)** 값을 변경해줍니다. \ `변경 위치` css > button > button.css **9줄**\ `9` .btn\_gray\_list a, .btn\_gray\_list button { display: inline-block; padding: 0px 20px 0 0; background: url(../img/common/btn/btn\_gray\_bg.png) no-repeat right top; border: 1px solid #dbdbdb; vertical-align: middle;} 2. 조건별 배송 버튼의 **font-size(크기), background(배경)** 값을 변경해줍니다. \ `변경 위치` css > button > button.css **9줄**\ `9` .btn\_gray\_list .btn\_gray\_small { font-size: 11px; background: url(../img/common/btn/btn\_gray\_bg\_02.png) repeat-x bottom;} 3. 장바구니 버튼의 **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: #e38bac; font-size: 16px; border: 1px solid #e38bac; background: #ffffff; text-align: center; font-weight: bold;} 4. 바로구매 버튼의 **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 #e38bac; background: #e38bac; text-align: center; font-weight: bold;}
상품 상세 변경하기(라인) ![](/files/dhbvMzpqkRmEPyU2Hduv) 1. 셀렉트 영역의 **border(선), background(배경)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **250줄**\ `250` .location\_select { display: block; position: absolute; top: 22px; left: 0px; width: 100%; margin-left: -1px; padding: 6px 0 6px 0; font-size: 0; border: 1px solid #999999; background: #ffffff;} 2. 상품 이미지 영역의 **border(선)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **10줄**\ `10` .item\_detail\_tit { display: table-cell; position: relative; width: 600px; height: 600px; text-align: center; vertical-align: middle; border: 1px solid #ebebeb;} 3. 리스트 항목 구분선의 **border-top(선) 값을 변경해줍니다.** \ `변경 위치` css > goods > goods.css **43줄**\ `43` .item\_add\_option\_box { position: relative; padding: 0 0 10px 0; border-bottom: 1px solid #dbdbdb;} 4. 선택한 옵션영역의 **border-bottom(선) 값을 변경해줍니다.** \ `변경 위치` css > goods > goods.css **699줄**\ `699` .item\_detail\_list + .item\_choice\_list table { width: 100%; border-bottom: 1px solid #999999;} 5. 총 합계금액 구분 영역의 **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;}
상품 상세 탭 변경하기 ![](/files/awuBybdEE0UMg2nHscMn) 1. 상품 상세 탭 선택시 **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;} 2. 글 등록 수량 폰트의 **color(색상)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **122줄**\ `122` .item\_goods\_tab li a strong {color: #e38bac;}
> #### 주문결제
장바구니 타이틀 영역 변경하기 ![](/files/WGVAuITSh4UyZGXuPYSJ) 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: #e38bac; 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/fstNiYfxuAM9mTBOcv2e) ✔️ 상품금액/배송비/합계 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.\ `변경 위치` css > order > order.css **137줄, 138줄**\ `137` .price\_sum\_cont .price\_sum\_list dd {color:#ab3e55;}\ `138` .price\_sum\_cont .price\_sum\_list dd strong {font-weight: 700; font-size: 18px;color: #e38bac;}
최종 결제금액, 결제하기 버튼 변경하기 ![](/files/2gN6HSCNJ8ZpmBIFKAEZ) 1. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.\ `변경 위치` css > order > order.css **323줄**\ `323` .payment\_final\_total dd {display: inline-block;font-size: 30px;color: #e38bac;} 2. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경해줍니다.\ `변경 위치` css > gd\_reset.css **180줄**\ `180` .btn\_order\_buy {display: inline-block;width: 300px;height: 61px;line-height: 59px;color: #fff;font-size: 20px;border: 1px solid #e38bac;background: #e38bac;text-align: center;}
장바구니 폰트/버튼 변경하기(컬러/사이즈/굵기) ![](/files/zreBSpmrDxiu34yS6PsS) 1. 장바구니 상품금액/배송비/최종 결제금액의 **color(색상), font-size(사이즈), font-weight(굵기)** 값을 변경해줍니다.\ `변경 위치` css > order > order.css **137줄, 138줄**\ `137` .price\_sum\_cont .price\_sum\_list dd {color:#ab3e55;}\ `138` .price\_sum\_cont .price\_sum\_list dd strong {font-weight: 700;font-size: 18px;color: #e38bac;}} 2. 선택상품주문 버튼은 마우스 오버 전(.btn\_order\_choice\_buy) 과 오버 시(.btn\_order\_choice\_buy:hover)의 **border(선), font-size(사이즈), color(색상)** 값으로 각각 변경해줍니다.\ `변경 위치` css > order > button.css **174줄, 175줄**\ `174` .btn\_order\_choice\_buy {min-width: 190px;height: 55px;padding: 0 20px 0 20px;color: #e38bac;font-weight: bold;font-size: 14px;border: 1px solid #e38bac;background: #fff;cursor: pointer;}}\ `175` .btn\_order\_choice\_buy:hover {color: #db83a4;border: 1px solid #db83a4;} 3. 전체상품주문 버튼은 마우스 오버 전(.btn\_order\_whole\_buy) 과 오버 시(.btn\_order\_whole\_buy:hover) 의 **background(배경) 컬러, border(선), color(색상), font-size(사이즈)** 값으로 각각 변경해줍니다.\ `변경 위치` css > gd\_reset.css **177줄, 178줄**\ `177` .btn\_order\_whole\_buy {min-width: 190px;height: 55px;padding: 0 20px 0 20px;color: #ffffff;font-size: 14px;border: 1px solid #e38bac;background: #e38bac;cursor: pointer;font-weight: bold;}}\ `178` .btn\_order\_whole\_buy:hover {border: 1px solid #db83a4;background: #db83a4;}
--- # 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/pure/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.