# 09. 블럭 다루기

# 블럭 살펴보기

닷홈빌더는 다양한 블럭을 조합하여 쉽게 홈페이지를 제작할 수 있습니다.

블럭의 종류는 크게 디자인 블럭, 기능 블럭, 프레임 블럭으로 분류 됩니다.

디자인 블럭 : 인트로, 타이틀 등 미리 디자인을 만들어둔 샘플 블럭입니다.

기능 블럭 : 게시판, 갤러리, 입력폼 등의 기능을 제공하는 블럭입니다.

프레임 블럭 : 직접 디자인을 할수 있는 기본 프레임을 제공하는 블럭입니다.

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

[https://docs.dothome.co.kr/books/09/page/53c3b](https://docs.dothome.co.kr/books/09/page/53c3b)

닷홈빌더에서 제공되는 블럭에 대해서 설명해드리겠습니다.

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C-%EB%B8%94%EB%9F%AD-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C-%EC%9D%B4"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 18.5921%;">항목</td><td style="width: 81.4079%;">설명</td></tr></thead><tbody><tr><td style="width: 18.5921%;">슬라이드 블럭</td><td style="width: 81.4079%;">슬라이드 이미지를 설정할 수 있는 블럭입니다.

</td></tr><tr><td style="width: 18.5921%;">디자인된 블럭</td><td style="width: 81.4079%;">프레임 블럭을 사용하여 주제에 맞게 디자인하여 제공하는 블럭입니다. 인트로, 타이틀, 소개/설명, 연혁, 팀원, 리뷰, 가격표가 디자인된 블럭에 해당합니다.

프레임 블럭을 사용하여 제작되었기 때문에 프레임 블럭과 상세 설정 방법이 동일합니다.

</td></tr><tr><td style="width: 18.5921%;">프레임 블럭</td><td style="width: 81.4079%;"> 여러 레이아웃으로 컨텐츠를 제작할 수 있도록 제공하는 블럭입니다. 프레임 블럭 안에 요소 블럭을 추가하여 원하는 모양으로 제작할 수 있습니다.

</td></tr><tr><td style="width: 18.5921%;">게시판 블럭</td><td style="width: 81.4079%;">일반 게시판 : 글 작성, 댓글 등 커뮤니티 기능을 사용할 수 있는 일반적인 게시판입니다.

상품 게시판 : 쇼핑몰에서 판매중인 상품의 정보와 해당 상품의 상세페이지 링크를 사용할 수 있는 게시판 입니다.(관리자만 작성 가능)

커스텀 게시판: 게시판 블럭만 단독으로 사용하는 일반 게시판과 달리 게시판 영역 좌측 또는 우측에 디자인 요소를 추가할 수 있습니다.

지도 게시판 : 지도와 함께 게시글 목록을 표시하여 매장 안내 등으로 활용할 수 있는 게시판입니다. 게시글 작성 시 주소를 등록할 수 있습니다.

</td></tr><tr><td style="width: 18.5921%;">최신글 그룹 블럭</td><td style="width: 81.4079%;">게시판의 최신글을 보여주는 블럭입니다. 게시판 1개만 단독으로 사용할 수 있는 게시판 블럭과 달리 2~3개 게시판의 최신글 목록을 함께 보여줄 수 있습니다.</td></tr><tr><td style="width: 18.5921%;">갤러리 블럭</td><td style="width: 81.4079%;">이미지 갤러리 기능을 사용할 수 있는 갤러리 블럭입니다.</td></tr><tr><td style="width: 18.5921%;">입력폼 블럭</td><td style="width: 81.4079%;">문의 사항, 주문폼 등으로 사용할 수 있는 입력폼 블럭입니다.</td></tr><tr><td style="width: 18.5921%;">디데이 블럭</td><td style="width: 81.4079%;">설정한 날에 맞춰 카운트다운을 보여주는 블럭입니다.</td></tr><tr><td style="width: 18.5921%;">캘린더 블럭</td><td style="width: 81.4079%;">일반 캘린더 : 달력에 일정을 등록하고 표시해 줍니다. 일정 등록 및 수정은 관리자 페이지의 일정 관리 또는 캘린더 블럭이 추가된 실제 페이지에서 할 수 있습니다.

구글 캘린더 : 구글 캘린더와 연동하여 구글 캘린더에 등록되어 있는 일정을 표시해 줍니다. 닷홈빌더에서는 등록되어 있는 일정만 표시해 주며, 일정 등록 및 수정은 구글의 캘린더 관리 페이지에서 할 수 있습니다.

</td></tr><tr><td style="width: 18.5921%;">코드 블럭</td><td style="width: 81.4079%;">HTML, CSS, 스크립트 코드를 입력할 수 있는 코드 블럭입니다.</td></tr></tbody></table>

</div></div>

# 블럭 추가하기

닷홈빌더 디자인 편집 화면에서 \[+\] 버튼을 이용해서 블럭을 추가할 수 있습니다.

블럭을 추가하고 싶은 위치의 \[+\] 버튼을 클릭하면 블럭 선택창이 활성화 됩니다.

자세한 블럭 추가 방법은 아래 안내를 참고해 주시기 바랍니다.

[https://docs.dothome.co.kr/books/09/page/00ec5](https://docs.dothome.co.kr/books/09/page/00ec5)

**●빈 페이지에서 추가하기**

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

<span style="color: rgb(22, 145, 121);">\[빈 페이지에서 블럭추가 버튼 화면\]</span>

빈 페이지에서는 화면 중앙의 본문 영역을 클릭하여 블럭을 추가할 수 있습니다.

**●블럭이 있는 페이지에서 추가하기**

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

<span style="color: rgb(22, 145, 121);">\[블럭이 있는 페이지에서 블럭 추가 버튼 화면\]</span>

블럭 위에 마우스를 올리면 블럭의 상·하단으로 \[+(추가)\] 버튼이 표시됩니다.

원하는 위치를 선택하여 \[+\] 버튼을 클릭해주세요.

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

<div id="bkmrk-%5B%EB%B8%94%EB%9F%AD-%EC%84%A0%ED%83%9D%EC%B0%BD-%ED%99%94%EB%A9%B4%5D"><span style="color: rgb(22, 145, 121);">\[블럭 선택창 화면\]</span></div>블럭 선택창에서 원하는 블럭을 클릭하시면 블럭이 추가됩니다.

# 블럭 ID 확인하기

모든 블럭에는 id 값이 부여되어 있습니다.

id 값을 통해 앵커 설정, css, script 작성시 활용할 수 있습니다.

id 값은 각 블럭의 상세설정창에서 확인이 가능합니다.

자세한 id 확인 방법은 아래 안내를 참고해 주시기 바랍니다.

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

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

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

블럭 위에 마우스를 올려 \[블럭 상세 설정\] 버튼을 눌러줍니다.

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

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

블럭 상세 설정창 우측 하단에서 블럭 ID를 확인하실 수 있습니다.

이 블럭 ID를 활용하여 버튼 또는 메뉴 클릭시 해당 블럭 위치로 페이지를 이동시킬 수 있습니다.

# 프레임 블럭에 요소 블럭 추가하기

프레임 블럭이란 블럭의 기본 틀을 잡아주는 블럭으로 원하는 비율에 따라 선택할 수 있습니다.

프레임 블럭안에 다양한 요소 블럭을 추가해서 홈페이지를 만들게 됩니다.

프레임 블럭에 요소블럭을 추가하는 방법은 아래 안내를 참고해 주시기 바랍니다.

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

프레임 블럭은 프레임 블럭 안에 요소 블럭을 추가하여 조합하여 제작하는 블럭입니다.

프레임 블럭과 요소 블럭을 조합하는 방법에 대해 설명해드리겠습니다.

**프레임 블럭 추가하기**

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

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

먼저 프레임 블럭을 추가해줍니다.

\[블럭 추가\] 버튼을 눌러 블럭 선택창을 연 뒤, 좌측 메뉴에서 프레임을 선택합니다.

원하는 레이아웃의 프레임 블럭을 눌러 추가해줍니다.

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

<span style="color: rgb(22, 145, 121);">\[요소 블럭 추가 화면\]</span>

2단 레이아웃의 프레임을 추가한 모습입니다.

추가된 프레임 블럭 안에는 요소 블럭이 들어갈 영역이 점선으로 표시되어 있습니다. 점선으로 표시된 영역을 프레임 박스라고 하겠습니다.

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

요소 블럭 선택창에서 원하는 요소를 선택하여 클릭하면 해당 프레임 박스 안에 요소가 추가됩니다.

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

<span style="color: rgb(22, 145, 121);">\[요소 블럭이 추가된 화면\]</span>

이미지 요소 블럭과 텍스트 요소 블럭이 추가된 모습입니다.

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

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

요소 블럭을 더 추가하려는 경우 요소 블럭 위에 마우스를 올려 상·하단에 표시되는 추가 버튼을 통해 추가할 수 있습니다.

# 프레임 블럭 다루기

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

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

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

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

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

[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>

# 슬라이드 블럭 살펴보기

슬라이드 블럭은 여러장의 이미지나 요소가 차례대로 슬라이드되는 기능의 블럭입니다.

홈페이지 제작시 많이 사용되는 기능이며 닷홈빌더에서 제공되는 슬라이드 블럭의 디자인을 살펴 보겠습니다.

\- 일반 슬라이드 : 슬라이드 안에 텍스트 등의 요소가 정해져 있는 슬라이드입니다. 위치 이동은 가능하지만 요소를 추가하거나 삭제할 수 없습니다.

\- 썸네일 슬라이드 : 슬라이드 영역 아래에 작은 썸네일로 슬라이드 목록을 표시해 주는 디자인의 슬라이드입니다. 슬라이드 안에 요소를 마음껏 추가, 삭제할 수 있습니다.

\- 3단 슬라이드 : 이전 슬라이드/현재 슬라이드/다음 슬라이드가 함께 보이는 디자인의 슬라이드입니다. 슬라이드 안에 요소를 마음껏 추가, 삭제할 수 있습니다.

\- 커스텀 슬라이드 : 빈 프레임 안에 원하는 요소를 마음껏 추가할 수 있는 슬라이드입니다.

좀더 자세한 슬라이드 블럭 소개는 아래 내용을 참고해 주시기 바랍니다.

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

**● 일반 슬라이드**

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

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

<span style="color: rgb(22, 145, 121);"> \[일반 슬라이드 블럭\]</span>

제공되는 요소 블럭을 편집하여 꾸밀 수 있는 슬라이드입니다.

방향 이동 버튼을 통해 요소 블럭을 이동할 수 있으며, 일반 적인 요소 블럭처럼 상세 설정이 가능합니다.

일반 슬라이드 블럭은 블럭 추가창 &gt; 슬라이드 카테고리에서 첫번째에서 네번째까지의 슬라이드가 일반 슬라이드 입니다.

**● 썸네일 슬라이드**

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

<span style="color: rgb(22, 145, 121);">\[썸네일 슬라이드 블럭\]</span>

슬라이드 영역 아래로 슬라이드 목록이 썸네일로 표시되는 디자인입니다.

원하는 요소를 추가, 삭제할 수 있으며 설정창에서 표시될 썸네일의 높이도 수정할 수 있습니다.

썸네일 슬라이드 블럭은 블럭 추가창 &gt; 슬라이드 카테고리에서 썸네일 슬라이드 라벨이 표시된 슬라이드입니다.

**● 3단 슬라이드**

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

<span style="color: rgb(22, 145, 121);">\[3단 슬라이드 블럭\]</span>

영역이 3단으로 나위어 현재 슬라이드의 좌우로 이전, 다음 슬라이드가 함께 표시되는 디자인의 슬라이드입니다.

원하는 요소를 추가, 삭제할 수 있습니다.

3단 슬라이드 블럭은 블럭 추가창 &gt; 슬라이드 카테고리에서 3단 슬라이드 라벨이 표시된 슬라이드입니다.

**● 커스텀 슬라이드**

**\[1단 커스텀 슬라이드 블럭\]**

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

빈 1단 프레임에 원하는 요소를 추가, 삭제할 수 있는 커스텀 슬라이드입니다.

1단 커스텀 슬라이드 블럭은 블럭 추가창 &gt; 슬라이드 카테고리에서 커스텀 슬라이드 라벨이 표시된 슬라이드 중 가장 첫번째입니다.

**\[2단 커스텀 슬라이드 블럭\]**

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

빈 2단 프레임에 원하는 요소를 추가, 삭제할 수 있는 커스텀 슬라이드입니다.

2단 커스텀 슬라이드 블럭은 블럭 추가창 &gt; 슬라이드 카테고리에서 커스텀 슬라이드 라벨이 표시된 슬라이드 중 두번째입니다.

<div id="bkmrk--34"></div>

# 슬라이드 블럭 다루기

슬라이드 블럭은 배경 이미지만 변경하는 것이 아닌 내부 요소들도 편집이 가능합니다.

슬라이드 내용 편집, 슬라이드 상세설정, 슬라이드 추가하는 방법에 대해 알아 보겠습니다.

자세한 슬라이드 블럭 사용 방법은 아래 내용을 참고해 주시기 바랍니다.

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

**● 슬라이드 내용 편집하기**

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

<span style="color: rgb(22, 145, 121);">\[슬라이드 선택 화면\]</span>

슬라이드 좌측 상단의 번호 버튼을 통해 편집을 원하는 슬라이드로 변경할 수 있습니다.

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

<span style="color: rgb(22, 145, 121);">\[슬라이드 내용 편집 화면\]</span>

슬라이드는 텍스트, 이미지, 버튼, 여백 등의 요소 블럭들로 구성되어있습니다.

일반 슬라이드의 경우 이 요소들을 새로 추가하거나 복제, 삭제하는 것은 불가하지만, 위치를 변경하거나 내용을 수정할 수 있습니다.

(썸네일, 3단, 커스텀 슬라이드의 경우 요소 블럭 추가, 삭제, 복제가 가능합니다.)

요소 블럭들의 편집 방법은 각 매뉴얼에서 확인하세요

[<span style="color: #3984c6;">**요소 블럭 다루기&gt;**</span>](https://docs.dothome.co.kr/books/10)

● 슬라이드 상세 설정창 열기

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

<span style="color: rgb(22, 145, 121);">\[슬라이드 설정 버튼 화면\]</span>

슬라이드 블럭 위에 마우스를 올리면 우측 상단에 블럭 편집 메뉴가 표시됩니다.

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

● **슬라이드 추가하기**

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

<span style="color: rgb(22, 145, 121);">\[슬라이드 설정 화면\]</span>

슬라이드 상세 설정창 화면입니다.

슬라이드 목록 하단의 \[추가하기\] 버튼을 눌러 슬라이드를 추가할 수 있습니다.

슬라이드는 배경색, 이미지, 동영상 중 선택하여 배경을 적용할 수 있습니다.

버튼 사용하기의 경우 일반 슬라이드 블럭에만 표시되는 항목입니다. 버튼을 사용하려는 경우에만 체크해 주세요.

(썸네일, 3단, 커스텀 슬라이드의 경우 버튼 블럭을 직접 추가하여 사용할 수 있습니다.)

**\[배경을 배경색으로 적용하는 경우\]**

**[![dhbd-09-07-05.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-07-05.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-07-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%B0%B0%EA%B2%BD%EC%83%89-%EC%9B%90%ED%95%98%EB%8A%94-%EB%B0%B0%EA%B2%BD-%EC%83%89%EC%83%81%EC%9D%84"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 22.9167%;">항목</td><td style="width: 77.2025%;">설명</td></tr></thead><tbody><tr><td style="width: 22.9167%;">배경색</td><td style="width: 77.2025%;">원하는 배경 색상을 선택하여 배경색을 지정할 수 있습니다. </td></tr></tbody></table>

</div></div>**\[배경을 이미지로 적용하는 경우\]**

**[![dhbd-09-07-06.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-07-06.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-07-06.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%9C%84%EC%B9%98-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C-%EB%B0%B0%EA%B2%BD%EC%9D%B4%EB%AF%B8%EC%A7%80%EC%9D%98"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 23.004%;">항목</td><td style="width: 76.996%;">설명</td></tr></thead><tbody><tr><td style="width: 23.004%;">위치</td><td style="width: 76.996%;">슬라이드 배경이미지의 위치를 설정합니다.</td></tr><tr><td style="width: 23.004%;">크기</td><td style="width: 76.996%;">슬라이드 배경 이미지의 크기를 설정합니다.  
원본 크기 : 이미지의 원본 크기를 유지합니다. 이미지보다 블럭의 가로 또는 세로 사이즈가 작을 경우 이미지를 반복하여 표시하거나 빈 공간으로 둡니다.  
커버 : 이미지를 블럭의 크기만큼 꽉 채워서 보여줍니다.  
원본 비율 : 이미지가 원본 비율을 유지하여 보여줍니다.

</td></tr><tr><td style="width: 23.004%;">반복</td><td style="width: 76.996%;">이미지가 블럭의 크기보다 작을 경우 빈 공간을 그대로 보여줄지 이미지를 반복하여 표시할지 설정합니다.</td></tr><tr><td style="width: 23.004%;">컬러 오버레이</td><td style="width: 76.996%;">배경 이미지 위에 배경색을 덮고 싶은 경우 설정합니다. 투명도를 주지 않으면 배경이미지가 아예 가려집니다.</td></tr></tbody></table>

</div></div>\[배경을 동영상으로 적용하는 경우\]

[![dhbd-09-07-07.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-07-07.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-07-07.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%8F%99%EC%98%81%EC%83%81-%EC%A3%BC%EC%86%8C-%EB%B0%B0%EA%B2%BD%EC%9C%BC%EB%A1%9C-%EC%A0%81%EC%9A%A9"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 22.7977%;">항목</td><td style="width: 77.3215%;">설명</td></tr></thead><tbody><tr><td style="width: 22.7977%;">동영상 주소</td><td style="width: 77.3215%;">배경으로 적용할 유튜브 동영상의 주소를 입력해 주세요.

(주소 확인 방법은 동영상 주소 확인하기 매뉴얼을 참고하세요. **<span style="color: #3c99f6;"> [동영상 주소 참고하기&gt;](https://docs.dothome.co.kr/books/10/page/140f6) </span>** )

</td></tr><tr><td style="width: 22.7977%;">컬러 오버레이</td><td style="width: 77.3215%;">배경 이미지 위에 배경색을 덮고 싶은 경우 설정합니다. 투명도를 주지 않으면 배경이미지가 아예 가려집니다.</td></tr></tbody></table>

</div></div>각 항목을 입력한 뒤 \[적용하기\]를 눌러주면 슬라이드 목록에 추가된 것을 확인할 수 있습니다.

블럭 상세 설정창 하단의 <span style="color: #3c99f6;">\[적용하기\] 버튼을 눌러주어야 최종 적용됩니다.</span>

● 슬라이드 배경 변경하기

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

<span style="color: rgb(22, 145, 121);">\[슬라이드 배경 변경 화면\]</span>

슬라이드 목록에서 변경을 원하시는 슬라이드 우측의 설정 버튼을 눌러 설정메뉴를 열어줍니다.

\[수정\] 버튼을 누르면 추가할 때와 동일한 편집창이 열립니다.

내용 편집 후 적용하기를 눌러주시면 슬라이드 배경 이미지가 수정됩니다.

● 슬라이드 설정 변경하기

슬라이드 지연시간, 높이 등 상세 기능을 설정할 수 있습니다.

[![dhbd-09-07-09.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-07-09.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-07-09.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%C2%A0-%EC%84%A4%EB%AA%85%C2%A0-%ED%8E%98%EC%9D%B4%EC%A7%95-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C-%EC%95%84%EB%9E%98%EC%AA%BD"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 22.0503%;">항목 </td><td style="width: 77.9497%;">설명 </td></tr></thead><tbody><tr><td style="width: 22.0503%;">페이징</td><td style="width: 77.9497%;">슬라이드 아래쪽에 현재 슬라이드의 위치를 표시해주는 기능입니다.</td></tr><tr><td style="width: 22.0503%;">좌우 이동 버튼</td><td style="width: 77.9497%;">슬라이드 좌우 이동 버튼입니다.</td></tr><tr><td style="width: 22.0503%;">슬라이드 지연 시간</td><td style="width: 77.9497%;">슬라이드가 몇 초 후에 다음 슬라이드로 넘어갈지 설정할 수 있습니다. 3초에서 60초까지 설정할 수 있습니다.</td></tr><tr><td style="width: 22.0503%;">높이  
</td><td style="width: 77.9497%;">슬라이드 높이를 설정합니다  
화면 크기에 채움 : 슬라이즈를 화면에 꽉 채워서 보여줍니다. 디자이스에 따라 자동적으로 꽉 채워서 보여집니다.  
직접 입력 : 슬라이드를 직접 입력한 높이로 보여줍니다.  
개별 높이에 맞춤 : 각 브라우저 높이 별로 맞춤으로 보여줍니다.  
슬라이드 안의 내용이 설정한 높이보다 길어질 경우 넘어가는 부분은 화면에 보이지 않습니다.</td></tr></tbody></table>

</div></div>\[슬라이드 전환 효과\]

3단 슬라이드 블럭을 제외한 슬라이드 블럭만 전환 효과를 설정할 수 있습니다.

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%95%AD%EB%AA%A9%C2%A0-%EC%84%A4%EB%AA%85%C2%A0-%ED%9A%A8%EA%B3%BC-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C%EA%B0%80-%EC%A0%84%ED%99%98%EB%90%A0"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 22.1695%;">항목 </td><td style="width: 77.8305%;">설명 </td></tr></thead><tbody><tr><td style="width: 22.1695%;">효과  
</td><td style="width: 77.8305%;">슬라이드가 전환될 때의 효과를 설정합니다. 미리보기를 통해 동작 모습을 확인할 수 있습니다.  
</td></tr></tbody></table>

</div></div>● 슬라이드 레이아웃 설정하기

슬라이드의 너비와 여백 등 기본 레이아웃을 설정할 수 있습니다.

[![dhbd-09-07-10.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-07-10.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-07-10.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-%EB%84%88%EB%B9%84-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C-%EB%B8%94%EB%9F%AD-"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 21.4544%;">항목</td><td style="width: 78.5456%;">설명</td></tr></thead><tbody><tr><td style="width: 21.4544%;">블럭 너비</td><td style="width: 78.5456%;">슬라이드 블럭 전체의 너비를 설정합니다.

</td></tr><tr><td style="width: 21.4544%;">요소 너비</td><td style="width: 78.5456%;">블럭 너비가 채우기로 설정되었을 때 슬라이드 블럭 아넹 요소들이 들어가는 영역의 너비를 설정합니다.

본문너비 : 요소들이 들어가는 영역의 너비를 글로벌 디자인 설정에서 적용한 본문폭에 맞춥니다.  
채우기 : 요소들이 들어가는 영역의너비를 화면에 꽉 채웁니다.</td></tr><tr><td style="width: 21.4544%;">좌우 여백

</td><td style="width: 78.5456%;">슬라이드 안쪽의 좌우 여백을 설정합니다. </td></tr><tr><td style="width: 21.4544%;">상단 여백</td><td style="width: 78.5456%;">슬라이드 안쪽의 상단 여백을 설정합니다.</td></tr><tr><td style="width: 21.4544%;">하단 여백</td><td style="width: 78.5456%;">슬라이드 안쪽의 하단 여백을 설정합니다.</td></tr><tr><td style="width: 21.4544%;">정렬</td><td style="width: 78.5456%;">슬라이드 안에 요소들의 정렬을 설정합니다. </td></tr></tbody></table>

</div></div>

# 게시판 살펴보기

닷홈빌더에서 제공하는 게시판 블럭은 몇가지 유형이 있습니다.

- 일반 게시판 : 글 작성, 댓글 등 커뮤니티 기능을 사용할 수 있는 일반적인 게시판입니다.
- 상품 게시판 : 쇼핑몰에서 판매중인 상품의 정보와 해당 상품의 상세페이지 링크를 사용할 수 있는 게시판 입니다.(관리자만 작성 가능)
- 커스텀 게시판 : 게시판 블럭만 단독으로 사용하는 일반 게시판과 달리 게시판 영역 좌측 또는 우측에 디자인 요소를 추가할 수 있습니다.
- 지도 게시판 : 지도와 함께 게시글 목록을 표시하여 매장 안내 등으로 활용할 수 있는 게시판입니다. 게시글 작성 시 주소를 등록할 수 있습니다.

게시판 유형에 대한 자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

[https://docs.dothome.co.kr/books/09/page/019d3](https://docs.dothome.co.kr/books/09/page/019d3)

● 일반 게시판

\[리스트형 게시판 블럭\]

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

<span style="color: rgb(22, 145, 121);">\[일반 게시판 블럭\]</span>

가장 일반적인 형태의 게시판 디자인입니다.

리스트 형태로 게시글 목록을 한 눈에 보기 좋게 구성한 디자인 입니다.

상세 설정을 통해 번호(공지표시)/카테고리/내용/작성자/작성일/조회수를 보이거나 감출 수 있습니다. (제목의 경우 항상 노출됩니다.)

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

<span style="color: rgb(22, 145, 121);">\[일반 게시판 블럭 추가 화면\]</span>

리스트형 게시판 블럭은 블럭 추가창 &gt; 게시판 카테고리에서 가장 첫번째에 있습니다.

\[FAQ형 게시판 블럭\]

[![dhbd-09-08-03.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-08-03.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-08-03.jpg)

<span style="color: rgb(22, 145, 121);">\[FAQ형 게시판 블럭\]</span>

FAQ를 보여줄 때 가장 많이 사용하는 게시판 디자인입니다.

제목(질문)을 클릭하면 내용(답변)을 보여주는 형태입니다.

FAQ형 게시판 블럭은 블럭 추가창 &gt; 게시판 카테고리에서 두번째에 있습니다.

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

<span style="color: rgb(22, 145, 121);">\[FAQ형 게시판 블럭 추가 화면\]</span>

\[블로그형A 게시판 블럭\]

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

<span style="color: rgb(22, 145, 121);">\[블로그형A 게시판 블럭\]</span>

썸네일과 함께 제목, 내용을 크게 보여줄 수 있는 게시판 디자인 입니다.

이벤트나 뉴스, 블로그 등에 많이 사용되는 게시판 블럭입니다.

상세 설정을 통해 카테고리/공지/작성자/작성일/조회수를 보이거나 감출 수 있습니다. (썸네일, 제목, 내용의 경우 항상 노출됩니다.)

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

<span style="color: rgb(22, 145, 121);">\[블로그형A 게시판 블럭 추가 화면\]</span>

블로그형A 게시판 블럭은 블럭 추가창 &gt; 게시판 카테고리에서 세번째에 있습니다.

\[블로그형B 게시판 블럭\]

[![dhbd-09-08-07.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-08-07.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-08-07.jpg)

<span style="color: rgb(22, 145, 121);">\[블로그형B 게시판 블럭\]</span>

썸네일과 함께 제목, 내용을 보여줄 수 있는 게시판 디자인 입니다.

블로그형A 게시판 블럭보다 내용을 좀 더 길게 보여줄 수 있습니다.

상세 설정을 통해 카테고리/공지/작성자/작성일/조회수를 보이거나 감출 수 있습니다. (썸네일, 제목, 내용의 경우 항상 노출됩니다.)

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

<span style="color: rgb(22, 145, 121);">\[블로그형B 게시판 블럭 추가 화면\]</span>

블로그형B 게시판 블럭은 블럭 추가창 &gt; 게시판 카테고리에서 네번째에 있습니다.

\[갤러리형 게시판 블럭\]

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

<span style="color: rgb(22, 145, 121);">\[갤러리형 게시판 블럭\]</span>

썸네일과 함께 제목, 내용을 보여줄 수 있는 게시판 디자인 입니다.

갤러리 블럭과 유사한 디자인으로 최신 게시글, 이벤트 등에 많이 사용되는 게시판 블럭입니다.

상세 설정을 통해 카테고리/번호(공지)/내용/작성자/작성일을 보이거나 감출 수 있습니다. (썸네일, 제목의 경우 항상 노출됩니다.)

또한, 게시글의 가로 개수를 2개에서 최대 5개까지 조절할 수 있습니다.

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

<span style="color: rgb(22, 145, 121);">\[갤러리형 게시판 블럭 추가 화면\]</span>

갤러리형 게시판 블럭은 블럭 추가창 &gt; 게시판 카테고리에서 다섯번째에 있습니다.

● 커스텀 게시판

\[리스트형 커스텀 게시판 블럭\]

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

<span style="color: rgb(22, 145, 121);">\[리스트형 커스텀 게시판 블럭\]</span>

리스트 형태로 게시글 목록을 구성한 디자인입니다.

상세 설정을 통해 번호(공지표시)/카테고리/내용/작성자/작성일/조회수를 보이거나 감출 수 있습니다. (제목의 경우 항상 노출됩니다.)

리스트형 게시판의 함께 우측 또는 좌측에 디자인 요소를 추가할 수 있습니다.

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

<span style="color: rgb(22, 145, 121);">\[리스트형 커스텀 게시판 블럭 추가 화면\]</span>

리스트형 커스텀 게시판 블럭은 블럭 추가창 &gt; 게시판 카테고리에서 커스텀 게시판 라벨이 표시된 게시판 중 가장 첫번째에 있습니다.

\[FAQ형 커스텀게시판 블럭\]

[![dhbd-09-08-13.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-08-13.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-08-13.jpg)

<span style="color: rgb(22, 145, 121);">\[FAQ형게시판 커스텀 블럭\]</span>

FAQ를 보여줄 때 가장 많이 사용하는 게시판 디자인입니다.

제목(질문)을 클릭하면 내용(답변)을 보여주는 형태입니다.

FAQ형 게시판의 함께 우측 또는 좌측에 디자인 요소를 추가할 수 있습니다.

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

<span style="color: rgb(22, 145, 121);">\[FAQ형게시판 커스텀 블럭 추가 화면\]</span>

FAQ형게시판 커스텀 블럭은 블럭 추가창 &gt; 게시판 카테고리에서 커스텀 게시판 라벨이 표시된 게시판 중 두번째에 있습니다.

<div id="bkmrk--63">  
</div>\[블로그형A 커스텀 게시판 블럭\]

[![dhbd-09-08-15.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-08-15.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-08-15.jpg)

<span style="color: rgb(22, 145, 121);">\[블로그형A 커스텀 게시판 블럭\]</span>

썸네일과 함께 제목, 내용을 크게 보여줄 수 있는 게시판 디자인 입니다.

이벤트나 뉴스, 블로그 등에 많이 사용되는 게시판 블럭입니다.

상세 설정을 통해 카테고리/공지/작성자/작성일/조회수를 보이거나 감출 수 있습니다. (썸네일, 제목, 내용의 경우 항상 노출됩니다.)

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

<span style="color: rgb(22, 145, 121);">\[블로그형A 커스텀 게시판 블럭 추가 화면\]</span>

블로그형A 커스텀 게시판 블럭은 블럭 추가창 &gt; 게시판 카테고리에서 커스텀 게시판 라벨이 표시된 게시판 중 세번째에 있습니다.

\[블로그형B 커스텀 게시판 블럭\]

[![dhbd-09-08-17.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-08-17.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-08-17.jpg)

<span style="color: rgb(22, 145, 121);">\[블로그형B 커스텀 게시판 블럭\]</span>

썸네일과 함께 제목, 내용을 보여줄 수 있는 게시판 디자인 입니다.

블로그형A보다 내용을 좀 더 길게 보여줄 수 있습니다.

상세 설정을 통해 카테고리/공지/작성자/작성일/조회수를 보이거나 감출 수 있습니다. (썸네일, 제목, 내용의 경우 항상 노출됩니다.)

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

<span style="color: rgb(22, 145, 121);">\[블로그형B 커스텀 게시판 블럭 추가 화면\]</span>

블로그형B 커스텀 게시판 블럭은 블럭 추가창 &gt; 게시판 카테고리에서 커스텀 게시판 라벨이 표시된 게시판 중 네번째에 있습니다.

\[갤러리형 커스텀 게시판 블럭\]

[![dhbd-09-08-19.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-08-19.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-08-19.jpg)

<span style="color: rgb(22, 145, 121);">\[갤러리형 커스텀 게시판 블럭\]</span>

썸네일과 함께 제목, 내용을 보여줄 수 있는 게시판 디자인 입니다.

갤러리와 유사한 디자인으로 최신 게시글, 이벤트 등에 많이 사용되는 게시판 블럭입니다.

상세 설정을 통해 카테고리/번호(공지)/내용/작성자/작성일을 보이거나 감출 수 있습니다. (썸네일, 제목의 경우 항상 노출됩니다.)

또한, 게시글의 가로 개수를 2개에서 최대 5개까지 조절할 수 있습니다.

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

<span style="color: rgb(22, 145, 121);">\[갤러리형 커스텀 게시판 블럭 추가 화면\]</span>

갤러리형 커스텀 게시판 블럭은 블럭 추가창 &gt; 게시판 카테고리에서 커스텀 게시판 라벨이 표시된 게시판 중 다섯번째에 있습니다.

● 상품 게시판

\[갤러리형 상품 게시판 블럭\]

[![dhbd-09-08-21.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-08-21.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-08-21.jpg)

<span style="color: rgb(22, 145, 121);">\[갤러리형 상품 게시판 블럭\]</span>

상품 목록을 갤러리형으로 보여주는 디자인입니다.

제품 썸네일을 크게 강조하여 보여줍니다.

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

<span style="color: rgb(22, 145, 121);">\[갤러리형 상품 게시판 블럭 추가 화면\]</span>

갤러리형 상품 게시판 블럭은 블럭 추가창 &gt; 게시판 카테고리에서 상품 게시판 라벨이 표시된 게시판 중 가장 첫번째에 있습니다.

\[리스트형 상품 게시판 블럭\]

[![dhbd-09-08-23.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-08-23.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-08-23.jpg)

<span style="color: rgb(22, 145, 121);">\[리스트형 상품 게시판 블럭\]</span>

상품 목록을 리스트형으로 보여주는 디자인입니다.

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

<span style="color: rgb(22, 145, 121);">\[리스트형 상품 게시판 블럭 추가 화면\]</span>

리스트형 상품 게시판 블럭은 블럭 추가창 &gt; 게시판 카테고리에서 상품 게시판 라벨이 표시된 게시판 중 두번째에 있습니다.

● 지도 게시판

[![dhbd-09-08-25.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-08-25.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-08-25.jpg)

<span style="color: rgb(22, 145, 121);">\[지도 게시판 화면\]</span>

게시글 작성 시 주소를 등록할 수 있으며, 게시글 리스트에서 게시글과 지도를 함께 표시해주는 게시판입니다.

상세 설정을 통해 게시글 리스트의 위치를 우측/좌측으로 설정할 수 있으며,

카테고리/작성자/조회수/댓글수/작성일/썸네일/연락처/홈페이지URL을 보이거나 감출 수 있습니다. (제목, 주소의 경우 항상 노출됩니다.)

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

<span style="color: rgb(22, 145, 121);">\[지도 게시판 추가 화면\]</span>

지도 게시판 블럭은 블럭 추가창 &gt; 게시판 카테고리의 제일 아래에 있습니다.

카카오 지도 게시판과 네이버 지도 게시판의 디자인은 동일하며, 연동하신 지도 API에 맞는 게시판을 추가해 주시면 됩니다.

# 게시판 블럭 다루기

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

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

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

**게시판 상세 설정하기**

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

게시판 블럭의 상세 설정창은 내용, 디자인, 레이아웃, 배경 네 개의 탭메뉴로 구성되어 있습니다.

설정 항목들은 게시판 블럭에 따라 다릅니다.

각 게시판 블럭의 설정 항목에 대해 알아보겠습니다.

**<span style="color: #000000;">\[리스트형 게시판 블럭\]</span>**

**<span style="color: #000000;">[![dhbd-09-00-03.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-00-03.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-00-03.jpg)</span>**

<span style="color: #636363;">**내용**</span>

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EC%97%B0%EB%8F%99-%3A-%EC%97%B0" style="width: 100%;"><thead><tr><td style="width: 22.4405%;">항목</td><td style="width: 77.6786%;">설명</td></tr></thead><tbody><tr><td style="width: 22.4405%;">게시판</td><td style="width: 77.6786%;">- 게시판 연동 : 연동할 게시판을 선택합니다.
- 제목 : 게시판 연동 목록과 관리자페이지에 표시해 줄 게시판 제목을 설정합니다.
- 페이지당 글 수 : 한 페이지 내에 게시글을 몇 개씩 출력할 지 설정합니다.

</td></tr><tr><td style="width: 22.4405%;">게시판 카테고리</td><td style="width: 77.6786%;">게시판 카테고리 사용 여부를 설정합니다.

카테고리 사용하기에 체크한 뒤 카테고리 목록을 수정할 수 있습니다.

</td></tr><tr><td style="width: 22.4405%;">게시판 요소</td><td style="width: 77.6786%;">- 검색 사용하기 : 게시글 검색 기능을 사용 여부를 설정합니다.
- 페이징 사용하기 : 최근 게시글만 보여줄지 모든 게시글을 보여줄지 설정합니다.
- 글쓰기 버튼 감추기 : 글쓰기 버튼 표시 여부를 설정합니다.

</td></tr><tr><td style="width: 22.4405%;">게시글 양식</td><td style="width: 77.6786%;">게시글 작성 양식을 설정합니다.

- 약관 동의 사용하기 : 약관 동의 사용 여부를 설정합니다. (약관 내용은 자유롭게 수정할 수 있습니다.)
- CAPTCHA 사용하기 : 캡챠 사용 여부를 설정합니다. (관리페이지의 사이트 설정 &gt; 외부 API 연동 &gt; 캡챠에 구글 캡챠가 연동되어 있어야 사용할 수 있습니다.)

[<span style="color: #467ff2;">**구글 캡챠 연동 바로가기 &gt;**</span>](https://docs.dothome.co.kr/books/02/page/63dc7)

</td></tr><tr><td style="width: 22.4405%;">권한</td><td style="width: 77.6786%;">게시판 기능에 대한 권한을 설정합니다.</td></tr><tr><td style="width: 22.4405%;">노출 항목</td><td style="width: 77.6786%;">목록에 표시해 줄 항목을 설정합니다.

리스트형 게시판 블럭의 경우 제목은 항상 노출됩니다.

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

  
디자인

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EA%B2%8C%EC%8B%9C%ED%8C%90-%ED%95%AD%EB%AA%A9%EC%9D%98-%EB%94%94%EC%9E%90" style="width: 100%;"><thead><tr><td style="width: 22.2025%;">항목</td><td style="width: 77.9167%;">설명</td></tr></thead><tbody><tr><td style="width: 22.2025%;">게시판</td><td style="width: 77.9167%;">게시판 항목의 디자인을 설정합니다.

- 헤더 글자 색상 : 게시판 상단의 헤더 글자의 색상을 설정합니다.
- 헤더 배경 색상 : 게시판 상단의 헤더 영역의 배경 색상을 설정합니다.
- 본문 글자 색상 : 게시글 목록의 글자 색상을 설정합니다.
- 본문 배경 색상 : 게시글 목록의 배경 색상을 설정합니다.
- 선 색상 : 게시판의 구분선 색상을 설정합니다.

</td></tr><tr><td style="width: 22.2025%;">버튼</td><td style="width: 77.9167%;">글쓰기 버튼의 디자인을 설정합니다.</td></tr></tbody></table>

  
레이아웃

<table class="table table-bordered" 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%97%90-%EC%BB%A8%ED%85%90%EC%B8%A0%EA%B0%80-" style="width: 100%;"><thead><tr><td style="width: 21.9304%;">항목</td><td style="width: 78.0696%;">설명</td></tr></thead><tbody><tr><td style="width: 21.9304%;">너비</td><td style="width: 78.0696%;">블럭 안에 컨텐츠가 들어가는 영역의 기본 너비를 설정합니다.

- 본문 너비 : 글로벌 디자인 설정에서 적용한 본문폭 너비에 맞게 설정합니다.
- 채우기 : 컨텐츠 영역의 너비를 화면에 꽉 맞게 채웁니다.

</td></tr><tr><td style="width: 21.9304%;">좌우 여백</td><td style="width: 78.0696%;">블럭의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 21.9304%;">상단 여백</td><td style="width: 78.0696%;">블럭 상단의 여백을 설정합니다.</td></tr><tr><td style="width: 21.9304%;">하단 여백</td><td style="width: 78.0696%;">블럭 하단의 여백을 설정합니다.</td></tr><tr><td style="width: 21.9304%;">정렬</td><td style="width: 78.0696%;">글쓰기 버튼의 정렬을 설정합니다.</td></tr></tbody></table>

<span style="color: #636363;">  
배경</span>

블럭에 대한 배경을 설정합니다. 색 또는 이미지로 설정할 수 있습니다.

<span style="color: #000000;">\[FAQ형 게시판 블럭\]</span>

<span style="color: #000000;">[![dhbd-09-00-04.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-00-04.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-00-04.jpg)</span>

<span style="color: #636363;">내용</span>

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EC%97%B0%EB%8F%99-%3A-%EC%97%B0-1" style="width: 100%;"><thead><tr><td style="width: 22.1809%;">항목</td><td style="width: 77.8191%;">설명</td></tr></thead><tbody><tr><td style="width: 22.1809%;">게시판</td><td style="width: 77.8191%;">- 게시판 연동 : 연동할 게시판을 선택합니다.
- 제목 : 게시판 연동 목록과 관리자페이지에 표시해 줄 게시판 제목을 설정합니다.
- 페이지당 글 수 : 한 페이지 내에 게시글을 몇 개씩 출력할 지 설정합니다.

</td></tr><tr><td style="width: 22.1809%;">게시판 카테고리</td><td style="width: 77.8191%;">게시판 카테고리 사용 여부를 설정합니다.

카테고리 사용하기에 체크한 뒤 카테고리 목록을 수정할 수 있습니다.

</td></tr><tr><td style="width: 22.1809%;">게시판 요소</td><td style="width: 77.8191%;">- 검색 사용하기 : 게시글 검색 기능을 사용 여부를 설정합니다.
- 페이징 사용하기 : 최근 게시글만 보여줄지 모든 게시글을 보여줄지 설정합니다.
- 글쓰기 버튼 감추기 : 글쓰기 버튼 표시 여부를 설정합니다.

</td></tr><tr><td style="width: 22.1809%;">게시글 양식</td><td style="width: 77.8191%;">게시글 작성 양식을 설정합니다.

- 약관 동의 사용하기 : 약관 동의 사용 여부를 설정합니다. (약관 내용은 자유롭게 수정할 수 있습니다.)
- CAPTCHA 사용하기 : 캡챠 사용 여부를 설정합니다. (관리페이지의 사이트 설정 &gt; 외부 API 연동 &gt; 캡챠에 구글 캡챠가 연동되어 있어야 사용할 수 있습니다.)

[<span style="color: #467ff2;">구글 캡챠 연동 바로가기 &gt;</span>](https://docs.dothome.co.kr/books/02/page/63dc7)

</td></tr><tr><td style="width: 22.1809%;">권한</td><td style="width: 77.8191%;">게시판 기능에 대한 권한을 설정합니다.</td></tr><tr><td style="width: 22.1809%;">노출 항목  
</td><td style="width: 77.8191%;">FAQ형 게시판 블럭의 경우 노출 항목을 변경할 수 없습니다.  
</td></tr></tbody></table>

  
디자인

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EA%B2%8C%EC%8B%9C%ED%8C%90-%ED%95%AD%EB%AA%A9%EC%9D%98-%EB%94%94%EC%9E%90-1" style="width: 100%;"><thead><tr><td style="width: 22.3215%;">항목</td><td style="width: 77.7977%;">설명</td></tr></thead><tbody><tr><td style="width: 22.3215%;">게시판</td><td style="width: 77.7977%;">게시판 항목의 디자인을 설정합니다.

- 제목 글자 색상 : 게시글 제목의 글자 색상을 설정합니다.
- 제목 배경 색상 : 게시글 제목 영역의 배경 색상을 설정합니다.
- 내용 글자 색상 : 게시글 내용의 글자 색상을 설정합니다.
- 내용 배경 색상 : 게시글 내용 영역의 배경 색상을 설정합니다.
- 선 색상 : 게시판의 구분선 색상을 설정합니다.

</td></tr><tr><td style="width: 22.3215%;">버튼</td><td style="width: 77.7977%;">글쓰기 버튼의 디자인을 설정합니다.</td></tr></tbody></table>

<span style="color: #636363;">  
레이아웃</span>

<table class="table table-bordered" 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%97%90-%EC%BB%A8%ED%85%90%EC%B8%A0%EA%B0%80--1" style="width: 100%;"><thead><tr><td style="width: 22.0494%;">항목</td><td style="width: 77.9506%;">설명</td></tr></thead><tbody><tr><td style="width: 22.0494%;">너비</td><td style="width: 77.9506%;">블럭 안에 컨텐츠가 들어가는 영역의 기본 너비를 설정합니다.

- 본문 너비 : 글로벌 디자인 설정에서 적용한 본문폭 너비에 맞게 설정합니다.
- 채우기 : 컨텐츠 영역의 너비를 화면에 꽉 맞게 채웁니다.

</td></tr><tr><td style="width: 22.0494%;">좌우 여백</td><td style="width: 77.9506%;">블럭의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 22.0494%;">상단 여백</td><td style="width: 77.9506%;">블럭 상단의 여백을 설정합니다.</td></tr><tr><td style="width: 22.0494%;">하단 여백</td><td style="width: 77.9506%;">블럭 하단의 여백을 설정합니다.</td></tr><tr><td style="width: 22.0494%;">정렬</td><td style="width: 77.9506%;">글쓰기 버튼의 정렬을 설정합니다.</td></tr></tbody></table>

<span style="color: #636363;">  
배경</span>

블럭에 대한 배경을 설정합니다. 색 또는 이미지로 설정할 수 있습니다.

<span style="color: #000000;">\[블로그형A 게시판 블럭\]</span>

<span style="color: #000000;">[![dhbd-09-00-05.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-00-05.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-00-05.jpg)</span>

<span style="color: #636363;">내용</span>

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EC%97%B0%EB%8F%99-%3A-%EC%97%B0-2" style="width: 100%;"><thead><tr><td style="width: 22.5596%;">항목</td><td style="width: 77.5596%;">설명</td></tr></thead><tbody><tr><td style="width: 22.5596%;">게시판</td><td style="width: 77.5596%;">- 게시판 연동 : 연동할 게시판을 선택합니다.
- 제목 : 게시판 연동 목록과 관리자페이지에 표시해 줄 게시판 제목을 설정합니다.
- 페이지당 글 수 : 한 페이지 내에 게시글을 몇 개씩 출력할 지 설정합니다.

</td></tr><tr><td style="width: 22.5596%;">게시판 카테고리</td><td style="width: 77.5596%;">게시판 카테고리 사용 여부를 설정합니다.

카테고리 사용하기에 체크한 뒤 카테고리 목록을 수정할 수 있습니다.

</td></tr><tr><td style="width: 22.5596%;">게시판 요소</td><td style="width: 77.5596%;">- 검색 사용하기 : 게시글 검색 기능을 사용 여부를 설정합니다.
- 페이징 사용하기 : 최근 게시글만 보여줄지 모든 게시글을 보여줄지 설정합니다.
- 글쓰기 버튼 감추기 : 글쓰기 버튼 표시 여부를 설정합니다.

</td></tr><tr><td style="width: 22.5596%;">게시글 양식</td><td style="width: 77.5596%;">게시글 작성 양식을 설정합니다.

- 약관 동의 사용하기 : 약관 동의 사용 여부를 설정합니다. (약관 내용은 자유롭게 수정할 수 있습니다.)
- CAPTCHA 사용하기 : 캡챠 사용 여부를 설정합니다. (관리페이지의 사이트 설정 &gt; 외부 API 연동 &gt; 캡챠에 구글 캡챠가 연동되어 있어야 사용할 수 있습니다.)

[<span style="color: #467ff2;">구글 캡챠 연동 바로가기 &gt;</span>](https://docs.dothome.co.kr/books/02/page/63dc7)

</td></tr><tr><td style="width: 22.5596%;">권한</td><td style="width: 77.5596%;">게시판 기능에 대한 권한을 설정합니다.</td></tr><tr><td style="width: 22.5596%;">노출 항목</td><td style="width: 77.5596%;">목록에 표시해 줄 항목을 설정합니다.

블로그형A 게시판 블럭의 경우 썸네일과 제목, 내용은 항상 노출됩니다.

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

  
디자인

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EA%B2%8C%EC%8B%9C%ED%8C%90-%ED%95%AD%EB%AA%A9%EC%9D%98-%EB%94%94%EC%9E%90-2" style="width: 100%;"><thead><tr><td style="width: 22.3215%;">항목</td><td style="width: 77.7977%;">설명</td></tr></thead><tbody><tr><td style="width: 22.3215%;">게시판</td><td style="width: 77.7977%;">게시판 항목의 디자인을 설정합니다.

- 제목 글자 색상 : 게시글 제목의 글자 색상을 설정합니다.
- 내용 글자 색상 : 게시글 내용의 글자 색상을 설정합니다.
- 선 색상 : 게시판의 구분선 색상을 설정합니다.

</td></tr><tr><td style="width: 22.3215%;">버튼</td><td style="width: 77.7977%;">글쓰기 버튼의 디자인을 설정합니다.</td></tr></tbody></table>

<span style="color: #636363;">  
레이아웃</span>

<table class="table table-bordered" 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%97%90-%EC%BB%A8%ED%85%90%EC%B8%A0%EA%B0%80--2" style="width: 100%;"><thead><tr><td style="width: 22.2887%;">항목</td><td style="width: 77.7113%;">설명</td></tr></thead><tbody><tr><td style="width: 22.2887%;">너비</td><td style="width: 77.7113%;">블럭 안에 컨텐츠가 들어가는 영역의 기본 너비를 설정합니다.

- 본문 너비 : 글로벌 디자인 설정에서 적용한 본문폭 너비에 맞게 설정합니다.
- 채우기 : 컨텐츠 영역의 너비를 화면에 꽉 맞게 채웁니다.

</td></tr><tr><td style="width: 22.2887%;">좌우 여백</td><td style="width: 77.7113%;">블럭의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 22.2887%;">상단 여백</td><td style="width: 77.7113%;">블럭 상단의 여백을 설정합니다.</td></tr><tr><td style="width: 22.2887%;">하단 여백</td><td style="width: 77.7113%;">블럭 하단의 여백을 설정합니다.</td></tr><tr><td style="width: 22.2887%;">정렬</td><td style="width: 77.7113%;">글쓰기 버튼의 정렬을 설정합니다.</td></tr></tbody></table>

<span style="color: #636363;">  
배경</span>

블럭에 대한 배경을 설정합니다. 색 또는 이미지로 설정할 수 있습니다.

<span style="color: #000000;">\[블로그형B 게시판 블럭\]</span>

<span style="color: #000000;">[![dhbd-09-00-06.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-00-06.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-00-06.jpg)</span>

<span style="color: #636363;">내용</span>

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EC%97%B0%EB%8F%99-%3A-%EC%97%B0-3" style="width: 100%;"><thead><tr><td style="width: 21.8453%;">항목</td><td style="width: 78.2739%;">설명</td></tr></thead><tbody><tr><td style="width: 21.8453%;">게시판</td><td style="width: 78.2739%;">- 게시판 연동 : 연동할 게시판을 선택합니다.
- 제목 : 게시판 연동 목록과 관리자페이지에 표시해 줄 게시판 제목을 설정합니다.
- 페이지당 글 수 : 한 페이지 내에 게시글을 몇 개씩 출력할 지 설정합니다.

</td></tr><tr><td style="width: 21.8453%;">게시판 카테고리</td><td style="width: 78.2739%;">게시판 카테고리 사용 여부를 설정합니다.

카테고리 사용하기에 체크한 뒤 카테고리 목록을 수정할 수 있습니다.

</td></tr><tr><td style="width: 21.8453%;">게시판 요소</td><td style="width: 78.2739%;">- 검색 사용하기 : 게시글 검색 기능을 사용 여부를 설정합니다.
- 페이징 사용하기 : 최근 게시글만 보여줄지 모든 게시글을 보여줄지 설정합니다.
- 글쓰기 버튼 감추기 : 글쓰기 버튼 표시 여부를 설정합니다.

</td></tr><tr><td style="width: 21.8453%;">게시글 양식</td><td style="width: 78.2739%;">게시글 작성 양식을 설정합니다.

- 약관 동의 사용하기 : 약관 동의 사용 여부를 설정합니다. (약관 내용은 자유롭게 수정할 수 있습니다.)
- CAPTCHA 사용하기 : 캡챠 사용 여부를 설정합니다. (관리페이지의 사이트 설정 &gt; 외부 API 연동 &gt; 캡챠에 구글 캡챠가 연동되어 있어야 사용할 수 있습니다.)

[<span style="color: #467ff2;">구글 캡챠 연동 바로가기 &gt;</span>](https://docs.dothome.co.kr/books/02/page/63dc7)

</td></tr><tr><td style="width: 21.8453%;">권한</td><td style="width: 78.2739%;">게시판 기능에 대한 권한을 설정합니다.</td></tr><tr><td style="width: 21.8453%;">노출 항목</td><td style="width: 78.2739%;">목록에 표시해 줄 항목을 설정합니다.

블로그형B 게시판 블럭의 경우 썸네일과 제목, 내용은 항상 노출됩니다.

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

  
디자인

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EA%B2%8C%EC%8B%9C%ED%8C%90-%ED%95%AD%EB%AA%A9%EC%9D%98-%EB%94%94%EC%9E%90-3" style="width: 100%;"><thead><tr><td style="width: 21.7263%;">항목</td><td style="width: 78.3929%;">설명</td></tr></thead><tbody><tr><td style="width: 21.7263%;">게시판</td><td style="width: 78.3929%;">게시판 항목의 디자인을 설정합니다.

- 제목 글자 색상 : 게시글 제목의 글자 색상을 설정합니다.
- 내용 글자 색상 : 게시글 내용의 글자 색상을 설정합니다.
- 선 색상 : 게시판의 구분선 색상을 설정합니다.

</td></tr><tr><td style="width: 21.7263%;">버튼</td><td style="width: 78.3929%;">글쓰기 버튼의 디자인을 설정합니다.</td></tr></tbody></table>

<span style="color: #636363;">  
레이아웃</span>

<table class="table table-bordered" 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%97%90-%EC%BB%A8%ED%85%90%EC%B8%A0%EA%B0%80--3" style="width: 100%;"><thead><tr><td style="width: 21.8453%;">항목</td><td style="width: 78.2739%;">설명</td></tr></thead><tbody><tr><td style="width: 21.8453%;">너비</td><td style="width: 78.2739%;">블럭 안에 컨텐츠가 들어가는 영역의 기본 너비를 설정합니다.

- 본문 너비 : 글로벌 디자인 설정에서 적용한 본문폭 너비에 맞게 설정합니다.
- 채우기 : 컨텐츠 영역의 너비를 화면에 꽉 맞게 채웁니다.

</td></tr><tr><td style="width: 21.8453%;">좌우 여백</td><td style="width: 78.2739%;">블럭의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 21.8453%;">상단 여백</td><td style="width: 78.2739%;">블럭 상단의 여백을 설정합니다.</td></tr><tr><td style="width: 21.8453%;">하단 여백</td><td style="width: 78.2739%;">블럭 하단의 여백을 설정합니다.</td></tr><tr><td style="width: 21.8453%;">정렬</td><td style="width: 78.2739%;">글쓰기 버튼의 정렬을 설정합니다.</td></tr></tbody></table>

<span style="color: #636363;">  
배경</span>

블럭에 대한 배경을 설정합니다. 색 또는 이미지로 설정할 수 있습니다.

<span style="color: #000000;">\[갤러리형 게시판 블럭\]</span>

<span style="color: #000000;">[![dhbd-09-00-07.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-00-07.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-00-07.jpg)</span>

<span style="color: #636363;">내용</span>

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EC%97%B0%EB%8F%99-%3A-%EC%97%B0-4" style="width: 100%;"><thead><tr><td style="width: 21.9644%;">항목</td><td style="width: 78.1548%;">설명</td></tr></thead><tbody><tr><td style="width: 21.9644%;">게시판</td><td style="width: 78.1548%;">- 게시판 연동 : 연동할 게시판을 선택합니다.
- 제목 : 게시판 연동 목록과 관리자페이지에 표시해 줄 게시판 제목을 설정합니다.
- 페이지당 글 수 : 한 페이지 내에 게시글을 몇 개씩 출력할 지 설정합니다.

</td></tr><tr><td style="width: 21.9644%;">게시판 카테고리</td><td style="width: 78.1548%;">게시판 카테고리 사용 여부를 설정합니다.

카테고리 사용하기에 체크한 뒤 카테고리 목록을 수정할 수 있습니다.

</td></tr><tr><td style="width: 21.9644%;">게시판 요소</td><td style="width: 78.1548%;">- 검색 사용하기 : 게시글 검색 기능을 사용 여부를 설정합니다.
- 페이징 사용하기 : 최근 게시글만 보여줄지 모든 게시글을 보여줄지 설정합니다.
- 글쓰기 버튼 감추기 : 글쓰기 버튼 표시 여부를 설정합니다.

</td></tr><tr><td style="width: 21.9644%;">게시글 양식</td><td style="width: 78.1548%;">게시글 작성 양식을 설정합니다.

- 약관 동의 사용하기 : 약관 동의 사용 여부를 설정합니다. (약관 내용은 자유롭게 수정할 수 있습니다.)
- CAPTCHA 사용하기 : 캡챠 사용 여부를 설정합니다. (관리페이지의 사이트 설정 &gt; 외부 API 연동 &gt; 캡챠에 구글 캡챠가 연동되어 있어야 사용할 수 있습니다.)

[<span style="color: #467ff2;">구글 캡챠 연동 바로가기 &gt;</span>](https://docs.dothome.co.kr/books/02/page/63dc7)

</td></tr><tr><td style="width: 21.9644%;">권한</td><td style="width: 78.1548%;">게시판 기능에 대한 권한을 설정합니다.</td></tr><tr><td style="width: 21.9644%;">노출 항목</td><td style="width: 78.1548%;">목록에 표시해 줄 항목을 설정합니다.

갤러리형 게시판 블럭의 경우 썸네일과 제목은 항상 노출됩니다.

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

  
디자인

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EA%B2%8C%EC%8B%9C%ED%8C%90-%ED%95%AD%EB%AA%A9%EC%9D%98-%EB%94%94%EC%9E%90-4" style="width: 100%;"><thead><tr><td style="width: 21.8453%;">항목</td><td style="width: 78.2739%;">설명</td></tr></thead><tbody><tr><td style="width: 21.8453%;">게시판</td><td style="width: 78.2739%;">게시판 항목의 디자인을 설정합니다.

- 가로 개수 : 가로 한 줄에 몇 개의 게시글을 표시할지 설정합니다.
- 제목 글자 색상 : 게시글 제목의 글자 색상을 설정합니다.
- 내용 글자 색상 : 게시글 내용의 글자 색상을 설정합니다.

</td></tr><tr><td style="width: 21.8453%;">버튼</td><td style="width: 78.2739%;">글쓰기 버튼의 디자인을 설정합니다.</td></tr></tbody></table>

<span style="color: #636363;">  
레이아웃</span>

<table class="table table-bordered" 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%97%90-%EC%BB%A8%ED%85%90%EC%B8%A0%EA%B0%80--4" style="width: 100%;"><thead><tr><td style="width: 21.6932%;">항목</td><td style="width: 78.3068%;">설명</td></tr></thead><tbody><tr><td style="width: 21.6932%;">너비</td><td style="width: 78.3068%;">블럭 안에 컨텐츠가 들어가는 영역의 기본 너비를 설정합니다.

- 본문 너비 : 글로벌 디자인 설정에서 적용한 본문폭 너비에 맞게 설정합니다.
- 채우기 : 컨텐츠 영역의 너비를 화면에 꽉 맞게 채웁니다.

</td></tr><tr><td style="width: 21.6932%;">좌우 여백</td><td style="width: 78.3068%;">블럭의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 21.6932%;">상단 여백</td><td style="width: 78.3068%;">블럭 상단의 여백을 설정합니다.</td></tr><tr><td style="width: 21.6932%;">하단 여백</td><td style="width: 78.3068%;">블럭 하단의 여백을 설정합니다.</td></tr><tr><td style="width: 21.6932%;">정렬</td><td style="width: 78.3068%;">글쓰기 버튼의 정렬을 설정합니다.</td></tr></tbody></table>

<span style="color: #636363;">  
배경</span>

블럭에 대한 배경을 설정합니다. 색 또는 이미지로 설정할 수 있습니다.

<span style="color: #000000;">\[갤러리형 상품 게시판 블럭\]</span>

<span style="color: #000000;">[![dhbd-09-00-08.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-00-08.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-00-08.jpg)</span>

<span style="color: #636363;">내용</span>

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EC%A0%9C%EB%AA%A9-%3A-%EA%B4%80%EB%A6%AC%EC%9E%90%ED%8E%98%EC%9D%B4" style="width: 100%;"><thead><tr><td style="width: 22.0834%;">항목</td><td style="width: 78.0358%;">설명</td></tr></thead><tbody><tr><td style="width: 22.0834%;">게시판</td><td style="width: 78.0358%;">- 제목 : 관리자페이지에 표시해 줄 게시판 제목을 설정합니다.
- 페이지당 글 수 : 한 페이지 내에 게시글을 몇 개씩 출력할 지 설정합니다.

</td></tr><tr><td style="width: 22.0834%;">게시판 카테고리</td><td style="width: 78.0358%;">게시판 카테고리 사용 여부를 설정합니다.

카테고리 사용하기에 체크한 뒤 카테고리 목록을 수정할 수 있습니다.

</td></tr><tr><td style="width: 22.0834%;">게시판 요소</td><td style="width: 78.0358%;">- 검색 사용하기 : 게시글 검색 기능을 사용 여부를 설정합니다.
- 페이징 사용하기 : 최근 게시글만 보여줄지 모든 게시글을 보여줄지 설정합니다.

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

  
디자인

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EA%B2%8C%EC%8B%9C%ED%8C%90-%ED%95%AD%EB%AA%A9%EC%9D%98-%EB%94%94%EC%9E%90-5" style="width: 100%;"><thead><tr><td style="width: 21.9644%;">항목</td><td style="width: 78.1548%;">설명</td></tr></thead><tbody><tr><td style="width: 21.9644%;">게시판</td><td style="width: 78.1548%;">게시판 항목의 디자인을 설정합니다.

- 가로 개수 : 가로 한 줄에 몇 개의 게시글을 표시할지 설정합니다.
- 상품명 색상 : 상품명의 색상을 설정합니다.
- 기존가 색상 : 기존가의 색상을 설정합니다.
- 할인 배지 색상 : 할인 색상을 설정합니다.

</td></tr><tr><td style="width: 21.9644%;">버튼</td><td style="width: 78.1548%;">상품 보러가기 버튼의 디자인을 설정합니다.</td></tr></tbody></table>

<span style="color: #636363;">  
레이아웃</span>

<table class="table table-bordered" 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%97%90-%EC%BB%A8%ED%85%90%EC%B8%A0%EA%B0%80--5" style="width: 100%;"><thead><tr><td style="width: 21.8084%;">항목</td><td style="width: 78.1916%;">설명</td></tr></thead><tbody><tr><td style="width: 21.8084%;">너비</td><td style="width: 78.1916%;">블럭 안에 컨텐츠가 들어가는 영역의 기본 너비를 설정합니다.

- 본문 너비 : 글로벌 디자인 설정에서 적용한 본문폭 너비에 맞게 설정합니다.
- 채우기 : 컨텐츠 영역의 너비를 화면에 꽉 맞게 채웁니다.

</td></tr><tr><td style="width: 21.8084%;">좌우 여백</td><td style="width: 78.1916%;">블럭의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 21.8084%;">상단 여백</td><td style="width: 78.1916%;">블럭 상단의 여백을 설정합니다.</td></tr><tr><td style="width: 21.8084%;">하단 여백</td><td style="width: 78.1916%;">블럭 하단의 여백을 설정합니다.</td></tr><tr><td style="width: 21.8084%;">정렬</td><td style="width: 78.1916%;">글쓰기 버튼의 정렬을 설정합니다.</td></tr></tbody></table>

<span style="color: #636363;">  
배경</span>

블럭에 대한 배경을 설정합니다. 색 또는 이미지로 설정할 수 있습니다.

<span style="color: #000000;">\[리스트형 상품 게시판 블럭\]</span>

<span style="color: #000000;">[![dhbd-09-00-09.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-00-09.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-00-09.jpg)</span>

<span style="color: #636363;">내용</span>

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EC%A0%9C%EB%AA%A9-%3A-%EA%B4%80%EB%A6%AC%EC%9E%90%ED%8E%98%EC%9D%B4-1" style="width: 100%;"><thead><tr><td style="width: 21.7263%;">항목</td><td style="width: 78.3929%;">설명</td></tr></thead><tbody><tr><td style="width: 21.7263%;">게시판</td><td style="width: 78.3929%;">- 제목 : 관리자페이지에 표시해 줄 게시판 제목을 설정합니다.
- 페이지당 글 수 : 한 페이지 내에 게시글을 몇 개씩 출력할 지 설정합니다.

</td></tr><tr><td style="width: 21.7263%;">게시판 카테고리</td><td style="width: 78.3929%;">게시판 카테고리 사용 여부를 설정합니다.

카테고리 사용하기에 체크한 뒤 카테고리 목록을 수정할 수 있습니다.

</td></tr><tr><td style="width: 21.7263%;">게시판 요소</td><td style="width: 78.3929%;">- 검색 사용하기 : 게시글 검색 기능을 사용 여부를 설정합니다.
- 페이징 사용하기 : 최근 게시글만 보여줄지 모든 게시글을 보여줄지 설정합니다.

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

  
디자인

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EA%B2%8C%EC%8B%9C%ED%8C%90-%ED%95%AD%EB%AA%A9%EC%9D%98-%EB%94%94%EC%9E%90-6" style="width: 100%;"><thead><tr><td style="width: 21.8453%;">항목</td><td style="width: 78.2739%;">설명</td></tr></thead><tbody><tr><td style="width: 21.8453%;">게시판</td><td style="width: 78.2739%;">게시판 항목의 디자인을 설정합니다.

- 상품명 색상 : 상품명의 색상을 설정합니다.
- 기존가 색상 : 기존가의 색상을 설정합니다.
- 할인 배지 색상 : 할인 색상을 설정합니다.

</td></tr><tr><td style="width: 21.8453%;">버튼</td><td style="width: 78.2739%;">상품 보러가기 버튼의 디자인을 설정합니다.</td></tr></tbody></table>

<span style="color: #636363;">  
레이아웃</span>

<table class="table table-bordered" 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%97%90-%EC%BB%A8%ED%85%90%EC%B8%A0%EA%B0%80--6" style="width: 100%;"><thead><tr><td style="width: 21.8453%;">항목</td><td style="width: 78.2739%;">설명</td></tr></thead><tbody><tr><td style="width: 21.8453%;">너비</td><td style="width: 78.2739%;">블럭 안에 컨텐츠가 들어가는 영역의 기본 너비를 설정합니다.

- 본문 너비 : 글로벌 디자인 설정에서 적용한 본문폭 너비에 맞게 설정합니다.
- 채우기 : 컨텐츠 영역의 너비를 화면에 꽉 맞게 채웁니다.

</td></tr><tr><td style="width: 21.8453%;">좌우 여백</td><td style="width: 78.2739%;">블럭의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 21.8453%;">상단 여백</td><td style="width: 78.2739%;">블럭 상단의 여백을 설정합니다.</td></tr><tr><td style="width: 21.8453%;">하단 여백</td><td style="width: 78.2739%;">블럭 하단의 여백을 설정합니다.</td></tr><tr><td style="width: 21.8453%;">정렬</td><td style="width: 78.2739%;">글쓰기 버튼의 정렬을 설정합니다.</td></tr></tbody></table>

<span style="color: #636363;">  
배경</span>

블럭에 대한 배경을 설정합니다. 색 또는 이미지로 설정할 수 있습니다.

# 일반 게시판 블럭 다루기

일반 게시판은 글작성 목적으로 가장 많이 사용되는 일빈적인 게시판입니다.

닷홈빌더에서는 리스트형, FAQ형, 블로그형A, 블로그형B, 갤러리형 게시판을 제공하고 있습니다.

일반 게시판 사용에 대한 자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

[https://docs.dothome.co.kr/books/09/page/94f6d](https://docs.dothome.co.kr/books/09/page/94f6d)

일반 게시판의 기능, 디자인을 설정합니다.

작성된 게시글 관리는 [<span style="color: #3c99f6;">게시판/게시글 관리하기 &gt;</span>](https://docs.dothome.co.kr/books/04/page/f457c)<span style="color: #3c99f6;"> </span>를 참고해 주세요.

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

<span style="color: rgb(22, 145, 121);">\[일반 게시판 블럭 화면\]</span>

\[디자인 편집기\]페이지에서 게시판 블럭 위에 마우스를 올리면 우측 상단에 블럭 편집 메뉴가 표시됩니다.

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

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

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

<span style="color: #000000;">게시판 블럭의 상세 설정 창은 내용, 디자인, 레이아웃, 배경 네 개의 탭 메뉴로 구성되어 있습니다.</span>

● 내용

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

<span style="color: rgb(22, 145, 121);">\[일반 게시판 상세설정 - 내용 설정 화면\]</span>

게시판에 대한 기본적인 항목들을 설정합니다.

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EC%97%B0%EB%8F%99-%3A-%EC%97%B0" style="width: 100%;"><thead><tr><td style="width: 23.3617%;">항목  
</td><td style="width: 76.6383%;">설명  
</td></tr></thead><tbody><tr><td style="width: 23.3617%;">게시판  
</td><td style="width: 76.6383%;">게시판 연동 : 연동할 게시판을 선택합니다.  
제목 : 게시판 연동 목록과 관리자페이지에 표시해 줄 게시판 제목을 설정합니다.  
페이지당 글 수 : 게시글을 몇 개씩 출력할 지 설정합니다.  
</td></tr><tr><td style="width: 23.3617%;">게시판 요소  
</td><td style="width: 76.6383%;">검색 사용하기 : 게시글 검색 기능을 사용 여부를 설정합니다.  
페이징 사용하기 : 최근 게시글만 보여줄지 모든 게시글을 보여줄지 설정합니다.  
<span style="color: #212529;">글쓰기 버튼 감추기 : 글쓰기 버튼 표시 여부를 설정합니다.</span>  
<span style="color: #212529;">CAPTCHA 사용하기 : 구글 캡챠 설정이 가능하며, 구글 캡챠 연동 후 사용이 가능합니다. </span>[<span style="color: #3c99f6;">구글 캡챠 연동하기&gt;</span>](https://docs.dothome.co.kr/books/02/page/63dc7)  
</td></tr><tr><td style="width: 23.3617%;">게시판 카테고리  
</td><td style="width: 76.6383%;">- <span style="color: #000000;">게시판 카테고리는 사용 여부를 설정합니다.  
    카테고리 사용하기에 체크한 뒤 카테고리 목록을 수정할 수 있습니다.</span>

</td></tr><tr><td style="width: 23.3617%;">권한  
</td><td style="width: 76.6383%;">게시글 목록 열람, 게시글 열람, 글 작성, 댓글의 권한을 설정합니다.   
\*권한을 '선택 회원 그룹'으로 선택할 경우 원하는 회원 그룹을 지정할 수 있습니다.  
\*글쓰기 권한을 '모든 방문자'로 설정 시 CAPTCHA 사용하기를 체크해주세요.  
</td></tr><tr><td style="width: 23.3617%;">노출 항목

</td><td style="width: 76.6383%;">목록에 표시해 줄 항목을 설정합니다. (게시판 타입에 따라 설정 가능한 노출 항목이 다릅니다.)  
</td></tr><tr><td style="width: 23.3617%;">게시글 양식  
</td><td style="width: 76.6383%;">해당 게시판에 게시글 작성 양식을 설정합니다.  
</td></tr><tr><td style="width: 23.3617%;">정렬  
</td><td style="width: 76.6383%;">게시글, 댓글, 답글의 기본 정렬을 설정합니다.  
</td></tr><tr><td style="width: 23.3617%;">게시글 공유  
</td><td style="width: 76.6383%;">게시글 공유 기능을 설정합니다. 공유 항목을 체크하며 게시글 공유 기능이 활성화 되며, 공유 목록에 체크된 항목이 표시됩니다.

<span style="color: #212529;">카카오톡과 카카오 스토리의 경우 카카오 API 연동이 필요합니다. </span>[<span style="color: #3c99f6;">카카오 API 연동 바로가기 &gt;</span>](https://docs.dothome.co.kr/books/02/page/sns-api)

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

● 디자인

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

<div id="bkmrk-%5B%EC%9D%BC%EB%B0%98-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EC%83%81%EC%84%B8%EC%84%A4%EC%A0%95---%EB%94%94%EC%9E%90%EC%9D%B8-%EC%84%A4"><span style="color: rgb(22, 145, 121);">\[일반 게시판 상세설정 - 디자인 설정 화면\]</span></div>게시글 목록의 글자 색상, 배경색 등을 설정합니다. (게시판 타입에 따라 설정 항목은 다릅니다.)

● 레이아웃

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

<span style="color: rgb(22, 145, 121);">\[일반 게시판 상세설정 - 레이아웃 설정 화면\]</span>

<table class="table table-bordered" 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%97%90-%EC%BB%A8%ED%85%90%EC%B8%A0%EA%B0%80-" style="width: 100%;"><thead><tr><td style="width: 23.1548%;">항목  
</td><td style="width: 76.9644%;">설명  
</td></tr></thead><tbody><tr><td style="width: 23.1548%;">너비  
</td><td style="width: 76.9644%;"><span style="color: #000000;">블럭 안에 컨텐츠가 들어가는 영역의 기본 너비를 설정합니다.</span>

본문 너비 : 글로벌 디자인 설정에서 적용한 본문폭 너비에 맞게 설정합니다.

<span style="color: #000000;">채우기 : 컨텐츠 영역의 너비를 화면에 꽉 맞게 채웁니다.</span>

</td></tr><tr><td style="width: 23.1548%;">좌우 여백  
</td><td style="width: 76.9644%;">블럭의 좌우 여백을 설정합니다.  
</td></tr><tr><td style="width: 23.1548%;">상단 여백  
</td><td style="width: 76.9644%;">블럭의 상단 여백을 설정합니다.  
</td></tr><tr><td style="width: 23.1548%;">하단 여백  
</td><td style="width: 76.9644%;">블럭의 하단 여백을 설정합니다.  
</td></tr><tr><td style="width: 23.1548%;">정렬  
</td><td style="width: 76.9644%;">글쓰기 버튼의 정렬을 설정합니다.  
</td></tr></tbody></table>

  
● 배경

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

<span style="color: rgb(22, 145, 121);">\[일반 게시판 상세설정 - 배경 설정 화면\]</span>

블럭에 대한 배경을 설정합니다. 색 또는 이미지로 설정할 수 있습니다.

# 커스텀 게시판 블럭 다루기

커스텀 게시판은 블럭의 한쪽은 일반 게시판을 배치하고 다른 한쪽은 사용자가 디자인할 수 있는 게시판입니다.

리스트형, FAQ형, 블로그형A, 블로그형B, 갤러리형 등 원하는 일반 게시판을 선택할 수 있습니다.

커스텀 게시판 사용에 대한 자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

[https://docs.dothome.co.kr/books/09/page/06eb6](https://docs.dothome.co.kr/books/09/page/06eb6)

커스텀 게시판의 기능, 디자인을 설정합니다.

작성된 게시글 관리는 <span style="color: #3c99f6;">[게시판/게시글 관리하기 &gt;](https://docs.dothome.co.kr/books/04/page/f457c) </span>를 참고해 주세요.

● 게시판 상세 설정하기

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

<span style="color: rgb(22, 145, 121);">\[커스텀 게시판 블럭 화면\]</span>

\[디자인 편집기\]페이지에서 게시판 블럭 위에 마우스를 올리면 우측 상단에 블럭 편집 메뉴가 표시됩니다.

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

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

<span style="color: rgb(22, 145, 121);">\[커스텀 게시판 상세설정창 화면\]</span>

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

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

● 내용

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

<span style="color: rgb(22, 145, 121);">\[커스텀 게시판 상세설정 - 내용 설정 화면\]</span>

<span style="color: #636363;">게시판에 대한 기본적인 항목들을 설정합니다.</span>

<span style="color: #636363;">  
</span>

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EC%9C%84%EC%B9%98-%EA%B2%8C%EC%8B%9C%ED%8C%90%EC%9D%98-%EC%9C%84%EC%B9%98" style="width: 100%;"><thead><tr><td style="width: 21.7263%;">항목</td><td style="width: 78.3929%;">설명</td></tr></thead><tbody><tr><td style="width: 21.7263%;">게시판 위치</td><td style="width: 78.3929%;">게시판의 위치를 설정합니다. 좌측 또는 우측을 선택할 수 있습니다.</td></tr><tr><td style="width: 21.7263%;">게시판</td><td style="width: 78.3929%;"><div>- 게시판 연동 : 연동할 게시판을 선택합니다.
- 제목 : 게시판 연동 목록과 관리자페이지에 표시해 줄 게시판 제목을 설정합니다.
- 페이지당 글 수 : 게시글을 몇 개씩 출력할 지 설정합니다.

</div></td></tr><tr><td style="width: 21.7263%;">게시판 요소  
</td><td style="width: 78.3929%;">- 검색 사용하기 : 게시글 검색 기능을 사용 여부를 설정합니다.
- 페이징 사용하기 : 최근 게시글만 보여줄지 모든 게시글을 보여줄지 설정합니다.
- <span style="color: #212529;">글쓰기 버튼 감추기 : 글쓰기 버튼 표시 여부를 설정합니다.</span>  
    <span style="color: #212529;">CAPTCHA 사용하기 : 구글 캡챠 설정이 가능하며, 구글 캡챠 연동 후 사용이 가능합니다.</span><span style="color: #212529;"> </span>[<span style="color: #3c99f6;">구글 캡챠 연동하기&gt;</span>](https://docs.dothome.co.kr/books/02/page/63dc7)

</td></tr><tr><td style="width: 21.7263%;">게시판 카테고리  
</td><td style="width: 78.3929%;">- 게시판 카테고리 사용 여부를 설정합니다.   
    카테고리 사용하기에 체크한 뒤 카테고리 목록을 수정할 수 있습니다.

</td></tr><tr><td style="width: 21.7263%;">권한  
</td><td style="width: 78.3929%;">게시글 목록 열람, 게시글 열람, 글 작성, 댓글의 권한을 설정합니다.  
<span style="color: #424242;">\*권한을 '선택 회원 그룹'으로 선택할 경우 원하는 회원 그룹을 지정할 수 있습니다.  
\*글쓰기 권한을 '모든 방문자'로 설정 시 CAPTCHA 사용하기를 체크해주세요.</span>  
</td></tr><tr><td style="width: 21.7263%;">노출 항목  
</td><td style="width: 78.3929%;">목록에 표시해 줄 항목을 설정합니다. (게시판 타입에 따라 설정 가능한 노출 항목이 다릅니다.)

</td></tr><tr><td style="width: 21.7263%;">게시글 양식  
</td><td style="width: 78.3929%;">게시글 작성 양식을 설정합니다.  
</td></tr><tr><td style="width: 21.7263%;">정렬  
</td><td style="width: 78.3929%;">게시글, 댓글, 답글의 기본 정렬을 설정합니다.</td></tr><tr><td style="width: 21.7263%;">게시글 공유</td><td style="width: 78.3929%;">게시글 공유 기능을 설정합니다. 공유 항목을 체크하며 게시글 공유 기능이 활성화 되며, 공유 목록에 체크된 항목이 표시됩니다.

카카오톡과 카카오스토리의 경우 카카오 API 연동이 필요합니다.<span style="color: #3c99f6;"> </span>[**<span style="color: #3c99f6;">카카오 API 연동 바로가기 &gt;</span>**](https://docs.dothome.co.kr/books/02/page/sns-api)

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

● 디자인

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

<span style="color: rgb(22, 145, 121);">\[커스텀 게시판 상세설정 - 디자인 설정 화면\]</span>

게시글 목록의 글자 색상, 배경색 등을 설정합니다. (게시판 타입에 따라 설정 항목은 다릅니다.)

● 레이아웃

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

<span style="color: rgb(22, 145, 121);">\[커스텀 게시판 상세설정 - 레이아웃 설정 화면\]</span>

<table class="table table-bordered" 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%97%90-%EC%BB%A8%ED%85%90%EC%B8%A0%EA%B0%80-" 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%;">블럭 안에 컨텐츠가 들어가는 영역의 기본 너비를 설정합니다.

- 본문 너비 : 글로벌 디자인 설정에서 적용한 본문폭 너비에 맞게 설정합니다.
- 채우기 : 컨텐츠 영역의 너비를 화면에 꽉 맞게 채웁니다.

</td></tr><tr><td style="width: 23.0358%;">좌우 여백</td><td style="width: 77.0834%;">블럭의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 23.0358%;">상단 여백</td><td style="width: 77.0834%;">블럭 상단의 여백을 설정합니다.</td></tr><tr><td style="width: 23.0358%;">하단 여백</td><td style="width: 77.0834%;">블럭 하단의 여백을 설정합니다.</td></tr><tr><td style="width: 23.0358%;">정렬</td><td style="width: 77.0834%;">글쓰기 버튼의 정렬을 설정합니다.</td></tr></tbody></table>

● 배경

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

<span style="color: rgb(22, 145, 121);">\[커스텀 게시판 상세설정 - 배경 설정 화면\]</span>

블럭에 대한 배경을 설정합니다. 색 또는 이미지로 설정할 수 있습니다.

● 빈 프레임 영역에 요소 블럭 추가 및 편집하기

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

<span style="color: rgb(22, 145, 121);">\[커스텀 게시판 빈 프레임 영역에 요소 블럭 추가 화면\]</span>

빈 프레임 영역에 요소 블럭을 추가, 삭제할 수 있습니다.

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

<span style="color: rgb(22, 145, 121);">\[커스텀 게시판 프레임 블럭에 요소가 추가된 화면\]</span>

추가된 요소의 위치를 이동하거나 상세 설정을 할 수 있습니다.

요소 블럭의 편집 방법은 각 매뉴얼에서 확인하세요

[<span style="color: #3c99f6;">요소 블럭 다루기&gt;</span>](https://docs.dothome.co.kr/books/10)

# 상품 게시판 블럭 다루기

상품 게시판은 상품의 정보와 상품 상세/구매 페이지로의 링크를 제공하는 게시판 입니다

상품 게시판은 갤러리형, 리스트형 두가지 스타일의 게시판을 제공하고 있습니다.

상품 게시판 사용에 대한 자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

[https://docs.dothome.co.kr/books/09/page/89f0f](https://docs.dothome.co.kr/books/09/page/89f0f)

상품 게시판의 기능, 디자인을 설정합니다.

게시글 관리는 [<span style="color: #3c99f6;">상품 게시판/게시글 관리하기 &gt;</span>](https://docs.dothome.co.kr/books/04/page/f7177) 를 참고해 주세요.

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

<span style="color: rgb(22, 145, 121);">\[상품 게시판 설정 버튼 화면\]</span>

\[디자인 편집기\]페이에서 게시판 블럭 위에 마우스를 올리면 우측 상단에 블럭 편집 메뉴가 표시됩니다.

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

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

<span style="color: rgb(22, 145, 121);">\[상품 게시판 상세설정창 화면\]</span>

게시판 블럭의 상세 설정 창은 내용, 디자인, 레이아웃, 배경 네 개의 탭메뉴로 구성되어 있습니다.

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

● 내용

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

<span style="color: rgb(22, 145, 121);">\[상품 게시판 상세설정 - 내용 설정 화면\]</span>

<span style="color: #636363;">게시판에 대한 기본적인 항목들을 설정합니다. </span>

<span style="color: #636363;">  
</span>

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EC%A0%9C%EB%AA%A9-%3A-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EC%97%B0" style="width: 100%;"><thead><tr><td style="width: 22.4405%;">항목</td><td style="width: 77.6786%;">설명</td></tr></thead><tbody><tr><td style="width: 22.4405%;">게시판</td><td style="width: 77.6786%;"><div>- 제목 : 게시판 연동 목록과 관리자 페이지에 표시해 줄 게시판 제목을 설정합니다.
- 페이지당 글 수 : 게시글을 몇 개씩 출력할 지 설정합니다.

</div></td></tr><tr><td style="width: 22.4405%;">게시판 요소  
</td><td style="width: 77.6786%;">검색 사용하기 : 게시글 검색 기능을 사용 여부를 설정합니다.  
페이징 사용하기 : 최근 게시글만 보여줄지 모든 게시글을 보여줄지 설정합니다.

</td></tr><tr><td style="width: 22.4405%;">게시판 카테고리  
</td><td style="width: 77.6786%;"><div>- 게시판 카테고리 사용 여부를 설정합니다.  
    카테고리 사용하기에 체크한 뒤 카테고리 목록을 수정할 수 있습니다.

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

 ● 디자인

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

<span style="color: rgb(22, 145, 121);">\[상품 게시판 상세설정 - 디자인 설정 화면\]</span>

게시글 목록의 글자 색상, 배경색과 버튼의 글자색, 배경색 등을 설정합니다. (게시판 타입에 따라 설정 항목은 다릅니다.)

● 레이아웃

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

<span style="color: rgb(22, 145, 121);">\[상품 게시판 상세설정 - 레이아웃 설정 화면\]</span>

<table class="table table-bordered" 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%97%90-%EC%BB%A8%ED%85%90%EC%B8%A0%EA%B0%80-" style="width: 100%;"><thead><tr><td style="width: 22.5596%;">항목</td><td style="width: 77.5596%;">설명</td></tr></thead><tbody><tr><td style="width: 22.5596%;">너비</td><td style="width: 77.5596%;">블럭 안에 컨텐츠가 들어가는 영역의 기본 너비를 설정합니다.

- 본문 너비 : 글로벌 디자인 설정에서 적용한 본문폭 너비에 맞게 설정합니다.
- 채우기 : 컨텐츠 영역의 너비를 화면에 꽉 맞게 채웁니다.

</td></tr><tr><td style="width: 22.5596%;">좌우 여백</td><td style="width: 77.5596%;">블럭의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 22.5596%;">상단 여백</td><td style="width: 77.5596%;">블럭 상단의 여백을 설정합니다.</td></tr><tr><td style="width: 22.5596%;">하단 여백</td><td style="width: 77.5596%;">블럭 하단의 여백을 설정합니다.</td></tr><tr><td style="width: 22.5596%;">정렬</td><td style="width: 77.5596%;">글쓰기 버튼의 정렬을 설정합니다.

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

● 배경

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

<span style="color: rgb(22, 145, 121);">\[상품 게시판 상세설정 - 배경 설정 화면\]</span>

블럭에 대한 배경을 설정합니다. 색 또는 이미지로 설정할 수 있습니다.

# 지도 게시판 블럭 다루기

지도 게시판은 지도화 함께 게시글 목록을 보여주는 게시판으로 매장 소개 등에 적합한 게시판입니다.

게시글 작성시 주소를 입력할 수 있으며, 지도, 거리뷰 등이 표시되는 게시글을 작성할 수 있습니다.

지도 게시판은 네이버 지도, 카카오 지도 중 선택해서 사용하실 수 있습니다.

지도 게시판 사용에 대한 자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

[https://docs.dothome.co.kr/books/09/page/9be40](https://docs.dothome.co.kr/books/09/page/9be40)

지도 게시판 블럭을 사용하기 위해서는 지도 API 등록이 필요합니다.

사용하려는 지도의 API를 먼저 등록해주세요.

[<span style="color: #3c99f6;">네이버 지도 API 등록하기&gt;</span>](https://docs.dothome.co.kr/books/02/page/api)

[<span style="color: #3c99f6;">다음 카카오 지도 API 등록하기&gt;</span>](https://docs.dothome.co.kr/books/02/page/sns-api)

작성된 게시글 관리는 [**<span style="color: #3c99f6;">지도 게시판/게시글 관리하기 &gt;</span>**](https://docs.dothome.co.kr/books/04/page/f5f85)<span style="color: #3c99f6;"> </span>를 참고해 주세요.

● 게시판 상세 설정하기

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

<span style="color: rgb(22, 145, 121);">\[지도 게시판 설정 버튼 화면\]</span>

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

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

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

<span style="color: rgb(22, 145, 121);">\[지도 게시판 상세설정창 화면\]</span>

게시판 블럭의 상세 설정창은 내용, 디자인, 레이아웃, 배경 네 개의 탭메뉴로 구성되어 있습니다.

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

**- 내용**

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

<span style="color: rgb(22, 145, 121);">\[지도 게시판 상세설정 - 내용 설정 화면\]</span>

<span style="color: #636363;">게시판에 대한 기본적인 항목들을 설정합니다.</span>

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EC%97%B0%EB%8F%99-%3A-%EC%97%B0" style="width: 100%;"><thead><tr><td style="width: 22.5288%;">항목</td><td style="width: 77.4712%;">설명</td></tr></thead><tbody><tr><td style="width: 22.5288%;">게시판</td><td style="width: 77.4712%;">- 게시판 연동 : 연동할 게시판을 선택합니다.
- 제목 : 게시판 연동 목록과 관리자페이지에 표시해 줄 게시판 제목을 설정합니다.

</td></tr><tr><td style="width: 22.5288%;">게시판 요소  
</td><td style="width: 77.4712%;">- 글쓰기 버튼 감추기 : 글쓰기 버튼 표시 여부를 설정합니다.

</td></tr><tr><td style="width: 22.5288%;">게시판 카테고리  
</td><td style="width: 77.4712%;"><div>- 게시판 카테고리 사용 여부를 설정합니다.

</div></td></tr><tr><td style="width: 22.5288%;">권한  
</td><td style="width: 77.4712%;">게시글 목록 열람, 게시글 열람, 글 작성, 댓글의 권한을 설정합니다.

권한을 '선택 회원 그룹'으로 선택할 경우 원하는 회원 그룹을 지정할 수 있습니다.

</td></tr><tr><td style="width: 22.5288%;">노출 항목  
</td><td style="width: 77.4712%;">목록에 표시해 줄 항목을 설정합니다.

</td></tr><tr><td style="width: 22.5288%;">게시글 양식  
</td><td style="width: 77.4712%;">게시글 작성 양식을 설정합니다.  
</td></tr><tr><td style="width: 22.5288%;">지도 상세 설정  
</td><td style="width: 77.4712%;"><div>- 마우스 휠로 확대/축소하기 : 사용으로 설정하면 마우스 휠로 지도를 확대/축소할 수 있습니다.
- 마커 클러스터링 : 사용으로 설정하면 마커가 서로 겹치지 않도록 인접한 마커를 그룹으로 묶어 표시합니다.

</div></td></tr><tr><td style="width: 22.5288%;">정렬</td><td style="width: 77.4712%;">게시글, 댓글, 답글의 기본 정렬을 설정합니다.</td></tr><tr><td style="width: 22.5288%;">게시글 공유</td><td style="width: 77.4712%;">게시글 공유 기능을 설정합니다. 공유 항목을 체크하며 게시글 공유 기능이 활성화 되며, 공유 목록에 체크된 항목이 표시됩니다.

카카오톡과 카카오스토리의 경우 카카오 API 연동이 필요합니다. [**<span style="color: #3c99f6;">카카오 API 연동 바로가기 &gt;</span>**](https://docs.dothome.co.kr/books/02/page/sns-api)

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

\- 디자인

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

<span style="color: rgb(22, 145, 121);">\[지도 게시판 상세설정 - 디자인 설정 화면\]</span>

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EA%B2%8C%EC%8B%9C%EA%B8%80-%EB%AA%A9%EB%A1%9D%EC%9D%98-%EB%94%94%EC%9E%90" style="width: 100%;"><thead><tr><td style="width: 21.6916%;">항목</td><td style="width: 78.3084%;">설명</td></tr></thead><tbody><tr><td style="width: 21.6916%;">게시판  
</td><td style="width: 78.3084%;">게시글 목록의 디자인을 설정합니다.  
</td></tr><tr><td style="width: 21.6916%;">버튼</td><td style="width: 78.3084%;">버튼의 디자인을 설정합니다.</td></tr><tr><td style="width: 21.6916%;">게시글 목록</td><td style="width: 78.3084%;">게시글 목록의 위치를 설정합니다.</td></tr></tbody></table>

\- 레이아웃

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

<span style="color: rgb(22, 145, 121);">\[지도 게시판 상세설정 - 레이아웃 설정 화면\]</span>

<table class="table table-bordered" 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%97%90-%EC%BB%A8%ED%85%90%EC%B8%A0%EA%B0%80-" style="width: 100%;"><thead><tr><td style="width: 21.9314%;">항목</td><td style="width: 78.0686%;">설명</td></tr></thead><tbody><tr><td style="width: 21.9314%;">너비</td><td style="width: 78.0686%;">블럭 안에 컨텐츠가 들어가는 영역의 기본 너비를 설정합니다.

- 본문 너비 : 글로벌 디자인 설정에서 적용한 본문폭 너비에 맞게 설정합니다.
- 채우기 : 컨텐츠 영역의 너비를 화면에 꽉 맞게 채웁니다.

</td></tr><tr><td style="width: 21.9314%;">좌우 여백</td><td style="width: 78.0686%;">블럭의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 21.9314%;">상단 여백</td><td style="width: 78.0686%;">블럭 상단의 여백을 설정합니다.</td></tr><tr><td style="width: 21.9314%;">하단 여백</td><td style="width: 78.0686%;">블럭 하단의 여백을 설정합니다.</td></tr><tr><td style="width: 21.9314%;">정렬</td><td style="width: 78.0686%;">게시글 목록의 글자 정렬을 설정합니다.</td></tr></tbody></table>

\- 배경

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

<div id="bkmrk-%5B%EC%A7%80%EB%8F%84-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EC%83%81%EC%84%B8%EC%84%A4%EC%A0%95---%EB%B0%B0%EA%B2%BD-%EC%84%A4%EC%A0%95"><span style="color: rgb(22, 145, 121);">\[지도 게시판 상세설정 - 배경 설정 화면\]</span></div>블럭에 대한 배경을 설정합니다. 색 또는 이미지로 설정할 수 있습니다.

# 최신글 그룹 블럭 다루기

● 최신글 그룹 블럭이란 ?

최신글 그룹 블럭은 기존 게시판과 연동하여 해당 게시판의 최신글을 보여줄 수 있는 블럭입니다.

하나의 게시판만 표시 가능한 게시판 블럭과 달리 여러 게시판을 각각 연동하여 여러 게시판의 최신글 목록을 표시할 수 있습니다.

최신글 그룹 블럭 사용에 대한 자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

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

● 최신글 그룹 블럭 살펴보기

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

[![dhbd-09-13-03.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-13-03.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-13-03.jpg)[![dhbd-09-13-04.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-13-04.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-13-04.jpg)

<span style="color: rgb(22, 145, 121);"> \[최신글 그룹 블럭 종류\]</span>

최신글 그룹 블럭은 리스트형과 블로그형 디자인 두 가지로 나뉘어 있습니다.

리스트형 2단 또는 3단, 블로그형 2단 또는 리스트형과 블로그형이 조합된 구성으로 제공하고 있습니다.

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

<span style="color: rgb(22, 145, 121);">\[최신글 그룹 블럭 추가 화면\]</span>

블럭 추가 창의 '최신글 그룹' 탭을 눌러 최신글 그룹 블럭을 추가할 수 있습니다.

● 최신글 그룹 블럭 상세 설정하기

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

<span style="color: rgb(22, 145, 121);">\[최신글 그룹 블럭 설정 버튼 화면\]</span>

최신글 그룹 블럭 위에 마우스를 올리면 우측 상단에 블럭 편집 메뉴가 표시됩니다.

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

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

<span style="color: rgb(22, 145, 121);">\[최신글 그룹 블럭 상세설정창 화면\]</span>

최신글 그룹 블럭의 상세 설정창은 내용, 레이아웃, 배경 세 개의 탭메뉴로 구성되어 있습니다.

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

\- 내용

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

<span style="color: rgb(22, 145, 121);">\[최신글 그룹 블럭 상세설정 - 내용 설정 화면\]</span>

<span style="color: #636363;">게시판에 대한 기본적인 항목들을 설정합니다.</span>

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EC%88%9C%EC%84%9C-%EA%B2%8C%EC%8B%9C%ED%8C%90%EB%93%A4%EC%9D%98-%EC%88%9C" style="width: 100%;"><thead><tr><td style="width: 23.2739%;">항목</td><td style="width: 76.8453%;">설명</td></tr></thead><tbody><tr><td style="width: 23.2739%;">게시판 순서</td><td style="width: 76.8453%;">게시판들의 순서를 설정합니다. 마우스로 드래그 하여 순서를 이동할 수 있습니다.</td></tr><tr><td style="width: 23.2739%;">게시판 간격</td><td style="width: 76.8453%;">게시판과 게시판 사이의 간격을 설정합니다.</td></tr></tbody></table>

\- 레이아웃

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

<span style="color: rgb(22, 145, 121);">\[최신글 그룹 블럭 상세설정 - 레이아웃 설정 화면\]</span>

<table class="table table-bordered" 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%97%90-%EC%BB%A8%ED%85%90%EC%B8%A0%EA%B0%80-" style="width: 100%;"><thead><tr><td style="width: 22.8861%;">항목</td><td style="width: 77.1139%;">설명</td></tr></thead><tbody><tr><td style="width: 22.8861%;">너비</td><td style="width: 77.1139%;">블럭 안에 컨텐츠가 들어가는 영역의 기본 너비를 설정합니다.

- 본문 너비 : 글로벌 디자인 설정에서 적용한 본문폭 너비에 맞게 설정합니다.
- 채우기 : 컨텐츠 영역의 너비를 화면에 꽉 맞게 채웁니다.

</td></tr><tr><td style="width: 22.8861%;">좌우 여백</td><td style="width: 77.1139%;">블럭의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 22.8861%;">상단 여백</td><td style="width: 77.1139%;">블럭 상단의 여백을 설정합니다.</td></tr><tr><td style="width: 22.8861%;">하단 여백</td><td style="width: 77.1139%;">블럭 하단의 여백을 설정합니다.</td></tr><tr><td style="width: 22.8861%;">정렬</td><td style="width: 77.1139%;">텍스트의 정렬을 설정합니다.</td></tr></tbody></table>

\- 배경

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

<span style="color: rgb(22, 145, 121);">\[최신글 그룹 블럭 상세설정 - 배경 설정 화면\]</span>

블럭에 대한 배경을 설정합니다. 색 또는 이미지로 설정할 수 있습니다.

● 최신글 상세 설정하기

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

<span style="color: rgb(22, 145, 121);">\[최신글 설정 버튼 화면\]</span>

최신글 영역 위에 마우스를 올리면 우측 상단에 편집 메뉴가 표시됩니다.

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

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

<span style="color: rgb(22, 145, 121);">\[최신글 상세설정창 화면\]</span>

최신글의 상세 설정창은 내용, 디자인, 레이아웃, 배경 네 개의 탭메뉴로 구성되어 있습니다.

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

\- 내용

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

<span style="color: rgb(22, 145, 121);">\[최신글 상세설정 - 내용 설정 화면\]</span>

<span style="color: #636363;">게시판에 대한 기본적인 항목들을 설정합니다.</span>

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B2%8C%EC%8B%9C%ED%8C%90%C2%A0-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EC%97%B0%EB%8F%99-%3A-" style="width: 100%;"><thead><tr><td style="width: 21.8138%;">항목</td><td style="width: 78.1862%;">설명</td></tr></thead><tbody><tr><td style="width: 21.8138%;">게시판 </td><td style="width: 78.1862%;"><div>- 게시판 연동 : 연동할 게시판을 선택합니다.
- 페이지당 글 수 : 게시글을 몇 개씩 출력할 지 설정합니다.

</div></td></tr><tr><td style="width: 21.8138%;">게시판 요소</td><td style="width: 78.1862%;">게시판명과 더보기 버튼 표시 여부를 설정할 수 있습니다.

더보기 버튼을 눌렀을 때 어느 페이지로 이동할지 설정할 수 있습니다.

</td></tr><tr><td style="width: 21.8138%;">노출 항목</td><td style="width: 78.1862%;">목록에 표시해 줄 항목을 설정합니다.  
</td></tr><tr><td style="width: 21.8138%;">정렬</td><td style="width: 78.1862%;">게시글 정렬 순서를 설정합니다.</td></tr></tbody></table>

\- 디자인

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

<span style="color: rgb(22, 145, 121);">\[최신글 상세설정 - 디자인 설정 화면\]</span>

게시글 목록의 글자 색상, 배경색 등을 설정합니다.

<div id="bkmrk--47">  
</div><div id="bkmrk--48">  
</div>\- 레이아웃

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

<span style="color: rgb(22, 145, 121);">\[최신글 상세설정 - 레이아웃 설정 화면\]</span>

<table class="table table-bordered" 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" style="width: 100%;"><thead><tr><td style="width: 21.8135%;">항목</td><td style="width: 78.1865%;">설명</td></tr></thead><tbody><tr><td style="width: 21.8135%;">좌우 여백</td><td style="width: 78.1865%;">블럭의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 21.8135%;">상단 여백</td><td style="width: 78.1865%;">블럭 상단의 여백을 설정합니다.</td></tr><tr><td style="width: 21.8135%;">하단 여백</td><td style="width: 78.1865%;">블럭 하단의 여백을 설정합니다.</td></tr></tbody></table>

\- 배경

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

<div id="bkmrk-%5B%EC%B5%9C%EC%8B%A0%EA%B8%80-%EC%83%81%EC%84%B8%EC%84%A4%EC%A0%95---%EB%B0%B0%EA%B2%BD-%EC%84%A4%EC%A0%95-%ED%99%94%EB%A9%B4"><span style="color: rgb(22, 145, 121);">\[최신글 상세설정 - 배경 설정 화면\]</span></div>해당 최신글 영역의 배경을 설정합니다. 색 또는 이미지로 설정할 수 있습니다.

# 갤러리 블럭 다루기

갤러리 블럭은 여러 장의 이미지를 보여주기에 적합한 블럭으로 블럭 클릭시 이미지를 확대 표시합니다.

갤러리 블럭은 세가지 스타일의 디자인을 제공하고 있습니다.

갤러리 블럭 사용에 대한 자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

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

<div id="bkmrk--1">  
</div>[![dhbd-09-14-01.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-14-01.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-14-01.png)

<span style="color: rgb(22, 145, 121);">\[갤러리 블럭 추가 화면\]</span>

블럭 추가 창에서 '갤러리'탭을 누르면 갤러리 블럭 목록이 나옵니다.

원하는 디자인의 갤러리 블럭을 추가해 주세요.

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

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

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

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

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

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

갤러리 블럭의 상세 설정창은 내용, 디자인, 레이아웃, 배경 네개의 탭메뉴로 구성되어 있습니다.

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

● 내용

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

<span style="color: rgb(22, 145, 121);">\[갤러리 블럭 상세설정 - 내용 설정 화면\]</span>

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EC%A0%9C%EB%AA%A9-%EA%B0%A4%EB%9F%AC%EB%A6%AC%EC%9D%98-%EC%A0%9C%EB%AA%A9%EC%9D%84-%EC%84%A4%EC%A0%95" style="width: 100%;"><thead><tr><td style="width: 23.3929%;"><span style="color: #000000;">항목</span></td><td style="width: 76.7263%;"><span style="color: #000000;">설명</span></td></tr></thead><tbody><tr><td style="width: 23.3929%;"><span style="color: #000000;">제목</span></td><td style="width: 76.7263%;"><span style="color: #000000;">갤러리의 제목을 설정합니다.</span></td></tr><tr><td style="width: 23.3929%;"><span style="color: #000000;">갤러리 카테고리</span></td><td style="width: 76.7263%;"><span style="color: #000000;">이미지에 카테고리를 설정하여 검색 창에서 카테고리 별로 이미지를 확인할 수 있습니다.</span>  
<span style="color: #424242;">\*카테고리 설정 후 \[적용하기\]를 눌러야 이미지 수정 창에 반영됩니다.</span></td></tr><tr><td style="width: 23.3929%;">갤러리 요소</td><td style="width: 76.7263%;">이미지 검색 여부를 설정합니다.</td></tr><tr><td style="width: 23.3929%;">갤러리 이미지 목록  
</td><td style="width: 76.7263%;">이미지를 편집하거나 추가할 수 있습니다.  
</td></tr></tbody></table>

● 디자인

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

<span style="color: rgb(22, 145, 121);">\[갤러리 블럭 상세설정 - 디자인 설정 화면\]</span>

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B0%A4%EB%9F%AC%EB%A6%AC-%EA%B0%80%EB%A1%9C-%EA%B0%9C%EC%88%98-%3A-%ED%95%9C-" style="width: 100%;"><thead><tr><td style="width: 23.4825%;">항목</td><td style="width: 76.5175%;">설명</td></tr></thead><tbody><tr><td style="width: 23.4825%;">갤러리</td><td style="width: 76.5175%;">- 가로 개수 : 한 줄에 이미지를 몇 개 표시할 지 설정합니다.
- 페이지당 세로 개수 : 이미지 목록을 몇 줄로 표시할 지 설정합니다.
- 이미지 높이 : 이미지의 높이를 설정합니다.
- 간격 : 이미지 간의 간격을 설정합니다.

</td></tr><tr><td style="width: 23.4825%;">캡션</td><td style="width: 76.5175%;">이미지 제목과 설명의 글자 크기와 색상을 설정합니다.</td></tr><tr><td style="width: 23.4825%;">마우스오버</td><td style="width: 76.5175%;">- 효과 : 이미지 위에 마우스를 올렸을 때 어떤 효과를 보여줄 지 설정합니다.
- 오버레이 색상 : 이미지 위에 마우스를 올렸을 때 이미지 위에 오버레이 될 색상을 설정합니다.

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

● 레이아웃

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

<span style="color: rgb(22, 145, 121);">\[갤러리 블럭 상세설정 - 레이아웃 설정 화면\]</span>

<table class="table table-bordered" 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%97%90-%EC%BD%98%ED%85%90%EC%B8%A0%EA%B0%80-" style="width: 100%;"><thead><tr><td style="width: 22.6786%;">항목</td><td style="width: 77.4405%;">설명</td></tr></thead><tbody><tr><td style="width: 22.6786%;">너비</td><td style="width: 77.4405%;">블럭 안에 콘텐츠가 들어가는 영역의 기본 너비를 설정합니다.

본문 너비 : 글로벌 디자인 설정에서 적용한 본문폭 너비에 맞게 설정합니다.

- 채우기 : 콘텐츠 영역의 너비를 화면에 꽉 맞게 채웁니다.

</td></tr><tr><td style="width: 22.6786%;">좌우 여백</td><td style="width: 77.4405%;">블럭의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 22.6786%;">상단 여백</td><td style="width: 77.4405%;">블럭 상단의 여백을 설정합니다.</td></tr><tr><td style="width: 22.6786%;">하단 여백</td><td style="width: 77.4405%;">블럭 하단의 여백을 설정합니다.</td></tr><tr><td style="width: 22.6786%;">정렬</td><td style="width: 77.4405%;">텍스트의 정렬을 설정합니다.</td></tr></tbody></table>

● 배경

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

<span style="color: rgb(22, 145, 121);">\[갤러리 블럭 상세설정 - 배경 설정 화면\]</span>

블럭에 대한 배경을 설정합니다. 색 또는 이미지로 설정할 수 있습니다.

● 갤러리 이미지 추가하기

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

<span style="color: rgb(22, 145, 121);">\[갤러리 이미지 추가 화면\]</span>

이미지 목록 하단의 \[이미지 업로드\] 버튼을 눌러 이미지를 추가할 수 있습니다.

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

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

<span style="color: #333333;">● 갤러리 이미지 수정하기</span>

<span style="color: #333333;">  
</span>

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

<span style="color: rgb(22, 145, 121);">\[갤러리 이미지 수정 화면\]</span>

이미지 우측 상단의 \[편집\] 버튼을 통해 이미지를 수정할 수 있습니다.

<div id="bkmrk--40">  
</div><div id="bkmrk--41">[![dhbd-09-14-10.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-09-14-10.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-09-14-10.png)</div><div id="bkmrk--42">  
</div><div id="bkmrk-%5B%EA%B0%A4%EB%9F%AC%EB%A6%AC-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%84%A4%EC%A0%95-%ED%99%94%EB%A9%B4%5D"><span style="color: rgb(22, 145, 121);">\[갤러리 이미지 설정 화면\]</span></div><div id="bkmrk--43">  
</div><div id="bkmrk--44">  
</div><div id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EA%B0%A4%EB%9F%AC%EB%A6%AC-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A5%BC-%EB%B3%80"><div class="col-xl-10 col-lg-9"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 23.0058%;">항목</td><td style="width: 76.9942%;">설명</td></tr></thead><tbody><tr><td style="width: 23.0058%;">이미지</td><td style="width: 76.9942%;">갤러리 이미지를 변경합니다.</td></tr><tr><td style="width: 23.0058%;">제목</td><td style="width: 76.9942%;">해당 이미지에 대한 제목을 입력합니다.</td></tr><tr><td style="width: 23.0058%;">설명</td><td style="width: 76.9942%;">해당 이미지에 대한 설명을 입력합니다.  
</td></tr></tbody></table>

</div></div></div>각 항목을 입력한 뒤 \[적용하기\]를 눌러줍니다.

블럭 상세 설정창 하단의 \[적용하기\] 버튼을 눌러주어야 최종 적용됩니다.

# 입력폼 블럭 다루기

입력폼 블럭은 접수, 설문 등을 위해 입력 항목을 설정하고 사용자에게 입력 폼을 제공하는 기능의 블럭입니다.

입력받은 정보는 메일 및 관리자페이지의 콘텐츠 관리메뉴에서 확인이 가능합니다.

입력폼 블럭은 일반 폼, 이미지와 같이 있는 폼, 커스텀 입력폼을 제공합니다.

입력폼 블럭 사용에 대한 자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

[https://docs.dothome.co.kr/books/09/page/15d4e](https://docs.dothome.co.kr/books/09/page/15d4e)

<div id="bkmrk--1">  
</div>입력폼의 기능, 디자인을 설정합니다.

접수된 입력폼 데이터 관리는 [<span style="color: #286aef;">**입력폼 관리하기** &gt;</span>](https://docs.dothome.co.kr/books/04/page/c20ad) 를 참고해 주세요.

**● 입력폼 추가하기**

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

<span style="color: rgb(22, 145, 121);">\[입력폼 추가 화면\]</span>

블럭 추가 창에서 \[입력폼\]탭을 누르면 입력폼 블럭 목록이 나옵니다.

원하는 디자인의 입력폼 블럭을 추가해 주세요.

커스텀 입력폼은 입력폼 영역 좌측 또는 우측에 원하는 요소 블럭을 추가할 수 있는 블럭입니다.

**● 입력폼 상세 설정하기**

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

<span style="color: rgb(22, 145, 121);">\[입력폼 설정 버튼 화면\]</span>

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

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

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

<span style="color: rgb(22, 145, 121);">\[입력폼 상세설정 화면\]</span>

입력폼 블럭의 상세 설정창은 내용, 디자인, 레이아웃, 배경 네개의 탭메뉴로 구성되어 있습니다.

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

**● 기본**

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

<span style="color: rgb(22, 145, 121);">\[입력폼 상세설정 - 내용 설정 화면\]</span>

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EB%82%B4%EC%9A%A9-%EC%9E%85%EB%A0%A5%ED%8F%BC-%ED%95%AD%EB%AA%A9-%EC%9E%85%EB%A0%A5%ED%8F%BC-%ED%95%AD%EB%AA%A9%EC%9D%84" style="width: 100%; height: 456.108px;"><thead><tr style="height: 41.6903px;"><td style="width: 25.5033%; height: 41.6903px;">항목

</td><td style="width: 74.4859%; height: 41.6903px;">내용

</td></tr></thead><tbody><tr style="height: 41.6903px;"><td style="width: 25.5033%; height: 41.6903px;">입력폼 항목  
</td><td style="width: 74.4859%; height: 41.6903px;">입력폼 항목을 편집하거나 추가할 수 있습니다.  
</td></tr><tr style="height: 41.6903px;"><td style="width: 25.5033%; height: 41.6903px;">폼 제목  
</td><td style="width: 74.4859%; height: 41.6903px;">관리자 페이지에 표시해줄 입력폼 제목을 입력합니다.  
</td></tr><tr style="height: 41.6903px;"><td style="width: 25.5033%; height: 41.6903px;">수신 메일  
</td><td style="width: 74.4859%; height: 41.6903px;">입력폼 작성시 알림을 받을 메일을 입력해주세요  
</td></tr><tr style="height: 58.4943px;"><td style="width: 25.5033%; height: 58.4943px;">권한

</td><td style="width: 74.4859%; height: 58.4943px;"><span style="color: #000000;">입력폼 작성 권한을 설정할 수 있습니다.</span>  
<span style="color: #424242;">\*모든 방문자 선택 시 구글 캡챠를 사용해주시길 바랍니다.</span></td></tr><tr style="height: 47.2869px;"><td style="width: 25.5033%; height: 47.2869px;">CAPTCHA 사용하기</td><td style="width: 74.4859%; height: 47.2869px;">구글 캡챠 설정이 가능하며, 구글 캡챠 연동 후 사용이 가능합니다. **[<span style="color: #3c99f6;">구글 캡챠 연동하기&gt;</span>](https://docs.dothome.co.kr/books/02/page/63dc7)**  
</td></tr><tr style="height: 41.6903px;"><td style="width: 25.5033%; height: 41.6903px;">작성 완료 메세지 사용하기  
</td><td style="width: 74.4859%; height: 41.6903px;">입력폼 작성 완료 시 보여줄 완료 메세지를 설정할 수 있습니다.  
</td></tr><tr style="height: 58.4943px;"><td style="width: 25.5033%; height: 58.4943px;">작성 완료 후 페이지 이동 사용하기  
</td><td style="width: 74.4859%; height: 58.4943px;">입력폼 작성 완료 후 특정 페이지로 이동시킬 수 있습니다.  
</td></tr><tr style="height: 41.6903px;"><td style="width: 25.5033%; height: 41.6903px;">약관 동의 사용하기  
</td><td style="width: 74.4859%; height: 41.6903px;">약관 동의 시에만 입력폼이 접수되도록 설정할 수 있습니다.  
</td></tr><tr style="height: 41.6903px;"><td style="width: 25.5033%; height: 41.6903px;">접수 기간 지정하기  
</td><td style="width: 74.4859%; height: 41.6903px;">선택한 기간 내에만 입력폼이 접수되도록 설정할 수 있습니다.  
</td></tr></tbody></table>

**● 디자인**

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

<span style="color: rgb(22, 145, 121);">\[입력폼 상세설정 - 디자인 설정 화면\]</span>

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EC%9E%85%EB%A0%A5%ED%8F%BC-%EC%9E%85%EB%A0%A5%ED%8F%BC-%ED%95%AD%EB%AA%A9%2C-%EC%84%A4%EB%AA%85" style="width: 100%;"><thead><tr><td style="width: 21.215%;"><span style="color: #000000;">항목  
</span></td><td style="width: 78.7742%;"><span style="color: #000000;">설명  
</span></td></tr></thead><tbody><tr><td style="width: 21.215%;"><span style="color: #000000;">입력폼  
</span></td><td style="width: 78.7742%;"><span style="color: #000000;">입력폼 항목, 설명에 대한 글자 크기, 색상을 설정합니다.  
</span></td></tr><tr><td style="width: 21.215%;"><span style="color: #000000;">버튼  
</span></td><td style="width: 78.7742%;"><span style="color: #000000;">작성하기 버튼의 디자인을 설정합니다.</span>  
</td></tr></tbody></table>

**● 레이아웃**

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

<span style="color: rgb(22, 145, 121);">\[입력폼 상세설정 - 레이아웃 설정 화면\]</span>

<table class="table table-bordered" 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" style="width: 100%;"><thead><tr><td style="width: 20.8587%;"><span style="color: #000000;">항목  
</span></td><td style="width: 79.1304%;"><span style="color: #000000;">설명  
</span></td></tr></thead><tbody><tr><td style="width: 20.8587%;"><span style="color: #000000;">좌우 여백  
</span></td><td style="width: 79.1304%;"><span style="color: #000000;">블럭의 좌우 여백을 설정합니다.  
</span></td></tr><tr><td style="width: 20.8587%;"><span style="color: #000000;">상단 여백  
</span></td><td style="width: 79.1304%;"><span style="color: #000000;">블럭 상단의 여백을 설정합니다.  
</span></td></tr><tr><td style="width: 20.8587%;"><span style="color: #000000;">하단 여백  
</span></td><td style="width: 79.1304%;"><span style="color: #000000;">블럭 하단의 여백을 설정합니다.  
</span></td></tr><tr><td style="width: 20.8587%;"><span style="color: #000000;">정렬  
</span></td><td style="width: 79.1304%;"><span style="color: #000000;">텍스트, 버튼의 정렬을 설정합니다.</span>  
</td></tr></tbody></table>

**● 배경**

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

<span style="color: rgb(22, 145, 121);">\[입력폼 상세설정 - 배경 설정 화면\]</span>

블럭에 대한 배경을 설정합니다. 색 또는 이미지로 설정할 수 있습니다.

**● 입력폼 항목 편집하기**

[![inputform_block_08.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/inputform-block-08.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/inputform-block-08.png)

<span style="color: rgb(22, 145, 121);">\[입력폼 항목 수정 버튼 화면\]</span>

입력폼 항목 우측의 편집 버튼을 통해 수정할 수 있습니다.

[![inputform_block_09.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/inputform-block-09.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/inputform-block-09.png)

<span style="color: rgb(22, 145, 121);">\[입력폼 항목 편집 화면\]</span>

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EC%A0%9C%EB%AA%A9-%EC%9E%85%EB%A0%A5-%ED%95%AD%EB%AA%A9%EC%9D%98-%EC%A0%9C%EB%AA%A9%EC%9D%84-" style="width: 100%;"><thead><tr><td style="width: 20.8569%;">항목  
</td><td style="width: 79.1322%;">설명  
</td></tr></thead><tbody><tr><td style="width: 20.8569%;">제목  
</td><td style="width: 79.1322%;">입력 항목의 제목을 입력해주세요.  
</td></tr><tr><td style="width: 20.8569%;">설명  
</td><td style="width: 79.1322%;">입력 항목에 대한 설명이 필요한 경우 입력해주세요.  
</td></tr><tr><td style="width: 20.8569%;">필수 입력  
</td><td style="width: 79.1322%;">체크시 해당 입력 항목이 필수 입력 항목으로 설정됩니다.  
</td></tr><tr><td style="width: 20.8569%;">입력 형식  
</td><td style="width: 79.1322%;">입력 형식을 선택합니다.

- 단문형 : 한 줄 정도의 간단한 답변을 입력 받을 때 적합합니다.
- 장문형 : 여러 줄 이상의 내용을 입력 받을 때 적합합니다.
- 단일 선택형 : 옵션이 라디오 버튼으로 표시되어 하나의 옵션만 선택할 수 있습니다.
- 다중 선택형 : 옵션이 체크 박스로 표시되어 여러개의 옵션을 다중 선택할 수 있습니다.
- 목록 선택형 : 셀렉트 박스로 표시되어 하나의 옵션만 선택할 수 있습니다.
- 날짜 : 날짜 선택 기능을 통해 날짜를 입력받을 수 있습니다.
- 주소 : 주소 검색 기능을 통해 주소를 입력받을 수 있습니다.
- 전화번호 : 전화번호 양식에 맞게 전화번호를 입력받을 수 있습니다.
- 이메일 : 이메일 양식에 맞게 이메일을 입력받을 수 있습니다.
- 파일 업로드 : 파일 선택기를 통해 파일을 업로드할 수 있습니다.

</td></tr><tr><td style="width: 20.8569%;">옵션  
</td><td style="width: 79.1322%;">단일 선택형, 다중 선택형, 목록 선택형의 옵션을 편집할 수 있습니다.  
</td></tr></tbody></table>

각 항목을 입력한 뒤 적용하기를 눌러줍니다.

블럭 상세 설정 창 하단의 \[적용하기\] 버튼을 눌러주어야 최종 적용됩니다.

**● 커스텀 입력폼 블럭 요소 블럭 추가 및 편집하기**

[![inputform_block_10.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/inputform-block-10.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/inputform-block-10.png)

<span style="color: rgb(22, 145, 121);">\[커스텀 입력폼 요소 블럭 추가 화면\]</span>

빈 플레임 영역에 요소 블럭을 추가, 삭제할 수 있습니다.

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

<span style="color: rgb(22, 145, 121);">\[커스텀 입력폼 요소블럭 추가된 화면\]</span>

추가된 요소의 위치를 이동하거나 상세 설정을 할 수 있습니다.

요소 블럭의 편집 방법은 각 매뉴얼에서 확인하세요

**[<span style="color: #4c7ff2;">요소 블럭 다루기&gt;</span>](https://docs.dothome.co.kr/books/10)**

# 디데이 블럭 다루기

디데이 블럭은 지정한 날짜에 대해 카운트다운을 보여주는 기능의 블럭입니다.

닷홈빌더는 두가지 디자인의 디데이 블럭을 제공하고 있습니다.

디데이 블럭 사용에 대한 자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

[https://docs.dothome.co.kr/books/09/page/854d6](https://docs.dothome.co.kr/books/09/page/854d6)

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

<span style="color: rgb(22, 145, 121);">\[디데이 블럭 추가 화면\]</span>

블럭 추가 창에서 '디데이'탭을 누르면 디데이 블럭 목록이 나옵니다.

원하는 디자인의 디데이 블럭을 추가해 주세요.

##### **● 디데이 블럭 상세 설정하기**

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

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

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

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

[![dday_block_03.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dday-block-03.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dday-block-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-%EB%94%94%EB%8D%B0%EC%9D%B4-%EB%94%94%EB%8D%B0%EC%9D%B4-%EB%82%A0%EC%A7%9C%EB%A5%BC-%EC%84%A4%EC%A0%95"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 18.5921%;"><span style="color: #000000;">항목</span></td><td style="width: 81.3971%;"><span style="color: #000000;">설명</span></td></tr></thead><tbody><tr><td style="width: 18.5921%;"><span style="color: #000000;">디데이</span></td><td style="width: 81.3971%;"><span style="color: #000000;">디데이 날짜를 설정합니다.</span></td></tr><tr><td style="width: 18.5921%;">링크</td><td style="width: 81.3971%;">링크 사용하기에 체크시 디데이 카운트다운이 종료되었을 때 다른 페이지로 이동되도록 설정할 수 있습니다.</td></tr></tbody></table>

</div></div><span style="color: #636363;">  
</span>

**\[디자인\]**

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EB%94%94%EB%8D%B0%EC%9D%B4-%EA%B8%80%EC%9E%90-%ED%81%AC%EA%B8%B0-%EB%94%94%EB%8D%B0%EC%9D%B4-"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 19.2208%;">항목</td><td style="width: 80.8875%;">설명</td></tr></thead><tbody><tr><td style="width: 19.2208%;">디데이 글자 크기</td><td style="width: 80.8875%;"><div>디데이 글자 크기를 설정할 수 있습니다.</div></td></tr><tr><td style="width: 19.2208%;">디데이 글자 색상</td><td style="width: 80.8875%;">디데이 글자 색상을 설정할 수 있습니다.</td></tr></tbody></table>

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

<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%97%90-%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: 19.665%;">항목</td><td style="width: 80.3241%;">설명</td></tr></thead><tbody><tr><td style="width: 19.665%;">너비</td><td style="width: 80.3241%;">블럭 안에 컨텐츠가 들어가는 영역의 기본 너비를 설정합니다.

본문 너비 : 글로벌 디자인 설정에서 적용한 본문폭 너비에 맞게 설정합니다

채우기 : 컨텐츠 영역의 너비를 화면에 꽉 맞게 채웁니다.

</td></tr><tr><td style="width: 19.665%;">좌우 여백</td><td style="width: 80.3241%;">블럭의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 19.665%;">상단 여백</td><td style="width: 80.3241%;">블럭 상단의 여백을 설정합니다.</td></tr><tr><td style="width: 19.665%;">하단 여백</td><td style="width: 80.3241%;">블럭 하단의 여백을 설정합니다.</td></tr><tr><td style="width: 19.665%;">정렬</td><td style="width: 80.3241%;">텍스트, 버튼의 정렬을 설정합니다.</td></tr><tr><td style="width: 19.665%;">수직 정렬</td><td style="width: 80.3241%;">프레임이 2단으로 나뉘어 있는 디데이 블럭은 프레임박스간의 수직 정렬을 설정할 수 있습니다.</td></tr></tbody></table>

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

블럭에 대한 배경을 설정합니다. 색 또는 이미지로 설정할 수 있습니다.

##### **● 디데이 블럭 요소 편집하기**

디데이 블럭은 텍스트, 이미지, 버튼, 여백 등의 요소 블럭들로 구성되어있습니다.

이 요소들을 새로 추가하거나 복제, 삭제하는 것은 불가하지만, 위치를 변경하거나 내용을 수정할 수 있습니다.

요소 블럭들의 편집 방법은 각 매뉴얼에서 확인하세요

[<span style="color: #4c7ff2;">이미지 블럭 다루기&gt;</span>](https://docs.dothome.co.kr/books/10/page/efe93)

[<span style="color: #4c7ff2;">텍스트 블럭 다루기 &gt; </span>](https://docs.dothome.co.kr/books/10/page/55a7c)

[<span style="color: #4c7ff2;">여백 블럭 다루기&gt;</span>](https://docs.dothome.co.kr/books/10/page/6974c)

[<span style="color: #286aef;">버튼 블럭 다루기&gt;</span>](https://docs.dothome.co.kr/books/10/page/8d5e9)

# 캘린더 블럭 다루기

캘린더 블럭은 캘린더를 바탕으로 일정관리 기능을 제공하는 블럭입니다.

일반 캘린더 : 달력에 일정을 등록하고 표시해 줍니다. 일정 등록 및 수정은 관리자 페이지의 일정 관리 또는 캘린더 블럭이 추가된 실제 페이지에서 할 수 있습니다.

구글 캘린더 : 구글 캘린더와 연동하여 구글 캘린더에 등록되어 있는 일정을 표시해 줍니다. 닷홈빌더에서는 등록되어 있는 일정만 표시해 주며, 일정 등록 및 수정은 구글의 캘린더 관리 페이지에서 할 수 있습니다.

일반 캘린더 블럭 사용에 대한 자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

[https://docs.dothome.co.kr/books/09/page/816b1](https://docs.dothome.co.kr/books/09/page/816b1)

캘린더 블럭의 기능, 디자인을 설정합니다.

<span style="color: #333333;">일정 추가 및 관리는 </span>**[<span style="color: #3c99f6;">일정 관리하기 &gt;</span><span style="color: #333333;"> </span>](https://docs.dothome.co.kr/books/04/page/149e9)**<span style="color: #333333;">를 참고해 주세요.</span>

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

<span style="color: rgb(22, 145, 121);">\[캘린더 블럭 추가 화면\]</span>

블럭 추가 창에서 \[캘린더\]탭을 누르면 캘린더 블럭 목록이 나옵니다.

첫번째에 있는 캘린더 블럭을 추가해 주세요.

**● 캘린더 블럭 상세 설정하기**

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

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

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

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

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

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

캘린더 블록의 상세 설정 창은 ‘내용’, ‘디자인’, ‘레이아웃’, ‘배경’ 네 가지 탭으로 구성되어 있습니다.

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

**● 내용**

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

<span style="color: rgb(22, 145, 121);">\[캘린더 블럭 상세설정 - 내용 설정 화면\]</span>

캘린더에 대한 기본적인 항목들을 설정합니다.

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EC%BA%98%EB%A6%B0%EB%8D%94-%EC%BA%98%EB%A6%B0%EB%8D%94-%EC%97%B0%EB%8F%99-%3A-%EC%97%B0" style="width: 100%;"><thead><tr><td style="width: 18.3591%;">항목</td><td style="width: 81.63%;">설명</td></tr></thead><tbody><tr><td style="width: 18.3591%;">캘린더</td><td style="width: 81.63%;">캘린더 연동 : 연동할 캘린더를 선택합니다. (연동할 캘린더가 없는 경우 새로 생성됩니다.)

제목 : 캘린더 연동 목록과 관리자페이지에 표시해 줄 캘린더 제목을 설정합니다.

</td></tr><tr><td style="width: 18.3591%;">일정 분류  
</td><td style="width: 81.63%;">일정 분류(카테고리)를 관리합니다.

분류명, 글자색, 배경색을 설정할 수 있습니다.

</td></tr><tr><td style="width: 18.3591%;">권한</td><td style="width: 81.63%;">일정 열람과 작성 권한을 설정합니다.

\*권한을 '선택 회원 그룹'으로 선택할 경우 원하는 회원 그룹을 지정할 수 있습니다.

</td></tr><tr><td style="width: 18.3591%;">표시 항목</td><td style="width: 81.63%;">캘린더에 표시해 줄 항목을 설정합니다.

일/주/월/탭 표시 : 일/주/월/탭 변경 버튼을 표시 여부를 설정합니다.

주말 표시 : 주말 구분을 표시 여부를 설정합니다.

대한민국 공휴일 표시 : 대한민국 공휴일을 표시 여부를 설정합니다.

이전/다음 버튼 표시 : 달력의 월 또는 년 이동 버튼을 표시 여부를 설정합니다.

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

**● 디자인**

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

<span style="color: rgb(22, 145, 121);">\[캘린더 블럭 상세설정 - 디자인 설정 화면\]</span>

캘린더의 줄 높이, 색상 등을 설정합니다.

**● 레이아웃**

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

<span style="color: rgb(22, 145, 121);">\[캘린더 블럭 상세설정 - 레이아웃 설정 화면\]</span>

<table class="table table-bordered" 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%97%90-%EC%BD%98%ED%85%90%EC%B8%A0%EA%B0%80-" style="width: 100%; height: 282.301px;"><thead><tr style="height: 41.6903px;"><td style="width: 19.9351%; height: 41.6903px;">항목</td><td style="width: 80.1732%; height: 41.6903px;">설명</td></tr></thead><tbody><tr style="height: 115.54px;"><td style="width: 19.9351%; height: 115.54px;">너비</td><td style="width: 80.1732%; height: 115.54px;">블럭 안에 콘텐츠가 들어가는 영역의 기본 너비를 설정합니다.

본문 너비 : 글로벌 디자인 설정에서 적용한 본문폭 너비에 맞게 설정합니다.

채우기 : 콘텐츠 영역의 너비를 화면에 꽉 맞게 채웁니다.

</td></tr><tr style="height: 41.6903px;"><td style="width: 19.9351%; height: 41.6903px;">좌우 여백</td><td style="width: 80.1732%; height: 41.6903px;">블럭의 좌우 여백을 설정합니다.</td></tr><tr style="height: 41.6903px;"><td style="width: 19.9351%; height: 41.6903px;">상단 여백</td><td style="width: 80.1732%; height: 41.6903px;">블럭 상단의 여백을 설정합니다.</td></tr><tr style="height: 41.6903px;"><td style="width: 19.9351%; height: 41.6903px;">하단 여백</td><td style="width: 80.1732%; height: 41.6903px;">블럭 하단의 여백을 설정합니다.</td></tr></tbody></table>

**● 배경**

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

<span style="color: rgb(22, 145, 121);">\[캘린더 블럭 상세설정 - 배경 설정 화면\]</span>

블럭에 대한 배경을 설정합니다. 색 또는 이미지로 설정할 수 있습니다.

# 구글 캘린더 블럭 다루기

캘린더 블럭은 캘린더를 바탕으로 일정관리 기능을 제공하는 블럭입니다.

일반 캘린더 : 달력에 일정을 등록하고 표시해 줍니다. 일정 등록 및 수정은 관리자 페이지의 일정 관리 또는 캘린더 블럭이 추가된 실제 페이지에서 할 수 있습니다.

구글 캘린더 : 구글 캘린더와 연동하여 구글 캘린더에 등록되어 있는 일정을 표시해 줍니다. 닷홈빌더에서는 등록되어 있는 일정만 표시해 주며, 일정 등록 및 수정은 구글의 캘린더 관리 페이지에서 할 수 있습니다.

구글 캘린더 블럭 사용에 대한 자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

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

구글 캘린더 블럭을 사용하기 위해서는 구글 캘린더 API 등록이 필요합니다.

구글 캘린더 API를 먼저 연동해 주세요.

**[<span style="color: #286aef;">구글 캘린더 API 연동하기&gt;</span>](https://docs.dothome.co.kr/books/02/page/api-R5K)**

[<span style="color: #286aef;">  
</span>](https://builder20.dothome.co.kr/manual/info/162)

구글 캘린더 블럭의 일정 등록 및 관리는 구글 캘린더 사이트에서 관리할 수 있습니다.

[  ](https://builder20.dothome.co.kr/manual/info/162)

[![google_cal_01.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/google-cal-01.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/google-cal-01.png)[  ](https://builder20.dothome.co.kr/manual/info/162)

<span style="color: rgb(22, 145, 121);">\[구글 캘린더 블럭 추가 화면\]</span>

블럭 추가 창에서 \[캘린더\]탭을 누르면 캘린더 블럭 목록이 나옵니다.

두 번째에 있는 구글 캘린더 블럭을 추가해 주세요.

##### **● 구글 캘린더 블럭 상세 설정하기**

[![google_cal_02.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/google-cal-02.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/google-cal-02.png)

<span style="color: rgb(22, 145, 121);">\[구글 캘린더 블럭 설정 버튼 화면\]</span>

구글 캘린더 블럭 위에 마우스를 올리면 우측 상단에 블럭 편집 메뉴가 표시됩니다.

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

[![google_cal_03.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/google-cal-03.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/google-cal-03.png)

<span style="color: rgb(22, 145, 121);">\[구글 캘린더 블럭 상세설정 화면\]</span>

구글 캘린더 블록의 상세 설정 창은 ‘내용’, ‘디자인’, ‘레이아웃’, ‘배경’ 네 가지 탭으로 구성되어 있습니다.

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

**- 내용**

[![google_cal_04.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/google-cal-04.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/google-cal-04.png)

<span style="color: rgb(22, 145, 121);">\[구글 캘린더 블럭 상세설정 - 내용 설정 화면\]</span>

캘린더에 대한 기본적인 항목들을 설정합니다.

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EC%BA%98%EB%A6%B0%EB%8D%94-id-%EA%B5%AC%EA%B8%80-%EC%BA%98%EB%A6%B0%EB%8D%94%EB%8A%94" style="width: 100%;"><thead><tr><td style="width: 17.7649%;">항목</td><td style="width: 82.2242%;">설명</td></tr></thead><tbody><tr><td style="width: 17.7649%;">캘린더 ID</td><td style="width: 82.2242%;">구글 캘린더는 구글 API를 연결하여 사용해야 하기 때문에 연결을 한 번 더 확인하는 항목입니다.

자세한 사항은 메뉴얼 하단을 참고해주세요.

</td></tr><tr><td style="width: 17.7649%;">표시 항목</td><td style="width: 82.2242%;">캘린더에 표시해 줄 항목을 설정합니다.

- 일/주/월/탭 표시 : 일/주/월/탭 변경 버튼을 표시 여부를 설정합니다.
- 주말 표시 : 주말 구분을 표시 여부를 설정합니다.
- 대한민국 공휴일 표시 : 대한민국 공휴일을 표시 여부를 설정합니다.
- 이전/다음 버튼 표시 : 달력의 월 또는 년 이동 버튼을 표시 여부를 설정합니다.

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

**- 디자인**

[![google_cal_05.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/google-cal-05.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/google-cal-05.png)

<span style="color: rgb(22, 145, 121);">\[구글 캘린더 블럭 상세설정 - 디자인 설정 화면\]</span>

캘린더 줄 높이, 색상 등을 설정합니다

**- 레이아웃**

[![google_cal_06.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/google-cal-06.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/google-cal-06.png)

<span style="color: rgb(22, 145, 121);">\[구글 캘린더 블럭 상세설정 - 레이아웃 설정 화면\]</span>

<table class="table table-bordered" 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%97%90-%EC%BB%A8%ED%85%90%EC%B8%A0%EA%B0%80-" style="width: 100%;"><thead><tr><td style="width: 19.0734%;">항목</td><td style="width: 80.9158%;">설명</td></tr></thead><tbody><tr><td style="width: 19.0734%;">너비</td><td style="width: 80.9158%;">블럭 안에 컨텐츠가 들어가는 영역의 기본 너비를 설정합니다.  
  
본문 너비 : 글로벌 디자인 설정에서 적용한 본문폭 너비에 맞게 설정합니다.  
채우기 : 컨텐츠 영역의 너비를 화면에 꽉 맞게 채웁니다.</td></tr><tr><td style="width: 19.0734%;">좌우 여백</td><td style="width: 80.9158%;">블럭의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 19.0734%;">상단 여백</td><td style="width: 80.9158%;">블럭의 상단 여백을 설정합니다.  
</td></tr><tr><td style="width: 19.0734%;">하단 여백</td><td style="width: 80.9158%;">블럭의 하단 여백을 설정합니다.  
</td></tr></tbody></table>

**- 배경**

[![google_cal_07.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/google-cal-07.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/google-cal-07.png)

<span style="color: rgb(22, 145, 121);">\[구글 캘린더 블럭 상세설정 - 배경 설정 화면\]</span>

블럭에 대한 배경을 설정합니다. 색 또는 이미지로 설정할 수 있습니다

##### **<span id="bkmrk-%E2%97%8F%C2%A0-%EA%B5%AC%EA%B8%80-%EC%BA%98%EB%A6%B0%EB%8D%94-id-%EC%9E%85%EB%A0%A5%ED%95%98%EA%B8%B0-1">● 구글 캘린더 ID 입력하기</span>**  


**1. 구글 캘린더 사이트로 이동하여 로그인 및 가입을 진행합니다.**

**[<span style="color: #286aef;">구글 캘린더 바로 가기 &gt;</span>](https://calendar.google.com/)**

구글 계정이 있는 경우 구글 계정으로 로그인하시고, 계정이 없는 경우 회원가입 후 로그인합니다.

<div id="bkmrk--34">  
</div><div id="bkmrk--35">  
</div>**2. 캘린더 ID 확인하기**

우측 상단의 설정 버튼을 눌러주세요.

[![google_cal_08.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/google-cal-08.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/google-cal-08.png)

<span style="color: rgb(22, 145, 121);">\[구글 캘린더 ID 확인 화면\]</span>

<div id="bkmrk--17"></div><div id="bkmrk-%EB%82%B4-%EC%BA%98%EB%A6%B0%EB%8D%94%EC%9D%98-%EC%84%A4%EC%A0%95%EC%9D%98-%EA%B3%84%EC%A0%95%EB%AA%85%EC%9D%84-%EB%88%8C%EB%9F%AC%EC%A3%BC%EC%8B%A0">내 캘린더의 설정의 계정명을 눌러주신 뒤, 일정의 액세스 권한을 눌러주세요.</div><div id="bkmrk-%EA%B3%B5%EA%B0%9C-%EC%82%AC%EC%9A%A9-%EC%84%A4%EC%A0%95%EC%97%90-%EC%B2%B4%ED%81%AC%ED%95%B4-%EC%A3%BC%EC%84%B8%EC%9A%94.">공개 사용 설정에 체크해 주세요.</div><div id="bkmrk--18"></div><div id="bkmrk--40">  
</div><div id="bkmrk--41">[![google_cal_09.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/google-cal-09.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/google-cal-09.png)</div><div id="bkmrk--43"></div><div id="bkmrk--21"></div><div id="bkmrk-%5B%EA%B5%AC%EA%B8%80-%EC%BA%98%EB%A6%B0%EB%8D%94-id-%ED%99%95%EC%9D%B8-%ED%99%94%EB%A9%B4%5D-1"><span style="color: rgb(22, 145, 121);">\[구글 캘린더 ID 확인 화면\]</span></div><div id="bkmrk--44">  
</div><div id="bkmrk--45">  
</div><div id="bkmrk-%EB%8B%A4%EC%8B%9C-%EC%A2%8C%EC%B8%A1-%EB%A9%94%EB%89%B4%EC%97%90%EC%84%9C-%EC%BA%98%EB%A6%B0%EB%8D%94-%ED%86%B5%ED%95%A9%EC%9D%84-%EB%88%84">다시 좌측 메뉴에서 캘린더 통합을 누른 뒤, 캘린더 통합의 캘린더 ID를 복사해 주세요.</div><div id="bkmrk--22"></div><div id="bkmrk--46">  
</div><div id="bkmrk--47">[![google_cal_10.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/google-cal-10.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/google-cal-10.png)</div><div id="bkmrk--48">  
</div><div id="bkmrk-%5B%EA%B5%AC%EA%B8%80-%EC%BA%98%EB%A6%B0%EB%8D%94-id-%ED%99%95%EC%9D%B8-%ED%99%94%EB%A9%B4%5D-2"><span style="color: rgb(22, 145, 121);">\[구글 캘린더 ID 확인 화면\]</span></div><div id="bkmrk--50">  
</div><div id="bkmrk--51">  
</div><div id="bkmrk-3.-%EC%BA%98%EB%A6%B0%EB%8D%94-id-%EC%9E%85%EB%A0%A5%ED%95%98%EA%B8%B0">**3. 캘린더 ID 입력하기**</div><div id="bkmrk--23"></div><div id="bkmrk-%EB%B3%B5%EC%82%AC%ED%95%9C-%EC%BA%98%EB%A6%B0%EB%8D%94-id%EB%A5%BC-%EC%83%81%EC%84%B8-%EC%84%A4%EC%A0%95%EC%B0%BD%EC%9D%98-">복사한 캘린더 ID를 상세 설정창의 캘린더 ID에 입력해 주세요.</div><div id="bkmrk--25"></div><div id="bkmrk--52">  
</div><div id="bkmrk--53">[![google_cal_11.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/google-cal-11.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/google-cal-11.png)</div><div id="bkmrk--54">  
</div><div id="bkmrk-%5B%EA%B5%AC%EA%B8%80-%EC%BA%98%EB%A6%B0%EB%8D%94-%EB%B8%94%EB%9F%AD%EC%97%90-id-%EC%9E%85%EB%A0%A5-%ED%99%94%EB%A9%B4"><span style="color: rgb(22, 145, 121);">\[구글 캘린더 블럭에 ID 입력 화면\]</span></div><div id="bkmrk--55"></div>

# 코드 블럭 다루기

코드 블럭이란 블럭 영역 안에 HTML, CSS, 스크립트 코드를 직접 작성할 수 있는 블럭입니다.

직접 코드를 입력함으로서 자신만의 디자인 또는 퍼블리싱 블럭을 만들 수 있습니다.

코드 블럭 사용에 대한 자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

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

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

<span style="color: rgb(22, 145, 121);">\[코드 블럭 추가 화면\]</span>

블럭 추가 창에서 '코드'탭을 누르면 코드 블럭이 나옵니다.

블럭을 클릭하여 추가해 주세요.

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

<span style="color: rgb(22, 145, 121);">\[코드 편집하기 버튼 화면\]</span>

코드 블럭 위에 마우스를 올려서 \[코드 편집하기\] 버튼을 클릭하여 코드 작성이 가능합니다.

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

<span style="color: rgb(45, 194, 107);">\[코드 입력창 화면\]</span>

코드 입력창에서 미리보기 버튼을 누르면 새 창에서 작성한 내용을 확인할 수 있습니다.

미리보기는 전체 페이지가 아닌 작성된 코드 블럭의 내용만 확인이 가능합니다.

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

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

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

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

**- 배경**

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

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

코드 블럭 상세 설정 창에서 블럭에 대한 배경을 설정합니다. 색 또는 이미지로 설정할 수 있습니다.