<a> 태그의 name 속성 또는 id 속성을 이용하여 책갈피 기능을 설정
<a href="#도착지에 쓰일 name">링크에 사용될 문자 또는 이미지</a>
<a name="도착지 name">문자 또는 이미지</a>
<태그 id="도착지 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>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta voluptas sed, esse exercitationem eveniet veritatis enim. A aliquam itaque explicabo, culpa iure labore. Provident pariatur unde facilis adipisci, nulla dolore.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta voluptas sed, esse exercitationem eveniet veritatis enim. A aliquam itaque explicabo, culpa iure labore. Provident pariatur unde facilis adipisci, nulla dolore.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta voluptas sed, esse exercitationem eveniet veritatis enim. A aliquam itaque explicabo, culpa iure labore. Provident pariatur unde facilis adipisci, nulla dolore.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta voluptas sed, esse exercitationem eveniet veritatis enim. A aliquam itaque explicabo, culpa iure labore. Provident pariatur unde facilis adipisci, nulla dolore.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta voluptas sed, esse exercitationem eveniet veritatis enim. A aliquam itaque explicabo, culpa iure labore. Provident pariatur unde facilis adipisci, nulla dolore.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta voluptas sed, esse exercitationem eveniet veritatis enim. A aliquam itaque explicabo, culpa iure labore. Provident pariatur unde facilis adipisci, nulla dolore.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta voluptas sed, esse exercitationem eveniet veritatis enim. A aliquam itaque explicabo, culpa iure labore. Provident pariatur unde facilis adipisci, nulla dolore.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta voluptas sed, esse exercitationem eveniet veritatis enim. A aliquam itaque explicabo, culpa iure labore. Provident pariatur unde facilis adipisci, nulla dolore.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta voluptas sed, esse exercitationem eveniet veritatis enim. A aliquam itaque explicabo, culpa iure labore. Provident pariatur unde facilis adipisci, nulla dolore.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta voluptas sed, esse exercitationem eveniet veritatis enim. A aliquam itaque explicabo, culpa iure labore. Provident pariatur unde facilis adipisci, nulla dolore.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta voluptas sed, esse exercitationem eveniet veritatis enim. A aliquam itaque explicabo, culpa iure labore. Provident pariatur unde facilis adipisci, nulla dolore.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta voluptas sed, esse exercitationem eveniet veritatis enim. A aliquam itaque explicabo, culpa iure labore. Provident pariatur unde facilis adipisci, nulla dolore.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta voluptas sed, esse exercitationem eveniet veritatis enim. A aliquam itaque explicabo, culpa iure labore. Provident pariatur unde facilis adipisci, nulla dolore.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta voluptas sed, esse exercitationem eveniet veritatis enim. A aliquam itaque explicabo, culpa iure labore. Provident pariatur unde facilis adipisci, nulla dolore.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta voluptas sed, esse exercitationem eveniet veritatis enim. A aliquam itaque explicabo, culpa iure labore. Provident pariatur unde facilis adipisci, nulla dolore.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta voluptas sed, esse exercitationem eveniet veritatis enim. A aliquam itaque explicabo, culpa iure labore. Provident pariatur unde facilis adipisci, nulla dolore.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta voluptas sed, esse exercitationem eveniet veritatis enim. A aliquam itaque explicabo, culpa iure labore. Provident pariatur unde facilis adipisci, nulla dolore.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta voluptas sed, esse exercitationem eveniet veritatis enim. A aliquam itaque explicabo, culpa iure labore. Provident pariatur unde facilis adipisci, nulla dolore.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta voluptas sed, esse exercitationem eveniet veritatis enim. A aliquam itaque explicabo, culpa iure labore. Provident pariatur unde facilis adipisci, nulla dolore.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta voluptas sed, esse exercitationem eveniet veritatis enim. A aliquam itaque explicabo, culpa iure labore. Provident pariatur unde facilis adipisci, nulla dolore.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta voluptas sed, esse exercitationem eveniet veritatis enim. A aliquam itaque explicabo, culpa iure labore. Provident pariatur unde facilis adipisci, nulla dolore.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta voluptas sed, esse exercitationem eveniet veritatis enim. A aliquam itaque explicabo, culpa iure labore. Provident pariatur unde facilis adipisci, nulla dolore.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta voluptas sed, esse exercitationem eveniet veritatis enim. A aliquam itaque explicabo, culpa iure labore. Provident pariatur unde facilis adipisci, nulla dolore.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta voluptas sed, esse exercitationem eveniet veritatis enim. A aliquam itaque explicabo, culpa iure labore. Provident pariatur unde facilis adipisci, nulla dolore.</p>
<p><a name="book">도착지</a></p>
<p><a href="#menu">위로</a></p>
<p><a href="#">위로</a></p>
</body>
</html>728x90
반응형
'KDT > HTML | CSS' 카테고리의 다른 글
| 아이프레임(iframe) (0) | 2023.03.24 |
|---|---|
| 테이블 만들기 (0) | 2023.03.24 |
| 하이퍼링크(HyperLink) (1) | 2023.03.24 |
| HTML 태그 종류 (0) | 2023.03.23 |
| HTML 개요 (0) | 2023.03.23 |
