먼저, 다른 스킨을 사용하실 경우 수정방법이 달라지므로 확인 후 작업하시기 바랍니다.

 

 

 

1. 스킨 관리에서 [소스 수정 모드] 로 변경합니다.

 

 

 

2. FTP 에 이미지를 업로드한 후 경로를 확인합니다.

    /img_up/shop_pds/appkorea113/design/img/sub_top.jpg

 

 

3. 스킨 관리에서 pc_skin_855_441.css 을 수정합니다.

 

 

 

3.1) 서브 페이지 제목 위치에 배경이미지를 추가합니다.

 

/* sub page */
.shgroup {position:relative;background:url(/img_up/shop_pds/appkorea113/design/img/sub_top.jpg) center top no-repeat;}
.shgroup > a {display:block;position:relative;width:100%;height:40px;line-height:40px;margin:0;padding:0 40px;border:none;box-sizing:border-box;background:#ff9ab0;font-size:16px;color:#ffffff;text-align:center}

 

 

 

3.2)  PC 화면에서 가로 100%의 크기로 출력되기 위해 다음과 같이 수정합니다.

 

    /* PC 화면 넓이값을 가진 센터유지 */
    #header > .inner, #lnb_p, .sub_location, #footer .fnb, #footer .finfo, .shgroup, #sub_view #container .contents_wrap .snb_wrap {margin:0 auto;max-width:1000px}

->

    /* PC 화면 넓이값을 가진 센터유지 */
    #header > .inner, #lnb_p, .sub_location, #footer .fnb, #footer .finfo, .shgroup_pc, #sub_view #container .contents_wrap .snb_wrap {margin:0 auto;max-width:1000px}

 

 

 

3.3) PC 화면에서 높이값을 추가합니다.

     제목이 가운데 출력되도록 여백을 수정합니다.

     제목 색상 및 그림자를 수정합니다.

 

    /* sub page */
  
    .shgroup > .shgroup_pc {padding:40px 0 30px}
    .shgroup > .shgroup_pc .sub_location {font-size:0;text-align:center}
    .shgroup > .shgroup_pc .sub_location > span {font-size:13px}
    .shgroup > .shgroup_pc .sub_location .loc_arrow {margin:0 5px;font-family:'굴림', 'Gulim';font-size:12px;opacity:.5}
    .shgroup > .shgroup_pc .sub_location .bold {color:#ff9ab0}
    .shgroup > .shgroup_pc .sub_top_title {margin:0;padding:0;font-size:32px;color:#333;text-align:center;letter-spacing:-.03em;}
    .shgroup > .shgroup_pc .sub_top_bg {margin-top:10px;text-align:center}
    .shgroup > .shgroup_pc .sub_top_bg img {vertical-align:top}
    .shgroup > .shgroup_pc .sub_top_text {margin:10px 0 0;padding:0;font-size:14px;text-align:center}

->

    /* sub page */
    .shgroup {height:330px}
    .shgroup > .shgroup_pc {padding:140px 0 140px}
    .shgroup > .shgroup_pc .sub_location {font-size:0;text-align:center}
    .shgroup > .shgroup_pc .sub_location > span {font-size:13px}
    .shgroup > .shgroup_pc .sub_location .loc_arrow {margin:0 5px;font-family:'굴림', 'Gulim';font-size:12px;opacity:.5}
    .shgroup > .shgroup_pc .sub_location .bold {color:#ff9ab0}
    .shgroup > .shgroup_pc .sub_top_title {height:50px;line-height:50px;margin:0;padding:0;font-size:32px;color:#fff;text-align:center;letter-spacing:-.03em;text-shadow:1px 1px 5px rgba(0,0,0,.5);}
    .shgroup > .shgroup_pc .sub_top_bg {margin-top:10px;text-align:center}
    .shgroup > .shgroup_pc .sub_top_bg img {vertical-align:top}
    .shgroup > .shgroup_pc .sub_top_text {margin:10px 0 0;padding:0;font-size:14px;text-align:center}

 

 

 

3.4) 서브 메뉴들이 너무 붙어 있어서 상단 여백을 추가합니다.

    #sub_view #container .contents_wrap {padding:0 0 30px}
    #sub_view #container .contents_wrap:after {clear:both;content:'';display:block}
    #sub_view #container .contents_wrap .snb_wrap {margin-top:40px;margin-bottom:40px}