반응형
하이퍼 링크 <a>
하이퍼 링크란, 다른 페이지나 사이트로 연결하는 링크(문자 또는 이미지)
<a href="사이트 또는 이동할 문서의 위치경로"> 링크에 사용될 문자 또는 이미지 </a>
실습을 통해 보는것이 가장 좋을 것 같아 바로 활용!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>하이퍼 링크</title>
</head>
<body>
<h2>하이퍼 링크</h2>
<!--절대 경로-->
<p><a href="https://www.daum.net/">다음</a></p>
<p><a href="https://e.kakao.com/"><img src="https://item.kakaocdn.net/do/c5c470298d527ef65eb52883f0f186c49f17e489affba0627eb1eb39695f93dd"width = "100" alt="춘식이"></a></p>
<!--상대 경로-->
<p><a href="./1_이미지1.html">이미지 연습</a></p>
<p><a href="./5_테이블3.html"><img src="./chunsik2.png" alt="주소록"></a></p>
</body>
</html>
절대경로와 상대경로로 나누어 만들어 보았다.
절대경로는 https에 대한 경로로, 다음이라는 문자를 누르면 다음 사이트로 이동되도록하고
내가 불러온 이미지를 클릭하면 카카오이모티콘샵으로 이동하게끔 만들었다.
상대경로는 이미지 연습이라는 글자를 누르면, 내가 이전에 만든 이미지1.html 로 가도록하고
상대경로로 불러온 이미지를 클릭하면 이전에 만든 테이블3.html로 이동하게끔 만들었다.
[결과]
책갈피(bookmark)
<a> 태그의 name 속성 또는 특정 태그의 id 속성을 이용하면 책갈피 기능을 만들 수 있다
예를 들자면, 사이트 내에서 "맨위로" 버튼을 누르면 페이지의 맨위로 올라가는 경우를 들 수 있을것 같다.
[문법]
<a href="a 태그의 #값 또는 특정 태그의 id 속성의 값">링크에 사용될 문자 또는 이미지</a>
[예시]
<a href="#book">도착지로 이동</a>
...
...
...
<a name="book">도착지</a>
또는
<p id="book">도착지</p>
[적용]
1. 지정해놓은 책갈피로 이동해보기
2. 맨 아래에서 맨위로 이동할 수 있게 하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>책갈피</title>
</head>
<body>
<h2 id="menu">책갈피</h2>
<p><a href="#book1">책갈피 1로 이동</a></p>
<table border="1" width ="300">
<tr>
<td>
<!--lorem : 쓸데 없는 글씨를 자동으로 채워줌-->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit praesentium laudantium maiores modi vitae ut harum odio, quia aspernatur quidem aut voluptate repudiandae cum, totam distinctio quo earum dolores cupiditate?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem omnis architecto pariatur animi reprehenderit repellendus nihil earum, eligendi tempora provident quam illum adipisci. Eligendi, magnam molestias voluptatibus eos repudiandae exercitationem.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas quibusdam eveniet nisi, saepe explicabo possimus quisquam, at beatae voluptate, maxime accusantium! Quas recusandae amet perspiciatis provident molestias pariatur cum nemo?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam qui numquam obcaecati temporibus nam explicabo fugiat ex illum sequi, quas amet, nemo eaque officiis veritatis nihil est molestias assumenda neque.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius ab culpa possimus, veritatis rem doloremque unde vel natus a eveniet quae, cum ducimus asperiores praesentium doloribus cupiditate ratione, nobis reprehenderit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, sequi similique commodi veniam eaque nostrum dignissimos magni totam non quibusdam ratione illum quam minima voluptas vel inventore natus, ipsa fuga.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi tenetur quas possimus fuga quam nihil, aliquam praesentium nisi, deserunt animi recusandae at ab quis rerum voluptatum a totam assumenda sunt?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores soluta error, enim ad natus temporibus nostrum voluptatem eum quod unde laboriosam veritatis illo tempore laborum voluptates et molestiae quia fugit! <a name="book1">도착지1</a>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi iusto velit at quo amet omnis in aspernatur modi eveniet repellendus eos unde dicta neque nemo, ea natus veniam! Rem, in?
</td>
</tr>
</table>
<p><a href="#menu">맨위로 이동</a></p>
</body>
</html>[결과]
반응형
'프로그래밍 > HTML' 카테고리의 다른 글
| 11 아이프레임 <iframe> (0) | 2021.04.18 |
|---|---|
| 10 뉴스 페이지를 만들어보자 (0) | 2021.04.17 |
| 08 <table> 테이블 태그 (0) | 2021.04.17 |
| 07 <img> 태그_절대경로, 상대경로 (0) | 2021.04.17 |
댓글