링크 표시하기

Jinny·2021년 10월 28일
1

HTML 기초

목록 보기
7/13

링크 (anchor)

  • 현재 문서에서 다른 문서로 이동할 수 있는 수단이다!
  • <a></a>로 사용한다.
  • a태그 요소는 href 속성을 통해 다른 페이지, 전화번호, 이메일 주소와 그 외 다른 url로 연결할 수 있는 링크(연결)를 만든다.
    <a href="https://www.naver.com">네이버</a>
  • 인라인 요소이며, 콘텐츠는 주로 링크의 목적지를 나타낸다.

링크 target

  • a태그의 target 속성을 이용하면 새로운 문서를 열 때 현재 탭에서 열지, 새로운 탭에서 열지 결정할 수 있다.
<a href="https://www.naver.com" target="_self">현재탭</a>
<a href="https://www.naver.com" target="_blank" >새 탭</a>

target을 쓰지않으면 기본값인 _self로 적용된다!

url 이외의 값들

  • a태그의 href에는 웹문서의 주소 뿐아니라 전화번호나 메일 주소 등을 지정할 수도 있다. 이 때 각 유형별로 추가되는 텍스트가 있다.
<a href="tel:010-1234-5678" target="_self">전화걸기</a>
<a href="mailto:test@naver.com" target="_blank" >새 탭</a>

tel은 전화기능이 있는곳에서 클릭시 연결됩니다.
mailto는 메일보내기 기능이 열립니다!

내용정리

  • a태그는 페이지를 다른 위치로 이동시킬 수 있는 링크를 만든다.
  • href 속성에는 링크가 참조하는(이동하고자 하는) url을 입력한다.
  • target속성에는 새 페이지가 열릴 대상(탭)을 지정할 수 있다.
  • href 속성을 통해 전화걸기, 이메일 보내기 등을 지정할 수 있다.
profile
프론트엔드 공부중입니다!

0개의 댓글