방법: SiteMapPath 웹 서버 컨트롤의 모양 사용자 지정

아티클
10/22/2014

업데이트: 2007년 11월

컨트롤의 특성을 설정하거나 컨트롤에 사용할 수 있는 템플릿을 구성하여 사이트 탐색 컨트롤의 모양을 사용자 지정할 수 있습니다. 템플릿과 스타일은 SiteMapPath의 "설명" 부분에 있는 두 가지 우선 순위 규칙에 따라 링크에 적용됩니다.

또한 컨트롤에 테마나 컨트롤 스킨을 적용하거나 사용자의 렌더링 요구 사항에 맞는 사용자 지정 사이트 탐색 컨트롤을 개발할 수도 있습니다. 웹 컨트롤에 테마를 적용하는 방법은 방법: ASP.NET CreateUserWizard 컨트롤 사용자 지정을 참조하십시오.

SiteMapPath 컨트롤은 현재 페이지에서 웹 사이트 홈 페이지로의 경로를 링크로 나타낸 탐색 경로(breadcrumb 또는 eyebrow라고도 함)를 표시합니다. ASP.NET 페이지에서 SiteMapPath 컨트롤은 다음과 같이 표시합니다.

Home > Services > Training

TreeView 및 Menu 컨트롤은 또한 사이트 맵 데이터를 렌더링하고, SiteMapPath 컨트롤과 비슷하게 거의 대부분의 다른 웹 컨트롤과 같이 사용자 지정될 수 있습니다. 이 항목에서는 SiteMapPath 웹 서버 컨트롤의 다음과 같은 사용자 지정 기능을 사용하는 방법에 대해 설명합니다.

링크 사이에 표시되는 문자 또는 이미지를 지정합니다.
탐색 경로의 방향을 반대로 합니다.
표시되는 부모 링크의 수를 지정합니다.

이 항목의 절차에서는 SiteMapPath 컨트롤이 포함된 사이트 맵과 페이지를 이미 만든 것으로 가정합니다. ASP.NET 사이트 맵에 있는 Web.sitemap 예제 파일을 사용할 수 있습니다.

링크 스타일 속성을 사용자 지정하려면

SiteMapPath 컨트롤이 포함된 ASP.NET 웹 페이지에서 다음 속성을 컨트롤에 추가합니다.
```
RootNodeStyle-Font-Names="Verdana"
RootNodeStyle-ForeColor="Orange"
RootNodeStyle-BorderWidth=2
```
예를 들어 SiteMapPath 컨트롤의 코드는 다음과 같을 수 있습니다.
```
<asp:SiteMapPath ID="SiteMapPath1" Runat="server" 
  SkipLinkText="Skip Menu"
  RootNodeStyle-Font-Names="Verdana"
  RootNodeStyle-ForeColor="Orange"
  RootNodeStyle-BorderWidth=2 >
</asp:SiteMapPath>
```
CssClass 속성을 비롯하여 Style 및 FontInfo 클래스에 설명된 대부분의 속성을 사용할 수 있습니다.

각 링크의 스타일을 다르게 하려면 SiteMapPath 컨트롤의 ParentNodeStyle, CurrentNodeStyle 및 PathSeperatorStyle 속성에 대해 이전 단계를 반복합니다.

참고:
성능 향상을 위해 NodeTemplate을 사용하여 모든 링크의 스타일을 한 번에 사용자 지정할 수 있습니다. 자세한 내용은 ASP.NET 웹 서버 컨트롤 템플릿을 참조하십시오.

링크 사이에 표시되는 문자를 사용자 지정하려면

SiteMapPath 컨트롤이 포함된 ASP.NET 웹 페이지에서 PathSeparator 속성을 컨트롤에 추가합니다.

예를 들어 SiteMapPath 컨트롤의 코드는 다음과 같을 수 있습니다.
```
<asp:SiteMapPath ID="SiteMapPath1" Runat="server" 
  PathSeparator=" :: ">
</asp:SiteMapPath>
```
SiteMapPath 컨트롤은 다음과 같은 모양을 표시합니다.

Home :: Services :: Training

링크는 모든 문자열을 사용하여 구분할 수 있지만 여기에서는 이미지를 사용합니다. 다음 절차를 따르십시오.

링크 사이에 표시되는 이미지를 지정하려면

SiteMapPath 컨트롤이 포함된 ASP.NET 웹 페이지에서 컨트롤에 다음 코드 줄을 추가합니다.

<PathSeparatorTemplate>
  <asp:Image ID="Image1" Runat="Server" 
    Width="20" 
    ImageUrl="Images/PathSeparatorImage.jpg" />
  </PathSeparatorTemplate>
</PathSeparatorTemplate>

예를 들어 SiteMapPath 컨트롤의 코드는 다음과 같을 수 있습니다.

<asp:SiteMapPath ID="SiteMapPath1" Runat="server" >
  <PathSeparatorTemplate>
    <asp:Image ID="Image1" Runat="Server" 
      Width="20" 
      ImageUrl="Images/PathSeparatorImage.jpg" />
    </PathSeparatorTemplate>
  </PathSeparatorTemplate>
</asp:SiteMapPath>

SiteMapPath 컨트롤로 표시되는 경로의 방향을 반대로 하려면

SiteMapPath 컨트롤이 포함된 ASP.NET 웹 페이지에서 PathDirection 및 PathSeparator를 컨트롤에 추가합니다.

예를 들어 SiteMapPath 컨트롤의 코드는 다음과 같을 수 있습니다.
```
<asp:SiteMapPath ID="SiteMapPath1" Runat="server"
  PathDirection="CurrentToRoot"
  PathSeparator=" <-- " >
</asp:SiteMapPath>
```

표시되는 부모 링크의 수를 제한하려면

SiteMapPath 컨트롤이 포함된 ASP.NET 웹 페이지에서 ParentLevelsDisplayed 속성을 컨트롤에 추가합니다.

예를 들어 최대 두 개의 부모 링크를 표시하는 SiteMapPath 컨트롤의 코드는 다음과 같습니다.
```
<asp:SiteMapPath ID="SiteMapPath1" Runat="server"
  ParentLevelsDisplayed="2" >
</asp:SiteMapPath>
```

내게 필요한 옵션

사이트 탐색 컨트롤은 일반적으로 웹 사이트의 모든 페이지에서 사용됩니다. 화면 판독기 및 기타 보조 장치는 페이지를 방문할 때와 다시 게시를 수행할 때마다 탐색 컨트롤의 텍스트를 큰 소리로 읽어 줍니다.

SiteMapPath, TreeView 및 Menu 사이트 탐색 컨트롤에는 반복되는 정보가 다음 페이지나 같은 페이지의 뷰에서 건너뛰도록 허용하는 SkipLinkText라는 속성이 각각 포함됩니다.

내게 필요한 옵션 건너뛰기 기능을 사용하려면

탐색 컨트롤이 포함된 ASP.NET 웹 페이지에서 다음 속성을 컨트롤에 추가합니다.
```
SkipLinkText="Skipped Menu"
```
예를 들어 SiteMapPath 컨트롤의 코드는 다음과 같을 수 있습니다.
```
<asp:SiteMapPath ID="SiteMapPath1" 
  Runat="server" 
  SkipLinkText="Skip Breadcrumb">
</asp:SiteMapPath>
```

참고 항목

다음을 통해 공유