컴퓨터/HTML5
[HTML5] 하이퍼링크 관련 태그
peridott
2024. 6. 26. 21:33
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>하이퍼링크 관련 태그</title>
</head>
<body>
<!--
하이퍼링크 기능은 웹 기능의 가장 핵심적인 기능
클릭을 통해 연결된 곳으로 이동하여 사용을 편리하게 해주는 기능
텍스트를 클릭하여 링크로 이동하는 방법,
이미지를 클릭하여 링크로 이동하는 방법,
현재 페이지 내에서 링크로 이동도 할 수 있음
-->
<h1>하이퍼링크 관련 태그</h1>
<!-- a태그 : href속성으로 링크를 만들 수 있음 -->
<a href="02.글자관련태그.html">글자관련태그</a>
<ul>
<li><a href="02.글자관련태그.html">글자관련태그</a></li>
<li><a href="03.목록관련태그.html">목록관련태그</a></li>
<li><a href="https://naver.com">네이버</a></li>
</ul>
<h3>* target속성 : 링크된 문서를 클릭했을 때 문서가 열리는 위치 지정</h3>
<p>
_self(기본값) : 현재 열려있는 장에 열림<br>
_blank : 새 탭에서 열림<br>
_parent : 링크된 문서를 현재 프레임의 부모 프레임에서 오픈형(프레임이 없으면 현재 탭)<br>
_top : 링크된 문서를 현재 윈도우 전체에서 오픈함(프레임이 없으면 현재 탭)
</p>
<a href="http://google.com">구글 사이트</a><br>
<a href="https://daum.net" target="_blank">다음 사이트</a>
<h3>* img태그를 이용하여 링크 만들기</h3>
<a href="http://www.w3schools.com" target="_blank">
<img src="resources/img/cat-4894153_640.jpg" width="200"> <!-- 글씨대신 이미지 넣어주는 것-->
</a>
<h3>* 이미지 맵</h3>
<p>
이미지를 구역별로 나누어 링크를 걸어주는 태그 <img>태그에 usemap속성 지정
</p>
<!--
<img src="이미지 url" usemap="#맵이름">
<map name="맵이름">
<area shape="모양" coords="시작위치, 끝위치" href="링크경로" [target="위치"]>
<area shape="모양" coords="시작위치, 끝위치" href="링크경로" [target="위치"]>
<area shape="모양" coords="시작위치, 끝위치" href="링크경로" [target="위치"]>
</map>
>> shape의 속성
- rect : 사각형
- circle : 원형
- poly : 다각형
- default : 전체영역
-->
<img src="resources/img/cat-1647775_640.jpg" width="500" height="300" usemap="#imgmap">
<map name="imgmap">
<area shape="rect" coords="0, 0, 250, 300" href="http://google.com" alt="구글로 이동" target="_blank">
<area shape="rect" coords="250, 0, 500, 300" href="https://naver.com" alt="네이버로 이동" target="_blank">
</map>
<br>
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="경기도지도.jpg" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="서울" title="서울" href="https://www.seoul.go.kr/main/index.jsp" coords="233,389,230,394,228,402,222,406,219,412,214,417,220,421,229,423,239,423,242,434,239,441,237,446,237,453,244,455,251,450,260,450,264,455,264,469,272,475,279,470,285,474,293,475,299,468,307,465,316,465,324,466,328,473,334,474,342,473,346,468,353,464,359,462,365,458,370,450,371,444,366,438,369,432,374,425,380,421,382,414,380,408,374,404,370,409,362,413,357,414,352,413,351,405,353,396,355,390,355,383,354,375,351,368,347,362,345,353,343,347,335,348,328,347,322,343,315,342,312,348,310,354,307,360,301,364,302,370,301,376,296,378,293,372,292,366,286,364,281,366,274,373,271,380,269,386,269,393,265,397,261,401,254,403,248,400,240,394" shape="poly">
</map>
<h3 id="main">* 한페이지 내에서 점프하는 링크 만들기</h3>
<h4>바로가기</h4>
<!-- ul>(li>a)*4 --> <!-- 에밋 이용하기 -->
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<!-- ul>(li>a{본문$})*4 -->
<ul>
<li><a href="">본문1</a></li>
<li><a href="">본문2</a></li>
<li><a href="">본문3</a></li>
<li><a href="">본문4</a></li>
</ul>
<!-- ul>(li>a[href=#con$]{본문$})*4 -->
<ul>
<li><a href="#con1">본문1</a></li> <!-- #은 id가 con1인 것을 찾아감-->
<li><a href="#con2">본문2</a></li>
<li><a href="#con3">본문3</a></li>
<li><a href="#con4">본문4</a></li>
</ul>
<!-- (h4[id=con$]{본문$}+p)*4 -->
<h4 id="con1">본문1</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate sed tempore, illum aut deserunt cumque delectus suscipit praesentium pariatur atque incidunt non, neque nemo quos libero distinctio consectetur iure exercitationem!
Voluptas mollitia vitae cumque eligendi repellat recusandae maxime quam illum autem a, quisquam voluptatem deleniti veritatis consequatur reprehenderit temporibus magnam aperiam pariatur, doloremque magni dolorum non voluptates! Perferendis, animi amet.
Delectus unde facere beatae, dolore minima accusamus quidem ab labore. Reiciendis obcaecati animi libero eius, odio eveniet eaque quae pariatur et rerum optio officiis vitae quaerat? Itaque, tempora. Voluptate, laborum?
Deleniti ipsum dolores iste ullam enim accusamus laudantium tenetur, officiis commodi nesciunt est, aperiam nobis eos delectus, veritatis nulla rerum amet reiciendis similique magni sint facilis dolorem earum quia. Perspiciatis.
Aut id distinctio repellat tempora dolor asperiores sed doloribus provident ad perspiciatis commodi consequatur, rerum accusamus, omnis minima? Fuga quisquam deleniti itaque sapiente ratione. Error quaerat harum molestias veritatis praesentium.
</p>
<h4 id="con2">본문2</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate sed tempore, illum aut deserunt cumque delectus suscipit praesentium pariatur atque incidunt non, neque nemo quos libero distinctio consectetur iure exercitationem!
Voluptas mollitia vitae cumque eligendi repellat recusandae maxime quam illum autem a, quisquam voluptatem deleniti veritatis consequatur reprehenderit temporibus magnam aperiam pariatur, doloremque magni dolorum non voluptates! Perferendis, animi amet.
Delectus unde facere beatae, dolore minima accusamus quidem ab labore. Reiciendis obcaecati animi libero eius, odio eveniet eaque quae pariatur et rerum optio officiis vitae quaerat? Itaque, tempora. Voluptate, laborum?
Deleniti ipsum dolores iste ullam enim accusamus laudantium tenetur, officiis commodi nesciunt est, aperiam nobis eos delectus, veritatis nulla rerum amet reiciendis similique magni sint facilis dolorem earum quia. Perspiciatis.
Aut id distinctio repellat tempora dolor asperiores sed doloribus provident ad perspiciatis commodi consequatur, rerum accusamus, omnis minima? Fuga quisquam deleniti itaque sapiente ratione. Error quaerat harum molestias veritatis praesentium.
</p>
<h4 id="con3">본문3</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate sed tempore, illum aut deserunt cumque delectus suscipit praesentium pariatur atque incidunt non, neque nemo quos libero distinctio consectetur iure exercitationem!
Voluptas mollitia vitae cumque eligendi repellat recusandae maxime quam illum autem a, quisquam voluptatem deleniti veritatis consequatur reprehenderit temporibus magnam aperiam pariatur, doloremque magni dolorum non voluptates! Perferendis, animi amet.
Delectus unde facere beatae, dolore minima accusamus quidem ab labore. Reiciendis obcaecati animi libero eius, odio eveniet eaque quae pariatur et rerum optio officiis vitae quaerat? Itaque, tempora. Voluptate, laborum?
Deleniti ipsum dolores iste ullam enim accusamus laudantium tenetur, officiis commodi nesciunt est, aperiam nobis eos delectus, veritatis nulla rerum amet reiciendis similique magni sint facilis dolorem earum quia. Perspiciatis.
Aut id distinctio repellat tempora dolor asperiores sed doloribus provident ad perspiciatis commodi consequatur, rerum accusamus, omnis minima? Fuga quisquam deleniti itaque sapiente ratione. Error quaerat harum molestias veritatis praesentium.
</p>
<h4 id="con4">본문4</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate sed tempore, illum aut deserunt cumque delectus suscipit praesentium pariatur atque incidunt non, neque nemo quos libero distinctio consectetur iure exercitationem!
Voluptas mollitia vitae cumque eligendi repellat recusandae maxime quam illum autem a, quisquam voluptatem deleniti veritatis consequatur reprehenderit temporibus magnam aperiam pariatur, doloremque magni dolorum non voluptates! Perferendis, animi amet.
Delectus unde facere beatae, dolore minima accusamus quidem ab labore. Reiciendis obcaecati animi libero eius, odio eveniet eaque quae pariatur et rerum optio officiis vitae quaerat? Itaque, tempora. Voluptate, laborum?
Deleniti ipsum dolores iste ullam enim accusamus laudantium tenetur, officiis commodi nesciunt est, aperiam nobis eos delectus, veritatis nulla rerum amet reiciendis similique magni sint facilis dolorem earum quia. Perspiciatis.
Aut id distinctio repellat tempora dolor asperiores sed doloribus provident ad perspiciatis commodi consequatur, rerum accusamus, omnis minima? Fuga quisquam deleniti itaque sapiente ratione. Error quaerat harum molestias veritatis praesentium.
</p>
<br><br>
<a href="#main">위로 올라가기</a><br>
<a href="#top">맨 위로</a> <!-- id를 안만들어줘도 됨. html에서 제공해 줌 -->
<br><br>
</body>
</html>