반응형
링크
현재 문서에서 다른 문서로 이동하게 만드는 수단
a 태그와 href 속성을 이용하여 해당 콘텐츠로 이동할 수 있는 링크를 만든다.
a 태그는 인라인 요소이다.
기본 문법은 아래와 같다.
<a href = " 콘텐츠 url 주소"> 콘텐츠 내용 </a>
a 태그는 target 속성을 이용하여 해당 콘텐츠를 현재 창에서 열지 새로운 창에서 열지를 결정할 수 있다.
<a href = " 콘텐츠 url 주소" target ="_self"> 콘텐츠 내용 </a>
<!-- 콘텐츠를 현재 창에서 연다-->
<a href = " 콘텐츠 url 주소" target ="_blank"> 콘텐츠 내용 </a>
<!-- 콘텐츠를 새로운 창에서 연다-->
코드예시
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>링크 만들기</title>
<head>
<body>
<!-- a 태그의 콘텐츠를 클릭하면 코딩 공부 기록 페이지로 이동하도록 링크를 걸었다.-->
<a href="https://mjbae81.tistory.com/"> 코딩 공부 기록으로 갑시다. </a>
<br>
<!-- a 태그는 문자열 뿐만 아니라 이미지에도 링크를 걸 수 있다.-->
<!-- 해당 이미지를 클릭하면 공부 기록 페이지로 이동한다.-->
<a href="https://mjbae81.tistory.com/">
<img src ="images\coding.png" width="300">
</a>
<body>
<html>
 |
 |
왼쪽 사진의 "코딩 공부 기록으로 갑시다"라는 텍스틀를 클릭하면
오른쪽 사진의 "코딩 공부 기록" 티스토리 페이지로 이동하는 것을 볼 수 있다.
왼쪽 사진의 "코딩 공부"라는 이미지를 클릭해도
오른쪽 사진의 "코딩 공부 기록" 티스토리 페이지로 이동하는 것을 볼 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>링크 만들기</title>
<head>
<body>
<!-- a 태그의 target ="_self" 속성을 이용하여 해당 콘텐츠를 현재 창에서 열도록 하였다.-->
<a href="https://mjbae81.tistory.com/" target = "_self"> 코딩 공부 기록으로 갑시다. </a>
<br><br>
<!-- a 태그의 target="_blank" 속성을 이용하여 해당 콘텐츠를 새로운 창에서 열도록 하였다.-->
<a href="https://mjbae81.tistory.com/" target = "_blank">
<img src ="images\coding.png" width = "300">
</a>
<body>
<html>
 |
 |
"코딩 공부 기록으로 갑시다."라는 텍스트는 target ="_self"라는 속성을 가진다.
따라서 클릭하면 해당 창에서 링크된 사이트로 이동한다.
 |
 |
"코딩 공부"라는 이미지는 target ="_blank"라는 속성을 가진다.
따라서 클릭하면 새로운 창에서 링크된 사이트로 이동한다.
* 전화번호, 이메일 링크
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>링크 만들기</title>
<head>
<body>
<!-- a 태그의 콘텐츠를 클릭하면 해당 번호로 전화를 걸도록 링크를 걸었다.-->
<!-- 전화가 가능한 모바일 폰과 같은 환경에서 작동한다.-->
<a href="tel:010-1234-5678"> 010-1234-5678 </a>
<br>
<!-- 해당 내용을 클릭하면 href 속성에서 지정한 메일 주소로 메일을 보내도록 이동한다.-->
<a href="mailto:coding@naver.com"> coding@naver.com </a>
<body>
<html>
반응형
'html' 카테고리의 다른 글
| 입력 요소: input 태그 (0) | 2022.08.01 |
|---|---|
| 목록 만들기 (0) | 2022.07.31 |
| id, class 태그 (0) | 2022.07.25 |
| 컨테이너 태그 - div, span 태그 (0) | 2022.07.25 |
| 이미지 태그(img) (0) | 2022.07.23 |
