연습: 웹 페이지에 메뉴 표시

업데이트: 2007년 11월

이 연습에서는 웹 페이지에 ASP.NET Menu 컨트롤을 배치하고 구성하는 방법을 보여 줍니다.

웹 사이트의 복잡성과 관계없이 여러 웹 사이트가 갖는 한 가지 공통점은 탐색 메뉴입니다. ASP.NET의 Menu 컨트롤을 사용하여 코드를 작성하지 않고도 복잡한 탐색 메뉴를 쉽게 설정할 수 있습니다.

Menu 컨트롤은 메뉴가 완전히 노출되는 정적 표시와 마우스 포인터를 부모 메뉴 항목으로 가져가면 메뉴의 일부가 표시되는 동적 표시를 비롯한 여러 표시 옵션을 허용합니다. 또한 이 컨트롤은 정적 및 동적 디스플레이 모드 조합도 제공합니다. 이러한 모드에서는 일련의 루트 항목은 정적이지만 자식 메뉴 항목은 동적으로 나타날 수 있습니다.

디자이너에서 페이지에 대한 정적 링크를 포함하도록 ASP.NET Menu 컨트롤을 구성하거나 XmlDataSource 또는 SiteMapDataSource 컨트롤과 같은 계층적 데이터 소스에 자동으로 바인딩할 수 있습니다.

이 연습에서 수행할 작업은 다음과 같습니다.

• 기본 메뉴를 만든 후 페이지에 링크되도록 정적으로 구성

• Web.sitemap XML 파일에 바인딩된 보다 복잡한 메뉴 만들기

• 메뉴 방향 조정

• 여러 수준의 정적 표시 또는 동적 표시 구성

사전 요구 사항

이 연습을 완료하려면 다음과 같은 요건을 갖추어야 합니다.

• Microsoft Visual Web Developer(Visual Studio)

• .NET Framework

웹 사이트 만들기

연습: Visual Web Developer에서 기본 웹 페이지 만들기의 단계에 따라 작업한 경우를 비롯하여 Visual Web Developer에서 웹 사이트를 이미 만든 경우 해당 웹 사이트를 사용하여 다음 단원의 "기본 메뉴 만들기"로 건너뛸 수 있습니다. 그렇지 않으면, 다음 단계를 따라 새 웹 사이트와 페이지를 만듭니다.

파일 시스템 웹 사이트를 만들려면

1. Visual Web Developer를 엽니다.

2. 파일 메뉴에서 새웹 사이트를 클릭합니다.

   새 웹 사이트 대화 상자가 나타납니다.

3. Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 클릭합니다.

4. 위치 상자에 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.

   예를 들어, 폴더 이름 C:\WebSites를 입력합니다.

5. 언어 목록에서 작업할 프로그래밍 언어를 클릭합니다.

6. 확인을 클릭합니다.

   Visual Web Developer에서 해당 폴더와 Default.aspx라는 새 페이지를 만듭니다.

기본 메뉴 만들기

페이지의 메뉴를 만드는 첫 번째 단계는 Menu 컨트롤을 배치하는 것입니다.

페이지에 Menu 컨트롤을 추가하려면

1. Default.aspx로 전환하거나 이 페이지를 연 후 디자인 뷰로 전환합니다.

2. 도구 상자의 탐색 컨트롤 그룹에서 Menu 컨트롤을 페이지로 끌어 옵니다.

이 예제에서는 메뉴 방향을 세로가 아닌 가로로 지정합니다.

Menu 컨트롤을 가로로 배치하려면

• Menu 컨트롤을 마우스 오른쪽 단추로 클릭하고 속성을 클릭한 후 Orientation을 Horizontal로 설정합니다.

기본 메뉴 구성

이 단원에서는 메뉴 항목 편집기를 사용하여 메뉴 항목을 정의합니다.

Menu 컨트롤 항목을 편집하려면

1. Menu 컨트롤을 마우스 오른쪽 단추로 클릭한 후 메뉴 항목 편집을 클릭합니다.

   메뉴 항목 편집기가 나타납니다.

2. 항목에서 루트 항목 추가 아이콘을 클릭합니다.

3. 새 항목에 대한 속성에서 Text를 Home으로, NavigateURL을 Default.aspx로 설정합니다.

4. 항목에서 루트 항목 추가 아이콘을 클릭합니다.

5. 속성에서 Text를 Products로, NavigateURL을 Products.aspx로 설정합니다.

6. 항목에서 루트 항목 추가 아이콘을 클릭합니다.

7. 속성에서 Text를 Services로, NavigateURL을 Services.aspx로 설정합니다.

8. 확인을 클릭합니다.

Default.aspx에 대한 소스를 확인하면 메뉴 항목과 링크가 컨트롤에 선언적으로 지정되어 있음을 알 수 있습니다.

대상 페이지를 만들려면

1. 솔루션 탐색기에서 웹 사이트의 루트를 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.

2. Web Form을 클릭하고 파일 이름을 Products.aspx로 지정한 후 추가를 클릭합니다.

3. 앞의 단계를 반복하고 이름이 Services.aspx인 파일을 만듭니다.

메뉴 테스트

배치한 페이지 및 메뉴를 테스트해 볼 수 있습니다.

Menu 컨트롤을 테스트하려면

1. 솔루션 탐색기에서 Default.aspx를 클릭한 후 Ctrl+F5를 눌러 Default.aspx 페이지를 실행합니다.

2. 항목 위로 포인터를 가져갑니다. 그러면 해당 페이지 맨 아래에 표시되는 브라우저의 상태 표시줄에 링크된 페이지가 나타납니다.

3. 링크를 클릭하여 해당 페이지로 이동합니다.

사이트 맵에 바인딩된 메뉴 만들기

마지막 단원에서는 페이지 내에 선언적으로 구성된 간단한 정적 메뉴를 만들었습니다. 이 단원에서는 Menu 컨트롤 항목을 직접 편집하지 않고 대신 해당 컨트롤을 XML 데이터 소스로 Web.sitemap 파일에 바인딩합니다. 이렇게 하면 Menu 컨트롤의 구조가 페이지를 수정하거나 디자이너를 사용하지 않고 쉽게 업데이트할 수 있는 별도의 XML 파일 내에 유지 관리될 수 있습니다.

이 예제에서는 또 다른 Menu 컨트롤을 사용합니다.

또 다른 Menu 컨트롤을 만들려면

• 도구 상자의 탐색 그룹에서 또 다른 Menu 컨트롤을 Default.aspx 페이지로 끌어 옵니다.

다음에는 바인딩할 Web.sitemap 파일이 필요합니다.

사이트 맵 파일을 만들려면

1. 솔루션 탐색기에서 웹 사이트의 루트를 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.

2. 새 항목 추가 - <Websitename> 대화 상자에서 사이트 맵을 클릭합니다.

3. 추가를 클릭합니다.

4. 다음 XML 코드를 Web.sitemap 파일에 추가합니다.

   XML은 메뉴의 구조를 나타냅니다. 중첩된 노드는 부모 노드 메뉴 항목의 자식 메뉴 항목이 됩니다.

   <siteMap>
     <siteMapNode title="Home" description="Home" url="default.aspx" >
       <siteMapNode title="Products" description="Our products" 
        url="Products.aspx">
         <siteMapNode title="Hardware" 
          description="Hardware choices"
          url="Hardware.aspx" />
         <siteMapNode title="Software" 
          description="Software choices" 
          url="Software.aspx" />
       </siteMapNode>
       <siteMapNode title="Services" 
        description="Services we offer" 
        url="Services.aspx">
         <siteMapNode title="Training" 
          description="Training classes" 
          url="Training.aspx" />
         <siteMapNode title="Consulting" 
          description="Consulting services" 
          url="Consulting.aspx" />
         <siteMapNode title="Support" 
          description="Support plans" 
          url="Support.aspx" />
       </siteMapNode>
     </siteMapNode>
   </siteMap>
   

5. 파일을 저장합니다.

사이트 맵에 바인딩

이제 Web.sitemap 파일을 가리키는 탐색 데이터 소스를 만든 후 해당 소스에 Menu 컨트롤을 바인딩할 수 있습니다.

사이트 맵에 Menu 컨트롤을 바인딩하려면

1. Default.aspx 파일을 열고 디자인 뷰로 전환합니다.

2. 스마트 태그를 클릭하여 Menu 작업 대화 상자를 표시합니다.

3. Menu 작업 대화 상자의 데이터 소스 선택 드롭다운 목록에서 새 데이터 소스를 클릭합니다.

   데이터 소스 구성 마법사 대화 상자가 나타납니다.

4. 사이트 맵을 클릭합니다.

   데이터 소스의 ID 지정에 기본 이름 SiteMapDataSource1이 나타납니다.

5. 확인을 클릭합니다.

사이트 맵 바인딩 테스트

배치한 페이지 및 메뉴를 테스트해 볼 수 있습니다.

사이트 맵 바인딩을 테스트하려면

1. Ctrl+F5를 눌러 Default.aspx 페이지를 실행합니다.

2. 두 번째 세로 메뉴의 Home 메뉴 항목으로 포인터를 가져갑니다.

   Products 및 Services가 나타납니다.

3. Products 위로 포인터를 가져갑니다.

   Hardware 및 Software가 나타납니다.

   Default.aspx에 대한 소스 코드를 보면 첫 번째 메뉴 항목과 달리 항목이 선언적으로 지정되지 않으며 Menu 컨트롤에 의해 데이터 소스가 참조됩니다.

정적 및 동적 수준 조정

앞 단원에서 만든 세로 메뉴는 맨 위 수준만 정적으로 남아 있으며 완전히 동적으로 표시됩니다. Menu 컨트롤을 사용하면 마우스 포인터를 일시 중지하는 동작과 메뉴가 동적인지 아니면 정적인지에 따라 동작을 지정할 수 있습니다. 이 단원에서는 Menu 컨트롤의 동적 및 정적 수준을 조정합니다.

Menu 컨트롤을 두 수준만큼 정적으로 만들려면

1. 디자인 뷰의 Default.aspx 페이지에서 두 번째 Menu 컨트롤을 마우스 오른쪽 단추로 클릭하고 속성을 클릭합니다.

2. StaticDisplayLevels를 2로 설정합니다.

동적 메뉴 테스트

배치한 페이지 및 메뉴를 테스트해 볼 수 있습니다.

동적 메뉴를 테스트하려면

• Ctrl+F5를 눌러 Default.aspx 페이지를 실행합니다.

  메뉴의 처음 두 수준이 표시되지만 세 번째 수준은 동적입니다.

다음 단계

Menu 컨트롤을 사용하여 탐색 메뉴를 쉽게 만들 수 있습니다. 동적 또는 정적 표시를 위해 컨트롤을 구성한 후 사이트 맵 XML 파일에 바인딩합니다. 또한 다음의 추가 옵션을 사용해 볼 수도 있습니다.

• Menu 컨트롤에 테마나 스킨을 적용합니다. 자세한 내용은 연습: Visual Studio에서 테마를 사용하여 웹 사이트 사용자 지정을 참조하십시오.

• 사이트 탐색에 대해 자세히 알아봅니다. 자세한 내용은 ASP.NET 사이트 탐색 개요를 참조하십시오.

• 마스터 페이지에서 Menu 컨트롤을 사용하여 단일 페이지에 정의된 사이트 전체 탐색을 제공합니다. 자세한 내용은 연습: Visual Web Developer에서 ASP.NET 마스터 페이지 생성 및 사용을 참조하십시오.

• 단계에 따라 작업을 수행하여 사이트 탐색을 구현합니다. 자세한 내용은 연습: 웹 사이트에 사이트 탐색 추가를 참조하십시오.

참고 항목

작업

연습: 프로그래밍 방식으로 ASP.NET 메뉴 제어

개념

Menu 컨트롤 개요