HTML <a> 태그 링크 사용법 갓벽 가이드

1. HTML <a> 태그란?
2. 기본 문법
3. <a>태그 주요 속성
4. 사용 예제
   • 기본 링크 예제
   • 새 창(탭)에서 열기 (target="_blank")
   • 이메일/전화번호 링크
   • 파일 다운로드 링크
   • 이미지 링크
   • 페이지 내부 이동 (앵커 링크)
   • 버튼 스타일의 링크 (CSS 활용)
5. <a>태그 사용 시 주의 사항

반응형

---

 

HTML <a> 태그란?

HTML <a> 태그는 "하이퍼링크(hyperlink)"를 생성하는 태그입니다. 웹페이지에서 다른 페이지, 파일, 이메일, 전화번호 등으로 이동할 때 사용됩니다.

 

---

 

기본 문법

<a href="이동할_주소">텍스트 또는 이미지</a>

• href 속성: 이동할 URL을 지정하는 필수 속성입니다.
• <a> 태그 안에는 텍스트 또는 이미지를 넣을 수 있습니다.

 

---

 

<a>태그 주요 속성

속성	설명
href	이동할 링크 주소
target	링크 열기 방식 지정
rel	보안 및 SEO 관련 관계 설정
download	파일 다운로드 가능
title	마우스 올릴 때 툴팁 표시

 

---

 

사용 예제

기본 링크 예제

✅ 예제 코드:

<a href="https://www.naver.com">네이버로 이동</a>

클릭하면 네이버 홈페이지로 이동합니다.

 

새 창(탭)에서 열기 (target="_blank")

✅ 예제 코드:

<a href="https://www.google.com" target="_blank">구글 새 창에서 열기</a>

• target="_blank": 새 창(새 탭)에서 링크를 엽니다.
• 보안상 rel="noopener noreferrer"를 같이 쓰는 것이 좋습니다.

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">구글</a>

 

이메일/전화번호 링크

이메일이나 전화번호를 클릭하면 해당 앱이 실행됩니다.

📩 이메일 보내기:

<a href="mailto:someone@example.com">이메일 보내기</a>

📞 전화 걸기:

<a href="tel:+821012345678">전화 걸기</a>

• mailto: 이메일 앱 실행
• tel: 스마트폰에서 전화 앱 실행

 

파일 다운로드 링크

✅ 예제 코드:

<a href="sample.pdf" download>PDF 파일 다운로드</a>

download 속성을 사용하면 클릭 시 파일을 다운로드합니다.

 

이미지 링크

✅ 예제 코드:

<a href="https://example.com">
  <img src="image.jpg" alt="이미지 링크">
</a>

이미지를 클릭하면 링크로 이동합니다.

 

페이지 내부 이동 (앵커 링크)

✅ 예제 코드:

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

<h2 id="section2">여기가 섹션 2</h2>

• href="#id명": 같은 페이지 내 특정 위치로 이동
• id="section2"인 요소로 스크롤 이동

버튼 스타일의 링크 (CSS 활용)

✅ 예제 코드:

<a href="https://example.com" class="btn">클릭하세요</a>

.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: blue;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}
.btn:hover {
  background-color: darkblue;
}

CSS를 적용하여 <a> 태그를 버튼처럼 보이게 변경할 수 있습니다.

 

---

<a>태그 사용 시 주의 사항

• href="#" 사용 주의 → 아무 동작 없이 페이지 최상단으로 이동할 수 있음. (동작을 막으려면 event.preventDefault(); 사용)
• SEO(검색 엔진 최적화) → rel="nofollow"를 사용하면 검색엔진이 링크를 따라가지 않음.
• 보안 문제 → target="_blank" 사용할 때 rel="noopener noreferrer" 함께 사용.