# 07. 메뉴 & 서브메뉴 다루기

# 메인 메뉴 디자인 변경하기

닷홈빌더에서는 메인메뉴의 디자인으로 몇가지 상단 메뉴, 좌측 메뉴를 제공하고 있습니다.  
  
\[디자인 편집\] - 메뉴 영역의 \[메뉴 디자인 변경\] 버튼을 이용해서 변경할 수 있습니다.

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

[https://docs.dothome.co.kr/books/07/page/ec895](https://docs.dothome.co.kr/books/07/page/ec895)

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

메뉴 영역 위에 마우스를 올리면 우측에 편집 버튼이 표시됩니다.

첫 번째에 있는 \[디자인 수정\] 버튼을 클릭하여 디자인 선택창을 열어줍니다.

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

원하는 디자인을 클릭하면 해당 디자인으로 메뉴가 변경됩니다.

**메뉴 레이아웃 안내**

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EB%82%B4%EC%9A%A9-%EC%83%81%EB%8B%A8-%EB%A9%94%EB%89%B4-%EB%A9%94%EB%89%B4%EA%B0%80-%EC%83%81%EB%8B%A8%EC%97%90-" style="width: 100%;"><thead><tr><td style="width: 23.9882%;">항목

</td><td style="width: 76.131%;">내용</td></tr></thead><tbody><tr><td style="width: 23.9882%;">상단 메뉴</td><td style="width: 76.131%;">메뉴가 상단에 있는 디자인입니다.</td></tr><tr><td style="width: 23.9882%;">좌측 메뉴</td><td style="width: 76.131%;">메뉴가 좌측으로 붙고 본문 영역이 우측으로 붙는 디자인입니다.

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

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

메뉴 변경 후에는 반드시 \[게시하기\] 버튼을 눌러주어야 변경한 내용이 적용됩니다

# 메인 메뉴 상세 설정하기

메뉴 상세 설정 기능을 통해 메뉴의 로고, 폰트, 메뉴 고정 및 레이아웃, 스타일 등을 변경할 수 있습니다.

\[디자인 편집\] - 메뉴 영역의 \[설정\] 버튼을 클릭하면 메뉴 상세 설정 기능 팝업이 열립니다.

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

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

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

메뉴 영역 위에 마우스를 올리면 우측에 편집 버튼이 표시됩니다.

두 번째에 있는 상세 설정 버튼을 클릭하여 상세 설정창을 열어줍니다.

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

메뉴 상세 설정창에서는 로고 변경, 메뉴 색상 변경, 여백 설정 등이 가능합니다.

**● 내용**

**<span style="color: #000000;">\[메뉴 상단에 고정\]</span>**

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

설정창의 '메뉴 상단에 고정'에 체크하시고 적용하시면 페이지 스크롤을 내려도 메뉴가 항상 상단에 보이도록 설정할 수 있습니다.

스크롤 시 배경색은 화면을 아래로 스크롤 했을 때의 메뉴 배경색을 설정합니다.

**\[상단 블럭과 겹치기\]**

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

설정창의 '상단 블럭과'에 체크하시고 적용하시면 제일 상단에 있는 블럭과 메뉴 영역이 함께 표시됩니다.

겹침 글자색은 메뉴와 상단 블럭이 겹쳐져 있을 때 메뉴의 글자색을 설정합니다.

**<span style="color: #000000;">\[메뉴 슬라이드\]</span>**

<div id="bkmrk--18"><span style="color: #000000;">[![dhbd-07-02-05.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-07-02-05.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-07-02-05.png)</span></div><div id="bkmrk--19"></div><div id="bkmrk--20">  
</div><div id="bkmrk-%EC%84%A4%EC%A0%95%EC%B0%BD%EC%9D%98-%27%EB%A9%94%EB%89%B4-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C%27%EC%97%90-%EC%B2%B4%ED%81%AC%ED%95%98%EC%8B%9C"><span style="color: #333333;">설정창의 '메뉴 슬라이드'에 체크하시고 적용하시면 상단의 메뉴를 드래그하여 뒤에 있는 메뉴 영역을 확인 할 수 있습니다.</span></div><div id="bkmrk-%EB%A9%94%EB%89%B4-%EB%84%88%EB%B9%84%EB%8A%94-%EC%A0%84%EC%B2%B4-%EB%A9%94%EB%89%B4%EC%9D%98-%EB%84%88%EB%B9%84%EB%A5%BC-%EC%84%A4%EC%A0%95"><span style="color: #333333;">메뉴 너비는 전체 메뉴의 너비를 설정합니다.</span></div><div id="bkmrk--21"><span style="color: #333333;">  
</span></div>**<span style="color: #000000;">\[로고 설정하기\]</span>**

텍스트 또는 이미지로 로고를 설정할 수 있습니다.

**텍스트로 설정하기**

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

로고를 텍스트로 선택한 뒤, 텍스트 입력란에 로고로 사용할 글자를 입력합니다.

로고 크기, 글꼴, 글자색 등을 원하는 스타일로 선택한 뒤 적용하기를 하시면 로고가 변경됩니다.

**이미지로 설정하기**

<span style="color: #333333;">파일관리자에서 로고 이미지를 업로드하지 않았을 경우 관리페이지의 사이트 설정 &gt; 파일관리자를 통해 이미지를 업로드해 주세요. </span><span style="color: #3c99f6;"> </span>[**<span style="color: #3c99f6;">파일관리자 사용 방법 보기&gt;</span>**](https://docs.dothome.co.kr/books/02/page/a8f15)

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

파일관리자에 이미지를 업로드한 뒤 다시 편집모드로 돌아와 메뉴 상세설정창을 열어줍니다.

로고를 이미지로 선택한 뒤, 이미지 업로드 버튼을 눌러 로고로 사용할 이미지를 선택합니다.

로고 크기에 로고 가로 사이즈를 입력하시고 적용하시면 로고가 변경됩니다.

**<span style="color: #000000;">\[메뉴 글자 디자인 설정하기\]</span>**

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

메뉴의 글자 디자인을 메인 메뉴와 하위 메뉴에 따라 설정해줄 수 있습니다.

기본에는 메뉴 글자의 기본 스타일을 적용해주세요.

활성화에는 메뉴 위에 마우스를 올리거나, 현재 위치한 페이지를 메뉴에 표시해 줄 때 보여줄 스타일을 적용해주세요.

활성화의 강조색은 현재 사용중인 메뉴의 디자인에 따라 배경색 또는 선 등으로 적용됩니다.

각각 원하는 스타일을 선택한 뒤 적용하기를 누르면 메뉴 상세 디자인이 변경됩니다.

**\[서브메뉴 설정\]**

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

<div id="bkmrk-%EB%A9%94%EB%89%B4%EB%AA%85-%EC%A0%84%EC%B2%B4-%ED%91%9C%EC%8B%9C%27%EC%9D%98-%EA%B2%BD%EC%9A%B0-%EC%84%9C%EB%B8%8C-%EB%A9%94%EB%89%B4">메뉴명 전체 표시'의 경우 서브 메뉴명이 길더라도 메뉴명을 전체 표시 할 수 있도록 설정할 수 있는 기능이며,</div><div id="bkmrk-%27%EC%84%9C%EB%B8%8C-%EB%A9%94%EB%89%B4-%EB%85%B8%EC%B6%9C-%EC%95%88%ED%95%A8%27%EC%9D%98-%EA%B2%BD%EC%9A%B0-%EC%84%9C%EB%B8%8C">'서브 메뉴 노출 안함'의 경우 서브메뉴가 있는 메인 메뉴 위에 마우스를 올려도 서브 메뉴가 나오지 않도록 설정하는 기능입니다.</div><div id="bkmrk--40">  
</div><div id="bkmrk--41">  
</div>**메뉴명 전체 표시**

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

서브 메뉴명이 길더라도 메뉴명을 전체 표시 할 수 있도록 설정할 수 있는 기능입니다.

**서브 메뉴 노출 안함**

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

 서브메뉴가 있는 메인 메뉴 위에 마우스를 올려도 서브 메뉴가 나오지 않도록 설정하는 기능입니다.

**<span style="color: #000000;">레이아웃, 스타일 설정하기</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-%EB%84%88%EB%B9%84-%EB%A1%9C%EA%B3%A0%EC%99%80-%EB%A9%94%EB%89%B4%EA%B0%80-%ED%91%9C%EC%8B%9C%EB%90%98" style="width: 100%;"><thead><tr><td style="width: 25.0596%;">항목</td><td style="width: 75.0596%;">설명</td></tr></thead><tbody><tr><td style="width: 25.0596%;">너비  
</td><td style="width: 75.0596%;">로고와 메뉴가 표시되는 영역의 기본 너비를 설정합니다.

- 본문 너비 : 글로벌 디자인 설정에서 적용한 본문폭 너비에 맞게 설정합니다.
- 채우기 : 로고와 메뉴를 화면에 꽉 맞게 채웁니다.

</td></tr><tr><td style="width: 25.0596%;">좌우 여백</td><td style="width: 75.0596%;">메뉴의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 25.0596%;">상단 여백</td><td style="width: 75.0596%;">메뉴 안쪽의 상단 여백을 설정합니다.</td></tr><tr><td style="width: 25.0596%;">하단 여백</td><td style="width: 75.0596%;">메뉴 안쪽의 하단 여백을 설정합니다.</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%B0%B0%EA%B2%BD%EC%83%89-%EB%A9%94%EB%89%B4-%EC%98%81%EC%97%AD%EC%9D%98-%EB%B0%B0%EA%B2%BD%EC%83%89" style="width: 100%;"><thead><tr><td style="width: 25.0596%;">항목</td><td style="width: 75.0596%;">설명</td></tr></thead><tbody><tr><td style="width: 25.0596%;">배경색</td><td style="width: 75.0596%;">메뉴 영역의 배경색을 설정합니다.</td></tr><tr><td style="width: 25.0596%;">구분선</td><td style="width: 75.0596%;">메뉴 하단의 구분선 색상을 설정합니다.</td></tr></tbody></table>

# 메뉴 관리하기

메뉴 관리하기는 \[디자인 편집\] - \[메뉴 관리\] 메뉴에서 제공되며 다음과 같은 기능들을 지원합니다.

메인 메뉴 : 메뉴 생성, 메뉴 설정, 메뉴 삭제

서브 메뉴 : 서브 메뉴 생성, 서브 메뉴 설정, 서브 메뉴 삭제

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

[https://docs.dothome.co.kr/books/07/page/bbcbf](https://docs.dothome.co.kr/books/07/page/bbcbf)

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

상단 메뉴에서 \[메뉴관리\] 버튼을 눌러 메뉴 관리창을 열어줍니다.

**● 메뉴 추가하기**

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

메뉴 관리창 하단의 \[메뉴 추가하기\] 버튼을 눌러 메뉴 입력창을 열어줍니다.

메뉴 입력창에 정보 입력 후 \[추가\] 버튼을 클릭하면 메뉴가 추가됩니다.

한 페이지를 여러 메뉴에 중복으로 연결은 불가능하며,

추가한 뒤 편집 메뉴의 \[게시하기\] 버튼을 클릭해야 실제 페이지에 적용됩니다.

<table class="table table-bordered" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EB%A9%94%EB%89%B4%EB%AA%85-%EB%A9%94%EB%89%B4-%EC%98%81%EC%97%AD%EC%97%90%EC%84%9C-%ED%91%9C%EC%8B%9C" style="width: 100%;"><thead><tr><td style="width: 23.7501%;">항목</td><td style="width: 76.3691%;">설명</td></tr></thead><tbody><tr><td style="width: 23.7501%;">메뉴명</td><td style="width: 76.3691%;">메뉴 영역에서 표시해 줄 메뉴명을 입력하세요.</td></tr><tr><td style="width: 23.7501%;">메뉴 연결</td><td style="width: 76.3691%;">메뉴를 눌렀을 때의 동작을 선택합니다.  
새 페이지 생성 : 새로운 페이지를 생성하여 메뉴와 연결합니다.  
페이지에서 선택 : 이미 생성되어 있는 페이지를 연결합니다.  
링크 : URL 주소를 직접 입력하여 메뉴에 추가합니다.  
링크 없음 : 링크 없이 메뉴명만 표시합니다.</td></tr><tr><td style="width: 23.7501%;">창모드  
</td><td style="width: 76.3691%;">메뉴를 클릭했을 때 새 창으로 열지, 현재 페이지에서 열지 선택합니다.  
</td></tr><tr><td style="width: 23.7501%;">노출 설정  
</td><td style="width: 76.3691%;">메뉴를 표시해 줄 권한을 선택할 수 있습니다.  
모든 방문자 : 모든 방문자에게 메뉴를 표시합니다.  
회원 : 회원과 관리자 등급에만 메뉴를 표시합니다.  
선택 회원 그룹 : 선택한 회원 그룹과 관리자 등급에만 메뉴를 표시합니다.  
관리자 : 관리자 등급에만 메뉴를 표시합니다.  
</td></tr></tbody></table>

**● 메뉴 수정하기**

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

메뉴 우측의 톱니바퀴 모양 아이콘을 누르면 드롭다운 메뉴가 표시됩니다.

\[설정\]을 누르면 메뉴 설정창이 열립니다. 수정사항 적용 후 \[저장\]을 눌러줍니다. 수정한 뒤 편집 메뉴의 \[게시하기\] 버튼을 클릭해야 실제 페이지에 적용됩니다.

**●** 서브메뉴 추가하기

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

서브메뉴를 추가해줄 메뉴의 우측 톱니바퀴 아이콘을 눌러 드롭다운 메뉴를 엽니다.

\[서브메뉴 추가하기\] 버튼을 눌러 서브메뉴를 추가할 수 있습니다.

**● 수정사항 게시하기**

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

상단 편집메뉴 우측의 \[게시하기\] 버튼을 눌러 수정한 내용을 실제 페이지에 반영할 수 있습니다.

# 서브메뉴 사용하기

홈페이지에서 서브메뉴를 표시하고 사용할 수 있습니다.  
  
\[디자인 편집\] - 메뉴 영역의 \[서브메뉴 사용하기\] 버튼을 이용해서 설정할 수 있습니다.

서브메뉴 역시 가로형, 세로형 각각 3개의 디자인을 제공하니 원하는 디자인을 선택하면 됩니다.

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

[https://docs.dothome.co.kr/books/07/page/093f6](https://docs.dothome.co.kr/books/07/page/093f6)

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

메뉴 위에 마우스를 올리면 메뉴 하단으로 \[서브메뉴 사용하기\] 버튼이 표시됩니다.

(좌측 메뉴의 경우 메뉴 우측으로 표시됩니다.)

\[서브메뉴 사용하기\] 버튼을 눌러 서브메뉴 디자인 선택창을 열어줍니다.

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

서브메뉴 디자인 선택창에서 원하는 디자인을 선택하여 클릭하면 서브메뉴가 추가됩니다.

**서브메뉴 레이아웃 안내**

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%95%AD%EB%AA%A9-%EB%82%B4%EC%9A%A9-%EA%B0%80%EB%A1%9C%ED%98%95-%EC%84%9C%EB%B8%8C%EB%A9%94%EB%89%B4%EA%B0%80-%EB%A9%94%EC%9D%B8%EB%A9%94%EB%89%B4"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 23.9882%;">항목</td><td style="width: 76.131%;">내용</td></tr></thead><tbody><tr><td style="width: 23.9882%;">가로형</td><td style="width: 76.131%;">서브메뉴가 메인메뉴와 본문 영역 사이에 있는 레이아웃입니다.</td></tr><tr><td style="width: 23.9882%;">세로형</td><td style="width: 76.131%;">서브메뉴가 본문 영역의 좌측으로 붙은 레이아웃입니다.  
</td></tr></tbody></table>

</div><div class="btn-box">  
</div></div>

# 서브메뉴 상세 설정하기

서브메뉴 역시 통해 다양한 설정이 가능합니다.  
  
\[디자인 편집\] - 서브메뉴 영역의 \[설정\] 버튼을 클릭하면 서브 메뉴 상세 설정 창이 열립니다.

타이틀 영역 사용, 글꼴 설정, 레이아웃, 스타일 등을 설정하실 수 있습니다.

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

[https://docs.dothome.co.kr/books/07/page/63923](https://docs.dothome.co.kr/books/07/page/63923)

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

서브메뉴 영역 위에 마우스를 올리면 우측에 \[편집\] 버튼이 표시됩니다.

두 번째에 있는 \[상세 설정\] 버튼을 클릭하여 상세 설정창을 열어줍니다.

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

메뉴 상세 설정창에서는 서브메뉴 글자 크기, 색상 등을 변경할 수 있습니다.

**<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-%ED%83%80%EC%9D%B4%ED%8B%80-%EC%98%81%EC%97%AD-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-%EC%B2%B4%ED%81%AC"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 23.003%;">항목</td><td style="width: 76.997%;">설명</td></tr></thead><tbody><tr><td style="width: 23.003%;">타이틀 영역 사용하기</td><td style="width: 76.997%;">체크시 메인메뉴와 서브메뉴 사이에 블럭을 추가할 수 있는 타이틀 영역을 사용할 수 있습니다.</td></tr><tr><td style="width: 23.003%;">기본</td><td style="width: 76.997%;">글자 크기 : 서브메뉴의 글자 크기를 설정합니다.  
글꼴 : 서브메뉴의 글꼴을 설정합니다.  
글자색 : 서브메뉴의 글자 색상을 설정합니다.  
텍스트 굵게 : 서브메뉴의 글자 굵기를 설정합니다. </td></tr><tr><td style="width: 23.003%;">활성화</td><td style="width: 76.997%;"><div>글자색 : 현재 페이지임을 표시하거나 마우스를 올렸을 때의 글자색을 설정합니다  
강조색 : 현재 페이지임을 표시하거나 마우스를 올렸을 때의 배경색이나 선 등의 색상을 설정합니다.  
텍스트 굵게 : 현재 페이지임을 표시하거나 마우스를 올렸을 때의 글자 굵기를 설정합니다.  
</div></td></tr></tbody></table>

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

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

**<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-%EC%A2%8C%EC%9A%B0-%EC%97%AC%EB%B0%B1-%EC%84%9C%EB%B8%8C%EB%A9%94%EB%89%B4-%EC%95%88%EC%AA%BD%EC%9D%98"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 22.5263%;">항목</td><td style="width: 77.4737%;">설명</td></tr></thead><tbody><tr><td style="width: 22.5263%;">좌우 여백</td><td style="width: 77.4737%;">서브메뉴 안쪽의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 22.5263%;">상단 여백</td><td style="width: 77.4737%;">서브메뉴 안쪽의 상단 여백을 설정합니다.</td></tr><tr><td style="width: 22.5263%;">하단 여백</td><td style="width: 77.4737%;">서브메뉴 안쪽의 하단 여백을 설정합니다.</td></tr><tr><td style="width: 22.5263%;">정렬</td><td style="width: 77.4737%;">텍스트의 정렬을 설정합니다.</td></tr></tbody></table>

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

**<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%B0%B0%EA%B2%BD%EC%83%89-%EC%84%9C%EB%B8%8C%EB%A9%94%EB%89%B4-%EC%98%81%EC%97%AD%EC%9D%98-%EB%B0%B0"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 22.2904%;">항목</td><td style="width: 77.7096%;">설명</td></tr></thead><tbody><tr><td style="width: 22.2904%;">배경색</td><td style="width: 77.7096%;">서브메뉴 영역의 배경색을 설정합니다.</td></tr><tr><td style="width: 22.2904%;">하단 구분선</td><td style="width: 77.7096%;">서브메뉴 하단의 구분선 색상을 설정합니다.</td></tr><tr><td style="width: 22.2904%;">상단 구분선 사용하기</td><td style="width: 77.7096%;">체크박스를 체크하면 상단 구분선이 생기며 색상지정도 가능합니다.</td></tr></tbody></table>

</div></div>

# 서브메뉴 디자인 변경하기

서브 메뉴의 디자인도 변경이 가능하면 가로형 섭스 메뉴, 세로형 서브 메뉴를 제공하고 있습니다.  
  
\[디자인 편집\] - 서브 메뉴 영역의 \[서브 메뉴 디자인 변경\] 버튼을 이용래서 변경할 수 있습니다.

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

[https://docs.dothome.co.kr/books/07/page/14bfa](https://docs.dothome.co.kr/books/07/page/14bfa)

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

서브메뉴 영역 위에 마우스를 올리면 우측에 \[편집\] 버튼이 표시됩니다.

첫 번째에 있는 \[디자인 수정\] 버튼을 클릭하여 디자인 선택창을 열어줍니다.

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

원하는 디자인을 클릭하면 해당 디자인으로 메뉴가 변경됩니다.

# 서브메뉴 사용 해제하기

서브 메뉴를 홈페이지에 표시하고 싶지 않다면 서브메뉴 사용을 해제 하실 수 있습니다.  
  
\[디자인 편집\] - 서브 메뉴 영역의 \[제거\] 버튼을 이용해서 해제할 수 있습니다.

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

[https://docs.dothome.co.kr/books/07/page/74071](https://docs.dothome.co.kr/books/07/page/74071)

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

서브 메뉴 영역 위에 마우스를 올리면 우측에 \[편집\] 버튼이 표시됩니다.

마지막에 있는 휴지통 아이콘(제거) 버튼을 클릭하여 서브메뉴 사용을 해제할 수 있습니다.

# 타이틀 영역 사용하기

**● 타이틀 영역이란?**

타이틀 영역이란 메인메뉴와 서브메뉴 사이에 디자인을 추가할 수 있는 영역입니다.

서브메뉴 상단으로 타이틀 영역을 추가하여 인트로 디자인을 꾸밀 수 있습니다.

\[디자인 편집\] - 서브메뉴 영역의 \[설정\] - \[타이틀 영역 사용하기\] 체크하면 사용하실 수 있습니다.

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

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

[https://docs.dothome.co.kr/books/07/page/a01a0](https://docs.dothome.co.kr/books/07/page/a01a0)

● 타이틀 영역 사용하기

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

타이틀 영역은 서브메뉴 상세 설정창에서 적용할 수 있습니다.

서브메뉴 영역 위에 마우스를 올리면 우측에 \[편집\] 버튼이 표시됩니다.

두 번째에 있는 \[설정\] 버튼을 클릭하여 상세 설정창을 열어줍니다.

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

서브메뉴 상세 설정창에서 제일 상단에 있는 '타이틀 영역 사용하기'에 체크한 뒤 하단의 적용하기 버튼을 눌러주세요.

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

서브메뉴 위쪽으로 블럭을 추가할 수 있는 타이틀 영역이 생긴 것을 확인할 수 있습니다.

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

본문 영역과 동일하게 블럭을 편집할 수 있습니다.