리소스 우선순위를 제어하는 link 태그의 설정값

1. rel 속성: 리소스의 관계를 지정하는 속성입니다. 우선순위를 제어하기 위해서는 rel 속성 값으로 preload를 사용해야 합니다.
2. as 속성: 가져올 리소스의 유형을 지정하는 속성입니다. 가능한 값으로는 image, style, script, font, document, audio, video, fetch 등이 있습니다. 이 중 fetch를 사용하면 특정 URL을 가져와서 캐시에 저장할 수 있습니다.
3. type 속성: 가져올 리소스의 MIME 유형을 지정하는 속성입니다. 예를 들어, type="text/css"는 CSS 파일을 가져올 때 사용합니다.
4. media 속성: 리소스를 가져오는 미디어 유형을 지정하는 속성입니다. 예를 들어, media="print"를 사용하면 인쇄할 때 사용하는 스타일 시트를 가져올 수 있습니다.
5. asynchronous 속성: 리소스를 비동기적으로 가져올 것인지를 지정하는 속성입니다. asynchronous="true"로 설정하면 다른 작업을 처리하면서 리소스를 가져올 수 있습니다.
6. defer 속성: 리소스를 지연해서 가져올 것인지를 지정하는 속성입니다. defer="true"로 설정하면 문서 파싱이 완료되면 리소스를 가져옵니다.
7. crossorigin 속성: 리소스를 다른 도메인에서 가져올 때 CORS(Cross-Origin Resource Sharing)를 지정하는 속성입니다. crossorigin="anonymous"로 설정하면 CORS 요청을 보내지 않습니다.
8. integrity 속성: 가져온 리소스의 무결성을 검증하는 속성입니다. integrity 속성 값으로는 SHA-256 또는 SHA-384 등의 암호화 해시 함수를 사용합니다.

<link rel="stylesheet" href="style.css" media="print" title="Print Styles">
<link rel="stylesheet" href="style.css" media="screen and (min-width: 768px)">
<link rel="preload" href="script.js" as="script" importance="high">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous" importance="low">

• 첫 번째 예제는 media 속성을 사용하여 프린트 스타일에 대한 우선순위를 설정합니다.
• 두 번째 예제는 media 속성과 미디어 쿼리를 사용하여 스크린 크기에 따라 우선순위를 설정합니다.
• 세 번째 예제는 rel 속성을 preload로 설정하여 페이지 로딩시 우선적으로 리소스를 불러옵니다. as 속성을 사용하여 리소스 유형을 설정하며, importance 속성을 사용하여 우선순위를 설정합니다.
• 네 번째 예제는 rel 속성을 preload로 설정하여 페이지 로딩시 리소스를 미리 불러옵니다. as 속성을 사용하여 리소스 유형을 설정하며, type 속성을 사용하여 폰트 파일의 MIME 유형을 명시하고, crossorigin 속성을 사용하여 CORS (Cross-Origin Resource Sharing) 정책을 준수합니다. importance 속성을 사용하여 우선순위를 설정합니다.