반응형
HTML 링크를 사용하여 독서자가 웹 페이지의 특정 부분으로 이동할 수 있도록 책갈피를 작성할 수 있다.
HTML에서 북마크 생성
웹 페이지가 매우 긴 경우 책갈피가 유용할 수 있다.
책갈피를 작성하려면 - 먼저 책갈피를 작성한 후 연결을 추가한다.
링크를 클릭하면 페이지가 아래로 스크롤되거나 책갈피가 있는 위치로 이동한다.
id 속성을 사용하여 북마크 생성
먼저 id 특성을 사용하여 북마크를 만든다:
| <h2 id="C4">Chapter 4</h2> |
그런 다음 동일한 페이지 내에서 책갈피에 대한 링크("4장으로 이동")를 추가한다:
|
<a href="#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> |
다른 페이지의 책갈피에 대한 링크를 추가할 수도 있다:
| <a href="html_demo.html#C4">Jump to Chapter 4</a> |
마무리
- id 속성(id="value")을 사용하여 페이지에서 책갈피를 정의한다
- href 속성(href="#value")을 사용하여 책갈피에 연결한다
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
반응형
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 이미지 맵(Image Maps) (0) | 2023.04.30 |
|---|---|
| HTML 이미지(Image) (0) | 2023.04.29 |
| HTML 링크-다른색상 (0) | 2023.04.27 |
| HTML 링크(Links-Hyperlinks) (0) | 2023.04.26 |
| HTML CSS (0) | 2023.04.25 |
댓글