# MIME\_PC 스킨 가이드

<details>

<summary>[좌측 메뉴타입] 메뉴 고정하기</summary>

`메뉴 미고정 (기본 설정)` 스크롤을 이동 시, 메뉴가 화면과 함께 움직입니다.\
`메뉴 고정` 스크롤 이동 시, 메뉴는 움직이지 않고 화면만 움직입니다.\
쇼핑몰의 카테고리 메뉴 개수가 적을 경우, 메뉴 고정을 권장드립니다.

✔️ **메뉴 고정 방법**

`변경 위치`  스타일시트 > goods > list.css **139줄**\
**\[변경 전]**\
&#x20; `139` .side\_cont{<mark style="background-color:orange;">position:absolute</mark>; top:0px; left:0px; width:200px; min-height:100%; z-index:150;}\
\&#xNAN;**\[변경 후]**\
&#x20; `139` .side\_cont{<mark style="background-color:orange;">position:fixed</mark>; top:0px; left:0px; width:200px; min-height:100%; z-index:150;}

</details>

<details>

<summary>[공통] 팝업창 투명하게 띄우기</summary>

아래 팝업 예시 이미지를 활용해 팝업을 등록하면, 아래와 같은 팝업이 메인화면에 노출됩니다.\
`메뉴 위치` 관리자 > 디자인 > 팝업창 관리

\[팝업 예시 이미지]\ <img src="https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FB3gCQoyknHGe7FDSg5F0%2Fimage.png?alt=media&#x26;token=0adac5fb-af75-49c5-b209-820dfec43c80" alt="" data-size="original">

\[팝업 등록 화면]\
![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FOWcQUAPR4NIm06OkQiER%2Fimage.png?alt=media\&token=903bd6a5-467b-4793-9002-9e82f1a13d7d)

\[팝업창 투명 설정 화면]\
![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FoX4N2uEH5ctiZzPbAM3E%2Fimage.png?alt=media\&token=464a079f-98e8-4eb0-82b1-5fce1a32d6fd)

✔️ **팝업창 투명 설정**

1. 팝업창으로 띄울 이미지를 'layer-close2.png'로 저장합니다.
2. ftp에 접속후 다운받은 이미지를  data/skin/front/스킨이름/img/btn/ 경로에 업로드합니다.&#x20;
3. 아래 가이드 내용을 따라, CSS를 수정합니다. \
   `변경 위치`  css > common > layer > layer.css **96, 98, 99줄**\
   \
   **\[변경 전]**\
   &#x20; `95`  /\* 시스템 팝업 시작 \*/

   &#x20; `96` .sys\_pop{position:absolute; padding:20px 15px 10px; <mark style="background-color:orange;">border:2px solid #727071; background:#fff;</mark>} <mark style="color:red;">삭제</mark>\
   &#x20; `97` .sys\_pop .box{position:relative; padding:38px 0 0;}\
   &#x20; `98` .sys\_pop .box .close{display:block; position:absolute; <mark style="background-color:orange;">top:6px; right:0; width:18px; height:18px</mark>; text-indent:-9999px; background:url('../../../img/btn/<mark style="background-color:orange;">layer-close.png</mark>) no-repeat left top;}  \ <mark style="color:red;">변경</mark> top:60px; right:55px; width:49px; height:49px   \ <mark style="color:red;">변경</mark> layer-close2.png                                                   &#x20;

   &#x20; `99` .sys\_pop .box .view{<mark style="background-color:orange;">border:1px solid #dbdbdb</mark>;} <mark style="color:red;">삭제</mark>\
   \
   \&#xNAN;**\[변경 후]**\
   &#x20; `95`  /\* 시스템 팝업 시작 \*/

   &#x20; `96` .sys\_pop{position:absolute; padding:20px 15px 10px;}\
   &#x20; `97` .sys\_pop .box{position:relative; padding:38px 0 0;}\
   &#x20; `98` .sys\_pop .box .close{display:block; position:absolute; <mark style="background-color:orange;">top:60px; right:55px; width:49px; height:49px</mark>; text-indent:-9999px; background:url('../../../img/btn/<mark style="background-color:orange;">layer-close2.png</mark>) no-repeat left top;}                                                  &#x20;

   &#x20; `99` .sys\_pop .box .view{}

   &#x20;                                           &#x20;

</details>

<details>

<summary>[공통] 상품 이미지 사이즈 설정하기</summary>

디자인 스킨을 다운받고, 그 디자인 컨셉에 맞게 상품 세팅을 하려면, \
가장 먼저 상품 이미지 사이즈  세팅이 필요합니다. \
\
⚠️단, 상품이 이미 등록되어있는 경우\
상품 이미지 사이즈 세팅을 다시 하면 모든 상품의 이미지 등록을 새로 진행해야 합니다.

⚠️상품 이미지 사이즈 설정 전, 각 상품 이미지 노출 위치 먼저 확인하시기 바랍니다. \
[상품이미지 사이즈 설정 매뉴얼 바로가기 > ](http://manual.godomall5.godomall.com/data/manual_view.php?category=policy__goods___goods_images#%EC%9D%B4%EB%AF%B8%EC%A7%80%EC%82%AC%EC%9D%B4%EC%A6%88%EC%84%A4%EC%A0%95%EB%B0%A9%EB%B2%95)

✔️ 관리자 메뉴 위치 : 기본설정 > 상품 정책 > 상품 이미지 사이즈 설정\
\
![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FD6AVlIPXpL02CupvCI61%2Fimage.png?alt=media\&token=9c42a0da-fb51-486c-98e0-39bcadde5969)

✔️ 사이즈 이미지 설정 예시

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FEGqgVcC5nxcAz7YP6hLj%2Fimage.png?alt=media\&token=beee1912-5ea3-4aaf-8568-a34f79be638b)

</details>

<details>

<summary>[공통] 진열상품 이미지 테두리 없애고 상품정보 정렬 바꾸기</summary>

✔️**DESIGN TIP** \
등록하고자 하는 상품 이미지가 배경이 흰색이고 상품 중심이라면 상품 이미지 테두리가 없는 것이 보기 좋습니다. \
또한 상품 이미지 테두리가 없다면, 상품 정보의 정렬을 좌측 정렬에서 중앙 정렬로 바꾸는 것을 권장드립니다.&#x20;

1. 이미지 테두리 없애기\
   진열 상품 이미지 **border(테두리)** 부분 전체를 삭제합니다.&#x20;

   `변경 위치`  css > goods > list.css **31줄**\
   &#x20; `31` .item\_photo\_box{display:inline-block !important; overflow:hidden; position:relative; text-align:center; <mark style="background-color:orange;">border:1px solid #ebebeb</mark>; vertical-align:middle;} <mark style="color:red;">삭제</mark><br>
2. 상품정보 중앙정렬로 바꾸기\
   `변경 위치`  css > goods > list.css **43줄**\
   **\[변경 전]**\
   &#x20; `43` .item\_info\_cont{<mark style="background-color:orange;">display:table-cell</mark><mark style="color:red;">(삭제)</mark>; padding:20px 0 0 0; <mark style="background-color:orange;">text-align:left</mark><mark style="color:red;">(center로 수정)</mark>; vertical-align:middle; font-size:12px;}\
   \
   \&#xNAN;**\[변경 후]**\
   &#x20; `43` .item\_info\_cont{padding:20px 0 0 0; <mark style="background-color:orange;">text-align:center</mark>; vertical-align:middle; font-size:12px;}

</details>

<details>

<summary>[공통] 메인화면 동영상 바꾸기</summary>

**1️. 동영상 업로드하기**

먼저, 동영상을 업로드 합니다.\
샘플 사이트에서는 VIMEO 서비스를 사용했습니다. (<https://vimeo.com/)>\
⚠️ 유튜브 동영상 사용시에도 방법은 동일합니다.

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2Fxkq4fEQlXNqXZGahEgEZ%2Fimage.png?alt=media\&token=7cb3ba93-7ce2-473d-8873-5fe931a46c96)

**2. 동영상 복사하기**

임베딩 소스를 복사합니다.

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FVZqUQyq0kzSaVjGZZt4K%2Fimage.png?alt=media\&token=6ea1b531-54f5-471a-a791-bfc2b91eb524)

**3.** **css 수정하기**

아래 가이드를 참고해 index.html 파일내  18번 줄에 샘플 소스를 삭제하고, 위에서 복사한 임베딩 소스를 붙여넣습니다.

`변경 위치`  main > index.html **18줄**\
&#x20; `18` <mark style="background-color:orange;">\<iframe src="<https://player.vimeo.com/video/248100452?autoplay=1\\&loop=1\\&color=e28686\\&title=0\\&byline=0\\&portrait=0>" width="830" height="467" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>\</iframe></mark>

</details>

<details>

<summary>[공통] 메인화면 동영상 삭제하기</summary>

1. 동영상 삽입 소스 삭제 | 15\~21줄 모두 삭제

`삭제 위치`  main > index.html **15\~21줄**

2. 동영상 영역 배경 삭제 (배경 이미지 스타일 주석처리)

`변경 위치`  main > index.html **12줄**\
\
**\[변경 전]**\
&#x20; `12` .main\_sec2{background:url('../../img/common/bg\_main\_sec2.png') center top no-repeat; margin-top:80px;}

**\[변경 후]**\
&#x20; `12` .main\_sec2{<mark style="background-color:orange;">/\*</mark>background:url('../../img/common/bg\_main\_sec2.png') center top no-repeat; margin-top:80px;<mark style="background-color:orange;">\*/</mark>}

<br>

</details>