# 프레임 블럭 다루기

프레임 블럭은 상세설정을 통해 프레임, 레이아웃, 스타일 등을 조정할 수 있습니다.

프레임 : 프레임박스 순서, 간격, 마우스오버 효과 설정

레이아웃 : 너비, 여백, 정렬 설정

스타일 : 배경, 테두리, 그림자 설정

프레임 블럭의 자세한 설정 방법은 아래 안내를 참고해 주시기 바랍니다.

[https://docs.dothome.co.kr/books/09/page/1f0e3](https://docs.dothome.co.kr/books/09/page/1f0e3)

[<span style="color: #3c99f6;">'프레임 블럭에 요소 블럭 추가하기'</span>](https://docs.dothome.co.kr/books/09/page/e44fe) 매뉴얼을 통해 프레임 블럭 안에 요소 블럭을 추가하는 방법을 알아봤다면,

이번엔 프레임 블럭의 너비, 여백 등 상세 설정을 변경하는 방법에 대해 알아보겠습니다.

[![dhbd-09-05-01.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-05-01.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-05-01.png)

<span style="color: rgb(22, 145, 121);">\[프레임 블럭 설정 버튼 화면\]</span>

프레임 블럭 위에 마우스를 올리면 우측 상단에 블럭 편집 메뉴가 표시됩니다.

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

[![dhbd-09-05-02.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-05-02.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-05-02.png)

<span style="color: rgb(22, 145, 121);">\[프레임 블럭 상세설정창 화면\]</span>

프레임블럭의 상세 설정창은 프레임, 레이아웃, 스타일 세개의 탭메뉴로 구성되어 있습니다.

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

(프레임 블럭 상세 설정 후 하단 \[적용하기\] 버튼을 클릭해야만 저장됩니다.)

**● 프레임**

**[![dhbd-09-05-03.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-05-03.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-05-03.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-%ED%94%84%EB%A0%88%EC%9E%84-%EB%B0%95%EC%8A%A4-%EC%88%9C%EC%84%9C-%EB%93%9C%EB%9E%98%EA%B7%B8%EC%95%A4"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 23.0358%;">항목</td><td style="width: 77.0834%;">설명</td></tr></thead><tbody><tr><td style="width: 23.0358%;">프레임 박스 순서  
</td><td style="width: 77.0834%;">드래그앤 드롭으로 프레임 박스의 순서를 변경할 수 있습니다. (프레임 박스가 2개 이상으로 이루어진 프레임 블럭에서만 표시됩니다.)  
</td></tr><tr><td style="width: 23.0358%;">프레임 박스 간격  
</td><td style="width: 77.0834%;">프레임 박스 사이의 간격을 조절합니다. (프레임 박스가 2개 이상으로 이루어진 프레임 블럭에서만 표시됩니다.)  
</td></tr><tr><td style="width: 23.0358%;">마우스오버 효과</td><td style="width: 77.0834%;">프레임 박스 위에 마우스를 올렸을 때 동작할 효과를 설정할 수 있습니다.  
확대로 설정하면 마우스를 올렸을 때 프레임 박스 안의 내용이 확대되어 보여집니다.

</td></tr></tbody></table>

</div></div>**● 레이아웃**

**[![dhbd-09-05-04.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-05-04.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-05-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-%EB%84%88%EB%B9%84-%EB%B8%94%EB%9F%AD-%EC%95%88%EC%9D%98-%EC%BB%A8%ED%85%90%EC%B8%A0%EA%B0%80-"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 23.0057%;">항목</td><td style="width: 76.9943%;">설명</td></tr></thead><tbody><tr><td style="width: 23.0057%;">너비</td><td style="width: 76.9943%;">블럭 안의 컨텐츠가 들어가는 영역의 기본 너비를 설정합니다.  
본문 너비 : 글로벌 디자인 설정에서 적용한 본문폭 너비에 맞게 설정합니다.  
채우기 : 컨텐츠 영역의 너비를 화면에 꽉 맞게 채웁니다.</td></tr><tr><td style="width: 23.0057%;">좌우 여백</td><td style="width: 76.9943%;">컨텐츠가 들어가는 영역의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 23.0057%;">상단 여백</td><td style="width: 76.9943%;">블럭 안쪽의 상단 여백을 설정합니다.</td></tr><tr><td style="width: 23.0057%;">하단 여백</td><td style="width: 76.9943%;">블럭 안쪽의 하단 여백을 설정합니다.</td></tr><tr><td style="width: 23.0057%;">정렬 </td><td style="width: 76.9943%;">블럭 안에 들어가는 요소들의 정렬을 설정합니다.</td></tr><tr><td style="width: 23.0057%;">수직 정렬</td><td style="width: 76.9943%;">프레임 박스간의 수직 정렬을 설정합니다. (프레임 박스가 2개 이상으로 이루어진 프레임 블럭에서만 표시됩니다.)</td></tr></tbody></table>

</div></div>**● 스타일**

**[![dhbd-09-05-05.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-05-05.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-05-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-%EB%B8%94%EB%9F%AD-%EC%A0%84%EC%B2%B4-%EB%B8%94%EB%9F%AD-%EC%98%81%EC%97%AD%EC%97%90-%EB%8C%80"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 23.1245%;">항목</td><td style="width: 76.8755%;">설명</td></tr></thead><tbody><tr><td style="width: 23.1245%;">블럭</td><td style="width: 76.8755%;">전체 블럭 영역에 대한 배경을 설정합니다.</td></tr><tr><td style="width: 23.1245%;">프레임 박스</td><td style="width: 76.8755%;">프레임 박스의 배경색, 테두리 등 스타일을 설정합니다.</td></tr></tbody></table>

</div></div>