# 이미지

JPG, PNG, GIF 등 다양한 형식의 이미지를 추가할 수 있는 블록입니다. 링크 연결, 캡션 입력, 정렬이 가능합니다.

## 이미지 추가

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

- 빈 곳에 `/이미지` 입력 후 `Enter` 를 누르면 이미지 블록이 추가됩니다. 또는 블록 왼쪽의 `+` 클릭 후 `이미지` 를 선택합니다.

- 폴더에서 이미지를 빈 곳으로 드래그합니다.

- 복사한 이미지를 빈 곳에 붙여 넣습니다.

![Image](https://upload.cafenono.com/image/slashpageHome/20240404/105122_AQ8p0XoaDB1JnKxZU3?q=75&s=1280x180&t=outside&f=webp)

## 이미지 크기 조절

이미지에 커서를 올리면 생기는 각 모서리의 작은 점을 클릭한 채 드래그합니다. 화면 끝까지 늘리면 전체 너비가 적용됩니다.

[Video](https://vz-127031db-d43.b-cdn.net/f0d0e999-60ea-445b-b645-d0ad650a29ff/playlist.m3u8)

## 이미지 자르기, 회전, 반전

이미지 오른쪽 위 툴바의 이미지 수정 아이콘을 클릭해  `편집` 을 선택합니다.

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

> Unsplash 탭에서 선택한 이미지가 아닌, 직접 업로드한 이미지일 때만 편집 버튼이 생겨요.

이미지를 크롭, 회전, 반전한 후 `저장` 을 클릭하면 반영됩니다. 이미지를 처음 상태로 되돌리려면 `초기화` 를 클릭합니다.

[Video](https://vz-127031db-d43.b-cdn.net/45dc2dd0-6822-428c-91c3-214cd1fcf052/playlist.m3u8)

## 이미지 위에 텍스트 작성

이미지 오른쪽 위 툴바의 `...` → `배경 블록으로 변환` 을 클릭합니다. 이미지 배경을 클릭해 글씨를 쓰거나 버튼, 컬럼, 표 등을 추가할 수 있습니다.

[Video](https://vz-127031db-d43.b-cdn.net/9108dfa5-d26b-41a8-ba96-191a35c97095/playlist.m3u8)

> 배경 블록을 더 잘 활용하는 방법이 궁금하다면 **[배경 블록 가이드](https://slashpage.com/slashpage-help-center/background)**를 참고해 주세요.

## 대표 이미지 설정

이미지 블록 왼쪽의 핸들을 클릭해 `대표 이미지` 옵션을 활성화합니다. 각 페이지나 글에 하나씩만 설정할 수 있으며, 설정하면 왼쪽 위에 `대표 이미지` 라고 표시됩니다.

대표 이미지는 다음과 같은 경우에 썸네일로 적용됩니다.

- 구글 등 검색 결과의 미리보기

- 메신저, 소셜미디어 등에 공유한 링크

- 블로그 채널의 글 목록

![Image](https://upload.cafenono.com/image/slashpageHome/20240403/142635_kdSchxqVv3WLF1Oq0Y?q=75&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpageHome/20240403/142743_YjTrhbDCIjsLgWG9kC?q=75&s=1280x180&t=outside&f=webp)

## 이미지 변경

이미지 블록 왼쪽의 핸들을 클릭해 `이미지 수정` 을 선택하고 변경할 이미지를 불러옵니다.

![Image](https://upload.cafenono.com/image/slashpageHome/20240403/142252_Ocx1LpNMTL66AFtpPR?q=75&s=1280x180&t=outside&f=webp)

## 추가 설정

이미지 블록 왼쪽 핸들을 클릭해 아래의 기능을 적용할 수 있습니다.

- 둥근 모서리 : 이미지의 네 모서리를 둥글게 만듭니다.

- 링크 : 이미지를 클릭했을 때 이동할 링크를 추가합니다.

- 정렬 : 이미지를 왼쪽, 가운데, 오른쪽 정렬합니다.

- 캡션 : 이미지 아래에 작은 글씨로 설명을 적습니다.

- 전체 너비 : 이미지 크기를 페이지 너비와 관계 없이 화면 양옆에 꽉 차게 키웁니다.

- 이미지 확대 비활성화 : 이미지를 클릭해도 확대되지 않습니다.

![Image](https://upload.cafenono.com/image/slashpageHome/20240403/154115_D2MwlwLr97XjTAwYgD?q=75&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpageHome/20240403/161338_H6dFX7KyCILCpYkvy5?q=75&s=1280x180&t=outside&f=webp)

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