# 이미지 블럭 다루기

이미지 요소 블럭은 프레임 안에 이미지를 추가할 수 있는 블럭입니다

\[요소블럭 추가\] - \[이미지\] 버튼으로 추가가 가능합니다.

자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

[https://docs.dothome.co.kr/books/10/page/efe93](https://docs.dothome.co.kr/books/10/page/efe93)

[![imag_block_01.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/imag-block-01.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/imag-block-01.png)

<span style="color: rgb(22, 145, 121);">\[이미지 요소블럭 선택 화면\]</span>

프레임 박스 안에 있는 추가버튼을 누르면 요소 블럭 선택창이 열립니다.

이미지 블럭을 추가해 주세요.

[![imag_block_02.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/imag-block-02.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/imag-block-02.png)

<span style="color: rgb(22, 145, 121);">\[이미지 요소블럭 설정 버튼 화면\]</span>

추가된 이미지 블럭 위에 마우스를 올리면 좌측 상단에 블럭 편집 메뉴가 표시됩니다.

가운데에 있는 \[설정(톱니 바퀴)\]버튼을 클릭하여 상세 설정창을 열어줍니다.

[![imag_block_03.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/imag-block-03.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/imag-block-03.png)

<span style="color: rgb(22, 145, 121);">\[이미지 요소블럭 상세설정창 화면\]</span>

이미지 블럭의 상세 설정창은 내용, 레이아웃, 배경, 애니메이션 네개의 탭메뉴로 구성되어 있습니다.

각 설정 항목에 대해 알아보겠습니다.

**\[내용\]**

[![imag_block_04.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/imag-block-04.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/imag-block-04.png)

<span style="color: rgb(22, 145, 121);">\[이미지 요소블럭 상세설정 - 내용\]</span>

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%B3%80%EA%B2%BD-%EB%B2%84%ED%8A%BC%EC%9D%84"><div class="contents"><table class="table table-bordered" style="width: 103.333%; height: 406.974px;"><tbody><tr style="height: 41.6903px;"><td style="width: 17.8742%; height: 41.6903px;">항목</td><td style="width: 82.115%; height: 41.6903px;">설명</td></tr><tr style="height: 114.503px;"><td style="width: 17.8742%; height: 114.503px;">이미지</td><td style="width: 82.115%; height: 114.503px;">이미지 변경 버튼을 통해 이미지를 변경할 수 있습니다.

이미지는 파일 관리를 통해 업로드하신 이미지 중에서 선택하여 적용할 수 있습니다.

**[<span style="color: #3c99f6;">파일 관리자 사용 방법 보기&gt;</span>](https://docs.dothome.co.kr/books/02/page/a8f15)**

</td></tr><tr style="height: 125.71px;"><td style="width: 17.8742%; height: 125.71px;">높이</td><td style="width: 82.115%; height: 125.71px;">이미지 높이를 설정합니다.

이미지 원본 비율 : 이미지 원본 사이즈로 나오도록 합니다. 원본 사이즈 크기가 본문 영역보다 클 경우 본문 영역에 맞춰서 보여집니다.

직접 입력 : 입력한 높이값대로 설정합니다. 이미지보다 직접 입력한 높이값이 더 클 경우 빈 공간은 여백으로 보여집니다.

</td></tr><tr style="height: 41.6903px;"><td style="width: 17.8742%; height: 41.6903px;">이미지 채우기 효과</td><td style="width: 82.115%; height: 41.6903px;">이미지의 너비를 본문 영역에 채워서 보여줍니다.</td></tr><tr style="height: 41.6903px;"><td style="width: 17.8742%; height: 41.6903px;">원형 이미지 효과</td><td style="width: 82.115%; height: 41.6903px;">이미지를 원형으로 보여줍니다.</td></tr><tr style="height: 41.6903px;"><td style="width: 17.8742%; height: 41.6903px;">링크</td><td style="width: 82.115%; height: 41.6903px;">이미지를 클릭하면 입력한 URL로 이동하도록 링크를 설정할 수 있습니다.</td></tr></tbody></table>

</div></div>**\[레이아웃\]**

[![imag_block_05.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/imag-block-05.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/imag-block-05.png)

<span style="color: rgb(22, 145, 121);">\[이미지 요소블럭 상세설정 - 레이아웃\]</span>

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EC%A2%8C%EC%9A%B0-%EC%97%AC%EB%B0%B1-%EB%B8%94%EB%9F%AD%EC%9D%98-%EC%A2%8C%EC%9A%B0-%EC%97%AC"><div class="contents"><table class="table table-bordered" style="width: 100%;"><tbody><tr><td style="width: 22.889%;">항목</td><td style="width: 77.1002%;">설명</td></tr><tr><td style="width: 22.889%;">좌우 여백</td><td style="width: 77.1002%;">블럭의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 22.889%;">상단 여백</td><td style="width: 77.1002%;">블럭 상단의 여백을 설정합니다.</td></tr><tr><td style="width: 22.889%;">하단 여백</td><td style="width: 77.1002%;">블럭 하단의 여백을 설정합니다.</td></tr><tr><td style="width: 22.889%;">정렬</td><td style="width: 77.1002%;">이미지의 정렬을 설정합니다.</td></tr></tbody></table>

</div></div>**\[배경\]**

[![imag_block_06.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/imag-block-06.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/imag-block-06.png)

<span style="color: rgb(22, 145, 121);">\[이미지 요소블럭 상세설정 - 배경\]</span>

<div class="col-xl-9 col-lg-9" id="bkmrk-%EB%B0%B0%EA%B2%BD-%EB%B8%94%EB%9F%AD%EC%97%90-%EB%8C%80%ED%95%9C-%EB%B0%B0%EA%B2%BD%EC%9D%84-%EC%84%A4%EC%A0%95%ED%95%A9%EB%8B%88%EB%8B%A4."><div class="contents"><table class="table table-bordered" style="width: 100%;"><tbody><tr><td style="width: 22.4117%;">항목</td><td style="width: 77.5775%;">설명</td></tr><tr><td style="width: 22.4117%;">배경</td><td style="width: 77.5775%;">블럭에 대한 배경을 설정합니다.</td></tr><tr><td style="width: 22.4117%;">테두리</td><td style="width: 77.5775%;">블럭 테두리 종류, 두께, 색상 등을 설정합니다.</td></tr></tbody></table>

</div></div>**\[애니메이션\]**

[![imag_block_07.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/imag-block-07.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/imag-block-07.png)

<span style="color: rgb(22, 145, 121);">\[이미지 요소블럭 상세설정 - 애니메이션\]</span>

화면에 해당 요소 블럭이 위치한 영역이 보일 때 동작하는 애니메이션을 설정합니다.

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%9A%A8%EA%B3%BC-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%ED%9A%A8%EA%B3%BC%EB%A5%BC-%EC%84%A4%EC%A0%95%ED%95%A9%EB%8B%88%EB%8B%A4.-"><div class="contents"><table class="table table-bordered" style="width: 100%; height: 262.909px;"><tbody><tr style="height: 41.6903px;"><td style="width: 13.352%; height: 41.6903px;">항목</td><td style="width: 86.6371%; height: 41.6903px;">설명

</td></tr><tr style="height: 96.148px;"><td style="width: 13.352%; height: 96.148px;">효과</td><td style="width: 86.6371%; height: 96.148px;">애니메이션 효과를 설정합니다.

- 슬라이드 : 요소 블럭이 보이지 않다가 상/하/좌/우 방향 중 한곳에서 슬라이드 되어 보여집니다.
- 페이드 : 요소 블럭이 보이지 않다가 점차 또렷해집니다.
- 확대 : 요소 블럭이 보이지 않다가 확대되었다 다시 원래 크기로 돌아오면서 보여집니다.
- 플립 : 요소 블럭이 보이지 않다가 위아래 또는 좌우로 뒤집히면서 보여집니다.
- 회전 : 요소 블럭이 보이지 않다가 한 바퀴 회전하면서 보여집니다.

</td></tr><tr style="height: 41.6903px;"><td style="width: 13.352%; height: 41.6903px;">방향  
</td><td style="width: 86.6371%; height: 41.6903px;">해당 블럭이 나오고 움직이는 방향을 설정합니다.  
</td></tr><tr style="height: 41.6903px;"><td style="width: 13.352%; height: 41.6903px;">지속 시간</td><td style="width: 86.6371%; height: 41.6903px;">애니메이션이 동작되는 시간을 설정합니다.</td></tr><tr style="height: 41.6903px;"><td style="width: 13.352%; height: 41.6903px;">지연 시간</td><td style="width: 86.6371%; height: 41.6903px;">요소 블럭이 위치한 영역이 화면에 표시되고 몇 초 뒤에 애니메이션이 동작할 지 설정합니다.</td></tr></tbody></table>

</div></div>