<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 입력한 형태 그대로 보여 주는 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 책갈피로 이동하기 |
▼ 이번에는 하이퍼링크를 통해 다른 페이지의 책갈피로 이동해 보겠습니다. 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>
▼ 두 번째 페이지가 열리면서 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 입력한 형태 그대로 보여 주는 pre 태그 사용법 ▶ HTML 입력양식 input 태그 HTML5 추가된 type 타입 ▶ 윈도우 메모장에 HTML 문서 작성하는 방법 ▶ HTML5 와 CSS 이용해 페이지 레이아웃 만드는 방법 ▶ HTML 단락 들여쓰기 blockquote 태그 사용하는 방법 |
'웹 프로그래밍 > HTML' 카테고리의 다른 글
| 윈도우 메모장에 HTML 문서 작성하는 방법 (1) | 2024.02.20 |
|---|---|
| HTML 구분선, 수평선을 그을 때 이용하는 hr 태그 사용법 (1) | 2024.01.12 |
| HTML 일련번호가 있는 목록 나열 ol, li 태그 사용법 (1) | 2023.12.04 |
| HTML 용어 정의할 때 사용하는 dl, dt, dd 태그 사용법 (1) | 2022.12.01 |
| HTML 하이퍼링크 a 태그로 사이트 연결하기 (1) | 2022.11.09 |
| HTML5 와 CSS 이용해 페이지 레이아웃 만드는 방법 (0) | 2022.11.01 |
| HTML 입력양식 input 태그 HTML5 추가된 type 타입 에 대한 설명 (2) | 2022.07.03 |
| HTML 입력양식 input 태그 기본 적인 타입에 대한 설명 (0) | 2019.04.26 |
