# MIME\_Mobile 스킨 가이드

<details>

<summary>전체 메뉴 스타일 변경하기</summary>

![](/files/9DeSWPSQR8ond0itPnx4)

ℹ️MIME Mobile 스킨은 햄버거 버튼(메뉴 버튼) 클릭 시, 딤드 처리된 어두운 배경의 메뉴 스타일을 제공합니다. \
이 스타일을 흰색 배경으로 변경을 원하시면, 아래 가이드를 참조해 수정하시기 바랍니다.&#x20;

1. 먼저 딤드처리된 전체 배경 컬러를 변경합니다.

   `변경 위치`  css > gd\_layout.css **67줄**\
   &#x20; `67` #wrap nav .bg {display:none; position:fixed; top:0; left:0; width:100%; height:100%; <mark style="background-color:orange;">background:rgba(33, 33, 33, 0.9)</mark>; z-index:1001;}\
   → <mark style="background-color:orange;">background:rgba(256, 256, 256, 0.9)</mark>으로 변경
2. 배경이 흰색으로 바뀌어서 원래 흰색이던 텍스트가 보이지 않게 되므로 텍스트 컬러를 변경합니다.\
   ⚠️컬러 속성을 빼면, 디폴트 컬러값인 블랙 컬러가 됩니다. 다른 컬러로 변경을 원할 시, 컬러 코드값을 변경합니다.\
   \
   `변경 위치`  css > proc > proc.css **7줄**\
   &#x20; `7` .category\_side > li a {position:relative; display:block; padding:12px 0 12px 0; font-size:18px; <mark style="background-color:orange;">color:#ffffff;</mark>} <mark style="color:red;">삭제</mark>\
   \
   `변경 위치`  css > gd\_layout.css **144, 117, 125줄**\
   &#x20; `144` .nav\_community\_box .comm\_tit {padding:10px 0 5px 0; margin:0 10px 0 10px; font-size:18px; <mark style="background-color:orange;">color:#ffffff</mark>; font-weight:bold;} <mark style="color:red;">삭제</mark>\
   &#x20; `117` .nav\_community\_box .board\_cate li a {display:block; padding:5px 0; font-size:16px; <mark style="background-color:orange;">color:#ffffff</mark>;} <mark style="color:red;">삭제</mark>\
   &#x20; `125` .nav\_tabmenu\_box .brand\_tit {display:block; padding:0 0 12px 0; font-size:18px; <mark style="background-color:orange;">color:#ffffff</mark>; font-weight:bold;} <mark style="color:red;">삭제</mark>

</details>

<details>

<summary>하단 고정 버튼 스타일 변경하기</summary>

![](/files/cldp6eUBvYChSf76hQGJ)

ℹ️Mobile 스킨의 상품 상세 페이지 하단에는 장바구니와 바로구매 버튼이 고정으로 위치합니다. \
이 버튼의 스타일을 바꾸고 싶다면 아래 가이드를 참조해 수정하시기 바랍니다.

✔️ **아래 코드에서 원하는 컬러 코드값으로 변경해주세요.**\
background : 배경 컬러 \
border : 테두리( 1px: 테두리 두께를 설정,  solid : 실선을 뜻함 )\
color : 텍스트 컬러&#x20;

`변경 위치`  css > gd\_button.css **166\~168줄**

✔️ **장바구니 버튼 수정하기**\
&#x20; `166` /\* 장바구니 \*/.detail\_cart\_btn {display:block; width:100%; padding:12px 0 12px 0; font-size:16px;  text-align:center; <mark style="background-color:orange;">background:#465874; border:1px solid #465874; color:#ffffff</mark>;  font-weight:bold; box-sizing:border-box;}

✔️ **구매불가 버튼 수정하기**\
&#x20; `167` /\* 구매불가 \*/.detail\_prd\_no\_btn {display:block; width:100%; padding:10px 0 10px 0; font-size:16px; text-align:center; <mark style="background-color:orange;">background:#dcdcdc; border:1px solid #dcdcdc; color:#a5a5a5</mark>;  font-weight:bold; box-sizing:border-box;}

&#x20;⚠️구매불가 버튼은, 상품을 품절처리했을때 상세페이지에서 보이는 버튼입니다.

✔️ **바로구매 버튼 수정하기**\
&#x20; `168` /\* 바로구매 \*/.detail\_order\_btn {display:block; width:100%; padding:12px 0 12px 0; font-size:16px; text-align:center; <mark style="background-color:orange;">background:#323438; border:1px solid #323438; color:#ffffff</mark>; font-weight:bold; box-sizing:border-box;}

</details>

<details>

<summary>샘플샵처럼 상품 진열하기</summary>

![](/files/wIJwKJ5WwtCDSdx3n2rL)

✔️ **상품 이미지 사이즈 세팅하기**

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

⚠️상품 이미지 사이즈 설정 전, 각 상품 이미지 노출 위치 먼저 확인하시기 바랍니다.\
&#x20;[상품이미지 사이즈 설정 매뉴얼 바로가기 > ](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)

✔️ **상품 진열 세팅하기**

1. 테마 등록 화면에서 아래 이미지를 참조해 팅을 진행합니다.\
   `관리자 메뉴 위치` 관리자 > 상품 > 상품 노출형태관리 > 테마관리 - \[테마등록] 버튼 클릭\
   \
   ![](/files/VgjoVjJiqgREeEh6byBm)\
   ① 테마명은 알아보기 쉬운 이름으로 입력합니다. \
   샘플샵에서는 메인 진열용 운동화 상품 이미지 썸네일의 가로 사이즈가 168px 이므로 '모바일메인 168' 로 입력합니다.&#x20;

   &#x20;&#x20;

   ② 앞서 등록한 상품 이미지 사이즈 설정 중에서 '심플(168)'을 선택합니다.\
   &#x20; ⚠️만약, 심플(168)이 없다면 상품이미지 사이즈 설정을 먼저 진행해야합니다.&#x20;

   ③ 상품 노출 개수를 설정합니다. 마임 샘플샵에서는 2x8 로 설정합니다.\
   여기서 숫자 2는 온전히 보이는 상품의 개수를 의미합니다.\
   ![](/files/fYCwz4XYpKC5vGen59HG)&#x20;

   &#x20;

   &#x20;2x8 의 숫자 8은 가로로 나열된 총 상품 개수를 의미합니다.&#x20;

   &#x20;샘플샵에서는 총 6개의 운동화를 롤링시켜서 보여주려고 합니다. (추가가 될수도 있으니 넉넉하게 8 이라고 입력합니다)<br>

   &#x20; ④ '상품 이동형' 디스플레이 유형을 선택합니다.&#x20;
2. 운동화 상품 맞춤형 테마가 셋팅이 되었으면, 진열설정에서 등록한 테마를 선택하고 상품을 진열합니다.\
   `관리자 메뉴 위치` 관리자 > 상품 > 상품 진열 관리 > 메인페이지 상품진열\
   \ <img src="/files/C0uF1dDuAgsjIH5Z3gRq" alt="" data-size="original">

</details>

<details>

<summary>진열 상품 이미지 테두리 없애기</summary>

![](/files/oaijL3lfPr7Jo9FESg5O)

ℹ️ 기본스킨에는 기본적으로 상품 이미지에 테두리가 있습니다. \
이 테두리를 없애고자 한다면, 아래 가이드를 참조해 css 파일을 수정하시기 바랍니다.&#x20;

✔️**DESIGN TIP** \
등록하고자 하는 상품 이미지가 배경이 흰색이고 상품 중심이라면 상품 이미지 테두리가 없는 것이 보기 좋습니다. &#x20;

진열 상품 이미지 **border(테두리)** 부분 전체를 삭제합니다.\
&#x20;\
`변경 위치`  css > goods > ist > list 01.css **10줄**\
&#x20; `10` goods\_prd\_item2 .goods\_prd\_img .img\_box .img img {width:100%; <mark style="background-color:orange;">border:1px solid #e5e5e5</mark>; box-sizing:border-box;}\ <mark style="color:red;">삭제</mark>

<mark style="color:red;">⚠️</mark> 모바일샵에서 여러가지 타입의 진열타입을 사용한다면, 해당 css 를 각각 수정해야합니다.\
list\_01.css : 갤러리형\
list\_02.css : 상품 리스트형\
list\_04.css : 상품이동형\
list\_06.css : 스크롤형 \
list\_07.css : 탭+상품이동형 \
list\_09.css : 심플이미지형\
list\_11.css : 장바구니형&#x20;

</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/mobile-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.