# 디자인

사이트 배경과 텍스트, 블록 등의 스타일 전반을 변경합니다. 테마를 적용해 사이트 전체 디자인을 한 번에 수정하거나, 각 요소의 설정값을 개별로 수정할 수 있습니다. 디자인은 실시간으로 반영되어 사이트 방문자에게 바로 노출됩니다.

# 사이트 전체 스타일 변경

편집 모드 오른쪽 패널의 `디자인` > `색상` 탭에서 사이트 전체에 적용할 테마와 팔레트를 선택합니다.

> 테마와 팔레트를 선택하면 각종 기본 색상과 기본값이 변경돼요. 공개 상태인 사이트의 디자인을 수정할 때는 테스트 사이트를 만들어 변경된 모습을 확인 후 수정하시길 추천해요.

## 사이트 테마

테마는 배경, 텍스트, 버튼의 색상, 모서리 둥글기, 테두리, 그림자 등이 미리 세팅된 것입니다. `디자인` 메뉴 맨 위의 테마 영역을 클릭해 원하는 것을 선택하여 적용하면, 모든 요소의 기본 색상과 기본값이 자동 변경됩니다.

![Image](https://upload.cafenono.com/image/slashpageHome/20260401/162132_pEeEALETutONCRTdPO)

## 색상 팔레트

팔레트는 어울리는 색상 조합을 미리 세팅한 것입니다. `색상` 탭에서 팔레트 영역을 클릭해 원하는 것을 선택하여 적용하면, 모든 요소의 기본 색상이 해당 팔레트의 색상으로 자동 변경됩니다.

![Image](https://upload.cafenono.com/image/slashpageHome/20260403/180823_2Cn4Q6yj6Kwn0UZLBu)

팔레트의 각 색상을 클릭하면 다른 색상으로 수정할 수 있습니다. 이때 변경한 색상이 팔레트 아래의 개별 요소 색상에 도 적용돼 있었다면, 해당 요소 색상도 함께 변경됩니다.

![Image](https://upload.cafenono.com/image/slashpageHome/20260331/193201_bNi6YE51ZVMXxsjzHh?q=80&s=1280x180&t=outside&f=webp)

`라이트` 와 `다크` 를 클릭하면 방문자의 화면 모드에 따라 다르게 보일 팔레트 색상을 따로 지정할 수 있습니다.

> **사이트를 방문자의 모드에 관계 없이 라이트 모드 또는 다크 모드로 고정하고 싶다면?**

`라이트` 또는 `다크` 를 선택한 채로 원형 아이콘을 클릭하여 `시스템 컬러 대응` 을 비활성화해주세요. 

![Image](https://upload.cafenono.com/image/slashpageHome/20260331/193507_eLo21p5JP3ueo7RhnW?q=80&s=1280x180&t=outside&f=webp)

# 각 요소별 기본 스타일 변경

편집 모드 오른쪽 패널의 `디자인` > `색상` , `폰트` , `모양` 탭에서 요소별로 스타일의 기본값을 변경합니다.

> **디자인 메뉴에서 스타일을 변경해도 적용되지 않는 블록이 있다면?**

해당 블록의 색상, 크기, 두께 등이 개별적으로 커스텀된 상태이므로, 해당 블록 설정에서 되돌리기 아이콘을 클릭해 주세요.

![Image](https://upload.cafenono.com/image/slashpageHome/20260331/193720_BrjGPuiiI20xQS4Ouw?q=80&s=1280x180&t=outside&f=webp)

## 사이트 배경, 헤더 스타일

`색상` 탭의 `사이트 전체` 영역에서 배경과 사이트 헤더 색상을 변경합니다.

[Video](https://vz-127031db-d43.b-cdn.net/42b9e888-6fcf-45b1-ba18-f8be4e5c1097/playlist.m3u8)

## 텍스트 스타일

텍스트 색상 변경

`색상` 탭에서 사이트 전체 타이틀과 기본 텍스트 색상을 변경합니다. 

![Image](https://upload.cafenono.com/image/slashpageHome/20260331/195659_vRBNK0XcO6epH3Rlyt?q=80&s=1280x180&t=outside&f=webp)

텍스트 크기, 두께, 줄 간격, 폰트 종류 변경

`폰트` 탭에서 사이트 전체에 적용할 기본 폰트와 제목에 적용할 제목 폰트를 각각 선택합니다.

페이지 제목, 페이지 본문, 제목 1~3을 클릭하여 각각의 두께, 크기, 줄 간격 값을 수정합니다. 

![Image](https://upload.cafenono.com/image/slashpageHome/20260331/203935_wjzNrx8GCZsxNJkBxd)

> 채널 글의 스타일을 따로 지정하고 싶다면 '포스트' 옵션을 활성화하여 값을 수정해 주세요.

![Image](https://upload.cafenono.com/image/slashpageHome/20260331/201009_NAB7TBMXDu9ySpcXrC?q=80&s=1280x180&t=outside&f=webp)

> 텍스트마다 스타일을 개별 설정하는 방법은 [텍스트 가이드(클릭)](https://help.slashpage.com/text)에서 확인해 주세요.

## 버튼 스타일

버튼 배경, 텍스트 색상 변경

`색상` 탭의 버튼 영역에서 배경과 텍스트 색상을 변경합니다.

![Image](https://upload.cafenono.com/image/slashpageHome/20260331/201529_BsenVAuYhpcNKNGiVw?q=80&s=1280x180&t=outside&f=webp)

버튼 텍스트 크기, 두께, 줄 간격 조절

`폰트` 탭의 기본값 영역에서 버튼을 클릭하여 두께, 크기, 줄 간격 값을 수정합니다. 

![Image](https://upload.cafenono.com/image/slashpageHome/20260331/211043_JhAKgKxJskqp4jp02Q?q=80&s=1280x180&t=outside&f=webp)

버튼 패딩, 모서리 둥글기 조절

`모양` 탭의 버튼 영역에서 패딩(안쪽 여백)과 둥근 모서리 값을 조절합니다. 

![Image](https://upload.cafenono.com/image/slashpageHome/20260331/211027_HWuAsnOmd5AMoe8Y6h?q=80&s=1280x180&t=outside&f=webp)

버튼 테두리, 그림자 추가

`모양` 탭의 버튼 영역에서 테두리와 그림자를 활성화해 테두리 두께, 그림자 흐리기, 위치를 조절합니다. `색상` 탭으로 이동하여 버튼 영역에서 테두리와 그림자의 색상을 변경합니다.

[Video](https://vz-127031db-d43.b-cdn.net/dbf396cd-a022-4155-8dcf-e9501223ccd0/playlist.m3u8)

> 버튼마다 스타일을 개별 설정하는 방법은 아래 가이드를 클릭해 확인해 주세요.

- [기본 버튼](https://help.slashpage.com/basic-button)

- [하단 고정 버튼](https://help.slashpage.com/bottom-fixed-button)

## 미디어(이미지, 동영상) 스타일

미디어 모서리 둥글기 조절

`모양` 탭의 이미지, 동영상 영역에서 둥근 모서리 값을 각각 조절합니다. 

![Image](https://upload.cafenono.com/image/slashpageHome/20260401/115140_UYKQbjhBgh9pXoI4Ze?q=80&s=1280x180&t=outside&f=webp)

미디어 테두리, 그림자 추가

`모양` 탭의 이미지, 동영상 영역에서 테두리와 그림자를 활성화해 테두리 두께, 그림자 흐리기, 위치를 조절합니다. `색상` 탭으로 이동하여 미디어 영역에서 테두리와 그림자의 색상을 변경합니다.

[Video](https://vz-127031db-d43.b-cdn.net/c4250d95-0458-4f18-acd1-37405159d04e/playlist.m3u8)

> 미디어 블록마다 스타일을 개별 설정하는 방법은 아래 가이드를 클릭해 확인해 주세요.

- [이미지](https://help.slashpage.com/image)

- [동영상](https://help.slashpage.com/video)

## 카드(배경, 컬럼) 스타일

카드 배경, 텍스트 색상 변경

`색상` 탭의 카드 영역에서 배경과 타이틀, 텍스트 색상을 변경합니다.

![Image](https://upload.cafenono.com/image/slashpageHome/20260401/135718_PcOX6vQtnLemiPt21V?q=80&s=1280x180&t=outside&f=webp)

카드 모서리 둥글기 조절

`모양` 탭의 카드 영역에서 둥근 모서리 값을 조절합니다. 

![Image](https://upload.cafenono.com/image/slashpageHome/20260401/135853_Od8JQGOWpb0PFJ9CyP?q=80&s=1280x180&t=outside&f=webp)

카드 테두리, 그림자 추가

`모양` 탭의 카드 영역에서 테두리와 그림자를 활성화해 테두리 두께, 그림자 흐리기, 위치를 조절합니다. `색상` 탭으로 이동하여 카드 영역에서 테두리와 그림자의 색상을 변경합니다.

[Video](https://vz-127031db-d43.b-cdn.net/81f6008f-0205-44ca-929c-d8c88e9b5775/playlist.m3u8)

> 카드 블록마다 스타일을 개별 설정하는 방법은 아래 가이드를 클릭해 확인해 주세요.

- [배경 블록](https://help.slashpage.com/background) 

- [컬럼 블록](https://help.slashpage.com/column)

## 채널 미리보기 스타일

채널 미리보기 배경, 텍스트 색상 변경

`색상` 탭의 채널 영역에서 배경과 텍스트 색상을 변경합니다.

![Image](https://upload.cafenono.com/image/slashpageHome/20260401/153402_3BDzt1CI9dRC75mCxN?q=80&s=1280x180&t=outside&f=webp)

채널 미리보기 모서리 둥글기 조절

`모양` 탭의 채널 영역에서 둥근 모서리 값을 조절합니다. 

![Image](https://upload.cafenono.com/image/slashpageHome/20260401/153627_VaLGJNyjTgSzzPM1ak?q=80&s=1280x180&t=outside&f=webp)

채널 미리보기 테두리, 그림자 추가

`모양` 탭의 채널 영역에서 테두리와 그림자를 활성화해 테두리 두께, 그림자 흐리기, 위치를 조절합니다. `색상` 탭으로 이동하여 채널 영역에서 테두리와 그림자의 색상을 변경합니다.

[Video](https://vz-127031db-d43.b-cdn.net/220ba35a-0878-4a42-a284-5c5af06ec821/playlist.m3u8)

For the site tree, see the [root Markdown](https://slashpage.com/slashpage-help-center.md).