■ 요약
▶ 페이지에 북마크를 정의하려면 "id" 속성 (id="value")를 사용한다.
▶ 북마크에 대해 링크하려면 "href" 속성 (href="#value")을 사용한다. ( '#' 은 id 선택자 )
▶ HTML 링크는 북마크를 생성하여 사용할 수 있다
▶ 사용자는 웹 페이지의 특정한 부분으로 이동할 수 있다.
■ HTML 에서 북마크 생성하기
▶ 북마크는 웹 페이지가 매우 길다면 유용할 수 있다.
▶ 북마크 생성 - 먼저 북마크를 만든 다음 링크를 추가한다.
▶ 링크를 클릭하면 책갈피가 있는 위치까지 페이지가 아래 혹은 위로 스크롤된다.
■ 예시
▶ 먼저 북마크를 만들기위해 "id" 속성을 사용한다.
<h2 id="C4">Chapter 4</h2>▶ 다음, 같은 페이지 내에서 북마크에 대한 링크를 추가한다.
<a href="#C4">Jump to Chapter 4</a>▶ 다른 페이지에 북마크에 대한 링크를 추가할 수도 있다.
<a href="html_demo.html#C4">Jump to Chapter 4</a><!DOCTYPE html>
<html>
<body>
<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>'HTML' 카테고리의 다른 글
| HTML / (17) 이미지 맵 (0) | 2023.02.19 |
|---|---|
| HTML / (16) 이미지 (0) | 2023.02.19 |
| HTML / (14) 링크 - 다른 색상 (0) | 2023.02.17 |
| HTML / (13) 링크 - 하이퍼링크 (1) | 2023.02.16 |
| HTML / (12) CSS (0) | 2023.02.16 |