링크
- 현재 문서에서 다른 문서로 이동할 수 있는 수단
- a 태그 ≫ href 속성을 통해 다른 페이지, 전화번호, 이메일 주소, 그 외 다른 url로 연결할 수 있는 링크
- 인라인 요소
- 콘텐츠는 주로 링크의 목적지 나타냄
- <a href="https://www.naver.com/">네이버</a>
target 속성
- 새로운 문서를 열 때, 현재 탭에서 열지 새로운 탭에서 열지 결정
- "_self" : 현재 탭에서
- "_blank" : 새로운 탭에서
- 기본값은 self ! ≫ 지정하지 않으면 현재 탭에서 열림
전화 걸기 / 메일 쓰기
- 웹문서 주소 뿐 아니라 전화번호, 메일 주소 등을 href에 지정
- tel / mailto 문자열 지정
- <a href="tel:010-1234-5678">010-1234-5678 전화걸기</a>
- <a href="mailto:emailaddress@naver.com">emailaddress@naver.com 메일 전송</a>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>링크 만들기</title>
</head>
<body>
<a href="https://www.naver.com/" target="_self">
네이버
</a>
<br>
<a href="https://www.google.co.kr/?hl=ko" target="_blank">
구글
</a>
<br><br>
<a href="tel:010-1234-5678">010-1234-5678</a>
<br>
<a href="mailto:emailaddress@naver.com">emailaddress@naver.com</a>
</body>
</html>
- 콘텐츠에는 텍스트 뿐만 아니라 이미지 등 다른 콘텐츠도 가능 ≫ 이미지 클릭 시 링크로 이동
- img 태그로 지정
- <a href="https://www.naver.com/" target="_self">
<img src="images/WIN_20220602_22_40_53_Pro.jpg", width="300">
</a>
- 전화 걸기가 가능한 기기에서 클릭 시 전화가 걸림
- 기본 메일 앱에서 해당 메일 주소로 메일 쓸 수 있는 창이 열림
'front-end' 카테고리의 다른 글
[HTML] 입력 요소 만들기 (0) | 2024.12.01 |
---|---|
[HTML] 목록 표시하기 (0) | 2024.12.01 |
[HTML] 컨테이너와 전역 속성 (0) | 2024.12.01 |
[HTML] 이미지 표시하기 (0) | 2024.12.01 |
[HTML] 블록 태그와 인라인 태그 (0) | 2024.12.01 |