# PURE\_PC 스킨 가이드
> #### 공통
포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\
PURE 스킨에 적용되어 있는 기본 컬러 코드 **#e38bac**을 확인합니다. \
2. **관리자 > 디자인 메뉴 접속**
3. **스타일시트/CSS 변경** \
좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\
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**도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.
[상단 메뉴형] 메뉴 영역 변경하기
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;}
[ 좌측 메뉴형] 메뉴 영역 변경하기
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;}
검색창 폰트 변경하기
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;}
검색창 사이즈 변경하기(배경/라인)
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;}
푸터 변경하기(폰트/컬러)
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;}
> #### 메인
상품 리스트 변경하기
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;}
최근 본 상품 변경하기
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링크 메뉴 변경하기
1. sns링크 이미지의 **display 값을 변경해줍니다.** \
`변경 위치` css > goods > list.css **415줄**\
`415` .item\_cont {position: relative; width: 1200px; margin: 0 auto; display: none; }
게시판 폰트 변경하기
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;}
메인화면에 공지사항, 배너 삭제하기
✔️ 메인화면에 노출되는 공지사항과 배너 영역의 마지막 줄에 **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;}
> #### 상품상세
상품 상세 변경하기(폰트)
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;}
상품 상세 변경하기(버튼)
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;}
상품 상세 변경하기(라인)
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;}
상품 상세 탭 변경하기
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;}
> #### 주문결제
장바구니 타이틀 영역 변경하기
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;}
주문서 금액 변경하기
✔️ 상품금액/배송비/합계 폰트의 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;}
최종 결제금액, 결제하기 버튼 변경하기
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;}
장바구니 폰트/버튼 변경하기(컬러/사이즈/굵기)
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;}