롤오버(Hover)란?

롤오버 또는 Hover란 이미지, 텍스트, 버튼 등에 마우스 포인터가 올라갔을 때 발동되는 일종의 전환효과를 말합니다.

이 기능은 디자인 모드 곳곳에서 확인할 수 있습니다. 이미지 위젯, 갤러리 위젯, 버튼 위젯, 쇼핑 위젯 등 롤오버 또는 Hover 옵션이 보이는 경우 적극적으로 이용해 보세요.

롤오버 기능을 모바일에서 사용할 수는 없나요?

모바일의 경우 마우스 포인터를 이미지에 올리는 개념이 없습니다. 이에 따라 롤오버는 PC에서만 사용 가능합니다.

 관련 도움말

롤오버(Hover)를 활용한 이미지 전환 효과내기

도움말에 찾으시는 답변이 없으신가요? 문의하기

메뉴 숨김 옵션을 주면 특정 메뉴가 상단 메뉴, 메뉴 위젯, 모바일 서랍 메뉴 등에서 표시되지 않도록 숨길 수 있습니다. URL을 알면 접속은 가능하지만 메뉴에서는 표시되지 않기 때문에 방문자는 이 메뉴의 존재를 알 수 없습니다. 

설정방법

1. 디자인 모드에 접속합니다. 접속방법
2. 디자인 모드 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
3. 숨기려는 메뉴명의 오른쪽 끝에 위치한 ⓘ 아이콘을 클릭합니다.
4. 옵션 항목에서 메뉴 숨김 옵션을 선택합니다.
5. 메뉴 설정 창 오른쪽 상단의 닫기 ✕ 아이콘을 클릭해 설정을 완료합니다.
6. 디자인 모드 오른쪽 상단에 위치한 미리보기 아이콘을 클릭합니다.
7. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭합니다.

관련 도움말

• 페이지 단위 검색엔진 수집 차단하기
• 메뉴 접근 권한 설정

도움말에 찾으시는 답변이 없으신가요? 문의하기

새로운 메뉴 추가 시, 추가한 메뉴에는 숫자로 된 페이지 주소(URL)가 자동으로 부여됩니다. 방문자는 이 페이지 주소(URL)를 브라우저 주소창에 입력해 접속할 수 있으며, 페이지 주소는 다음 절차를 통해 언제든 변경할 수 있습니다. 

변경방법

1. 디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
3. 변경을 원하는 메뉴명 오른쪽 끝 ⓘ 아이콘을 클릭해 메뉴 설정을 켭니다.
4. URL 항목에 숫자로 된 페이지 주소를 삭제하고, 원하는 URL을 입력합니다.

   중요: 페이지 주소(URL)는 다른 메뉴 페이지의 URL과 중복 사용할 수 없습니다.

   
5. 닫기 ✕ 아이콘을 클릭해 메뉴 설정 창을 끕니다.
6. 닫기 ✕ 아이콘을 클릭해 메뉴 관리를 닫습니다.

7. 새 브라우저 탭을 열고, 위에서 설정한 페이지 URL을 입력해 접속을 테스트합니다.
   입력 예시: http://내도메인/board-review

도움말에 찾으시는 답변이 없으신가요? 문의하기

상단 메뉴에 마우스 커서를 올렸을 때 메뉴명이 바뀌는 Hover 효과를 간단하게 적용할 수 있습니다. 

적용방법

1. 디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단 메뉴 관리를 클릭합니다.
3. 변경을 원하는 메뉴명 오른쪽 끝 ⓘ 아이콘을 클릭해 메뉴 설정을 켭니다.
4. 메뉴명 Hover 항목에 마우스 포인터를 올리면 변경될 메뉴명을 입력합니다.
5. 닫기 ✕ 아이콘을 클릭해 메뉴 설정 창을 끕니다.
6. 닫기 ✕ 아이콘을 클릭해 메뉴 관리를 끕니다.
7. 디자인 모드 오른쪽 상단 미리보기를 클릭해 확인합니다.
8. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭합니다.

도움말에 찾으시는 답변이 없으신가요? 문의하기

메뉴 추가 이후 언제든 메뉴명을 수정할 수 있습니다. 다음 절차에 따라 기존 메뉴 이름을 변경해 보세요. 

변경방법

1. 디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 메뉴 관리 ≡ 를 클릭합니다.
3. 변경을 원하는 메뉴명 오른쪽 끝 ⓘ 아이콘을 클릭해 메뉴 설정을 켭니다.
4. 메뉴명 항목의 기본 메뉴에 입력된 이름을 수정합니다.
5. (선택 사항) Hover에 메뉴명을 입력하면, 기본 메뉴명 위에 마우스 포인터를 올렸을 때 입력하신 Hover 메뉴로 변환됩니다.
6. 닫기 ✕ 아이콘을 클릭해 메뉴 설정 창을 끕니다.
7. 닫기 ✕ 아이콘을 클릭해 메뉴 관리를 끕니다.
8. 변경된 메뉴명을 확인합니다.
   참고: 메뉴명이 바로 변경되지 않을 시 새로고침(F5) 후 확인해 보세요.

도움말에 찾으시는 답변이 없으신가요? 문의하기

상단은 최대 3개 열로 나눌 수 있으며, 각 열에는 위젯을 추가하여 디자인할 수 있습니다. 그러나 메뉴가 표시될 열의 너비가 지나치게 좁은 경우, 아래 그림과 같이 메뉴가 … 으로 표시될 수 있습니다.

상단 메뉴 영역은 마우스 드래그로 간편하게 조절할 수 있으며, 메뉴 개수에 따라 적절하게 조절해 주시면 됩니다.

해결방법

이 문제는 일반적으로 열의 간격이 좁아 생겨납니다. 메뉴 위젯의 경우 모든 메뉴가 모두 표시될 수 있도록 메뉴 위젯이 위치한 열의 가로 간격을 충분히 늘려주세요. 상단 열 간격 조절 방법은 아래의 도움말을 참고할 수 있습니다. 

상단 열 간격 조절하기

대체방법

이 문제는 일반적으로 열의 간격이 좁아 생겨납니다. 메뉴 위젯의 경우 모든 메뉴가 모두 표시될 수 있도록 메뉴 위젯이 위치한열의 가로 간격을 충분히 늘려주세요. 상단 열 간격 조절 방법은 아래의 도움말을 참고할 수 있습니다. 

본문폭 늘리기

웹사이트의 본문폭이 지나치게 좁은 경우, 상단 영역 좌우의 로고와 로그인/가입 메뉴로 인해 메뉴 표시영역이 좁아질 수 있습니다. 본문폭이 1280픽셀(px) 미만으로 설정된 경우, 아래 도움말을 참고해 본문폭을 늘려볼 수 있습니다.

본문폭 설정하기

그룹 메뉴로 구성하기

여러 관련 메뉴들을 하나의 그룹 메뉴로 구성해 최상위 메뉴를 줄여볼 수 있습니다. 예를 들어, 공지게시판, 문의게시판, 자주 묻는 게시판은 하나의 그룹 메뉴로 만들 수 있습니다. 그룹 메뉴 구성 방법은 아래 도움말을 참고해 주세요.

그룹 메뉴 만들기 

상단 영역 가로 100% 확장하기

상단 영역의 본문폭을 100% 확장시켜 더 많은 공간을 확보할 수 있습니다. 이 옵션을 활성화하면 설정한 본문폭을 넘어 브라우저 가로 너비에 꽉 차게 표시됩니다. 상단 영역 가로 확장 방법은 아래 도움말을 참고하세요.

상단 메뉴 가로 100% 확장하기

 도움말에 찾으시는 답변이 없으신가요? 문의하기 

상단은 필요에 따라 최대 3개의 열로 나눌 수 있으며, 각 열에 위젯을 추가하고 디자인할 수 있습니다. 만약 위젯을 추가하고, 열 간격이 부족하다고 생각된다면 아래의 방법에 따라 열 간격을 조절해 보시길 바랍니다. 

조절방법

1. 디자인 모드에 접속합니다. 접속방법
2. 디자인 모드 오른쪽 상단의 상단설정을 클릭합니다.
3. 상단 영역에 마우스 포인터를 올립니다.
4. 파란색 세로 점선이 나타나면 마우스로 클릭해 좌우로 드래그합니다.
5. 적절히 영역을 확보되면 마우스를 놓습니다.
6. 열 간격 조절이 완료됩니다.

도움말에 찾으시는 답변이 없으신가요? 문의하기

게시물 작성, 구매하기 버튼 등 특정 버튼의 색상을 강조하여 일반 버튼과 다른 스타일을 지정할 수 있습니다.

설정방법

1. 디자인 모드에 접속합니다. 접속방법
2. 오른쪽 상단의 톱니바퀴  아이콘을 클릭합니다.
3. 브라우저 오른쪽에서 공통 디자인 설정 메뉴가 나옵니다.
4. 구성요소 항목으로 내려가, 버튼 스타일을 클릭합니다.
5. 강조 버튼 탭을 클릭합니다.
6. 강조 버튼 사용자 정의를 선택합니다.

7. 기본 버튼과 롤오버 버튼 스타일을 수정합니다.

   중요: 강조 버튼 사용 시 위 공통 버튼 스타일과는 다른 색상으로 지정해 주세요.

   
8. 공통 디자인 설정 바깥 영역을 클릭합니다.
9. 확인 창이 뜨면 저장 버튼을 클릭해 반영합니다.

도움말에 찾으시는 답변이 없으신가요? 문의하기

컬러픽커의 투명도 조절 슬라이더를 사용해 색상을 투명하게 처리할 수 있습니다. 투명 색상은 색상 변경 가능한 옵션이 있는 모든 위젯(텍스트 편집모드 포함), 섹션에 적용할 수 있습니다.

투명도 조절방법

1. 디자인 모드에 접속합니다. 접속방법
2. 오른쪽 상단의 공통 디자인 설정  아이콘을 클릭합니다.
3. 본문 항목에서 브랜드/링크색의 오른쪽 끝에 위치한 원을 클릭해 컬러픽커를 켤 수 있습니다.

   참고: 색상 변경이 가능한 여러 위젯, 섹션, 설정 옵션에서 컬러픽커를 켤 수 있습니다.

   
4. 마우스로 원하는 색상을 선택하고, 투명도 슬라이더를 클릭해 좌우로 이동합니다.
5. 색상 값이 RGBA 형식으로 바뀌며, 색상이 투명하게 처리됩니다.
6. 색상 값을 복사해, 색상 옵션에 붙여넣어 사용할 수 있습니다.

도움말에 찾으시는 답변이 없으신가요? 문의하기

모바일 전용 상단 디자인을 편집할 수 있습니다. 

모바일 상단 작업 시 콘텐츠를 과하게 추가하지 마세요. 모바일 기기는 PC 대비 화면이 가로폭이 매우 좁아, 방문자가 보고 터치하는 데 어려움을 겪을 수 있습니다. 

편집방법

1.단계: 뷰포트 변경하기

1. 디자인 모드에 진입합니다. 접속방법
2. 상단 설정에 진입합니다. 상단 설정 열기
3. 뷰포트를 모바일로 변경합니다. 뷰포트 변경방법

2단계: 모바일 상단 꾸미기

1. 모바일 상단에 마우스 포인터를 올립니다.

2. 아래 그림과 같이 위젯 추가 ⨁ 버튼이 나오면 클릭합니다.

3. 상단 전용 위젯 중 하나를 클릭합니다.
4. PC 버전과 같은 방법으로 위젯을 이동합니다. 상단 위젯 이동방법
5. 위젯에 마우스 오른쪽 버튼을 눌러 설정을 변경합니다. 위젯 설정 열기
6. (선택 사항) 빈 섹션을 추가하거나 섹션 고정 등 기능을 사용해 나만의 모바일 상단을 디자인 합니다.

도움말에 찾으시는 답변이 없으신가요? 문의하기