# 스타일 편집 및 개별 편집 수정 ## 스타일 편집이란? ![](https://contents.sixshop.com/thumbnails/uploadedFiles/152/default/image_1529989842915_750.png) ![](https://contents.sixshop.com/uploadedFiles/152/default/image_1463107347069.gif) 쇼핑몰 디자인의 핵심인 스타일 편집 기능은 주로 **글꼴 설정, 색 변경 등 눈에 보이는 디자인 위주의 설정을 일괄적으로 담당**합니다. 섹션이나 요소의 태그 부분에 있는 **팔레트 모양 아이콘**이나 **스타일 편집 메뉴를 통해 설정**할 수 있습니다. {% hint style="info" %} **스타일 편집**은, \ 구성품(섹션 & 요소)의 디자인 항목의 설정 & 변경하고 \ **모든 페이지에 흩어져 있는 동일 구성품(섹션 & 요소)에** \ **일괄적으로 디자인을 적용**하는 것 입니다. {% endhint %} ![](https://contents.sixshop.com/uploadedFiles/104/default/image_1460683041955.gif) ## 1. 스타일 편집 수정 방법 및 종류 ### 1-1. 디자인 설정, 우선순위와 초기화 **개별 편집 > 스타일 편집 의 우선 순위로 디자인 설정** 값이 지정되는데요.\ 사용자가 직접 변경한 사항을 기본값으로 되돌리고 싶을 경우, \ 각 패널에 보이는 버튼을 통해 되돌릴 수 있습니다. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2YCoUFBwx1_XNsnSS6%2F-M2YEEWSiE8eNq6_N29F%2Fimage_1503294462622_750.png?alt=media\&token=301f89a6-4683-4f20-886c-864f8938c00e) 스타일 편집 값은 사용 중인 템플릿의 기본값으로 초기화되고, \ 개별 편집값은 지금 설정된 스타일 편집 값으로 초기화 됩니다. ### **1-2. 스타일 편집 진입 및 수정 방법** **2개의 경로를 통해 진입하고 수정**할 수 있어요. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M211zbYsIlVfdioQ2L6%2F-M219Juwc6_1GmrYxdhs%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-10%2010.49.43.png?alt=media\&token=29bbd1fd-0b25-41f8-94b9-108b70eb38be) ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M211zbYsIlVfdioQ2L6%2F-M219O2tBGEpDP4qWwUV%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-10%2010.53.23.png?alt=media\&token=683fabc0-e42b-4175-8bd1-a8823c7c17e7) **첫 번째.** \ **좌측 하단의 \[ ≡ ] 메뉴** 버튼 혹은, **키보드의 \[tab] 키를 누른 후**, \ 좌측 메뉴 가장 아래 있는 **\[스타일 편집] 버튼을 통해 진입**하는 방법과 **두 번째.** \ **특정 섹션 & 요소의 \[스타일 편집] 버튼을 통해 진입**하는 방법이 있습니다. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M21EPeVktQ3217IbeNh%2F-M21FYzULJiAQgxG6YlL%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-10%2011.22.16.png?alt=media\&token=99e25bc9-8b70-49b9-b952-5d999d882c1e) 또 다른 팁을 알려드리자면,\ 두개의 **어떤 경로를 통해 진입해도 뒤로가기 버튼을 통해**, \ **다른 영역의 스타일 편집으로 이동**할 수 있습니다. ### 1-3. 스타일 편집 종류 스타일 편집은 **크게 4개의 영역을 기준**으로 \ **28개 구성품 (섹션 및 요소)의 디자인을 관리**할 수 있고 \ 동일 구성품(섹션 & 요소)에 **일괄적으로 디자인을 적용** 할 수 있습니다. ### 1) **전체 영역**이고 **1개의 구성품** (섹션 및 요소)의 **디자인을 관리**할 수 있어요. ![전체\_공통 영역의 스타일 편집 시 적용 영역입니다](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M21FvOcO3AitRqV5TId%2F-M21QzxpHozBP9JtdG9k%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-10%2011.44.24.png?alt=media\&token=98477528-4f36-47bb-aa53-1498a52271ad) | 스타일 편집 이름 | 안내 | | --------- | ---------------------------------------------------------------------------------------------------------------- | | 공통 |

1.너비: 사이트의 너비 (최대 너비 및 좌우 여백) 설정할 수 있어요.
2.배경: 사이트 배경 색상을 설정할 수 있어요.
3.테두리: 사이트 테두리 색상을 설정할 수 있어요.

| ### 2) **머리글 영역**이고 **5개의 구성품** (섹션 및 요소)의 **디자인을 관리**할 수 있어요. ![머리글\_공통 영역의 스타일 편집 시 적용 영역입니다](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M21FvOcO3AitRqV5TId%2F-M21RQHwiEgiI-m-FpBV%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-10%2011.49.18.png?alt=media\&token=8c36d187-ba73-4254-8e3b-9b4516c0eb32) ![머리글\_로고 영역의 스타일 편집 시 적용 영역입니다](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M21FvOcO3AitRqV5TId%2F-M21RYzeGIoM9zscHyDe%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-10%2011.57.37.png?alt=media\&token=08bc5f48-a521-4387-8cc6-58a44cb053b3) ![머리글\_메뉴 영역의 스타일 편집 시 적용 영역입니다](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M21FvOcO3AitRqV5TId%2F-M21RdlQdJeiLPaz8-IG%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-10%2012.03.10.png?alt=media\&token=66c38e36-9b06-4eba-a8c1-4c364ab2392e) ![머리글\_장바구니/로그인/상품 검색 영역의 스타일 편집 시 적용 영역입니다](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M21FvOcO3AitRqV5TId%2F-M21RlHkY4ULl2WuDqaa%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-10%2012.09.18.png?alt=media\&token=c6f78e31-bb5f-4a3b-9e7f-3b3bc071f474) ![머리글\_아이콘 영역의 스타일 편집 시 적용 영역입니다](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M21FvOcO3AitRqV5TId%2F-M21RuwSo3B8KUjlqHNv%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-10%2012.12.57.png?alt=media\&token=6f53bad2-a123-4bde-beec-44d082b87c0a) | 스타일 편집 이름 | 안내 | | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 공통 |

1.배치: 로고와 사이트 내비게이션의 배치를 설정할 수 있어요.

2.배경: 머리글 배경 색상을 설정할 수 있어요.

3.여백: 머리글 높낮이 여백을 설정할 수 있어요.

4.경계선 넣기:머리글 경계선을 설정할 수 있어요.

5.스크롤할 때: 스크롤 시 머리글 노출 타입을 설정할 수 있어요.

| | 로고 |

1.상점 이름: 글자 타입의 로고의 글꼴을 설정할 수 있어요.

2.이미지: 이미자 타입의 로고 너비를 설정 할 수 있어요.

| | 메뉴 |

1.색상: 사이트 내비게이션 메뉴의 글자색상을 설정할 수 있어요.
2.간격: 사이트 내비게이션 메뉴간의 간격을 설정할 수 있어요.
3.글자: 사이트 내비게이션 메뉴의 글꼴을 설정할 수 있어요.

| | 장바구니/로그인/상품 검색 |

1.장바구니 종류: 아이콘 타입을 설정할 수 있어요.
2.로그인 종류: 아이콘 타입을 설정할 수 있어요.
3.상품 검색 종류: 아이콘 타입을 설정할 수 있어요.
4.아이콘: 아이콘 형태 디자인을 설정할 수 있어요.
5.색상: 아이콘 타입의 노출 색상을 설정할 수 있어요.
6.간격: 아이콘 간의 너비를 설정할 수 있어요.
7.글자: 아이콘 타입 글자로 설정한 경우, 글꼴을 설정할 수 있어요.

\*해당 영역은, 개별 편집 기능이 없습니다.

| | 아이콘 |

1.종류: 아이콘 모양을 설정할 수 있어요.
2.색상: 아이콘의 색상을 설정할 수 있어요.
3.간격: 아이콘 간의 너비를 설정할 수 있어요.
4.크키: 아이콘의 크기를 설정할 수 있어요.

| **세 번째 영역**은,\ **본문 영역**이고 **16개의 구성품** (섹션 및 요소)의 **디자인을 관리**할 수 있어요. ### 3) 본문\_메인배너 섹션 ![본문\_메인 배너 섹션을 머리글과 합쳐, 머리글의 글자색이 메인 배너의 스타일과 동일하게 적용됐어요.](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M21sGJSs57oxzxa0YuH%2F-M21sNIw7oRBi_4XQ3jb%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-10%2014.18.26.png?alt=media\&token=81ea704d-194b-41b5-9160-8caa0e26fed8) ![위 화면에서 스크롤 아래로 이동 시, 머리글이 다시 원래 설정값으로 적용된 모습입니다.](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M21sGJSs57oxzxa0YuH%2F-M21sSpwZ9oOwoZte6MG%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-10%2014.09.46.png?alt=media\&token=bb3c87de-cedd-4e92-9f8f-dffd5eaf19cc) ![본문\_메인 배너의 높이 고정 시 적용 화면 입니다.](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M21sGJSs57oxzxa0YuH%2F-M21yUypIY3nBl92-RBu%2Fimage_1463390614887.gif?alt=media\&token=ad5bdcd5-fbd0-4a03-81b4-5531bb02be94) ![본문\_메인 배너의 비율 고정 시 적용 화면 입니다. ](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M21sGJSs57oxzxa0YuH%2F-M21yXnsVG2Yn8KoSQ4L%2Fimage_1463390679114.gif?alt=media\&token=f0ba1b33-498b-456b-b151-a1cc09eb5f33) | 스타일 편집 이름 | 안내 | | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 메인 배너 섹션 |

1.종류: 메인 배너 사이즈를 설정할 수 있어요.
\*머리글과 합치기를 사용하여,
강렬한 첫인상 페이지를 만들 수 있어요.

2.스타일: 메인 배너 글자 색상을 설정할 수 있어요.
\*메인 배너의 글자 색상은 2가지 타입으로만 제공되니,
이미지와 글자의 대비를 신경써주세요\~

3.높이: 메인 배너 사이즈를 설정할 수 있어요.
\*높이 고정: 메인 배너가 보이는 화면에서,
얼만큼 보여줄지 설정할 수 있어요.

\*비율 고정: 화면 크기 관계없이 메인 배너의 비율을 동일하게
유지할 수 있어요.
글자를 포함하고 있는 배경을 사용할 때
화면 크기에 따라 가려지는 부분 없이, 같은 비율로
보여줄 수 있습니다.
다만,
비율 고정으로 사용 시
모바일 버전에서 글자가 배너 밖으로 넘어가는
상황이 발생할 수 있기에,
제목과 설명을 입력할 수 없습니다.

4.정렬: 제목과 설명글의 좌/우 정렬을 설정할 수 있어요.
5.배경: 배경 색상 및 불투명도 및
스크롤 시 배경 고정하기 기능을 설정할 수 있어요.
6.제목: 글꼴을 설정할 수 있어요.
\*글자 색상 변경은 안 되는 것 잊지 않으셨죠?
7.설명: 글꼴을 설정할 수 있어요.
8.버튼: 글자 크기를 설정할 수 있어요.
9.내비게이션: 여러 개의 배너를 사용할 경우
슬라이딩 배너 표기를 위한 타입을 설정할 수 있고,
다중 배너 사용 시 자동 재생 여부 등도 설정할 수 있어요.

| ### 4) 본문\_**상품 목록 섹션** ![본문\_상품 목록 섹션의, 필터 디자인 편집을 설정한 화면 입니다. ](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M22Wq7MUgPraRADnwyu%2F-M22e1D-EAIOLlcS9iK1%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-10%2014.54.27.png?alt=media\&token=07683baa-1e54-4d4f-9d44-c6caab98d7e6) ![본문\_상품 목록 섹션의, 언어 타입 변경 시 적용되는 영역입니다. ](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M22Wq7MUgPraRADnwyu%2F-M22e3ezkq6FEiyGbHZN%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-10%2017.55.21.png?alt=media\&token=d9fc7254-057f-4655-b613-4c4df77cff6b) | 스타일 편집 이름 | 안내 | | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 상품 목록 섹션 |

1.너비:상품 목록 영역의 너비를 설정할 수 있어요.

2.열: 상품 노출 열의 개수를 설정할 수 있어요.

\*단, 개별 편집으로 설정한 값이 존재할 경우

디자인 설정 값 우선순위에 따라

개별 편집에서 설정한 값이 우선 적용됩니다.

3.페이지당 상품 개수: 상품 노출 개수를 설정할 수 있고,

개별 편집으로 설정한 값이 있을 경우

스타일 편집값에 설정한 내용은 반영되지 않습니다.


4.썸네일: 상품 썸네일의 노출 비율을 설정할 수 있어요.


5.간격: 상품 목록의 썸네일 간격을 설정할 수 있어요.


6.필터: 상품 목록 내비게이션 메뉴의

글꼴 및 스타일을 설정할 수 있어요.


7.상품 이름/가격: 위치 및 정렬을 설정할 수 있어요.


8.상품 이름: 글꼴을 설정할 수 있어요.


9.가격: 글꼴을 설정할 수 있어요.


10.배지: 상품 목록 썸네일에 노출하는 배지 아이콘의

디자인 및 글꼴을 설정할 수 있어요.


11.마우스 오버 효과: 상품 목록 썸네일에 마우스 오버 시 효과를 설정할 수 있어요.


12.언어: 필터의 전체를 사용할 경우, 언어 타입을 설정할 수 있어요.

| ### 5) 본문\_**상품 슬라이드 섹션** ![본문\_상품 슬라이드 섹션의 스타일 편집값을 적용한 화면입니다. ](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M22f1FY93xM3ZTCbZeH%2F-M22h-DFsEZz7aDtw7IK%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-10%2018.07.51.png?alt=media\&token=1153866b-16a9-4317-b296-3de6f61eec5f) | 스타일 편집 이름 | 안내 | | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 상품 슬라이드 섹션 |

1.너비: 상품 슬라이드 영역의 너비를 설정할 수 있어요.


2.열: 상품 노출 열의 개수를 설정할 수 있어요.

\*단, 개별 편집으로 설정한 값이 존재할 경우

디자인 설정 값 우선순위에 따라개별 편집에서 설정한 값이 우선 적용됩니다.


3.상품 개수 : 상품 노출 개수를 설정할 수 있고,

개별 편집으로 설정한 값이 있을 경우

스타일 편집값에 설정한 내용은 반영되지 않습니다.


4.썸네일: 상품 썸네일의 노출 비율을 설정할 수 있어요.
\*간격 넣기를 설정하면, 상품 썸네일의 고정 간격이 설정되요.

5.상품 이름/가격: 위치 및 정렬을 설정할 수 있어요.


6.상품 이름: 글자 크기를 설정할 수 있어요.

7.가격: 글자 크기를 설정할 수 있어요.

8.배지:상품 슬라이드 썸네일에 노출하는 배지 아이콘의

여백 및 글자 크기를 설정할 수 있어요.

9.전환할 때 넘어가는 썸네일 개수: 이전/다음 버튼 클릭 시

노출되는 상품개수를 설정할 수 있어요.

10.이전/다음 화살표: 슬라이드 상품이 많을 경우

화살표 추가 및 색상을 설정할 수 있어요.

11.마우스 오버 효과: 상품 슬라이드 썸네일에 마우스 오버 시 효과를 설정할 수 있어요.

| ### 6) 본문\_**갤러리 섹션** ![본문\_갤러리 섹션의 글꼴을 적용한 화면입니다.](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M25rgE0GbYpyo0ihLr-%2F-M25vl7ch4E5hbQx8ACx%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-11%2009.02.30.png?alt=media\&token=e2121bad-65a8-4207-9acd-231f1d9cabb3) ![본문\_갤러리 섹션의 팝업창 스타일을 적용한 화면입니다.](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M25rgE0GbYpyo0ihLr-%2F-M25vua9J1lGtn4cLGkg%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-11%2009.02.55.png?alt=media\&token=f08b2084-4eea-4862-9098-6a810775fee7) | 스타일 편집 이름 | 안내 | | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 갤러리 섹션 |

1.제목: 글꼴을 설정할 수 있어요.

2.설명: 글꼴을 설정할 수 있어요.

3.스타일: 갤러리 이미지 클릭 후 팝업창의 배경색을 설정할 수 있어요.

단,
갤러리 이미지 중 링크를 삽입한 경우
모든 이미지의 팝업창 확대 기능을 사용할 수 없어요.

| ### 7) 본문\_**게시판 섹션** 목록형 게시글보다,\ **격자형 게시판**을 선택하신 경우 **사용할 수 있는 스타일 편집이 다양**합니다. ![게시판 섹션\_스타일 편집을 적용한 화면들입니다. ](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M26-11PxHxq1rXQ1uOa%2F-M269kzjMnFe_KUa6zLv%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-11%2010.17.17.png?alt=media\&token=a2961b3e-83f0-455e-8430-bfb574dc008d) ![게시글 상세에, 게시글 제목 영역의 적용 화면입니다.](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M26-11PxHxq1rXQ1uOa%2F-M26AqJnTeERZrweVzES%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-11%2010.22.03.png?alt=media\&token=1348aec2-9ec1-4759-90e2-2f71037912b8) | 스타일 편집 이름 | 안내 | | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 게시판 섹션 |

1.게시글 제목: 게시글 상세 영역에 적용되는 정렬값 입니다.


2.언어: 목록형 게시판일 경우 적용되고,

게시판 상단의 항목이름의 언어타입을 설정할 수 있어요.


3.너비(목록 게시판): 게시판 영역의 너비를 설정할 수 있어요.


4.너비(격자 게시판): 게시판 영역의 너비를 설정할 수 있어요.


5.열(격자 게시판): 한 열에 노출할 게시글 개수를 설정할 수 있어요.


6.페이지당 글 개수(격자 게시판): 페이지당 게시글 노출 개수를 설정할 수 있어요.


7.썸네일(격자 게시판): 게시글 썸네일의 노출 비율을 설정할 수 있어요.


8.간격(격자 게시판): 게시글 간격을 설정할 수 있어요.


9.제목 / 글쓴이 / 등록일 (격자 게시판): 정렬 위치를 설정할 수 있어요.


10.제목 (격자 게시판): 글꼴 및 색상을 설정할 수 있어요.


11.글쓴이 / 등록일 (격자 게시판): 글꼴 및 색상을 설정할 수 있어요.


12.마우스 오버 효과 (격자 게시판): 게시판 썸네일에 마우스 오버 시 효과를 설정할 수 있어요.

| ### 8) 본문\_블로그 **섹션** 나열형 블로그보다, \ **격자형 블로그**을 선택하신 경우 **사용할 수 있는 스타일 편집이 다양**합니다. ![본문\_블로그 섹션의 스타일 편집값이 적용되는 영역입니다. ](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M26LJHxx0zul3B3MQ1v%2F-M26OOjxfll-tIfcmsQ7%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-11%2011.21.09.png?alt=media\&token=3c1dacb9-b04e-44c6-8907-d57dc8674a6b) ![스타일 편집값으로 설정한 격자형 블로그 화면입니다. ](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M26LJHxx0zul3B3MQ1v%2F-M26PtFdnzvYTduLbEIL%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-11%2011.26.47.png?alt=media\&token=2b3b027b-0ae5-49e9-ab1e-16732349418f) | 스타일 편집 이름 | 안내 | | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 블로그 섹션 |

1.게시글 제목: 블로그 상세 영역에 적용되는 정렬값 입니다.


2.사이드바: 나열형 블로그 목록과 블로그 상세에

블로그 내비게이션 메뉴를 설정할 수 있어요.

격자형 블로그 목록에는 적용되지 않습니다.


3.페이지당 글 개수: 나열형/격자형 관계없이

페이지당 노출할 블로그 개수를 설정할 수 있어요.


4.언어: 격자형 블로그 목록에서 필터와

사이드바의 필터에 적용되는 언어타입을 설정 할 수 있어요.


5.너비(격자 블로그): 블로그 영역의 너비를 설정할 수 있어요.


6.열(격자 블로그): 한 열에 노출할 블로그 게시글 개수를 설정할 수 있어요.


7.썸네일(격자 블로그): 블로그 게시글 썸네일의 노출 비율을 설정할 수 있어요.


8.간격(격자 블로그): 블로그 게시글 간격을 설정할 수 있어요.


9.필터(격자 블로그): 블로그 내비게이션 메뉴의 위치 및 스타일을 설정할 수 있어요.

필터 사용 여부 설정은, 개별 편집에서 진행해 주셔야겠죠?


10.제목/등록일(격자 블로그): 목록에 정렬할 위치를 설정할 수 있어요.


11.제목(격자 블로그): 글꼴 및 색상을 설정할 수 있어요.


12.등록일(격자 블로그): 목록에 정렬할 위치를 설정할 수 있어요.

등록일의 노출 여부는, 해당 게시글의 관리 영역에서 설정하여야 해요.


13.마우스 오버 효과(격자 블로그): 블로그 게시판 썸네일에 마우스 오버 시

효과를 설정할 수 있어요.

| ### 9) 본문\_사용자 편집 섹션 자유로운 구성품 조립이 목적인 만큼, \ 스타일 편집으로 일괄 적용하는 항목이 굉장히 적어요. ![스타일 편집값으로 설정한 화면입니다. ](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M26WI67KLVdHvMJVPNz%2F-M26aoefIMOCv4x8Y_AH%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-11%2012.19.52.png?alt=media\&token=8b82fb69-ea16-4021-a463-fb3686c5fe15) | 스타일 편집 이름 | 안내 | | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | 사용자 편집 섹션 |

1.너비: 사용자 편집 섹션과 요소의 너비를 설정할 수 있습니다.


2.간격: 너비 설정과 별개로 좌우 여백의 너비를 추가로 설정할 수 있으며,

모바일 버전 호환에 활용할 수 있어요.

두 항목 모두 개별 편집 값이 우선 적용되는 영역인거 잊지 않으셨죠?

| ### 10) 본문\_제목글 {% hint style="warning" %} **제목글**은, **10개의 사용 영역따라** \ 스타일 편집 **적용 사항에 다른점**이 있으니 **참고**해 주세요. {% endhint %} ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2GROE_jZfpYlpBrlgv%2F-M2HpZopn_nvsjYeKPMQ%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-13%2016.37.27.png?alt=media\&token=f1d6458b-9e76-421a-8f7b-071bb168ea01) ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2GROE_jZfpYlpBrlgv%2F-M2HpcYrq5_tvuBj0Oc5%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-13%2016.38.37.png?alt=media\&token=c20adbe6-dffe-4e28-b015-a521275a0a33) ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2GROE_jZfpYlpBrlgv%2F-M2Hpgf0KoXMEnt5Jo3c%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-13%2016.37.43.png?alt=media\&token=e931623a-3d2e-4e41-92b5-dff83d9d9ac6) | 스타일 편집 이름 | 안내 | | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 제목글 |

1.색상: 글자 색상을 설정할 수 있어요.

2.글자: 글꼴을 설정할 수 있어요.

❗ 10개의 사용 영역에 따라 스타일 편집 적용 사항에 다른 점이 있으니
첨부 이미지를 살펴보세요 :)

| ### 11) 본문\_줄글 {% hint style="info" %} 줄글은 **12개의 사용 영역**에 **스타일 편집값**이 **적용**되고\ 첨부 이미지를 살펴보세요 🙂 {% endhint %} ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2HuVERqhstnTRuXGP3%2F-M2HyyixZJXgTolJVN9l%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-13%2017.20.53.png?alt=media\&token=e8c97a77-700c-47ee-920f-1015b9e499b3) | 스타일 편집 이름 | 안내 | | --------- | -------------------------------------------------------- | | 줄글 |

1.색상: 글자 색상을 설정할 수 있어요.
2.글자: 글꼴을 설정할 수 있어요.

| ### 12) 본문\_보조글 **보조글은 6개의 기본 제공 페이지에 적용**중이고,\ 등록일, 댓글, 삭제하기, 좋아요, 공유하기 등의 \ 페이지 내 보조적인 글자 영역의 색상을 변경할 수 있는 디자인 편집 값입니다. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2VaVQp9Ua8reO0qAER%2F-M2W5E4fjk2JRFyxVd3H%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-16%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2010.22.12.png?alt=media\&token=16622ef4-4744-4fa5-a190-2449ea94066f) | 스타일 편집 이름 | 안내 | | --------- | --------------------------------------------------------------- | | 보조글 |

1.색상: 글자 색상을 설정할 수 있어요.

\*해당 영역은, 개별 편집 기능이 없습니다.

| ### 13) 본문\_링크 ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2W6ETY63INBzki4foq%2F-M2WBCWYlEu6canx2OXR%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-16%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2011.31.53.png?alt=media\&token=5fd7b55b-98d3-458c-9cf9-59b53ac1fa03) | 스타일 편집 이름 | 안내 | | --------- | ---------------------------------- | | 링크 | 1.색상: **링크 지정한 글자 색상을 설정**할 수 있어요. | ### 14) 본문\_선 **상품 상세 페이지의 내비게이션 경계선을 제외한** \ **모든 선과 테두리에 적용**되는 값입니다. \ \ 상품 상세 페이지 내비게이션 경계선 설정은 [상품 상세 설명 영역](https://app.gitbook.com/@sixshop/s/sixshop-help-desk/learn-sixshop/design-guide/edit/04#21)을 참고해주세요 :)
![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2WB_G5ovec7_zAxsCz%2F-M2WEUl_uABAM7FUZN2x%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-16%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2011.47.23.png?alt=media\&token=37e11af2-8f98-40b6-a69c-e12b2f74952f) | 스타일 편집 이름 | 안내 | | --------- | ---------------------- | | 선 | 1.색상: 선 색상을 설정할 수 있어요. | ### 15) 본문\_버튼 \ 버튼이 사용되는 모든 페이지에 적용되지만 \ 메인 배너 섹션의 경우, \ 버튼 색상과 글자를 제외하고 적용되는 점 참고 부탁드려요. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2WG2kyFWj4V_QgdEAm%2F-M2WOOUNt9Rqim8SsKmB%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-16%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2012.31.03.png?alt=media\&token=eee46b99-9ced-424f-9bf3-8994fb73f4fa) | 스타일 편집 이름 | 안내 | | --------- | ----------------------------------------------------------------------------------------------------------------------------- | | 버튼 |

1.종류: 색상 채움 여부를 설정할 수 있어요.
2.모양: 도형 형태를 설정할 수 있어요.
3.색상: 버튼 형태 및 글자의 색상을 설정할 수 있어요.
4.글자: 글꼴을 설정할 수 있어요.

| ### 16) 본문\_아이콘 {% hint style="warning" %} **설정 위치에 따라 스타일 편집 경로가 다릅니다.** {% endhint %} ![사용자 편집 섹션의 아이콘 섹션만, 메뉴 스타일 편집의 경로로 접근 및 적용됩니다.](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2WPyFjup7E63J0UVOq%2F-M2Ww5UFYXXl9b_PVCia%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-16%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%202.43.06.png?alt=media\&token=3fe8e736-e017-4166-b16e-6952af53e986) ![머리글 & 바닥글의 아이콘은 해당 섹션의 스타일 편집에서 설정하세요.](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2WPyFjup7E63J0UVOq%2F-M2Ww5UH2QKj-zNyWTcQ%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-16%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%202.56.01.png?alt=media\&token=d83c2a59-e995-4907-ac51-76873c553ebf) | 스타일 편집 이름 | 안내 | | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 아이콘 |

1.종류: 아이콘의 모양을 설정할 수 있어요.


2.색상: 기본/마우스 오버 시 노출되는 색상 및
특정 서비스의 아이콘을 사용하는 경우,
해당 서비스의 대표 색상으로 설정할 수 있어요.


3.크기: 아이콘의 사이즈를 설정할 수 있어요.

| ### 17) 본문\_쪽번호 페이지 내 상품 목록이나 게시글의 목록 개수가 다음 페이지로 넘어가게 되는 경우, \ 해당 목록 아래 보이는 숫자를 쪽번호라고 하구요. \ 어떤 것들을 디자인 편집할 수 있는지 알아볼까요? ![쪽번호\_스타일 편집을 적용한 화면입니다.](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2WxA_4sZGI-n8jiNBu%2F-M2WzoVUvw53p3EOyiNp%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-16%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.14.22.png?alt=media\&token=b110b475-c22c-404a-8dc3-3c7229dc7e65) | 스타일 편집 이름 | 안내 | | --------- | --------------------------------------------------------------------------------------------------- | | 쪽번호 |

1.색상: 기본/선택 시 노출되는 색상을 설정할 수 있어요.

2.간격: 쪽번호의 간격을 설정할 수 있어요.
3.글자: 글꼴을 설정할 수 있어요.

| ### 18) 본문\_맨 위로 버튼 {% hint style="info" %} 맨 위로 버튼은 **스타일 편집에서 설정 해주셔야 노출됩니다**. {% endhint %} ![맨 위로 버튼\_스타일 편집을 적용한 화면입니다.](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2X0JaAK3iTo39nbj1H%2F-M2X48OQvgDoIUiCNe8P%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-16%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.41.49.png?alt=media\&token=f201b7e0-1028-4b9a-8ed3-9856e5fdcbb6) | 스타일 편집 이름 | 안내 | | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 맨 위로 버튼 |

1.종류: 버튼에 노출할 아이콘 및 글자를 설정할 수 있어요.
2.모양: 버튼 모양을 설정할 수 있어요.
3.색상: 배경 및 글자의 색상 등을 설정할 수 있어요.
4.여백: 버튼의 여백 사이즈를 설정할 수 있어요.
5.굵기: 경계선 및 글자의 굵기를 설정할 수 있어요.

| ### 19) 바닥글 입니다. 바닥글 영역은 5개의 구성품(섹션 및 요소)의 디자인을 관리할 수 있어요. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2X8ArH_UvlM-JnzL4R%2F-M2XDT7ZGFSIl8TDi2Us%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-16%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.22.56.png?alt=media\&token=3745eacd-eb3e-49b3-98db-e5d8f735f7df) ![바닥글의 각 영역 별 스타일 편집 적용 화면 입니다.](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2X8ArH_UvlM-JnzL4R%2F-M2XDT7YVPWnxDiEa7GN%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-16%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.23.14.png?alt=media\&token=a021e1bd-a11c-4a1d-b6a2-bd986442ac49) | 스타일 편집 이름 | 안내 | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | 공통 |

1.배치: 사이트 내비게이션 과 아이콘을 기준으로 정렬을 설정할 수 있어요.

2.색상: 바닥글 영역 배경색상, 글자 및 마우스 오버 시 색상을 설정할 수 있어요.
\*바닥글 아이콘의 색상도 함께 설정돼요.

3.여백: 바닥글 위/아래 영역의 여백 사이즈를 설정할 수 있어요.

4.경계선 넣기: 본문과 바닥글 사이의 경계선을 추가 색상을 설정할 수 있어요.

| |

법적 필수
정보

| 1.글자: 글꼴을 설정할 수 있어요. | | 메뉴 | 1.글자: 글꼴을 설정할 수 있어요. | | 아이콘 |

1.종류: 아이콘의 모양을 설정할 수 있어요.

2.색상: 바닥글 아이콘의 색상은,
공통 영역에서 설정한 색상을 기본 적용하지만
특정 서비스의 대표 색상을 사용하고자 할 경우 선택해주세요.
예를들면, 페이스북의 경우\_파란색 로고 색상으로 설정되고
전화나 이메일 같은 경우\_공통에서 설정한 색상으로 적용됩니다.

3.크기: 아이콘의 사이즈를 설정할 수 있어요.

| | 저작권 표시 | 1.글자: 글꼴을 설정할 수 있어요. | ### 20) 기본 제공 페이지 {% hint style="info" %} **8가지의 분류**의 기본 제공 페이지는, \ **별도 디자인 편집 없이** 사용되는 페이지로\ 디자인 편집 도구의 스**타일 편집 값을 공유**합니다. {% endhint %} **기본 페이지의 종류** \ 1.모든 게시판 ( 블로그, 질문하기, 후기, 일반 게시판) \ 2.로그인 및 회원가입 \ 3.아이디 및 비밀번호 찾기 \ 4.상품 상세 \ 5.장바구니 \ 6.결제하기 \ 7.이용약관\ 8.마이 페이지 기본 제공 페이지에 **적용되는 스타일 편집 값은 총 9가지**이고,\ 이 외 기본 페이지에서 디자인 편집은 적용되지 않는 점을 참고해 주세요 :) ![개별 스타일 편집 안내서에서 적용 영역을 확인했던거 기억하시죠? :)](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2XKdJYbYc4A2MSqJFt%2F-M2XLfsMDxL6YghEURk3%2Fimage_1562305212217_750.png?alt=media\&token=3adaaf24-7d51-4a18-b80c-4fb1e79ae296) ### 21) 상품 상세 페이지 상품 상세 페이지는 **상품 목록 섹션, 줄글, 선, 버튼의 스타일 편집 값을 함께 적용**되지만,\ 기본 제공 페이지 중 예외적으로 여러가지 스타일 편집이 가능한 곳이 있죠? 상품 판매에 있어 가장 중요한 영역 중 하나이기에, \ 원하는 구성으로 디자인할 수 있도록 구성된 영역이구요. 어떤 것들을 할 수 있는지 살펴볼까요? ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2XNWDeQsnweS93O5JX%2F-M2XekUbxin8MEpRiM4p%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-16%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%206.26.47.png?alt=media\&token=37cecaaf-7410-4d91-8991-2b450877e1a5) ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2XNWDeQsnweS93O5JX%2F-M2XdsOizPzxVywIITaZ%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-16%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%206.19.08.png?alt=media\&token=524eb7c6-b89b-46ed-ada3-eecf9b3aec80) ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2XNWDeQsnweS93O5JX%2F-M2Xdv_G5QwCTG8bbt0T%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-16%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%206.22.57.png?alt=media\&token=98276f17-4963-46f8-8cf5-86a98b843a44) ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2Xf2OjXAQ8b1uUKA8b%2F-M2XklexdAUF_mUtXjIB%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-16%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%206.52.56.png?alt=media\&token=1e3f8ee3-774f-4d87-84b2-8ba9dad2d1d8) ![상품 상세페이지에 적용되는 스타일 편집값입니다](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2gZWC8Tq_Cs0JTXkvd%2F-M2gd_Q-n6N-aR8fpJ4w%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-18%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.57.48.png?alt=media\&token=56ebd15b-2f07-4119-aec7-1eebb1939d20) | 스타일 편집 이름 | 안내 | | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 상품 상세 |

1.공통:
1)너비: 상품 상세 페이지 가로 사이즈를 설정할 수 있어요.

2)정렬: 캡처 이미지 본문 ③ 영역의 정렬을 설정할 수 있어요.
(상품 이름, 금액, 요약설명, 옵션, 수량 부분)

3)여백: 상품 이름의 시작 높낮이를 설정할 수 있어요.
\*여백을 0으로 설정 경우, 대표 이미지의 시작 위치와
상품명의 시작 위치가 동일해져요.

4)간격: 대표 이미지와 상품 정보 사이의
좌우 간격을 설정할 수 있어요.

5)상세 정보 간격: 상품 정보 간의 높낮이를 설정할 수 있어요.

2.대표 이미지
1)위치: 좌/우 위치를 설정할 수 있어요.

2)종류: 이미지 노출 방식을 설정할 수 있어요.
\*대표 이미지를 2개 이상 사용 중일 경우 유용해요.

3)너비: 대표 이미지의 크기를 설정할 수 있어요.

4)비율: 대표 이미지의 가로/세로 노출 비율을 설정할 수 있어요.

5)썸네일 정렬: 대표 이미지를 2개 이상 사용중일 때,
2번째 이미지 열의 좌/우 정렬을 설정할 수 있어요.

6)썸네일 너비: 대표 이미지를 2개 이상 사용중일 때,
2번째 이미지 열의 가로 사이즈를 설정할 수 있어요.

7)썸네일 간격: 대표 이미지를 2개 이상 사용중일 때,
2번째 이미지 열의 이미지 간격을 설정할 수 있어요.

8)마우스 올릴 때 확대하기를 설정하면,
30% 정도 확대 된 이미지를 볼 수 있어요.

9)클릭할 때 팝업창 확대하기는, 대표 이미지만 적용됩니다.

3.상품 이름

1)크기: 상품명의 글자 크기를 설정할 수 있어요.

4.가격

1)크키: 가격 글자 크기를 설정할 수 있어요.

5.옵션

1)배치: 다중 옵션을 사용할 경우, 옵션끼리의 배치를 설정할 수 있어요.


6.요약 설명: 요약 설명의 위치와 글자 크기를 설정 할 수 있어요.

7.상세 설명: 상세 설명의 가로 사이즈와 작성 시작 위치의 여백을

설정할 수 있어요.

8.내비게이션
1)내비게이션 보이기를 설정하면,
후기 및 질문 등 상품 정보 외 이동을 쉽게 지원할 수 있어요.


2)글자 최대 너비: 글자 간 최대 가로 사이즈를 설정할 수 있어요.

3)기본 글자 색상: 선택되지 않은 글자 색상을 설정할 수 있어요.

4)선택 글자 색상: 선택된 글자의 색상을 설정할 수 있어요.

5)경계선 색상: 내비게이션 아래 경계선의 색상을 설정할 수 있어요.

6)글자 크기: 내비게이션 글자 크기를 설정할 수 있어요.

7)상세 설명 머리글 글자: 클릭 시 이동할 내비게이션 명 직접 입력

8)상세 설명 글자: 위 동

9)상세 설명 바닥글 글자: 위 동

10)후기 글자: 위 동

11)질문 글자: 위 동

12)관련 상품 글자: 위 동

13)후기 개수 보이기: 해당 상품의 총 후기 개수가 표기 됩니다.

14)질문 개수 보이지: 해당 상품의 총 질문 개수가 표기 됩니다.

\*7)~~12)의 경우, 글자만 입력하면 노출 되지 않습니다.
항목에 맞는 내용이 포함되어야 노출 및 기능이 활성화 됩니다.

Ex)후기 게시판 글자만 입력하고 게시판을 생성 및 운영하지 않을 경우,

실제 상품 상세 페이지에 반영되지 않습니다.

9.후기와 질문/관련 상품

1)제목 정렬: 후기와 질문 게시판을 사용할 경우

해당 게시판의 제목 정렬을 설정할 수 있어요.

2)제목 크기: 제목 글자 사이즈를 설정할 수 있어요.

10.후기와 질문

1)너비: 후기 및 질문 게시판의 가로 사이즈를 설정할 수 있어요.

2)후기 제목 글자: 후기 게시판 영역 제목을 작성할 수 있어요.

3)질문 제목 글자: 질문 게시판 영역 제목을 작성할 수 있어요.

11.관련 상품

1)위치: 관련 상품 노출 위치를 지정할 수 있어요.

2)종류: 상품 노출 형태를 설정할 수 있어요.

3)너비: 상품 노출 영역 가로 사이즈를 설정할 수 있어요.

4)제목 글자: 관련 상품 제목을 작성할 수 있어요.

5)정렬: 좌/우 정렬을 설정할 수 있어요.

6)열: 한 줄에 노출할 개수를 설정할 수 있어요.

7)상품 이름 크기: 상품명 글자 사이즈를 설정할 수 있어요.

8)가격 크기: 가격 글자 사이즈를 설정할 수 있어요.

9)배지 너비: 배지 가로 사이즈를 설정할 수 있어요.

10)배지 좌우 여백: 배지의 좌우 여백 사이즈를 설정할 수 있어요.

11)배지 상하 여백: 배지의 상하 여백 사이즈를 설정할 수 있어요.

12)배지 글자 크기: 배지 글자 사이즈를 설정할 수 있어요.

13)전환할 때 넘어가는 썸네일 개수를 지정할 수 있어요.

\*관련 상품이 많을 경우, 자동 재생을 설정할 수 있어요.
\*이전/다음 화살표 및 색상을 설정할 수 있어요.

| ## 개별 편집이란? ![](https://contents.sixshop.com/uploadedFiles/152/default/image_1463107448944.gif) 스타일 편집에서 설정한 디자인과 별개로 개별 편집을 통해 **해당 요소만 디자인을 다르게 수정하거나 스타일 편집에 없는 기타 설정(이미지 너비, 구글 지도 주소 값 등)을 적용할 수 있습니다**. \ 태그의 연필 모양 아이콘이나 더블 클릭으로 설정할 수 있습니다. {% hint style="info" %} **개별 편집**은, \ **단일 구성품(섹션 & 요소)**의 디자인 항목의 설정 & 변경하고 \ **개별적으로 디자인을 적용**하는 것 입니다 🙂 {% endhint %} ![](https://contents.sixshop.com/uploadedFiles/104/default/image_1463008235015.gif) ## 2. 개별 편집 수정 방법 및 종류 개별 편집의 경우, \ 디자인 편집하기 안내서에서 다뤘던 내용들은 간략하게 설명하고 넘어가는 형태입니다. 구체적인 사용방법이 궁금하신 분들은 [디자인 편집하기](https://help.sixshop.com/ect_01/broken-reference) 부분을 확인해주세요 🙂 ### 2-1. 개별 편집 진입 방법 수정을 원하는 섹션 혹은 요소를 클릭하고, 개별 편집 클릭\~! ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2_fRpH0-jiMzKq7rZr%2F-M2_hg0XON4DGG40UXFA%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%208.35.52.png?alt=media\&token=14c85c0a-ed29-4b1e-9b4c-b116d4aa584a) ### 2-2. 개별 편집 종류 \ 개별 편집은 **크게 3개의 영역을 기준**하고,\ **27개 구성품 (섹션 및 요소)의 개별 디자인을 편집**할 수 있습니다.
### 1)머리글 섹션 ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2_liGV8hznkNhpvXbG%2F-M2_qPPZUw8L-15ay-Jq%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.16.37.png?alt=media\&token=08474ad2-d5b8-4fd8-ba30-7d9978e358e7) **머리글** 항목 중 **4가지의 사용 여부를 설정**할 수 있어요. \ (아이콘, 장바구니, 로그인, 상품 검색) ### 2)머리글 섹션 \_로고 ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2_liGV8hznkNhpvXbG%2F-M2_tTFSg2Oe1MGRH030%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.25.59.png?alt=media\&token=31b74e32-6f30-42b4-aeda-b911bfa831a3) \ 글자를 작성하거나, 이미지를 업로드하여 로고를 관리할 수 있어요.\ 메인배너와 머리글을 합쳐서 기존의 로고가 잘 보이지 않는다면, 메인 배너와 머리글을 합쳤을 때 이미지 영역에 \ 반전 효과를 추가한 로고를 추가로 사용하실 수 있어요. ### 3)머리글 섹션\_메뉴 ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2_taNCCDHFDV950W6g%2F-M2_wHBcWB_qkGCOol74%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.41.48.png?alt=media\&token=88f42067-6a59-4e30-a089-3f9d4aa44ba8) 메뉴(내비게이션)를 추가 및 수정할 때, 사용하실 수 있어요. \ [페이지를 추가하거나, 이름을 수정하는 안내서](https://help.sixshop.com/ect_01/broken-reference)에서 확인했었죠? ### 4)머리글 섹션\_아이콘 ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2_x564h1u-24yPEGt5%2F-M2_yMMVqGcgWaDiLT5f%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.49.54.png?alt=media\&token=96d99efa-7914-43bb-9f7c-30ffce21e120) \ 아이콘 추가 할 항목에 링크를 삽입하세요 🙂 \ 아이콘을 제거하고 싶다면, 링크를 지워보세요. ### 5)본문\_메인 배너 섹션 ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2a-UcwJFTaYq-3jEF9%2F-M2a1FZzwThgAJFahFHn%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2010.05.14.png?alt=media\&token=463db434-5bae-4f11-839b-046a5808359b) 이미지나 동영상 중 선택할 수 있고, \ 업로드 및 글자를 입력하거나 링크를 삽입할 수 있어요. \ [메인 배너를 수정하는 안내서](https://help.sixshop.com/ect_01/broken-reference)에서 확인했었죠? ### 6)본문\_상품 목록 섹션 ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2a3Fp-ySvmAoDC6X7i%2F-M2a5Zn1Wh4Aj68alkj6%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2010.22.06.png?alt=media\&token=e362b3fb-203a-46ee-87c2-338c263e0003) 노출할 상품 카테고리를 선택하거나, \ 카테고리의 이름을 수정할 수 있고 노출 개수를 설정하고, \ 상품 카테고리 내비게이션(필터)을 설정할 수 있어요. \ \ 해당 내용의 방법은, [디자인 편집하기](https://help.sixshop.com/ect_01/broken-reference) **상품 페이지에 구성품 넣기**에서 확인했었죠? ### 7)본문\_상품 슬라이드 섹션 ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2a5uuCIg3C8ZamHy15%2F-M2a7kDfDliPKdq3aDhi%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2010.32.20.png?alt=media\&token=cf458ead-520c-4f22-a599-e15a3a12cdf9) 상품 목록 섹션과 기본적인 방식은 동일합니다. \ 차이점은 크게 2가지 인데요. \ 첫 번째. 한 줄로만 노출할 수 있고, \ 두 번째. 상품 카테고리 내비게이션인 필터를 사용할 수 없는 것 이에요. ### 8)본문\_갤러리 섹션 갤러리 섹션 내에 추가한 이미지를 나열할 수 있습니다. \ 이미지를 클릭했을 때 링크를 삽입하거나, 라이트박스로 크게 보여줄 수도 있는데요. 다양하게 활용 가능한 갤러리 섹션에 대해 안내드릴게요.\ 먼저 기본적인 형태로 사용하는 갤러리 섹션 개별 편집입니다. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2a5uuCIg3C8ZamHy15%2F-M2aB9vr4CSUTOUPKe9F%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2010.51.44.png?alt=media\&token=7922c2b1-db5d-4715-b626-a25e5d9ece66) **응용형 1. 라이트박스 갤러리** \ 갤러리 섹션에 추가한 이미지나 동영상을 **클릭했을 때** \ **배경을 밝거나 어둡게 처리**하여 해당 **내용을 돋보이게** 할 수 있어요. ![이런 형태의 갤러리를 만들어 볼게요.](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2a5uuCIg3C8ZamHy15%2F-M2aDGXXs4SMlNtkAW8J%2Fimage_1463450346337.gif?alt=media\&token=02014fa6-7400-4d6f-8d4c-1e54bf2a45d1) Step 1. 보여주고 싶은 이미지나 동영상을 추가하세요. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2a5uuCIg3C8ZamHy15%2F-M2aBe2SYR48fzkW1LuC%2Fimage_1463450175981_750.png?alt=media\&token=82bbe7d7-d223-4d72-8717-3ebfb1ecb329) Step 2. 갤러리 > 개별 편집 클릭 \ 디자인 탭에서 **썸네일 클릭할 때** 설정을 **팝업창으로 확대하기**로 선택합니다. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2a5uuCIg3C8ZamHy15%2F-M2aBtygnztmJtdrunDu%2Fimage_1463451330692_750.png?alt=media\&token=85866fb6-3ec8-46e5-8766-2baa8be5ef0e) Step 3.\[스타일 편집 > 갤러리 섹션]에서 스타일과 글꼴 디자인을 설정하면 끝\~! ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2a5uuCIg3C8ZamHy15%2F-M2aCNrNl8xFmwbNJOGE%2Fimage_1463450185253_750.png?alt=media\&token=28b6a9da-d1a7-4174-ba6f-c78db620f60d) ![갤러리 스타일은 위의 예시를 참고해주세요](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2a5uuCIg3C8ZamHy15%2F-M2aCfsS2V3tKJeIet6c%2Fimage_1463452185476_750.png?alt=media\&token=06dd2d8a-bb1b-4d25-adc7-7426cac02b45) ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2a5uuCIg3C8ZamHy15%2F-M2aCwxFDNR-KGabh-wK%2Fimage_1463450305215.gif?alt=media\&token=c53b19b0-fa89-416c-8d93-ce420cec012a) 라이트박스 배경과 제목 및 설명이 적힌 박스가 투명 감 있는 흰색, 글자는 검은색입니다. 위의 예시는 썸네일에 마우스를 올렸을 때, \ 제목과 설명이 보여지게 설정해두었기 때문에 \ 썸네일 배경색을 50% 투명도의 흰색으로 설정했습니다. **응용형 2. 슬라이드형 갤러리** \ 사용자 편집 섹션의 슬라이드 요소처럼 갤러리를 슬라이드 형태로 만들어 볼게요. ![이런 형태의 갤러리를 만들어 볼게요.](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2a5uuCIg3C8ZamHy15%2F-M2aDsitTodu-rGUyYiJ%2Fimage_1473235142383.gif?alt=media\&token=096efdc7-b855-445b-ba65-dd6de5481b67) Step 1.보여주고 싶은 이미지나 동영상을 추가하세요. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2a5uuCIg3C8ZamHy15%2F-M2aEzfaW_8qj6peobr4%2Fimage_1473235096411_750.png?alt=media\&token=c22c8680-a98e-4ac3-9ce8-aaba16003ca6) Step 2.갤러리 > 개별 편집 클릭 , 디자인 탭에서\ **종류 설정**을 **슬라이드로 선택**합니다. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2a5uuCIg3C8ZamHy15%2F-M2aF5iOh4KF36LLx1CT%2Fimage_1473235117439_750.png?alt=media\&token=b257fcda-291a-4902-a8ae-3af8b1572e87) Step 3.기타 디자인 설정을 변경하시면 끝\~! ![슬라이드형의 특징인 자동 재생 기능을 사용했어요](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2a5uuCIg3C8ZamHy15%2F-M2aFB0zZ6UQDEWLBlKa%2Fimage_1473235293603_750.png?alt=media\&token=3efe2af8-ddd8-4754-839b-f07579940101) **응용형 3. 컬렉션 버튼 만들기** ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2a5uuCIg3C8ZamHy15%2F-M2aGFOr_QgAhJctuU_T%2Fimage_1463455682699.gif?alt=media\&token=b824d654-07b4-4cf4-ab6f-ae2b96758c09) Step 1. **이미지나 동영상을 추가**하고,**이동할 페이지 주소를 연결**합니다. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2a5uuCIg3C8ZamHy15%2F-M2aGLd5T65SWsVZCop1%2Fimage_1463455637170_750.png?alt=media\&token=ef1bcde3-9c16-42f4-a1c9-9e0375addad2) Step 2.갤러리 > 개별 편집 클릭 , \ 디자인 탭에서 **썸네일 클릭할 때 링크 열기로 선택**하고 **이동할 페이지를 설정**하면 끝\~! ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2a5uuCIg3C8ZamHy15%2F-M2aGTrfvQHcWS9djEBm%2Fimage_1463455654238_750.png?alt=media\&token=28219abe-8025-4751-84de-1eefaff9eeeb) ### 9)본문\_게시판 섹션 게시판 설정 및 관리는 관리하기 영역에서 진행하는거 잊지 않으셨죠?\ \[수정필요] 안내서 연결 ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2aGeyrdukkHXaARwjw%2F-M2aLDr1pyd2SzGxhdTd%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2011.35.12.png?alt=media\&token=4fe4f2ed-4726-4a94-95ff-16b764b1d6e0) 게시판의 개별 편집은 \ 항목을 노출할 것인지를 설정할 수 있고, \ (질문 게시판 제외) 게시판 노출 종류를 선택할 수 있어요. ### 10)본문\_블로그 섹션 블로그는, 앞의 게시판 보다 디자인 관리 기능이 조금 더 있어요. [디자인 시작하기에서](https://help.sixshop.com/ect_01/broken-reference) **4.이벤트 페이지에 구성품 넣기**로 \ 블로그 게시판을 추가하고 편집하는 작업을 진행했었죠? ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2aGeyrdukkHXaARwjw%2F-M2aN_8ReskZkTiYO6P8%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2011.42.00.png?alt=media\&token=b0b5786c-8cce-4a7d-b7ac-61a11629fbeb) 다른 게시판의 개별 편집과 달리, \ 상품 목록 이나 슬라이드 개별 편집과 비슷하지 않은가요? 게시글을 노출하기 위해 카테고리를 선택하고, \ 노출 개수를 설정하고, 게시글 카테고리 내비게이션인 필터를 설정할 수 있어요. ### 11)본문\_사용자 편집 섹션 자유도 높은 사용 목적을 위해, \ 사용자 편집 섹션의 개별 편집은 배경 영역 부분을 수정하는 기능만 제공되고 있어요. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2aOQYRAguVzZWwm21z%2F-M2aSKo_llFgzKz2RR02%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2011.54.05.png?alt=media\&token=229c1843-1236-459b-987c-5124768842f7) 상세한 사용법이나 활용은 [디자인 시작하기 26\~32 \ (2-4. 요소를 추가하고 맞춤 제작 구성품을 설정하자)](https://help.sixshop.com/ect_01/broken-reference) 부분을 다시 한번 살펴보세요 🙂 ### 12)본문\_제목글 및 줄글 **사용자 편집 섹션**에서**, 요소**를 통해 \ **제목글 및 줄글**을 **추가**한 경우 \ **개별 편집을 사용하여 스타일 편집값과 다른 글자 디자인을 설정**할 수 있어요.\ \ **링크하고 싶은 부분을 드래그**하여 개별 편집의 **사슬 모양 아이콘**을 클릭하시면 \ **링크 주소를 입력**할 수 있습니다. 다만, \ **글꼴 모양은 사이트의 통일성을 위해, 스타일 편집에서 설정한 공통 값으로 사용**됩니다. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2aSaESLHGtYBcc9BGp%2F-M2aVx-WoF534qi2R4Md%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2012.17.41.png?alt=media\&token=1d83db7f-692e-4656-92e2-9d048397e7dd) ### 13)본문\_선 **사용자 편집 섹션에서, 요소**를 통해 **선**을 **추가**한 경우\ **개별 편집을 사용하여 스타일 편집값과 다른 색상 및 디자인을 설정**할 수 있어요. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2aSaESLHGtYBcc9BGp%2F-M2aXsnlnuNMOfuH6OYL%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2012.28.33.png?alt=media\&token=f6d53494-9f6a-4dd7-86d4-dd0612949472) Q. 선 요소의 너비를 줄였더니 모바일에서 짧아진 경우라면? 데스크탑에서 조절한 너비를 모바일에서도 같은 비율로 적용하기 때문입니다. \ 해당 사용자 편집 섹션에 선만 단독으로 남겨둘 수 있는 경우라면 \ 너비를 다시 늘이고 사용자 섹션의 좌우 여백을 조절하여 \ 최적의 데스크탑, 모바일 뷰를 만들어보세요. 하지만 위의 예시 이미지와 같은 경우라면 어렵겠죠..ㅠ ### 14)본문\_버튼 **사용자 편집 섹션에서, 요소**를 통해 **버튼**을 **추가**한 경우 \ **개별 편집을 사용하여 스타일 편집값과 다른** **색상 및 디자인을 설정**할 수 있어요. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2aowgwLWGcTrbxVnyU%2F-M2arRxjUJKcsAD7tiL0%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%201.59.35.png?alt=media\&token=66764236-b555-4f7d-8c59-f58f09cc543e) ### 15)본문\_아이콘 **사용자 편집 섹션**에서, **요소**를 통해 **아이콘**을 **추가**한 경우 \ **개별 편집을 사용하여 스타일 편집값과 다른 색상 및 디자인을 설정**할 수 있어요. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2ash5fxdVHzIUyl7IT%2F-M2auA9gscgQgnp2BQl3%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%202.11.00.png?alt=media\&token=b9ffad39-6c30-4716-9f1f-af0717d2ce04) ### 16)본문\_공백 **사용자 편집 섹션**에서, **요소**를 통해 **공백**을 **추가**한 경우\ **개별 편집을 사용하여 여백 (높낮이)을 설정**할 수 있어요. \ \ **개별 편집으로 수정하거나, 공백 요소를 클릭 후 마우스 드레그로 수정할 수 있어요.** ![두 방법 모두 같은 기능이에요.](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2auKaBVeXwUTF7fKRs%2F-M2awTk2zvMg2Ayf3c0T%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%202.19.50.png?alt=media\&token=a3212e3c-b3bc-4a4f-a3b6-c67b8849d584) ### 17)본문\_이미지 **사용자 편집 섹션**에서, **요소**를 통해 **이미지**를 **추가**한 경우 \ **개별 편집을 사용하여 이미지의 디자인 설정을 진행**할 수 있어요. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2aw_K6sGrQZtb-8rhU%2F-M2ay7a--4L4KzRBFjFi%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%202.29.40.png?alt=media\&token=6fde8a68-ebef-4b85-b8b0-4543e0fb93b7) ### 18)본문\_동영상 **사용자 편집 섹션**에서, **요소**를 통해 **동영상을 추가**한 경우 \ **개별 편집을 사용하여 동영상 설정**을 진행할 수 있어요. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2ayEds85eA-dJ8IwgQ%2F-M2azQ0GpZzcQeWqzURY%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%202.34.11.png?alt=media\&token=d0fde311-6a1f-485f-a123-49e3caa4630d) ### 19)본문\_슬라이드 **사용자 편집 섹션**에서, **요소**를 통해 **슬라이드**를 **추가**한 경우 \ **개별 편집을 사용하여 디자인 편집을 진행**할 수 있어요. 갤러리 섹션의 응용법 슬라이드와 비슷하죠? \ 조금 더 편하다고 판단되는 기능으로 사용해보세요\~ {% hint style="info" %} 슬라이드 요소의 제목과 설명 글꼴은\ 줄글 요소와 동일하게 적용되므로 별도로 설정하실 수는 없습니다. {% endhint %} ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2azUaEIV80GVWlnQ2d%2F-M2b16Htlrg0oJnVe2mW%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%202.41.01.png?alt=media\&token=6ff6a197-a206-45d0-8327-22d1bfb816c6) ### 20)본문\_폼
**사용자 편집 섹션**에서, **요소**를 통해 **폼**을 **추가**한 경우\ **개별 편집을 사용하여 항목을 편집**할 수 있어요.\ \ 해당 영역도 [디자인 편집하기의](https://help.sixshop.com/ect_01/broken-reference) 6.제휴요청 페이지 스타일 및 개별 편집 하기 , 40번 \ 영역에서 진행했었죠? ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2b1D1qD3le80O0EEPh%2F-M2b3Yj3jXcHJMfKEXqd%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%202.53.55.png?alt=media\&token=f97a0532-50f3-4522-8599-1b32502b8bbd) ### 21)본문\_지도 **지도 섹션**과 사용자 편집 섹션의 **지도 요소** 추가한 **두가지 모두** \ **개별 편집을 사용하여 지도를 설정**할 수 있지만,\ **카카오 앱 키를 추가하셔야 사용**할 수 있어요. \[수정필요] 앱키 추가 안내서 연 ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2b3a7oTYABnmZgfjB8%2F-M2b6Nf-mWeYyKjaaFcm%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.10.22.png?alt=media\&token=9195e9e9-f5e0-484e-ae5e-45d0b32cee4b) ### 22)바닥글 \ **바닥글** 항목 중 **2가지의 사용 여부를 설정**할 수 있어요.(저작권 표기, 아이콘) ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2b7_Blrpb7yYvHzL9Y%2F-M2b8tJgak2luD0Rfqq9%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.19.05.png?alt=media\&token=8f301d1f-ddf7-4511-804c-8fe3fe51c354) ### 23)바닥글\_법적필수정보 **사업자등록증의 내용을 노출하고 관리하는 영역**이죠. \ **관리하기 > 설정 > 법적 필수 정보** 영역과 **연동**되어 있습니다. \ 어느쪽에서 작성하셔도 동일하게 반영돼요. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2b8yCOz6YqvXgQE4zW%2F-M2bB-a_lQGYkh5a8HAq%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.25.23.png?alt=media\&token=11c12cdf-c96b-4090-948b-c612b649989d) ### 24)바닥글\_저작권표시 저작권 문구를 작성할 수 있어요. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2bB3twDnfnkhVDRaUc%2F-M2bBpger8QYJou4ksPT%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.32.59.png?alt=media\&token=dbc25eaa-61d1-48d7-849c-135b643c5821) ### 25)바닥글\_메뉴 바닥글 메뉴 (내비게이션)을 추가하기 위한 페이지 목록 화면을 확인할 수 있어요. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2bB3twDnfnkhVDRaUc%2F-M2bDh_qJr7pcqhA5CkY%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.41.06.png?alt=media\&token=c88ffcf2-7a2c-467b-b7ad-0e5930de7574) ### 26)바닥글\_아이콘 아이콘 항목을 추가 및 삭제할 수 있어요. 추가할 경우, \ 22번의 바닥글 영역에서 아이콘 사용 여부를 설정하신 뒤 \ 아이콘 개별 편집에서 원하는 항목의 링크를 입력\~! 삭제할 경우, 입력된 값을 지워주시는거 잊지 않으셨죠? ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M2bB3twDnfnkhVDRaUc%2F-M2bEprNJb65dscrc6_b%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-03-17%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.44.37.png?alt=media\&token=f6b4c709-7169-47a3-a173-69603863be7e)