HTML 하이퍼링크 a 태그 id 속성으로 내부 링크(책갈피) 기능 구현하는 방법

 

환경: Eclipse Mars

 

<a> 태그는 외부뿐만 아니라 내부 웹 페이지에서도 연결을 할 수 있습니다. 연결 지점만 세팅해두면 클릭하는 순간에 바로 이동이 가능하죠. 그래서 이 기능을 책갈피라고 부릅니다. 이것을 가능하게 하는 것이 id 속성입니다. 또는 top, bottom 값을 이용해서 스크롤바를 이용하지 않고 화면의 최상단이나 하단으로 이동할 수가 있습니다. 이전에는 name 속성을 사용했지만 HTML5 부터 id 로 바뀌었습니다.

 

문법은 아래와 같습니다. 먼저 이동할 위치가 정해 지면 <a> 태그 id 속성에 이름을 넣습니다. 그리고 href 속성에 “# + 이름으로 조합해서 넣고 클릭하시면 id 속성에 해당 이름이 있는 곳으로 이동합니다.

 

<a id=”이동위치이름”> 이동할 위치</a>

<a href=”#이동위치이름”> 위치 이동 클릭</a>

 

아래 샘플 소스는 위 아래 이동을 위해 스크롤이 생기도록 <p> 태그의 높이를 지정했습니다. 그리고 상단과 하단에 <a> 태그의 id 속성에 이름을 넣고 클릭하면 이동이 될 수 있도록 만들었습니다.

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>HTML</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
</style>
</head>
<body>
	<p><a href="#pos2">문서의 하단 지정 위치로</a></p>
	<p><a id="pos1">상단 위치</a></p>
	
	<p style="height:300px;">스크롤 효과를 위해 문단의 높이 지정</p>
	
	<p><a href="#pos1">문서의 상단 지정 위치로</a></p>
	<p><a id="pos2">하단 위치</a></p>
	
</body>
</html>

 

HTML 하이퍼링크 a 태그 id 속성으로 내부 링크(책갈피) 기능 구현하는 방법

 

두 번째 샘플은 id 속성을 지정하지 않아도 브라우저 상단 끝으로 이동할 수 있는 #top 에 대한 것입니다. #top 이 있으면 브라우저 하단 끝으로 갈 수 있는 #bottom 이 있지 않을까 라는 생각을 하게 되는데 존재하지 않습니다. 상단 이동은 #top 으로 가능하지만 하단은 id 속성을 이용해야 합니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>HTML</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
</style>
</head>
<body>
	<p><a href="#footer">문서의 하단 지정 위치로</a></p>
	
	<p style="height:300px;">스크롤 효과를 위해 문단의 높이 지정</p>
	
	<p><a id="footer">하단 위치</a></p>
	<p><a href="#top">문서의 상단 지정 위치로</a></p>
</body>
</html>

HTML 하이퍼링크 a 태그 id 속성으로 내부 링크(책갈피) 기능 구현하는 방법

 

¤ 다른 HTML 페이지로 책갈피 이동

 

이번에는 하이퍼링크를 통해 다른 페이지의 책갈피로 이동해 보겠습니다. href 속성에 값을 넣을 때 페이지 URL 을 넣고 “# + 아이디명붙이시면 됩니다. 그리고 다른 페이지로 이동할 때 href 속성값만 넣으면 클릭했던 창에서 열리겠지만 target=”_blank” 추가하게 되면 새 창으로 열립니다. 먼저 첫 페이지에 소스입니다. 아래 설정한 내용과 같이 <a href="body.html#otherpage"> 의미는 body.html 파일에 책갈피 id otherpage 로 이동하라는 말입니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>HTML</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
</style>
</head>
<body>
	<p><a href="body.html#otherpage">다른 HTML 페이지 책갈피 이동</a></p>
</body>
</html>

HTML 하이퍼링크 a 태그 id 속성으로 내부 링크(책갈피) 기능 구현하는 방법

 

두 번째 페이지가 열리면서 otherpage 찾아 화면이 이동합니다. 스크롤이 생기더라도 자동으로 해당 위치를 찾아 하게 됩니다.  

<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=euc-kr">
<title> HTML 예제 </title>
</head>
<body>
 <p>
   <a href="http://www.korea.com">South Korea’s</a> suicide 
   rate remained highest among members of the Organization 
   for Economic Cooperation and 
   <a href="http://mainia.tistory.com">Development</a>, 
   while its health status was among the lowest, a recent OECD data showed.
 </p>
 <p style="height:300px;"> </p> 
 <p><a id="otherpage">다른 페이지 책갈피</a> </p> 
</body>
</html>

HTML 하이퍼링크 a 태그 id 속성으로 내부 링크(책갈피) 기능 구현하는 방법

 

 

저작자 표시 비영리 변경 금지
신고
Posted by 녹두장군