> ## Documentation Index
> Fetch the complete documentation index at: https://guide.canape.im/llms.txt
> Use this file to discover all available pages before exploring further.

# 공통 스타일 요소

> 디자인 테마, 배경화면, 폰트 등 모든 이벤트 유형에서 공통으로 존재하는 기능 사용법을 안내해드릴게요.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/vVKI1r3jek5bAVQT/images/%E1%84%80%E1%85%A9%E1%86%BC%E1%84%90%E1%85%A9%E1%86%BC.avif?fit=max&auto=format&n=vVKI1r3jek5bAVQT&q=85&s=a10736c663d68c9e25312f98e3322186" alt="공통.avif" width="2048" height="819" data-path="images/공통.avif" />

## 테마 템플릿

디자이너가 없어도 걱정 마세요. 기념일별, 시즌별, 무드별 테마 템플릿이 마련되어있어요. 카나페에서 직접 제작한 디자인 에셋으로, 저작권 걱정 없이 마음껏 사용하셔도 괜찮아요.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/4tY0Q7xCIklRmhlR/images/VqKeEZ4L2DUoYwUK9kqTOj9akME.avif?fit=max&auto=format&n=4tY0Q7xCIklRmhlR&q=85&s=865efcaf4a9ba565970bbf329a65abfa" alt="Vq Ke EZ4L2D Uo Yw Uk9kq T Oj9ak ME Avi" width="1600" height="924" data-path="images/VqKeEZ4L2DUoYwUK9kqTOj9akME.avif" />

테마 템플릿은 다음을 포함해요:

* 배경 이미지
* 이벤트 머신 컬러
* 폰트

다음 사항은 직접 업로드하셔야 해요:

* 리워드 이미지

## 배경

<img src="https://mintcdn.com/dodamind-b0c9d0b4/4tY0Q7xCIklRmhlR/images/SrkQJfKwJAEr96FjxGhADAodY.avif?fit=max&auto=format&n=4tY0Q7xCIklRmhlR&q=85&s=accfe9106a2fc8934ec84b60f2411d18" alt="Srk Q Jf Kw JA Er96fjx Gh AD Aod Y Avi" width="895" height="269" data-path="images/SrkQJfKwJAEr96FjxGhADAodY.avif" />

배경 이미지를 업로드하여 이벤트 부분을 더 강조할 수 있어요.

* 업로드 최대 크기: `8MB (픽셀 무관)`
* 권장 크기 : `1440*2560px`
* 권장 비율: `16:9`

**요소에 딱 맞게**

* ‘요소에 딱 맞게’ 기능은 배경 이미지를 이벤트 요소에 맞게 잘라주는 기능이에요.
* 업로드한 배경 이미지가 이벤트 요소들의 높이 총합보다 긴 경우, 배경 이미지가 자동으로 잘려요.
* 업로드한 배경 이미지가 이벤트 요소들의 높이 총합보다 긴 경우에만 스위치가 노출돼요.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/4tY0Q7xCIklRmhlR/images/2tx9v86HmPzedLYPwTiRIO8mZg.avif?fit=max&auto=format&n=4tY0Q7xCIklRmhlR&q=85&s=1a0a68cfbb617f2bcb011f575c1a30b5" alt="2tx9v86hm Pzed LY Pw Ti Rio8m Zg Avi" width="1226" height="418" data-path="images/2tx9v86HmPzedLYPwTiRIO8mZg.avif" />

**배경색**

배경색을 설정하면 이벤트 시작 페이지의 배경 색상을 자유롭게 변경할 수 있어요.

* 컬러 팔레트에서 기본으로 제공되는 색상을 선택할 수 있어요.
* 브랜드 컬러 hex값을 입력해서 적용할 수 있어요.

## 타이틀

<img src="https://mintcdn.com/dodamind-b0c9d0b4/4tY0Q7xCIklRmhlR/images/VQhAz5eVFHZE7TJZddxrdwAaFrQ.avif?fit=max&auto=format&n=4tY0Q7xCIklRmhlR&q=85&s=1fc3354777d36ccdc5c565fb1fd6a9fa" alt="V Qh Az5e VFHZE7TJ Zddxrdw Aa Fr Q Avi" width="3508" height="2026" data-path="images/VQhAz5eVFHZE7TJZddxrdwAaFrQ.avif" />

상단의 텍스트/이미지 슬라이더 버튼을 통해서 둘 중 하나를 선택하실 수 있어요.

**1️⃣ 텍스트로 설정하기**

콘텐츠의 제목과 부제목을 작성할 수 있어요. 공유 시 제목과 검색 엔진의 제목으로도 자동 등록되고, 설정한 폰트가 자동 적용됩니다.  텍스트로 설정할 경우, 제목 폰트 크기를 크게, 중간, 작게로 선택하실 수 있어요.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/xeuV7IkPK6TADGeF/images/h1o9NacN1EV4dOXRHpMYUE3oNmU.avif?fit=max&auto=format&n=xeuV7IkPK6TADGeF&q=85&s=f0fcd94c05a8d6269e66fab89d506b60" alt="H1o9nac N1ev4d OXR Hp Myue3o Nm U Avi" width="1600" height="924" data-path="images/h1o9NacN1EV4dOXRHpMYUE3oNmU.avif" />

**2️⃣ 이미지로 설정하기**

따로 디자인한 타이틀 이미지 파일을 업로드를 업로드 하실 수 도 있어요.

* 800\*600px(4:3비율)로 제목과 부제목을 하나의 이미지로 생성해서 업로드해주세요.
* 디자인 완성도를 위해서 반드시 배경이 투명인 PNG 파일을 업로드해주세요.

## 폰트 설정

카나페에서는 상업적 이용이 가능한 폰트를 제공해드리고 있어요. 저작권 걱정 없이 우리 브랜드의 감성에 어울리는 폰트를 선택해보세요. 설정한 폰트는 이용약관을 제외한 이벤트의 모든 부분에 적용돼요.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/xeuV7IkPK6TADGeF/images/tVsSFyA34MkKNtE7oDiEsupF3g.avif?fit=max&auto=format&n=xeuV7IkPK6TADGeF&q=85&s=6b59ffe36461819fad1c01fde9cc9c49" alt="T Vs S Fy A34mk K Nt E7o Di Esup F3g Avi" width="1600" height="924" data-path="images/tVsSFyA34MkKNtE7oDiEsupF3g.avif" />

## 임베드 가로값 설정

<img src="https://mintcdn.com/dodamind-b0c9d0b4/4tY0Q7xCIklRmhlR/images/QoYqu1QDpOnCLr8g6z13ya5VgQc.avif?fit=max&auto=format&n=4tY0Q7xCIklRmhlR&q=85&s=498bc8d79e60ef6666bc422d2244e85d" alt="Qo Yqu1q Dp On C Lr8g6z13ya5vg Qc Avi" width="1600" height="924" data-path="images/QoYqu1QDpOnCLr8g6z13ya5VgQc.avif" />

제작하신 이벤트를 쇼핑몰에 임베딩 할 때, 임베드 너비를 자유롭게 조정하실 수 있어요. ‍

`스타일` 탭의 맨 밑에서 기능을 찾으실 수 있어요.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/4tY0Q7xCIklRmhlR/images/2MdVXHsjbqQtUAChx1IyC8fdGw.avif?fit=max&auto=format&n=4tY0Q7xCIklRmhlR&q=85&s=9a864b185be9eb25add400f11d3a23f0" alt="2md VX Hsjbq Qt UA Chx1iy C8fd Gw Avi" width="1592" height="656" data-path="images/2MdVXHsjbqQtUAChx1IyC8fdGw.avif" />

기능을 사용하고 싶으시다면, 스위치를 켜주세요. 그러면 입력창이 활성화될거에요. 입력 창에 원하시는 가로값을 입력해주세요. 별도로 설정하지 않으면 960px으로 맞춰져요.

‍
