[HTML] 책갈피 기능 만드는 법 - 페이지 내 이동하기

728x90

SMALL

1. 책갈피 기능

페이지의 길이가 길 경우 페이지 상단에 목차 등을 만들어 페이지를 원하는 부분으로 이동시킬 수 있음
<a> 태그의 name 속성 또는 id 속성을 이용하여 책갈피 기능을 설정

2. 페이지 링크 설정하기

<a href='#도착지에 쓰일 name'>링크에 사용될 문자 또는 이미지</a>
	<a name='도착지 name'>문자 또는 이미지</a>

	<태그 id ='도착지 name'>문자 또는 이미지</태그>

<a> 태그의 'href' 속성값을 '#'로 시작해야 함
여기서 '#' 뒤의 name은 이동하고자 하는 위치의 <a> 태그 name 값과 동일해야 함
이 링크를 클릭하면, 페이지 내의 위치로 커서가 이동함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>책갈피</title>
</head>
<body>
    <h2 id="menu">책갈피</h2>
    <p><a href='#book'>목적지로 이동합니다!</a></p>
    
    <p><a name="book">도착지</a></p>
    <p><a href="#menu">위로</a></p>  <!--도착지 설정-->
    <p><a href="#">위로2</a></p>  <!--무조건 위로-->
</body>
</html>

📄 작성한 HTML 파일

2_책갈피.html

0.01MB

728x90

LIST

'Web > HTML' 카테고리의 다른 글

[HTML] 아이프레임 만드는 법 - 웹사이트 내 웹사이트 삽입하기 (0)	2023.03.27
[HTML] 테이블 만드는 법 - 테이블 속성 설정하기 (1)	2023.03.27
[HTML] 하이퍼링크 만드는 법 - 웹페이지 이동하기! (0)	2023.03.24
[HTML] HTML의 태그 종류에 대해 알아보자🧐 (0)	2023.03.24
[HTML] 파일 경로 작성하는법(절대경로와 상대경로) (0)	2023.03.24