[HTML] <a>태그 / 링크(link)

HTML은 다양한 태그가 존재한다.
오늘은 여러 태그 중 <a>태그에 대해 다뤄볼 것 이다.

우리는 링크를 어떨때 사용할까?
보통 현재 페이지에서 다른 페이지로 이동할 때 많이 사용한다.
 
html에서는 <a>태그를 이용해 다른 페이지로 이동할 수 있다.
<a>태그를 통해 페이지 뿐 만 아니라 이미지, 파일, 이메일 등 다양한 곳으로 이동이 가능하다.
 

 
 

1. href 속성

---

<a href="https://codingtoddlerr.tistory.com/">걸음마코딩</a>

 

 
위 코드의 결과는 아래와 같다.

1-1. <a>태그의 주소

---

<a> 태그(Tag) 의 주소는 다양한 방식으로 지정 할 수 있다.

 
 

1. 절대 경로 url : 링크의 전체경로
 

<a href="https://codingtoddlerr.tistory.com/">걸음마코딩</a>

 

 
 
2. 상대 경로 url : 같은 프로젝트 폴더 내의 경로
 

<a href="main.html">메인으로 바로가기</a>

 
 
3. 엘리먼트 ID 를 이용한 url : 같은 문서 내의 엘리먼트 ID, 페이지 내 이동
 

 <a href="#hello">hello로 이동하기</a>

 
 
4. 자바스크립트 함수 호출
 

<a href="javascript:alert('알림');">알림</a>

 
 
5. 기타
 
 
- 전화걸기

<a href="tel:010-0000-0000">은지에게 전화걸기</a>

 
- 메일보내기

<a href="mailto:asdf1234@naver.com">메일</a>

 

 

 

2. target 속성

---

<a href="https://codingtoddlerr.tistory.com/" target="_blank">걸음마코딩 블로그로 이동하기</a>

 

target="_blank" 를 작성하면 새탭이 열리면서 이동하게 된다.

 

 

 

 

 

 

3. title 속성

---

<a href="https://codingtoddlerr.tistory.com/" title="걸음마코딩 블로그">걸음마코딩 블로그로 이동하기</a>

 
title 속성은 해당 링크에 마우스 커서를 올리면 도움말 설명을 띄운다.