본문 바로가기

프론트엔드 학습/HTML

8. HTML - 다른 곳으로 링크

<a> </a> 태그 속성들
target 속성값 설명 비고
_self
a+limit + Tab 가능
해당 브라우저에서 열기  
_blank 새창에서 링크 열기  
_parent    
_top    
<p> </p>
p#target_${id: target_$}*N
입력된 Id로 스크롤 하여 바로가기  
<mailto>
<a href="mailto:이메일">글</a>
메일 바로 보내기  
<tel:010-0000-0000>
<a href="tel:010-1234-5678">글</a>
전화 바로 걸기  

[VS Code]

<body>
  <a href="https://www.google.com" target="_parent"> 구글로 가기 </a>
</body>

[웹 브라우저 출력]

_self : 같은 브라우저에서 링크 열기

_blank : 새로운 브라우저에서 링크 열기

 

[Image에 링크 넣기]

<body>
  <a href="http://www.google.com" target="_blank">
    <img src="coding.png" alt="이미지 설명">
  </a>
</body>

#1. a + link + Tab

#2. <a> 안에서 tartget + _blank + Tab

#3. <a> </a> 사이에서 img + Tab

[웹 브라우저 출력]

사진 클릭하면 새 브라우저에서 링크로 이동함

<address> </address> : 연락처에 대한 정보

[VS Code]

<body>
  <address>
    <a href="mailto:han2041126@gmail.com">han2041126@gmail.com</a>
    <br>
    <a href="tel:+010-1234-1234">010-1234-1234</a>
  </address>
</body>

[웹 브라우저 출력]

#mailto: 메일 바로 보내기 링크

[VS Code]

<body>
  <a href="mailto:han2041126@gmail.com">han2041126@gmail.com</a>
</body>

[웹 브라우저 출력]

#tel: 전화 바로 걸기 링크

[VS Code]

<body>
  <a href="tel:010-0000-0000">010-0000-0000</a>
</body>

[웹 브라우저 출력]

[결론]

<a> </a> 태그 속성들
target 속성값 설명 비고
_self
a+limit + Tab 가능
해당 브라우저에서 열기  
_blank 새창에서 링크 열기  
_parent    
_top    
<p> </p>
p#target_${id: target_$}*N
입력된 Id로 스크롤 하여 바로가기  
<mailto>
<a href="mailto:이메일">글</a>
메일 바로 보내기  
<tel:010-0000-0000>
<a href="tel:010-1234-5678">글</a>
전화 바로 걸기