프로그래밍/HTML&CSS
하이퍼링크 태그
하와이블루
2022. 8. 21. 11:50
728x90
하이퍼링크란 다른 페이지나 사이트로 연결하는 링크로 웹 페이지에서 문자 혹은 이미지를 클릭했을 때 반응하여 사전에 연결해둔 페이지로 이동하는 기술이다.
하이퍼링크을 구현하기 위해서는 <a> 태그를 사용한다.
<a> 태그의 사용법을 알아보자.
<a href="사이트 또는 이동할 문서의 위치"> 링크에 사용될 문자 또는 이미지</a>href 안에는 상대 경로 혹은 절대경로, URL 를 입력하고 <a> 태그 사이에 문자 혹은 이미지<img>를 삽입하여 구현한다.
[1_하이퍼링크.html]
<!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://www.daum.net">
<img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" alt="다음">
</a>
</p>
<!-- 상대 경로 -->
<p>
<a href="./pages/subpages.html">서브페이지</a>
</p>
<p>
<a href="./pages/subpages.html">
<img src="./img/enter.png" alt="서브페이지">
</a>
</p>
</body>
</html>위 와 같이 코드를 작성하였다면 "다음" 혹은 "다음 로고 이미지"를 클릭할시 다음 URL를 통해 다음 페이지로 이동하게된다.
그 아래는 다음 pages 폴더에 subpages.html이라는 다른 HTML 페이지를 만들어 "서브페이지" 혹은 "서브페이지 이미지" 를 클릭할 경우 subpages.html 페이지를 불러오는 코드이다.
[subpages.html]
<!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>이곳은 서브페이지 입니다.</p>
<p>
<a href="../1_하이퍼링크.html">돌아가기</a>
</p>
<p>
<a href="../1_하이퍼링크.html">
<img src="../img/back.png" alt="돌아가기">
</a>
</p>
</body>
</html>
서브 페이지에서 "돌아가기" 혹은 "돌아가기 이미지"를 클릭할 시에 연결된 경로인 "1_하이퍼링크.html"를 호출하여 페이지 이동을 한다.
728x90