07. 메뉴 & 서브메뉴 다루기
메인 메뉴 디자인 변경하기
닷홈빌더에서는 메인메뉴의 디자인으로 몇가지 상단 메뉴, 좌측 메뉴를 제공하고 있습니다.
[디자인 편집] - 메뉴 영역의 [메뉴 디자인 변경] 버튼을 이용해서 변경할 수 있습니다.
자세한 내용은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/07/page/ec895
메뉴 영역 위에 마우스를 올리면 우측에 편집 버튼이 표시됩니다.
첫 번째에 있는 [디자인 수정] 버튼을 클릭하여 디자인 선택창을 열어줍니다.
원하는 디자인을 클릭하면 해당 디자인으로 메뉴가 변경됩니다.
메뉴 레이아웃 안내
|
항목 |
내용 |
| 상단 메뉴 | 메뉴가 상단에 있는 디자인입니다. |
| 좌측 메뉴 |
메뉴가 좌측으로 붙고 본문 영역이 우측으로 붙는 디자인입니다. |
메뉴 변경 후에는 반드시 [게시하기] 버튼을 눌러주어야 변경한 내용이 적용됩니다
메인 메뉴 상세 설정하기
메뉴 상세 설정 기능을 통해 메뉴의 로고, 폰트, 메뉴 고정 및 레이아웃, 스타일 등을 변경할 수 있습니다.
[디자인 편집] - 메뉴 영역의 [설정] 버튼을 클릭하면 메뉴 상세 설정 기능 팝업이 열립니다.
자세한 내용은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/07/page/e44fe
메뉴 영역 위에 마우스를 올리면 우측에 편집 버튼이 표시됩니다.
두 번째에 있는 상세 설정 버튼을 클릭하여 상세 설정창을 열어줍니다.
메뉴 상세 설정창에서는 로고 변경, 메뉴 색상 변경, 여백 설정 등이 가능합니다.
● 내용
[메뉴 상단에 고정]
설정창의 '메뉴 상단에 고정'에 체크하시고 적용하시면 페이지 스크롤을 내려도 메뉴가 항상 상단에 보이도록 설정할 수 있습니다.
스크롤 시 배경색은 화면을 아래로 스크롤 했을 때의 메뉴 배경색을 설정합니다.
[상단 블럭과 겹치기]
설정창의 '상단 블럭과'에 체크하시고 적용하시면 제일 상단에 있는 블럭과 메뉴 영역이 함께 표시됩니다.
겹침 글자색은 메뉴와 상단 블럭이 겹쳐져 있을 때 메뉴의 글자색을 설정합니다.
[메뉴 슬라이드]
[로고 설정하기]
텍스트 또는 이미지로 로고를 설정할 수 있습니다.
텍스트로 설정하기
로고를 텍스트로 선택한 뒤, 텍스트 입력란에 로고로 사용할 글자를 입력합니다.
로고 크기, 글꼴, 글자색 등을 원하는 스타일로 선택한 뒤 적용하기를 하시면 로고가 변경됩니다.
이미지로 설정하기
파일관리자에서 로고 이미지를 업로드하지 않았을 경우 관리페이지의 사이트 설정 > 파일관리자를 통해 이미지를 업로드해 주세요. 파일관리자 사용 방법 보기>
파일관리자에 이미지를 업로드한 뒤 다시 편집모드로 돌아와 메뉴 상세설정창을 열어줍니다.
로고를 이미지로 선택한 뒤, 이미지 업로드 버튼을 눌러 로고로 사용할 이미지를 선택합니다.
로고 크기에 로고 가로 사이즈를 입력하시고 적용하시면 로고가 변경됩니다.
[메뉴 글자 디자인 설정하기]
메뉴의 글자 디자인을 메인 메뉴와 하위 메뉴에 따라 설정해줄 수 있습니다.
기본에는 메뉴 글자의 기본 스타일을 적용해주세요.
활성화에는 메뉴 위에 마우스를 올리거나, 현재 위치한 페이지를 메뉴에 표시해 줄 때 보여줄 스타일을 적용해주세요.
활성화의 강조색은 현재 사용중인 메뉴의 디자인에 따라 배경색 또는 선 등으로 적용됩니다.
각각 원하는 스타일을 선택한 뒤 적용하기를 누르면 메뉴 상세 디자인이 변경됩니다.
[서브메뉴 설정]
메뉴명 전체 표시
서브 메뉴명이 길더라도 메뉴명을 전체 표시 할 수 있도록 설정할 수 있는 기능입니다.
서브 메뉴 노출 안함
서브메뉴가 있는 메인 메뉴 위에 마우스를 올려도 서브 메뉴가 나오지 않도록 설정하는 기능입니다.
레이아웃, 스타일 설정하기
레이아웃, 스타일에서는 블럭의 너비, 여백 등과 배경색 등을 설정할 수 있습니다.
[레이아웃]
| 항목 | 설명 |
| 너비 |
로고와 메뉴가 표시되는 영역의 기본 너비를 설정합니다.
|
| 좌우 여백 | 메뉴의 좌우 여백을 설정합니다. |
| 상단 여백 | 메뉴 안쪽의 상단 여백을 설정합니다. |
| 하단 여백 | 메뉴 안쪽의 하단 여백을 설정합니다. |
[스타일]
| 항목 | 설명 |
| 배경색 | 메뉴 영역의 배경색을 설정합니다. |
| 구분선 | 메뉴 하단의 구분선 색상을 설정합니다. |
메뉴 관리하기
메뉴 관리하기는 [디자인 편집] - [메뉴 관리] 메뉴에서 제공되며 다음과 같은 기능들을 지원합니다.
메인 메뉴 : 메뉴 생성, 메뉴 설정, 메뉴 삭제
서브 메뉴 : 서브 메뉴 생성, 서브 메뉴 설정, 서브 메뉴 삭제
자세한 내용은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/07/page/bbcbf
상단 메뉴에서 [메뉴관리] 버튼을 눌러 메뉴 관리창을 열어줍니다.
● 메뉴 추가하기
메뉴 관리창 하단의 [메뉴 추가하기] 버튼을 눌러 메뉴 입력창을 열어줍니다.
메뉴 입력창에 정보 입력 후 [추가] 버튼을 클릭하면 메뉴가 추가됩니다.
한 페이지를 여러 메뉴에 중복으로 연결은 불가능하며,
추가한 뒤 편집 메뉴의 [게시하기] 버튼을 클릭해야 실제 페이지에 적용됩니다.
| 항목 | 설명 |
| 메뉴명 | 메뉴 영역에서 표시해 줄 메뉴명을 입력하세요. |
| 메뉴 연결 | 메뉴를 눌렀을 때의 동작을 선택합니다. 새 페이지 생성 : 새로운 페이지를 생성하여 메뉴와 연결합니다. 페이지에서 선택 : 이미 생성되어 있는 페이지를 연결합니다. 링크 : URL 주소를 직접 입력하여 메뉴에 추가합니다. 링크 없음 : 링크 없이 메뉴명만 표시합니다. |
| 창모드 |
메뉴를 클릭했을 때 새 창으로 열지, 현재 페이지에서 열지 선택합니다. |
| 노출 설정 |
메뉴를 표시해 줄 권한을 선택할 수 있습니다. 모든 방문자 : 모든 방문자에게 메뉴를 표시합니다. 회원 : 회원과 관리자 등급에만 메뉴를 표시합니다. 선택 회원 그룹 : 선택한 회원 그룹과 관리자 등급에만 메뉴를 표시합니다. 관리자 : 관리자 등급에만 메뉴를 표시합니다. |
● 메뉴 수정하기
메뉴 우측의 톱니바퀴 모양 아이콘을 누르면 드롭다운 메뉴가 표시됩니다.
[설정]을 누르면 메뉴 설정창이 열립니다. 수정사항 적용 후 [저장]을 눌러줍니다. 수정한 뒤 편집 메뉴의 [게시하기] 버튼을 클릭해야 실제 페이지에 적용됩니다.
● 서브메뉴 추가하기
서브메뉴를 추가해줄 메뉴의 우측 톱니바퀴 아이콘을 눌러 드롭다운 메뉴를 엽니다.
[서브메뉴 추가하기] 버튼을 눌러 서브메뉴를 추가할 수 있습니다.
● 수정사항 게시하기
상단 편집메뉴 우측의 [게시하기] 버튼을 눌러 수정한 내용을 실제 페이지에 반영할 수 있습니다.
서브메뉴 사용하기
홈페이지에서 서브메뉴를 표시하고 사용할 수 있습니다.
[디자인 편집] - 메뉴 영역의 [서브메뉴 사용하기] 버튼을 이용해서 설정할 수 있습니다.
서브메뉴 역시 가로형, 세로형 각각 3개의 디자인을 제공하니 원하는 디자인을 선택하면 됩니다.
자세한 내용은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/07/page/093f6
메뉴 위에 마우스를 올리면 메뉴 하단으로 [서브메뉴 사용하기] 버튼이 표시됩니다.
(좌측 메뉴의 경우 메뉴 우측으로 표시됩니다.)
[서브메뉴 사용하기] 버튼을 눌러 서브메뉴 디자인 선택창을 열어줍니다.
서브메뉴 디자인 선택창에서 원하는 디자인을 선택하여 클릭하면 서브메뉴가 추가됩니다.
서브메뉴 레이아웃 안내
| 항목 | 내용 |
| 가로형 | 서브메뉴가 메인메뉴와 본문 영역 사이에 있는 레이아웃입니다. |
| 세로형 | 서브메뉴가 본문 영역의 좌측으로 붙은 레이아웃입니다. |
서브메뉴 상세 설정하기
서브메뉴 역시 통해 다양한 설정이 가능합니다.
[디자인 편집] - 서브메뉴 영역의 [설정] 버튼을 클릭하면 서브 메뉴 상세 설정 창이 열립니다.
타이틀 영역 사용, 글꼴 설정, 레이아웃, 스타일 등을 설정하실 수 있습니다.
자세한 내용은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/07/page/63923
서브메뉴 영역 위에 마우스를 올리면 우측에 [편집] 버튼이 표시됩니다.
두 번째에 있는 [상세 설정] 버튼을 클릭하여 상세 설정창을 열어줍니다.
메뉴 상세 설정창에서는 서브메뉴 글자 크기, 색상 등을 변경할 수 있습니다.
[내용]
| 항목 | 설명 |
| 타이틀 영역 사용하기 | 체크시 메인메뉴와 서브메뉴 사이에 블럭을 추가할 수 있는 타이틀 영역을 사용할 수 있습니다. |
| 기본 | 글자 크기 : 서브메뉴의 글자 크기를 설정합니다. 글꼴 : 서브메뉴의 글꼴을 설정합니다. 글자색 : 서브메뉴의 글자 색상을 설정합니다. 텍스트 굵게 : 서브메뉴의 글자 굵기를 설정합니다. |
| 활성화 |
글자색 : 현재 페이지임을 표시하거나 마우스를 올렸을 때의 글자색을 설정합니다
강조색 : 현재 페이지임을 표시하거나 마우스를 올렸을 때의 배경색이나 선 등의 색상을 설정합니다. 텍스트 굵게 : 현재 페이지임을 표시하거나 마우스를 올렸을 때의 글자 굵기를 설정합니다. |
[레이아웃]
| 항목 | 설명 |
| 좌우 여백 | 서브메뉴 안쪽의 좌우 여백을 설정합니다. |
| 상단 여백 | 서브메뉴 안쪽의 상단 여백을 설정합니다. |
| 하단 여백 | 서브메뉴 안쪽의 하단 여백을 설정합니다. |
| 정렬 | 텍스트의 정렬을 설정합니다. |
[스타일]
| 항목 | 설명 |
| 배경색 | 서브메뉴 영역의 배경색을 설정합니다. |
| 하단 구분선 | 서브메뉴 하단의 구분선 색상을 설정합니다. |
| 상단 구분선 사용하기 | 체크박스를 체크하면 상단 구분선이 생기며 색상지정도 가능합니다. |
서브메뉴 디자인 변경하기
서브 메뉴의 디자인도 변경이 가능하면 가로형 섭스 메뉴, 세로형 서브 메뉴를 제공하고 있습니다.
[디자인 편집] - 서브 메뉴 영역의 [서브 메뉴 디자인 변경] 버튼을 이용래서 변경할 수 있습니다.
자세한 내용은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/07/page/14bfa
서브메뉴 영역 위에 마우스를 올리면 우측에 [편집] 버튼이 표시됩니다.
첫 번째에 있는 [디자인 수정] 버튼을 클릭하여 디자인 선택창을 열어줍니다.
원하는 디자인을 클릭하면 해당 디자인으로 메뉴가 변경됩니다.
서브메뉴 사용 해제하기
서브 메뉴를 홈페이지에 표시하고 싶지 않다면 서브메뉴 사용을 해제 하실 수 있습니다.
[디자인 편집] - 서브 메뉴 영역의 [제거] 버튼을 이용해서 해제할 수 있습니다.
자세한 내용은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/07/page/74071
서브 메뉴 영역 위에 마우스를 올리면 우측에 [편집] 버튼이 표시됩니다.
마지막에 있는 휴지통 아이콘(제거) 버튼을 클릭하여 서브메뉴 사용을 해제할 수 있습니다.
타이틀 영역 사용하기
● 타이틀 영역이란?
타이틀 영역이란 메인메뉴와 서브메뉴 사이에 디자인을 추가할 수 있는 영역입니다.
서브메뉴 상단으로 타이틀 영역을 추가하여 인트로 디자인을 꾸밀 수 있습니다.
[디자인 편집] - 서브메뉴 영역의 [설정] - [타이틀 영역 사용하기] 체크하면 사용하실 수 있습니다.
자세한 내용은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/07/page/a01a0
● 타이틀 영역 사용하기
타이틀 영역은 서브메뉴 상세 설정창에서 적용할 수 있습니다.
서브메뉴 영역 위에 마우스를 올리면 우측에 [편집] 버튼이 표시됩니다.
두 번째에 있는 [설정] 버튼을 클릭하여 상세 설정창을 열어줍니다.
서브메뉴 상세 설정창에서 제일 상단에 있는 '타이틀 영역 사용하기'에 체크한 뒤 하단의 적용하기 버튼을 눌러주세요.
서브메뉴 위쪽으로 블럭을 추가할 수 있는 타이틀 영역이 생긴 것을 확인할 수 있습니다.
본문 영역과 동일하게 블럭을 편집할 수 있습니다.