<a>와 <link>는 모두 HTML에서 다른 문서나 리소스를 연결하는 데 사용되지만, 역할과 목적에 큰 차이가 있습니다.
<a> 태그
<a> 태그는 하이퍼링크를 만드는 데 사용됩니다. 사용자가 클릭할 수 있는 링크를 생성하여, 다른 웹 페이지, 이미지, 파일, 또는 현재 페이지의 특정 위치로 이동하게 합니다.
- 사용 목적: 사용자 상호작용 (클릭)을 통한 페이지 이동.
- 위치: 주로 HTML의
<body>태그 안에 위치하여 웹 페이지 내용의 일부가 됩니다. - 주요 속성:
href(링크 대상 URL),target(링크 열기 방식). - 예시:
<a href="https://www.google.com">구글로 이동</a>
<link> 태그
<link> 태그는 HTML 문서와 외부 리소스를 연결하는 역할을 합니다. 이 태그는 사용자가 직접 보거나 상호작용하는 요소가 아니며, 주로 웹 페이지의 스타일이나 설정을 정의하는 데 사용됩니다.
- 사용 목적: 문서와 외부 리소스 (예: CSS, 파비콘)를 연결하여 웹 페이지의 모양이나 기능을 정의.
- 위치: 반드시 HTML의
<head>태그 안에 위치합니다. - 주요 속성:
rel(리소스와의 관계),href(리소스 경로). - 예시:
<link rel="stylesheet" href="style.css">(CSS 파일 연결)
핵심적인 차이점 요약
| 특징 | <a> 태그 (Anchor) |
<link> 태그 |
|---|---|---|
| 역할 | 클릭 가능한 하이퍼링크 생성 | 문서와 외부 리소스 연결 |
| 위치 | <body> 태그 안 |
<head> 태그 안 |
| 용도 | 페이지 이동, 파일 다운로드 등 | 스타일시트, 파비콘 연결 등 |
| 사용자 상호작용 | O (클릭 가능) | X (클릭 불가능) |
'프로그래머로의 여정' 카테고리의 다른 글
| position: absolute;가 꼭 필요한 이유 (1) | 2025.08.29 |
|---|---|
| CSS에서 text-align: center와 margin: 0 auto (0) | 2025.08.28 |
| HTML/CSS에서 id나 class 이름을 짓는 규칙, BEM 방법론 (0) | 2025.08.22 |
| HTML/CSS에서 id나 class 이름을 짓는 규칙 (1) | 2025.08.22 |
| <div> 요소의 의미와 역할 (HTML 기준) (1) | 2025.08.18 |