ASP.NET Core의 링크 태그 도우미
작성자: Rick Anderson
링크 태그 도우미는 기본 또는 대체 CSS 파일에 대한 링크를 생성합니다. 일반적으로 기본 CSS 파일은 콘텐츠 배달 네트워크(CDN)에 위치합니다.
CDN은:
- 웹앱으로 자산을 호스팅하는 것과 비교해서 몇 가지 성능 이점을 제공합니다.
- 자산에 대한 유일한 원본으로 의존해서는 안 됩니다. CDN을 항상 사용할 수 있는 것은 아니므로 안정적인 대체(fallback) 항목을 사용해야 합니다. 일반적으로 대체(fallback) 항목은 웹앱을 호스트하는 사이트입니다.
링크 태그 도우미를 사용하면 CSS 파일에 CDN 및 CDN을 사용할 수 없는 경우를 대비한 대체를 지정할 수 있습니다. 링크 태그 도우미는 로컬 호스팅의 견고성과 함께 CDN의 성능 이점을 제공합니다.
다음 Razor 태그는 ASP.NET Core 웹앱 템플릿을 사용하여 만든 레이아웃 파일의 head
요소를 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - WebLinkTH</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position"
asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" />
</environment>
<link rel="stylesheet" href="~/css/site.css" />
</head>
다음은 이전 코드로부터 렌더링된 HTML입니다(개발 이외의 환경에서).
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home page - WebLinkTH</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css"
crossorigin="anonymous" integrity="sha256-eS<snip>BE=" />
<meta name="x-stylesheet-fallback-test" content="" class="sr-only" />
<script>
!function (a, b, c, d) {
var e, f = document,
g = f.getElementsByTagName("SCRIPT"),
h = g[g.length - 1].previousElementSibling,
i = f.defaultView && f.defaultView.getComputedStyle ? f.defaultView.getComputedStyle(h) : h.currentStyle;
if (i && i[a] !== b) for (e = 0; e < c.length; e++)
f.write('<link href="' + c[e] + '" ' + d + "/>")
}
("position", "absolute", ["\/lib\/bootstrap\/dist\/css\/bootstrap.css"],
"rel=\u0022stylesheet\u0022 crossorigin=\u0022anonymous\u0022 integrity=\abc<snip>BE=\u0022 ");
</script>
<link rel="stylesheet" href="/css/site.css" />
</head>
이전 코드에서 링크 태그 도우미는 CDN에서 요청 bootstrap.css
된 <meta name="x-stylesheet-fallback-test" content="" class="sr-only" />
파일을 사용할 수 있는지 확인하는 데 사용되는 요소와 다음 JavaScript를 생성했습니다. 이 경우에는 CSS 파일을 사용할 수 있었기 때문에 태그 도우미가 CDN CSS 파일을 사용하여 <link />
요소를 생성했습니다.
일반적으로 사용되는 링크 태그 도우미 특성
링크 태그 도우미의 모든 특성, 속성 및 메서드에 대한 정보는 링크 태그 도우미를 참조하세요.
href
링크된 리소스의 기본 주소입니다. 이 주소는 모든 경우에 생성된 HTML로 전달됩니다.
asp-fallback-href
기본 URL이 실패할 경우 대체할 CSS 스타일시트의 URL입니다.
asp-fallback-test-class
대체 테스트에 사용할 스타일시트에 정의된 클래스 이름입니다. 자세한 내용은 FallbackTestClass를 참조하세요.
asp-fallback-test-property
대체 테스트에 사용할 CSS 속성 이름입니다. 자세한 내용은 FallbackTestProperty를 참조하세요.
asp-fallback-test-value
대체 테스트에 사용할 CSS 속성 값입니다. 자세한 내용은 FallbackTestValue를 참조하세요.
추가 리소스
ASP.NET Core