연습: 웹 사이트에 사이트 탐색 추가
업데이트: 2007년 11월
사이트에 여러 페이지가 포함된 경우에는 특히 사이트를 변경할 때 사용자가 자유롭게 페이지 사이를 이동할 수 있는 탐색 시스템을 구성하는 것이 어려울 수 있습니다. ASP.NET 사이트 탐색을 사용하면 중앙에서 관리되는 페이지 사이트 맵을 만들 수 있습니다.
이 연습에서는 사이트 맵을 구성하는 방법과 사이트 맵 기반의 컨트롤을 사용하여 웹 사이트 페이지에 탐색을 추가하는 방법을 설명합니다.
이 연습을 통해 다음과 같은 작업 방법을 배웁니다.
예제 페이지가 포함된 웹 사이트와 페이지 레이아웃을 설명하는 사이트 맵 파일을 만듭니다.
TreeView 컨트롤을 사이트의 임의 페이지로 이동할 수 있게 해주는 탐색 메뉴로 사용합니다.
SiteMapPath 컨트롤을 사용하여 현재 페이지에서 사이트 계층을 보고 이동할 수 있는 탐색 경로(breadcrumb이라고도 함)를 추가합니다.
Menu 컨트롤을 사용하여 사용자가 한 번에 한 수준의 노드씩 볼 수 있게 해주는 탐색 메뉴를 추가합니다. 자식 노드가 있는 노드 위에서 마우스 포인트를 일시 중지하면 자식 노드의 하위 메뉴가 생성됩니다.
사이트 탐색을 한 번만 정의하면 되도록 마스터 페이지에서 사이트 탐색과 컨트롤을 사용합니다.
사전 요구 사항
이 연습을 완료하려면 다음과 같은 요건을 갖추어야 합니다.
Microsoft Visual Web Developer 웹 개발 도구
.NET Framework
이 연습에서는 Visual Web Developer 사용 방법을 알고 있다고 가정합니다.
예제 페이지와 사이트 맵이 있는 웹 사이트 만들기
연습: Visual Web Developer에서 기본 웹 페이지 만들기를 완료하여 Visual Web Developer에서 웹 사이트를 이미 만들었으면 해당 웹 사이트를 사용하여 다음 단원으로 이동합니다. 그렇지 않으면, 다음 단계를 따라 새 웹 사이트와 페이지를 만듭니다.
파일 시스템 웹 사이트 만들기
파일 시스템 웹 사이트를 만들려면
Visual Web Developer를 엽니다.
파일 메뉴에서 새 웹 사이트를 클릭하거나 파일 메뉴에서 새로 만들기를 클릭한 다음 웹 사이트를 클릭합니다.
새 웹 사이트 대화 상자가 나타납니다.
Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 클릭합니다.
맨 왼쪽 위치 상자에서 파일 시스템을 클릭한 다음 맨 오른쪽 위치 상자에 웹 사이트 페이지를 보관할 폴더의 이름을 입력합니다.
예를 들어, 폴더 이름 C:\WebSites\SiteNavigation을 입력합니다.
언어 상자에서 작업할 프로그래밍 언어를 클릭합니다.
선택하는 프로그래밍 언어는 웹 사이트의 기본 언어가 되지만 페이지마다 개별적으로 프로그래밍 언어를 설정할 수 있습니다.
확인을 클릭합니다.
Visual Web Developer에서 해당 폴더와 Default.aspx라는 새 페이지를 만듭니다.
사이트 맵 만들기
사이트 탐색을 사용하려면 사이트의 페이지 레이아웃을 설명하는 방법이 필요합니다. 기본 방법은 페이지 제목과 URL을 비롯하여 사이트 계층이 포함된 .xml 파일을 만드는 것입니다.
.xml 파일의 구조는 사이트 구조를 반영합니다. 각 페이지는 사이트 맵에서 siteMapNode 요소로 표시됩니다. 최상위 노드는 홈 페이지를 나타내고 자식 노드는 사이트 하위 수준에 있는 페이지를 나타냅니다.
사이트 맵을 만들려면
솔루션 탐색기에서 웹 사이트의 이름을 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.
새 항목 추가 - <Path> 대화 상자:
Visual Studio에 설치되어 있는 템플릿에서 사이트 맵을 클릭합니다.
이름 상자에서 이름이 Web.sitemap인지 확인합니다.
.gif "참고")
참고:파일 이름이 Web.sitemap이고 웹 사이트의 루트에 표시되어야 합니다.
추가를 클릭합니다.
다음 XML 콘텐츠를 Web.sitemap 파일로 복사하여 기본 내용을 덮어씁니다.
<siteMap> <siteMapNode title="Home" description="Home" url="~/home.aspx" > <siteMapNode title="Products" description="Our products" url="~/Products.aspx"> <siteMapNode title="Hardware" description="Hardware we offer" url="~/Hardware.aspx" /> <siteMapNode title="Software" description="Software for sale" url="~/Software.aspx" /> </siteMapNode> <siteMapNode title="Services" description="Services we offer" url="~/Services.aspx"> <siteMapNode title="Training" description="Training" url="~/Training.aspx" /> <siteMapNode title="Consulting" description="Consulting" url="~/Consulting.aspx" /> <siteMapNode title="Support" description="Support" url="~/Support.aspx" /> </siteMapNode> </siteMapNode> </siteMap>Web.sitemap 파일에는 세 수준으로 중첩되는 siteMapNode 요소 집합이 포함됩니다. 각 요소의 구조는 동일하며 유일한 차이점은 XML 계층 내의 위치입니다.
샘플 .xml 파일에 정의된 페이지의 URL은 정규화되어 있지 않으므로 모든 페이지가 응용 프로그램 루트에 상대적인 URL을 가진 것으로 처리됩니다. 그러나 특정 페이지에 대해 임의의 URL을 지정할 수 있습니다. 사이트 맵에 정의한 논리 구조가 폴더의 실제 페이지 레이아웃과 반드시 일치할 필요는 없습니다.
파일을 저장한 다음 닫습니다.
탐색할 페이지 만들기
이 단원에서는 이전 단원에서 정의한 사이트 맵에 설명되는 페이지 중 일부만 만듭니다. 사이트 맵은 보다 복잡하므로 이 연습에서 페이지를 테스트할 때 전체 계층을 볼 수 있습니다.
탐색할 페이지를 만들려면
솔루션 탐색기에서 웹 사이트의 이름을 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.
새 항목 추가 - <Path> 대화 상자:
Visual Studio에 설치되어 있는 템플릿에서 Web Form을 클릭합니다.
이름 상자에 Home.aspx를 입력한 다음 추가를 클릭합니다.
디자인 뷰로 전환합니다.
Home.aspx 페이지에서 홈을 입력한 다음 제목 1로 서식을 지정합니다.
이 절차를 반복하여 Products.aspx, Hardware.aspx, Software.aspx 및 Training.aspx라는 4개의 추가 페이지를 만듭니다. 브라우저에서 페이지를 표시할 때 각 페이지를 인식할 수 있도록 페이지 이름(예: 제품)을 제목으로 사용합니다.
구체적으로 어떤 페이지를 만들 것인지는 중요하지 않습니다. 이 절차에 나열된 페이지는 세 수준으로 중첩되는 사이트 계층을 확인할 수 있도록 제안되는 예일 뿐입니다.
TreeView 컨트롤을 사용하여 탐색 메뉴 만들기
사이트 맵과 일부 페이지를 만들었으면 사이트에 탐색을 추가할 수 있습니다. TreeView 컨트롤을 축소 가능한 탐색 메뉴로 사용합니다.
.gif)
트리 스타일 탐색 메뉴를 추가하려면
Home.aspx 페이지를 엽니다.
도구 상자의 데이터 그룹에서 SiteMapDataSource 컨트롤을 페이지로 끌어 옵니다.
기본 구성을 적용하면 SiteMapDataSource 컨트롤은 이 연습의 "사이트 맵 만들기"에서 만든 Web.sitemap 파일에서 정보를 검색하므로 컨트롤에 대한 추가 정보를 지정할 필요가 없습니다.
도구 상자의 탐색 그룹에서 TreeView 컨트롤을 페이지로 끌어 옵니다.
TreeView 작업 메뉴의 데이터 소스 선택 상자에서 SiteMapDataSource1을 클릭합니다.
페이지를 저장합니다.
트리 스타일 탐색 메뉴 테스트
이제 탐색 시스템의 중간 테스트를 수행할 수 있습니다.
탐색 메뉴를 테스트하려면
Ctrl+F5를 눌러 Home.aspx 페이지를 실행합니다.
트리에 두 수준의 노드가 표시됩니다.
제품을 클릭하여 제품 페이지를 표시합니다.
- Products.aspx 페이지를 만들지 않은 경우 실제로 만든 페이지의 링크를 클릭합니다.
현재 웹 사이트 상태에서는 탐색 메뉴가 홈 페이지에만 나타납니다. 응용 프로그램의 각 페이지에 SiteMapDataSource 및 TreeView 컨트롤을 추가하여 각 페이지에서 탐색 메뉴를 표시할 수도 있습니다. 그러나 이 연습의 뒷부분에서는 마스터 페이지에 탐색 메뉴를 배치하여 탐색 메뉴가 자동으로 모든 페이지에서 나타나도록 하는 방법을 설명합니다.
SiteMapPath 컨트롤을 사용하여 탐색 기록 표시
TreeView 컨트롤을 사용하여 탐색 메뉴를 만드는 것 외에도 현재 계층에서 페이지가 있는 위치를 표시하는 탐색을 각 페이지에 추가할 수 있습니다. 이 종류의 탐색 컨트롤을 breadcrumb이라고도 합니다. ASP.NET은 페이지 탐색을 자동으로 구현할 수 있는 SiteMapPath 컨트롤을 제공합니다.
탐색 기록을 표시하려면
Products.aspx 페이지를 열고 디자인 뷰로 전환합니다.
도구 상자의 탐색 그룹에서 SiteMapPath 컨트롤을 페이지로 끌어와 SiteMapPath 컨트롤 앞에 커서를 놓은 다음 Enter 키를 눌러 새 줄을 만듭니다.
SiteMapPath 컨트롤은 페이지 계층에서 현재 페이지의 위치를 표시합니다. 기본적으로 SiteMapPath 컨트롤은 Web.sitemap 파일에 만든 계층을 나타냅니다. 예를 들어, Products.aspx 페이지를 표시할 때 SiteMapPath 컨트롤은 다음 경로를 표시합니다.
홈 > 제품
홈 페이지를 제외하고 이 연습에서 만든 다른 페이지에 대해 이 절차를 반복합니다.
각 페이지에 SiteMapPath 컨트롤을 배치하지 않는 경우에도 테스트를 위해 사이트 계층에서 각 수준의 페이지(예: Products.aspx 및 Hardware.aspx 페이지)에 컨트롤을 배치해야 합니다.
탐색 기록 테스트
계층의 두 번째 및 세 번째 수준에 있는 페이지를 표시하여 페이지 탐색을 테스트할 수 있습니다.
페이지 탐색을 테스트하려면
Home.aspx 페이지를 연 다음 Ctrl+F5를 눌러 페이지를 실행합니다.
TreeView 컨트롤을 사용하여 제품 페이지로 이동합니다.
페이지에서 SiteMapPath 컨트롤을 배치한 위치에 다음과 같은 경로가 표시됩니다.
홈 > 제품
홈을 클릭하여 홈 페이지로 돌아갑니다.
TreeView 컨트롤을 사용하여 하드웨어 페이지로 이동합니다.
이번에는 다음과 같은 경로가 표시됩니다.
홈 > 제품 > 하드웨어
SiteMapPath 컨트롤이 표시하는 페이지 이름은 현재 페이지를 나타내는 마지막 페이지 이름만 제외하고 모두 링크입니다. SiteMapPath 컨트롤의 RenderCurrentNodeAsLink 속성을 true로 설정하면 현재 노드를 링크로 만들 수 있습니다.
SiteMapPath 트롤을 사용하면 사용자가 사이트 계층을 이동할 수 있지만 현재 계층 경로에 없는 페이지로 이동할 수는 없습니다.
Menu 컨트롤을 사용하여 탐색 메뉴 만들기
TreeView 컨트롤을 사용하여 탐색 메뉴를 만드는 것 외에도 Menu 컨트롤을 사용하여 사용자가 한 번에 한 수준의 노드씩 볼 수 있게 해주는 확장 가능한 탐색 메뉴를 표시할 수 있습니다. 자식 노드가 있는 노드 위에서 마우스 포인트를 일시 중지하면 자식 노드의 하위 메뉴가 생성됩니다.
메뉴 스타일 탐색 메뉴를 추가하려면
Products.aspx 페이지를 열고 디자인 뷰로 전환합니다.
도구 상자의 탐색 그룹에서 Menu 컨트롤을 페이지로 끌어 옵니다.
메뉴 작업 메뉴의 데이터 소스 선택 상자에서 NewDataSource를 클릭합니다.
데이터 소스 구성 - <Datasourcename> 마법사에서 사이트 맵을 클릭한 다음 확인을 클릭합니다.
페이지를 저장합니다.
메뉴 스타일 탐색 메뉴 테스트
이제 탐색 시스템의 중간 테스트를 실행할 수 있습니다.
탐색 메뉴를 테스트하려면
Menu 작업을 닫습니다.
Home.aspx를 엽니다.
Ctrl+F5를 눌러 Home.aspx 페이지를 실행합니다.
트리에 두 수준의 노드가 표시됩니다.
제품을 클릭하여 제품 페이지를 표시합니다.
- Products.aspx 페이지를 만들지 않은 경우 실제로 만든 페이지의 링크를 클릭합니다.
탐색 메뉴의 홈 링크를 마우스 포인트로 가리켜 메뉴를 확장합니다.
현재 웹 사이트 상태에서는 탐색 메뉴가 홈 페이지에만 나타납니다. 응용 프로그램의 각 페이지에 SiteMapDataSource 및 Menu 컨트롤을 추가하여 각 페이지에서 탐색 메뉴를 표시할 수도 있습니다. 그러나 이 연습의 다음 단원에서는 마스터 페이지에 탐색 메뉴를 배치하여 탐색 메뉴가 자동으로 각 페이지에서 나타나도록 하는 방법을 설명합니다.
사이트 탐색과 마스터 페이지 결합
이 연습에서 지금까지 만든 페이지의 경우 각 페이지에 개별적으로 사이트 탐색 컨트롤을 추가했습니다. 각 페이지에 대한 컨트롤을 다르게 구성할 필요가 없으므로 이렇게 해도 특별히 복잡할 것은 없습니다. 그러나 사이트의 유지 관리 비용이 증가할 수 있습니다. 예를 들어, 사이트 페이지에서 SiteMapPath 컨트롤의 위치를 변경하려면 각 페이지를 개별적으로 변경해야 합니다.
사이트 탐색 컨트롤을 마스터 페이지와 함께 사용하면 한 위치에 탐색 컨트롤을 포함하는 레이아웃을 만들 수 있습니다. 그런 다음 마스터 페이지의 콘텐츠로 페이지를 표시할 수 있습니다.
탐색을 위한 마스터 페이지를 만들려면
솔루션 탐색기에서 웹 사이트의 이름을 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.
새 항목 추가 - <Path> 대화 상자:
Visual Studio에 설치되어 있는 템플릿에서 마스터 페이지를 클릭합니다.
이름 상자에 Navigation.master를 입력한 다음 추가를 클릭합니다.
디자인 뷰로 전환합니다.
기본 ContentPlaceHolder 컨트롤이 표시된 마스터 페이지가 나타납니다.
다음 절차에서는 간단한 탐색 컨트롤 레이아웃이 구성된 마스터 페이지를 만듭니다. 실제 응용 프로그램에서는 보다 복잡한 서식을 사용하지만 마스터 페이지에서 탐색 컨트롤을 사용하는 방법은 유사합니다.
마스터 페이지에 탐색 컨트롤을 추가하려면
ContentPlaceHolder 컨트롤을 선택하고 왼쪽 화살표를 누른 다음 Enter 키를 누릅니다.
이렇게 하면 ContentPlaceHolder 컨트롤 앞에 빈 줄이 삽입됩니다.
도구 상자의 데이터 그룹에서 SiteMapDataSource 컨트롤을 마스터 페이지로 끌어와 ContentPlaceHolder 컨트롤 위에 놓습니다.
참고:SiteMapDataSource 컨트롤을 ContentPlaceHolder 컨트롤에 놓지 마십시오.
기본적으로 SiteMapDataSource 컨트롤은 이 연습의 "사이트 맵 만들기"에서 만든 Web.sitemap 파일을 사용합니다.
SiteMapDataSource 컨트롤을 클릭하고 오른쪽 화살표를 누른 다음 Enter 키를 누릅니다.
이렇게 하면 SiteMapDataSource 컨트롤 아래에 빈 줄이 삽입됩니다.
표 메뉴에서 표 삽입을 클릭한 다음 행 1개, 열 2개 및 너비가 100%인 표를 삽입합니다.
도구 상자의 탐색 그룹에서 TreeView 컨트롤을 표의 왼쪽 셀로 끌어 옵니다.
TreeView 작업 메뉴의 데이터 소스 선택 상자에서 SiteMapDataSource1을 클릭합니다.
도구 상자의 탐색 그룹에서 SiteMapPath 컨트롤을 표의 오른쪽 셀로 끌어 옵니다.
오른쪽 셀에서 빈 영역을 클릭한 다음 Shift+Enter를 눌러 새 줄을 만듭니다.
ContentPlaceholder 컨트롤을 표의 오른쪽 셀로 끌어와 SiteMapPath 컨트롤 아래에 놓습니다.
마스터 페이지를 사용하는 경우 사이트 페이지를 콘텐츠 페이지로 만듭니다. 콘텐츠 페이지는 Content 컨트롤을 사용하여 마스터 페이지의 ContentPlaceholder 컨트롤에 표시되는 텍스트와 컨트롤을 정의합니다. 따라서 홈, 제품 및 하드웨어 페이지를 콘텐츠 페이지로 다시 만들어야 합니다.
사이트의 콘텐츠 페이지를 만들려면
솔루션 탐색기에서 Home.aspx를 마우스 오른쪽 단추로 클릭하고 삭제를 클릭한 다음 확인을 클릭합니다.
Products.aspx, Software.aspx, Training.aspx 및 Hardware.aspx 페이지와 새로 만든 다른 모든 페이지에 대해 1단계를 반복합니다.
마스터 페이지를 사용하는 콘텐츠 페이지로 페이지를 다시 만듭니다.
솔루션 탐색기에서 웹 사이트의 이름을 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.
새 항목 추가 대화 상자:
Visual Studio에 설치되어 있는 템플릿에서 Web Form을 클릭합니다.
이름 상자에 Home.aspx를 입력합니다.
마스터 페이지 선택확인란을 선택합니다.
추가를 클릭합니다.
마스터 페이지 선택 대화 상자가 나타납니다.
폴더 내용에서 Navigation.master를 클릭한 다음 확인을 클릭합니다.
이전 단원에서 만든 마스터 페이지에 바인딩되는 콘텐츠 페이지를 만들었습니다.
디자인 뷰로 전환합니다.
마스터 페이지를 위해 만든 레이아웃은 마스터 페이지의 ContentPlaceHolder1 컨트롤에 해당하는 편집 가능한 영역과 함께 디자인 뷰에 표시됩니다.
Content 창 내부를 클릭합니다.
여기서 이 특정 페이지에 대한 콘텐츠를 추가할 수 있습니다.
홈을 입력한 다음 제목 1로 텍스트 서식을 지정합니다.
홈 페이지의 정적 텍스트(특히, 제목)를 만들었습니다.
3-8단계를 반복하여 Products.aspx 콘텐츠 페이지와 Hardware.aspx 콘텐츠 페이지를 만듭니다. 8단계에서 홈 대신 제품과 하드웨어를 각각 입력합니다.
마스터 페이지의 탐색 컨트롤 테스트
마스터 페이지 및 콘텐츠 페이지 테스트는 개별 페이지 테스트와 같습니다.
마스터 페이지의 탐색 컨트롤을 테스트하려면
Products.aspx 페이지를 열고 Ctrl+F5를 눌러 페이지를 실행합니다.
제품 콘텐츠 페이지가 마스터 페이지와 병합됩니다. 마스터 페이지에 추가한 탐색 컨트롤과 제품 제목이 포함된 페이지가 브라우저에 표시됩니다.
TreeView 컨트롤에서 하드웨어를 클릭합니다.
하드웨어 페이지는 SiteMapPath 컨트롤이 다른 경로를 표시한다는 것만 제외하고 재퓸 페이지와 같은 레이아웃으로 표시됩니다.
다음 단계
이 연습에서는 ASP.NET 사이트 탐색 및 탐색 컨트롤의 기본 기능을 배웠습니다. 다른 탐색 기능을 테스트해 볼 수도 있습니다. 예를 들어, 다음과 같은 작업을 할 수 있습니다.
SiteMapPath 컨트롤의 서식을 지정하여 모양을 사용자 지정합니다. 이 컨트롤은 링크 표시 방법을 관리하는 많은 옵션을 지원합니다. 자세한 내용은 SiteMapPath를 참조하십시오.
TreeView 컨트롤의 페이지 표시를 사용자 지정합니다. 예를 들어, 트리 뷰 노드에서 현재 페이지를 강조 표시할 수도 있습니다.
프로그래밍 방식으로 사이트 탐색 정보 작업을 합니다. 프로그래밍 방식으로 탐색 정보를 표시하는 데 사용할 수 있는 SiteMapPath 컨트롤을 현재 페이지에서 사용할 수 있습니다.
사이트 맵 정보에 다른 데이터 저장소를 사용합니다. 기본 XML 사이트 맵 파일을 사용하는 대신 기존 사이트 맵을 사용하거나 데이터베이스에 사이트 맵 정보를 저장할 수도 있습니다. ASP.NET 사이트 탐색은 공급자 모델을 사용합니다. 사이트 맵 정보를 관리하는 구성 요소를 만든 다음 기본 사이트 맵 공급자 대신 해당 구성 요소를 사용하도록 응용 프로그램을 구성할 수 있습니다. 자세한 내용은 ASP.NET 사이트 탐색 공급자를 참조하십시오.
참고 항목
작업
연습: Visual Web Developer에서 기본 웹 페이지 만들기
연습: Visual Web Developer에서 ASP.NET 마스터 페이지 생성 및 사용