이번 챕터에서는 여러분들이 웹 사이트에서 페이지를 이동할 때 가장 많이 사용하고 있는, 내비게이션 바, 일명 Nav Bar를 만들어 페이지를 이동하는 방법을 배워 보겠습니다. 오늘도 코딩 없이 Excel 느낌 그대로 시작해봅시다~~!!

3강 마스터 페이지 스타일 적용하기에 이어서 시작하겠습니다.

▶ 3강 프로젝트 파일 다운로드

포건시에서 내비게이션 메뉴를 만드는 방법은 정말 다양합니다. 단순하게는 앞 장에서 만들어 놓은 "상단 배너(Header)"에 "하이퍼링크 텍스트"를 추가하여 만들거나, "버튼"을 에 배치하여 만들 수 있습니다.

하지만, 앞으로 여러분들이 포건시로 시스템을 구축하실 때, 좀 더 유연하게 메뉴를 확장하실 수 있도록, 이번 챕터에서는 포건시에서 제공해 드리는 "메뉴 컨트롤"를 이용하여 진행해보겠습니다.

포건시에서 메뉴 컨트롤로 내비게이션 바 무작정 만들어보기

이전 강의에서 만들었던, 상단 배너(Header)에 이어서 시작합니다.

2. 도구 모음, "홈" > "셀 유형" 의 "드롭박스(Drop-Box)" 항목에서, "메뉴"를 선택합니다.

3. 상단 배너에 생성된 "메뉴"를 선택 후, 우측 "셀 유형" 탭 > "메뉴 항목 편집"을 클릭합니다.

4. "메뉴 항목 설정 창"에서 삭제 버튼을 통해, "메뉴1"과 "메뉴2"만 남기고 삭제합니다.

아래와 같이 최상위 "메뉴1"과 "메뉴2"만 남도록 해주세요.

5. 각각 메뉴의 이름을 "페이지1"과 "페이지2"로 변경 후, 확인 버튼을 눌러 작업을 완료합니다.

6. 가로 방향의 상당 배너에 항목이 보이도록, 우측 "셀 유형" 탭 > "방향"을 "가로"로 변경합니다.

위와 같이 모든 항목이, 설정한 영역에 나타납니다.

7. "실행 버튼" 또는 "F5" 키를 눌러 실행해봅니다.

메뉴 컨트롤에 페이지 이동 동작 설정하기

다음으로, 위에서 만든 내비게이션 의 "페이지1"과 "페이지2" 메뉴를 눌었을 때, 각각의 페이지로 이동하도록 만들어 보겠습니다.

1. 먼저, 앞에서 만들었던 상단 내비게이션 메뉴를 선택합니다.
2. 우측, "셀 유형" 탭에서 "메뉴 항목 편집…"을 클릭합니다.

3. 우선 "메뉴 항목 설정" 창에서, "페이지1"을 선택하고 "명령 편집"을 클릭합니다.

4. "명령 창"에서, "명령 없음" > "명령 선택" > "페이지 이동 명령 만들기"를 순차적으로 선택합니다.

5. 이동하고자 하는 페이지인 "페이지1"을 선택하고 확인을 누릅니다.

6. "페이지2" 메뉴에 대해서도, 1)~5)까지 동일한 작업을 통해, "페이지2"로 이동하게 설정합니다.

7. 완료가 되면, 아래와 같이 명령이 적용되었다는 아이콘을 볼 수 있습니다.

8. 이제 실행 버튼을 눌러, 페이지 이동이 되는지 확인해 봅니다.

내비게이션 메뉴에 원하는 스타일을 적용하는 방법은 5강에서 알아보겠습니다.

▶ 4강 프로젝트 파일 다운로드

Forguncy 사용 중 기술 문의 또는 구매에 대한 상담이 필요하실 경우, 언제든지 연락 부탁드립니다.

• 기술 문의 : Forguncy - Q&A | 토론
• 구매 문의 : sales-kor@grapecity.com
• 전화번호 : 1670-0583