[HTML 하이퍼링크 & 네비게이션] #01 <a> 태그의 다양한 속성 완벽 정리

 

 

안녕하세요 토스트데브입니다.
오늘은 웹 페이지를 연결하는 가장 핵심적인 태그, 바로 <a> 태그와 그 주요 속성들에 대해 알아보겠습니다.
단순히 링크를 거는 것에서 끝나지 않고, 링크의 동작 방식과 보안, 다운로드 기능까지 결정하는 중요한 요소들이 숨어있습니다.

 

 

📌 <a> 태그란?

HTML에서 <a> 태그(anchor) 는 다른 페이지, 파일, 내부 요소, 이메일 주소 등으로 이동할 수 있는 링크를 만듭니다.

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

• href 속성: 이동할 대상의 주소(URL)를 지정합니다.

 

🎯 주요 속성 정리

1. target

링크를 클릭했을 때 어디에 열릴지를 지정합니다.

값	설명
_self (기본값)	현재 탭에서 열기
_blank	새 탭에서 열기
_parent	부모 프레임에서 열기
_top	가장 바깥 프레임에서 열기

<a href="https://toast.dev" target="_blank">새 탭에서 열기</a>

✅ 참고: target="_blank" 사용 시, 반드시 rel="noopener noreferrer" 속성도 함께 사용하는 것이 보안상 안전합니다.

 

2. download

링크를 클릭하면 해당 파일을 다운로드하게 만듭니다.

<a href="/files/manual.pdf" download>매뉴얼 다운로드</a>

 

• download="filename.pdf" 형태로 다운로드 될 파일명을 지정할 수도 있습니다.
• 외부 URL에는 적용되지 않습니다 (동일 출처만 가능).

 

3. rel

링크 간의 관계 또는 목적을 명시하는 속성입니다. 특히 target="_blank"와 함께 보안을 위한 필수 속성으로 사용됩니다.

값	의미
noopener	새 탭이 원래 페이지에 접근 못 하도록 함
noreferrer	참조 정보(referrer)를 보내지 않음
nofollow	검색 엔진이 이 링크를 따라가지 않도록 함
external	외부 링크임을 명시

<a href="https://external.site" target="_blank" rel="noopener noreferrer">외부 링크</a>

 

 

💡 기타 유용한 속성

속성	설명
title	마우스를 올렸을 때 툴팁으로 설명 표시
type	링크된 리소스의 MIME 타입 지정
hreflang	링크 대상의 언어 정보 제공 (예: en, ko 등)

 

 

🧭 내부 링크 vs 외부 링크

• 내부 링크: 같은 사이트 내의 다른 페이지 또는 요소로 이동

<a href="#section2">2번 섹션으로 이동</a>

• 외부 링크: 외부 도메인으로 이동

<a href="https://naver.com" target="_blank">네이버</a>

 

 

🚨 <a> 태그 사용 시 주의할 점

• target="_blank" 사용 시 rel="noopener noreferrer"를 반드시 함께 사용해야 보안 위협을 줄일 수 있습니다.
• 링크 텍스트는 명확하게 작성해 사용자와 검색엔진 모두에게 의미를 전달할 수 있도록 합니다.
• 스크린 리더나 키보드 사용자를 위한 웹 접근성도 고려하여 작성하세요.

 

 

🧩 마무리

<a> 태그는 단순한 링크 이상의 기능을 가지고 있습니다.
target, download, rel 등의 속성을 적절히 활용하면 더 안전하고 유용한 웹 환경을 구축할 수 있습니다.
링크 하나도 웹 접근성과 사용자 경험의 핵심이 될 수 있음을 기억하세요!

 

#HTML #a태그 #하이퍼링크 #웹링크 #웹접근성 #target속성 #rel속성 #download속성 #HTML링크 #프론트엔드기초 #HTML강의 #toastdev #웹퍼블리싱 #코딩입문 #웹개발기초 #HTML속성정리