ASP.NET Core의 링크 태그 도우미

아티클
11/30/2023

링크 태그 도우미는 기본 또는 대체 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를 참조하세요.