Please Enable JavaScript!
Gon[ Enable JavaScript ]

반응형

<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 속성으로 내부 링크(책갈피) 기능 구현하는 방법

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다.
HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법
HTML 입력양식 input 태그 HTML5 추가된 type 타입
윈도우 메모장에 HTML 문서 작성하는 방법
HTML5 와 CSS 이용해 페이지 레이아웃 만드는 방법
HTML 단락 들여쓰기 blockquote 태그 사용하는 방법

 

 

 

 

두 번째 샘플은 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="#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 속성으로 내부 링크(책갈피) 기능 구현하는 방법

 

 

두 번째 페이지가 열리면서 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 속성으로 내부 링크(책갈피) 기능 구현하는 방법

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다.
HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법
HTML 입력양식 input 태그 HTML5 추가된 type 타입
윈도우 메모장에 HTML 문서 작성하는 방법
HTML5 와 CSS 이용해 페이지 레이아웃 만드는 방법
HTML 단락 들여쓰기 blockquote 태그 사용하는 방법
반응형
Posted by 녹두장군1
,