# 배경

배경 영역을 만들 수 있는 블록입니다. 바탕에 이미지, 동영상, 색을 설정할 수 있고, 이 블록 위에 텍스트 등 다른 블록을 추가할 수 있습니다. 

## 배경 추가

3가지 방법으로 추가할 수 있습니다.

- 빈 곳에 `/배경` 입력 후 `Enter` 를 누르면 배경 블록이 추가됩니다. 

- 블록 왼쪽의 `+` 클릭 후 `배경` 을 선택합니다.

- 이미지 블럭에서 `...` 선택 후 `배경 블럭으로 변환`을 선택합니다.

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

## 배경 설정

### 바탕에 이미지와 동영상 추가

블록 위에 커서를 올린 후 `배경 변경` 아이콘을 클릭합니다. 

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

`업로드` 탭에서 직접 이미지 또는 동영상을 업로드하거나, `Unsplash` 탭에서 키워드를 검색해 이미지를 추가합니다. 

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

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

> 업로드 가능한 확장자

JPG, GIF, MP4, MOV 

### 크기와 너비 변경

섹션 블록 위에 커서를 올리면 나오는 좌/우/아래 핸들을 드래그 앤 드롭합니다. 

[Video](https://vz-127031db-d43.b-cdn.net/fdae626e-9cf8-4843-bde8-3e4e92d5d812/playlist.m3u8)

> 너비 또는 높이를 항상 최대로 고정하고 싶다면?

블록 위에 커서를 올린 후 `...` > `전체 너비` 또는 `전체 높이` 를 클릭합니다.

### 바탕에 색상 추가

블록 위에 커서를 올린 후 `배경 변경` 아이콘을 클릭합니다. 

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

`색상` 탭에서 팔레트 또는 컬러 픽커의 원하는 색상을 선택합니다.

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

### 카드 형태로 보기

섹션 블록 위에 커서를 올린를 올린 후 `...` > `카드 형태` 를 클릭합니다. 

카드 형태 옵션을 킨 버전

카드 형태 옵션을 끈 버전

### 흐리게 보기

블록 위에 커서를 올린 후 `...` > `흐린 배경` 을 클릭합니다.

흐린 배경 옵션을 킨 버전

흐린 배경 옵션을 끈 버전

### 링크 걸기

블록 위에 커서를 올린 후 링크 아이콘을 클릭합니다. (바탕을 이미지로 설정했을 때만 가능합니다.)

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

입력 칸에 URL, 기능, 다른 페이지나 채널 중 원하는 것을 입력하고 `저장` 을 클릭합니다.

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

## 배경 위에 다른 블록 추가

블록을 클릭하고 `/` 를 입력하면 나오는 블록 중 원하는 것을 선택합니다. 아래 예시처럼 다른 블록을 추가할 수 있습니다.

[Video](https://vz-127031db-d43.b-cdn.net/0d94f375-8ae0-47d9-9676-13aa869cab0f/playlist.m3u8)

    텍스트, 버튼, 이미지, 표, 컬럼, 채널 등
    모든 블록을 추가할 수 있습니다.

[구독하기]()

### 정렬

- 세로 정렬

    - 배경 블록 위에 커서를 올린 후 정렬 아이콘을 클릭해서 원하는 정렬 방식을 선택합니다.

- 가로 정렬

    - 정렬하려는 블록의 핸들을 클릭하고 원하는 정렬 방식을 선택합니다.

[Video](https://vz-127031db-d43.b-cdn.net/f2b982c6-3871-4f52-9423-53e6364a3eb6/playlist.m3u8)

> 배경 블록 너비와 사이트 너비가 다른 경우, 배경 블록 위에 있는 블록들의 너비를 사이트와 동일하게 맞출 수 있습니다.

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

## 활용 사례

### 1. 커버 이미지

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

### 2. 웹사이트 영역 구분

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

### 3. 컬럼과 함께 활용하기

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

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