> For the complete documentation index, see [llms.txt](https://help.makeshop.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.makeshop.co.kr/manual/undefined-1/undefined-2.md).

# 디자인 편집

## 관리자 메뉴 위치

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

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

<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” 디자인을 일괄 변경하실 수 있어요.