프로그래머로의 여정
<a>와 <link> in html
nunaaa
2025. 8. 26. 02:24
<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 (클릭 불가능) |