# 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="/files/rLRHpuZZgQkHVzPADP7P" alt="" data-size="original">

\[팝업 등록 화면]\
![](/files/BRQHvOBwN1ZcsNNhDcfW)

\[팝업창 투명 설정 화면]\
![](/files/zPA16kafxR4wt1UHm6sk)

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

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)

✔️ 관리자 메뉴 위치 : 기본설정 > 상품 정책 > 상품 이미지 사이즈 설정\
\
![](/files/qWENJ9uV2lDHIVnRGLaw)

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

![](/files/Fyl5QY7WYaWLpQZp34oh)

</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/)>\
⚠️ 유튜브 동영상 사용시에도 방법은 동일합니다.

![](/files/NFdY3RDVH0Hi7AxhVEQz)

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

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

![](/files/dETCgr5PzFRBpWlHj6pA)

**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>


---

# 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/mime/pc-guide.md?ask=<question>
```

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.