# 디자인 편집

## 관리자 메뉴 위치

`디자인` > `디자인 스킨 관리` > `디자인 편집` 

## 디자인 스킨 편집 화면 열기 

<figure><img src="/files/JqXv4QsDgoQkjKWENHbK" alt=""><figcaption></figcaption></figure>

* 수정 원하는 디자인 스킨의 <mark style="color:$primary;">\[디자인 편집]</mark> 버튼을 누르면 편집 창이 노출돼요.&#x20;

## 디자인 편집 화면 상단

<figure><img src="/files/9u7bCwqyyVPllrSUtC1T" alt=""><figcaption></figcaption></figure>

**① FTP 열기**

* FTP란 메이크샵 서버에 파일을 업로드 할 수 있는 프로그램으로 웹FTP, 마이FTP 중 하나를 선택해서실행할 수 있어요.

**② 스킨명**

* 현재 편집중인 디자인 스킨명과 내 쇼핑몰 스킨 또는 보관스킨 아이콘이 표시돼요.

**③ http// 일괄수정**

* 페이지마다작업된 디자인 소스 중 'http\://' 경로를 일괄로 '//' 경로로 변경하는 기능이에요.&#x20;

**④ 페이지 주소**

* 디자인 편집 관련 내용 또는 관리자 끼리 공유해야 할 메시지가 있을 경우 메모해두실 수 있어요.

**⑤ 간단메모**

* 쇼핑몰 페이지별 URL을 확인할 수 있어요.

**⑥ 가상태그  팝업열기 / 가상태그 오른쪽열기**

* 상단/측면/하단 또는 중앙 디자인 편집 시 노출되며, 가상태그와 편집태그 리스트를 화면 오른쪽에 노출시키거나  팝업으로 띄워 확인하실 수 있어요.&#x20;

## 디자인 환경 설정

<figure><img src="/files/X3Un9zn1pmvmsGSSe4Bu" alt=""><figcaption></figcaption></figure>

**① 쇼핑몰 정렬타입 설정**

* 브라우저에 노출되는 쇼핑몰 디자인을 HTML 디자인 정렬 또는 가운데 정렬되어 노출 되도록 설정할 수 있어요.&#x20;

**② 쇼핑몰 주소 표시**

* 쇼핑몰 주소창의 표시를 도메인 주소 고정 또는 페이지별로 주소가 변경될 수 있도록 설정할 수 있어요.

**③ DTD 설정**

* 디자인 화면을 구성하는 요소와 속성 등을 어떤 타입의 표준을 따를 것인지 설정할 수 있어요.

## 디자인 편집 사용하기&#x20;

### 디자인 편집 기본 개념

* 기본적으로 디자인 화면 구성은 “상단/측면/하단”디자인과 “중앙 디자인”으로 구분돼요.&#x20;
* 상단/측면/하단은 모든 페이지에 같은 소스를 넣어야 하는 불필요한 작업을 줄이실 수 있도록
  &#x20;나누어 놓은 영역이고, 디자인 영역에서 가장 큰 비중을 차지하는 화면이 바로 중앙 디자인 영역이에요.
* 중앙 디자인 영역 디자인 편집 시 상단/측면/하단의 각 영역 편집 후 생성되는 태그를 중앙 디자인 편집 시 입력하시면 해당 영역의 디자인을 불러오게 돼요.&#x20;

<figure><img src="/files/Cew6yIcRU5XAHZNMNpE9" alt=""><figcaption></figcaption></figure>

### 디자인 편집하기&#x20;

디자인 편집 화면은 왼쪽과 상단의 메뉴이동을 통해 확인할 수 있어요.

<figure><img src="/files/JeudyEIs1TWfV8BX0jyy" alt=""><figcaption></figcaption></figure>

**① 디자인 편집\~임시 저장소스 탭**

* 현재 적용중인 각 화면의 소스를 확인/수정하실 수 있어요.&#x20;
* CSS : 각 페이지별 스타일 시트 소스를 확인/수정하실 수 있어요.&#x20;
* 임시 저장 소스 : 편집한 소스 저장 시 저장하기 이전 소스에 대해 최대 5개 까지 저장 가능하고, 저장된 소스는 필요 시 언제든 복구가 가능해요.&#x20;

**③ 디자인\~JS 명칭**

* 페이지의 디자인 파일명이에요.&#x20;
* 디자인 스킨 관리에서 HTML 파일 업로드 시 HTML파일명을 동일하게 맞춰 tar파일로 압축 후 업로드하면 간편하게 소스를 덮어씌울 수 있어요.

**④ 기본 소스 보기**

* 클릭 시 디자인 편집 소스 아래에 최초 기본 소스를 확인하실 수 있습어요.
* 디자인 편집 시 소스 입력 방법 등을 확인하거나 최초 디자인 소스로 변경을 원하실 경우 복사하여 사용이 가능해요.

**⑤ 최근 저장 소스 되돌리기**

* 디자인 편집 소스 수정 중 잘못 입력하여 최초 수정하기 전 상태로 돌아가고 싶을 경우 간편하게 클릭 한번으로 수정 전 소스로 복구시킬 수 있어요.&#x20;

**⑥ 저장\~디자인 복사**

* 저장 : 디자인 편집 이후 저장 버튼을 클릭하시면 최종 적용이 완료돼요.&#x20;
* 디자인 복사 : 해당 화면의 페이지 추가가 가능할 경우 디자인 복사를 선택하여 동일한 소스의 페이지를 추가하실 수 있어요.

## 가상태그 목록 열기

<figure><img src="/files/0p7aeH6V1DjpmxVVLGmx" alt=""><figcaption></figcaption></figure>

* 디자인 편집창 오른쪽 상단에 \[**가상태그 팝업 열기]**&#xC640; \[**가상태그 오른쪽 열기]** 버튼이 있어요. \
  편한 버튼으로 가상태그를 확인해 보세요. \
  \- **가상태그 팝업 열기 :** 가상태그 목록을 팝업으로 띄워 확인할 수 있어요.\
  \- **가상태그 오른쪽 열기 :** 가상태그 목록이 편집화면 오른쪽에 노출돼요.&#x20;
* **① 가상태그 검색**\
  태그설명 또는 태그명을 선택하여 원하시는 단어를 검색하실 수 있어요. \
  검색은 입력하신 단어를 포함한 모든 태그가 검색됩니다. 초기화를 클릭하면 태그목록을 검색 전 상태로 되돌릴 수 있어요.

## 페이지 추가하기&#x20;

<figure><img src="/files/XgKbKxQJjbKTiZrV6J99" alt=""><figcaption></figcaption></figure>

* 왼쪽 메뉴에서 페이지 추가 버튼을 선택하시면 페이지 추가 레이어 팝업창이 노출되며,\
  페이지명을 입력하고 화면 선택 이후 디자인 페이지 추가할 수 있어요.&#x20;
* 단, 상품 분류와 상품 상세는 디자인 적용 분류를 선택할 수 있는 옵션이 노출되며 **개별 분류**와 **전체 분류**를 선택하여 디자인 적용이 가능해요.&#x20;

### 개별 분류&#x20;

<figure><img src="/files/7QvlyXXiXxECjNlutRwm" alt=""><figcaption></figcaption></figure>

* 관리자에서 생성해둔 대,중,소분류에 대해 특정 분류 화면에만 디자인 변경을 해야할 경우 선택하여 추가하실 수 있어요.&#x20;
* 최종 선택한 분류를 포함한 하위분류에 디자인이 일괄 적용돼요.

> **작업 예시** \
> A대분류, B중분류, C소분류 중 **B중분류 까지만 선택**하여 페이지를 추가하고 디자인했을 경우\
> B중분류와 하위 분류인 C소분류에 디자인이 적용돼요.&#x20;

### 전체 대,중,소 분류

<figure><img src="/files/CKqgPPqDwFxuITujdct0" alt=""><figcaption></figcaption></figure>

* 전체 대,중,소분류는 해당 분류의 전체 디자인을 변경 시 사용돼요.&#x20;

> 작업 예시&#x20;
>
> 관리자에 아래와 같이 대,중,소분류가 생성되었을 경우\
> ![](/files/PMY6HEhJLYvCyU9erEIB)
>
> 전체 대분류 선택 : 모든 대분류“A,B,C,D” 디자인을 일괄 변경하실 수 있어요.
> \
> 전체 중분류 선택 : 모든 중분류“A1,B1,C1,D1” 디자인을 일괄 변경하실 수 있어요.
> \
> 전체 소분류 선택 : 모든 소분류“A2,B2,C2,D2” 디자인을 일괄 변경하실 수 있어요.


---

# 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://help.makeshop.co.kr/manual/undefined-1/undefined-2.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.