# 메인 메뉴 상세 설정하기

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

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

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

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