[HTML] HTML 링크 태그 #5

시작하며...

이번엔 HTML 태그 중에서 링크 태그인 <a>에 대해 알아볼 것이다.

 

HTML 링크 태그

a 태그

html에서 다른 페이지로 이동하는 링크는 <a> 태그를 사용하여 만들 수 있다.

<a> - HTML: Hypertext Markup Language | MDN

 

a 태그 속성 - href, target

<a> 태그 속성에는 href 와 target 이 있다.

<a href={이동할_주소} target={링크_열_곳_옵션}>

href는 이동할 링크의 주소를 작성한다.

예를 들어 https://www.naver.com 와 같은 웹 사이트 주소이다. 

target은 링크를 열 곳에 대한 옵션으로, 현재 창 or 새 창 중에 어떤 창에서 열지에 대한 것이다.

• 현재 창: _selft
• 새 창: _blank 

<h2>a 태그</h2>
<a href="https://jjang-j.tistory.com/" target="_self">블로그 바로가기</a>
<a href="https://jjang-j.tistory.com/" target="_blank">블로그 바로가기(새 창)</a>

결과

target이 _self 일 때엔 현재 페이지에 열리고, _blank 일 때엔 새 창으로 열리는 것을 볼 수 있다.

 

원하는 요소로 이동

블로그를 보다 보면 오른쪽에 인덱스를 클릭했을 때, 해당 요소가 있는 곳으로 이동하는 것을 볼 수 있다.

 

이 때 <a> 태그에서 href 속성에 #{id값}을 넣어서 만들 수 있다.

<a href=#{id값}>

참고로 타 사이트로 이동하면서 그 사이트의 특정 요소로 이동하고 싶을 때,

위에 사진에 있는 링크처럼 https://jjang-j.tistory.com/39#article-1-2--이진-탐색-구현---배열

뒤에 #{id값}을 추가할 수 있다.

 

맨 위에 있는 요소에 id 값을 추가하고

(참고로 id 값은 다른 요소들과 겹치면 안 된다.)

<h1 id="html">HTML 태그</h1>

<a> 태그의 href 속성에 이동할 요소의 id 값을 # 과 함께 붙여 작성하면

<h3>특정 요소로 이동</h3>
<a href="#html">HTML 태그로 이동</a>

특정 요소로 이동하는 것을 확인할 수 있다.

결과

 

이메일, 연락처 링크

<a> 태그를 사용해서 웹 사이트 주소나, 내 사이트 내 요소 이동뿐만 아니라

이메일 연결 링크, 전화 연결 링크도 가능하다.

 

우선 주소 및 연락처 정보를 포함하는 태그인 <address> 태그에

전화번호는 tel:{전화번호}

이메일은 mailto:{이메일}

이렇게 href 속성 값으로 설정하고

<h3>이메일, 전화번호</h3>
<address>
  전화 <a href="tel:{전화번호}">{전화번호}</a> <br />
  이메일 <a href="mailto:{이메일}">{이메일}</a>
</address>

링크를 클릭하면 전화는 전화를 거는 링크로,

이메일은 이메일을 보내는 링크로 가게 된다.

참고로 맥북 환경

 

---

 

마무리 하며...

해당 게시물에서 링크 태그에 대해 알아보았다.

<a> 태그의 기본적인 특징은 다 알고 있었지만,

특정 요소로 이동하는 것에 대해 까먹고 있었는데 다시 알게되었고

지금까지 그 기능을 사용해 본 적이 없었던 거 같은데 나중에 사용해보고 싶다.

그리고 이메일과 전화가 연결되는 것도 몰랐던 기능인데 이 기능도 나중에 참고해봐야 겠다.

 

(해당 게시물은 아래 영상을 참고하여 작성한 글입니다.)