-
하이퍼링크 태그프로그래밍/HTML&CSS 2022. 8. 21. 11:50728x90
하이퍼링크란 다른 페이지나 사이트로 연결하는 링크로 웹 페이지에서 문자 혹은 이미지를 클릭했을 때 반응하여 사전에 연결해둔 페이지로 이동하는 기술이다.
하이퍼링크을 구현하기 위해서는 <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 페이지를 불러오는 코드이다.
1_하이퍼링크.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>
subpages.html 서브 페이지에서 "돌아가기" 혹은 "돌아가기 이미지"를 클릭할 시에 연결된 경로인 "1_하이퍼링크.html"를 호출하여 페이지 이동을 한다.
728x90'프로그래밍 > HTML&CSS' 카테고리의 다른 글
form 태그 (0) 2022.08.23 iframe(아이프레임) (0) 2022.08.22 테이블(table) 태그 (0) 2022.08.21 이미지 태그 (0) 2022.08.21 목록(list) 태그 (0) 2022.08.20