어제 오늘 내일

[html] 책갈피 기능 만들기 (페이지 내 이동) 본문

IT/HTML&CSS

[html] 책갈피 기능 만들기 (페이지 내 이동)

hi.anna 2022. 7. 25. 06:42

 

HTML 페이지가 길 경우,

페이지의 상단에 목차를 만들고,

목차를 클릭하면, 페이지의 원하는 부분으로 이동하고자 할 때

책갈피 기능을 사용할 수 있습니다.

 

 

페이지 링크 만들기

<a href='#title1'>제목 1</a>
<a href='#title2'>제목 2</a>

<a> 태그의 'href' 속성값을 '#'로 시작해야 합니다.

여기서 '#' 뒤의 'title1', 'title2'는 이동하고자 하는 위치의 <a> 태그 name 값입니다.

이 링크를 클릭하면, 페이지 내의 위치로 커서가 이동합니다.

 

 

 

이동하고자 하는 위치 지정

<a name='title1'></a> <p>제목 1</p>
  ....content....

<a name='title2'></a> <p>제목 2</p>
  ....content....

이동하고자 하는 위치에 <a> 태그를 추가하고,

name 속성에 고유한 이름을 지정해 줍니다.

 

 

 

반응형
Comments