[지식루프의 웹개발공부] <link> 태그와 <a> 태그 차이

<link> 태그와 <a> 태그는 HTML에서 링크와 관련된 태그이지만, 용도와 동작 방식이 다릅니다.

---

1. <link> 태그

• 문서와 외부 리소스를 연결하는 태그입니다.
• 주로 CSS, 아이콘, 폰트 등 외부 파일을 HTML 문서에 불러올 때 사용됩니다.
• 클릭할 수 있는 링크가 아님. 사용자 인터랙션은 없습니다.

예시 – CSS 파일 불러오기:

 

<link rel="stylesheet" href="style.css">

• rel="stylesheet": 외부 CSS 파일을 연결
• href="style.css": CSS 파일의 경로

다른 예시 – 파비콘(브라우저 탭 아이콘) 불러오기:

 

<link rel="icon" href="favicon.ico" type="image/x-icon">

---

2. <a> 태그 (Anchor 태그)

• 클릭 가능한 하이퍼링크를 생성하는 태그입니다.
• 웹 페이지 간의 이동, 이메일 연결, 파일 다운로드 등 사용자 인터랙션을 제공합니다.
• href 속성을 통해 이동할 URL이나 파일 경로를 지정합니다.

예시 – 웹 페이지 링크:

 

<a href="https://www.example.com">Example 사이트로 이동</a>

• 클릭하면 https://www.example.com으로 이동합니다.

예시 – 파일 다운로드:

 

<a href="document.pdf" download>PDF 다운로드</a>

• 파일을 클릭하면 document.pdf가 다운로드됩니다.

---

차이점 요약

 

태그	설명	주요 속성 및 기능	사용자 인터랙션
<link>	외부 리소스를 문서에 불러옴	rel, href, type	없음
<a>	클릭 가능한 하이퍼링크 생성	href, target, download, rel	있음 (클릭)

---

주요 포인트

• <link>는 문서 내 스타일이나 리소스를 불러오는 용도로 사용됩니다.
• <a>는 사용자와의 인터랙션을 위해 클릭 가능한 링크를 생성합니다.
• <link>는 헤더(head)에 위치하는 경우가 많고, <a>는 본문(body)에 위치하여 텍스트, 이미지 등에 링크를 추가합니다.

---

이제 두 태그의 차이와 사용법이 명확해졌을 거예요. 😊