출처
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
왜 궁금했을까
웹 퍼블리싱 시작하기 / 3.CSS 시작하기 / 07. 구글 폰트 강의를 수강하던 도중, 아래의 내용을 발견했다.
css에서 구글폰트 한 두번 써본 것도 아닌데, 문득 구글폰트에서 제공하는 HTML 코드가 눈에 들어왔다.
<link> 태그 안에 있는 rel 속성, 그리고 해당 속성의 값으로 주어진 preconnect
복붙만 열심히 했지, 얘네가 무슨 뜻인지 궁금한 적도 없었나 보다. 이에 반성하며, 궁금증도 해소하고 나아가 좀 더 알아보자.
<link> tag
HTML link 요소는 현재 문서와 외부 리소스 사이의 관계를 정의한다. 어떤 친구 사이인지, 어떤 도움을 받을 수 있는지 말이다.
주로 문서가 CSS 스타일 시트와 연결하는데 사용되는데...
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css"> <!-- Linking to an external CSS file -->
</head>그 덕분에 웹 개발자들이 콘텐츠와 디자인을 분리하여 HTML 문서를 더 깨끗하고 유지보수하기 쉽게 만들 수 있다..!
<link> 요소는 현재 문서와 아이콘 사이의 관계를 지정하거나,
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="icon" href="favicon.ico" type="image/x-icon"> <!-- Linking to a favicon -->
</head>현재 문서에 대한 메타데이터를 제공하는 문서에 대한 링크를 설정하는 데 사용될 수 있다..!
링크 요소는 초록옷 입은 애가 링크에요오... 웹 페이지와 관련된 리소스를 구조화하고 정리하는 데 매우 중요하다!
이 작은 친구가 우리 웹 페이지에서 필요한 모든 리소스들을 친구처럼 잘 관리하고 정리하는 데 도움을 주기 때문이다...! 🌟
rel attribute
HTML의 rel 속성은 현재 문서와 연결된 리소스 간의 관계를 지정하는 데 사용된다. 위에서 링크 태그가 하는 중요한 일에 대해 이야기 했는데, 바로 이 rel 속성이 그 핵심적인 역할을 하는데 기여하는 친구인 것이다..!
주로 <a> 앵커 태그 및 <link> 요소와 함께 사용되어 연결된 리소스의 유형이나 링크의 목적을 지정하는데,
rel 속성의 값으로는 현재 문서와 연결된 리소스 간의 다양한 관계를 나타내는 다양한 친구들이 올 수 있다..!
rel 속성에 대한 일반적인 값은 다음과 같다:
stylesheet: 위에서 이미 설명했다.icon: 연결된 리소스가 아이콘임을 지정한다. 일반적으로 웹 페이지의 파비콘으로 사용된다.alternate: 문서의 대체 버전임을 나타낸다. 예를 들어, RSS 피드 또는 번역된 버전과 같은 것이다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="rss-feed.xml"> <!-- Linking to a RSS feed -->
</head>nofollow: 색인 목적으로 검색 엔진이 링크를 따르지 않도록 지시한다.
<a href="https://example.com" rel="nofollow">Link Text</a>
noopener: 새로 열린 창이 열린 창의 속성에 액세스하지 못하도록 방지한다.
<a href="https://example.com" rel="noopener">Link Text</a>
이 친구들은 HTML 문서와 연결된 리소스 간의 관계를 정의하기 위해 사용될 수 있는 값들의 몇 가지 예시에 불과하고, 공식 문서를 읽어보면 엄청 많은 속성값들을 찾을 수 있다...!
'preconnect' value for 'rel' attribute
HTML의 rel 속성에서 preconnect 값은 브라우저에게 지정된 리소스의 출처와 조기 연결을 설정하도록 지시하는 데 사용된다.
이렇게 함으로써 브라우저는 실제로 필요한 리소스가 있는지 여부와 관계없이 DNS 조회, TCP 핸드셰이크 및 TLS 협상을 사전에 수행할 수 있다..!
사전에 연결을 설정함으로써 브라우저는 스타일 시트, 스크립트, 글꼴 또는 기타 자산과 같은 리소스를 가져올 때 지연 시간을 줄일 수 있어서 웹 페이지의 로딩 시간을 단축할 수 있다..!
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">이 예에서는 rel="preconnect"를 가진 링크 요소가 브라우저에게 https://fonts.googleapis.com , https://fonts.gstatic.com 으로 조기 연결을 설정하도록 지시한다. 이를 통해 브라우저는 웹 페이지 내에서, 해당 주소에서 나중에 요청되는, 리소스를 최적화된 방식으로 가져올 수 있다...!
