[HTML] 하이퍼링크(Hyper Link)

개발/HTML

[HTML] 하이퍼링크(Hyper Link)

suniverse 2022. 12. 25. 01:54

하이퍼링크는 텍스트 등의 다양한 요소에 삽입되어 있는 링크를 말한다.

하이퍼 링크 클릭 시 링크 내에 저장된 위치(파일 또는 주소)로 이동한다.

기본 문법은

<a href= "이동할 파일명 또는 주소">화면에 표시할 내용(클릭할 대상)</a>

위의 화면에 표시할 내용은 우리가 일반적으로 클릭하는 아이콘이라고 생각하면 쉽다.

하이퍼링크를 클릭하면 현재 창에서 이동할 위치의 대상을 출력한다.

하지만 target속성을 사용해서 이동 대상을 표시할 위치를 지정할 수 있다.

✍입력

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>제목 표시 위치</title>
</head>
<body>
	<h1>하이퍼링크 연습</h1>
	<a href="https://www.google.com/">구글 바로가기</a>
</body>
</html>

💻출력

구글 바로가기를 클릭하면 구글 기본화면으로 이동한다.

그런데 이 하이퍼링크를 클릭하면 새창으로 연결되지 않고 기존 창에서 연결된다.

새창으로 연결하려면 어떻게 해야 할까?

이럴 때 사용하는 것이 target 속성이다.

target

✍입력

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>제목 표시 위치</title>
</head>
<body>
	<h1>하이퍼링크 연습</h1>
	<a href="https://www.google.com/">구글 바로가기</a>
	<br>
	<a href="https://www.google.com/" target="_blank">구글 바로가기(새창)</a>
</body>
</html>

💻출력

아래의 하이퍼링크를 클릭하면 새 창으로 연결된다.

이동하고 싶은 링크 뒤에 target="_blank"를 적어주면 된다.

절대 경로와 상대 경로

1. 절대 경로: 현재 자신의 위치와 관계없이 항상 동일한 경로로 연결된다. 즉, 무조건 연결 가능한 경로를 말한다. 주로 인터넷상의 url이 절대 경로를 사용한다.

2. 상대 경로: 자신의 위치에 따라 상대적으로 변하는 경로.

현재 위치에서 최상위(= 루트, Root)경로 : /
현재 위치에서 현재 경로 : ./ 또는 생략
현재 위치에서 상위 경로 : ../
현재 위치에서 하위 경로 : ./하위경로 또는 하위경로(./ 생략)

ex) 상대 경로

동일한 문서 내에서의 이동

하이퍼링크를 사용하여 동일한 문서 내에서 이동 시 하이퍼링크를 "#id속성명" 형태로 지정해주면 된다. 이동되는 대상 태그에 꼭 id 속성값을 일치하는 이름으로 설정해야 한다.

ex)

✍입력

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>제목 표시 위치</title>
</head>
<body>
	<h1 id="targetTop">하이퍼링크 연습</h1> <!-- <a href="#targetTOP">Top으로 이동</a> 클릭 시 이동 위치 -->
	<hr>
	<a href="#target1">1번</a>
	<a href="#target2">2번</a>
	<a href="#target3">3번</a>
	<p>I don't want a lot for Christmas
There is just one thing I need
I don't care about the presents underneath the Christmas tree
I just want you for my own
More than you could ever know
Make my wish come true
All I want for Christmas is you
Yeah
I don't want a lot for Christmas
There is just one thing I need (and I)
Don't care about the presents underneath the Christmas tree
I don't need to hang my stocking there upon the fireplace
Santa Claus won't make me happy with a toy on Christmas Day
I just want you for my own
More than you could ever know
Make my wish come true
All I want for Christmas is you
You, baby
<br>
	<h1>1번</h1> <!-- <a href="#target1">1번</a> 클릭 시 이동 위치 -->
<a href="#targetTop">Top으로 이동</a>
<p id="target1">I don't want a lot for Christmas
There is just one thing I need
I don't care about the presents underneath the Christmas tree
I just want you for my own
More than you could ever know
Make my wish come true
All I want for Christmas is you
Yeah
I don't want a lot for Christmas
There is just one thing I need (and I)
Don't care about the presents underneath the Christmas tree
I don't need to hang my stocking there upon the fireplace
Santa Claus won't make me happy with a toy on Christmas Day
I just want you for my own
More than you could ever know
Make my wish come true
All I want for Christmas is you
You, baby
<br>
	<h1>2번</h1> <!-- <a href="#target2">2번</a> 클릭 시 이동 위치 -->
<a href="#targetTop">Top으로 이동</a>
<p id="target2">I don't want a lot for Christmas
There is just one thing I need
I don't care about the presents underneath the Christmas tree
I just want you for my own
More than you could ever know
Make my wish come true
All I want for Christmas is you
Yeah
I don't want a lot for Christmas
There is just one thing I need (and I)
Don't care about the presents underneath the Christmas tree
I don't need to hang my stocking there upon the fireplace
Santa Claus won't make me happy with a toy on Christmas Day
I just want you for my own
More than you could ever know
Make my wish come true
All I want for Christmas is you
You, baby
<br>
	<h1>3번</h1> <!-- <a href="#target3">3번</a> 클릭 시 이동 위치 -->
<a href="#targetTop">Top으로 이동</a>
<p id="target3">I don't want a lot for Christmas
There is just one thing I need
I don't care about the presents underneath the Christmas tree
I just want you for my own
More than you could ever know
Make my wish come true
All I want for Christmas is you
Yeah
I don't want a lot for Christmas
There is just one thing I need (and I)
Don't care about the presents underneath the Christmas tree
I don't need to hang my stocking there upon the fireplace
Santa Claus won't make me happy with a toy on Christmas Day
I just want you for my own
More than you could ever know
Make my wish come true
All I want for Christmas is you
You, baby
	</body>
</html>

💻출력