html 문서에서 북마크를 이용하여 사용자로 하여금 보고 싶은 컨텐츠가 있는 곳으로 빠르게 화면을 이동시킬 수 있다. 링크태그와 선택자 아이디를 이용하면 북마크 기능을 만들 수 있는데 링크 태그에는 이동할 선택자 아이디를 지정하고 대상 컨텐츠에는 아이디를 지정하면 된다. 링크 태그에 이동할 선택자 아이디를 지정할 때는 #과 함께 사용한다.
html 링크 태그 북마크 처럼 사용하기
using a link tag bookmark
웹페이지를 만들 때 스크롤이 길면 사용자로 하여금 불편함을 줄 수 있다.
하지만, 링크 태그에 이동할 선택자를 지정하면 사용자가 원하는 정보로 스크롤을 하지 않아도 이동할 수 있다.
현재 원페이지로 이루어진 많은 홈페이지들이 이런 방식을 채용하고 있기도 하고, 컨텐츠적으로 내용이 많은 웹문서일수록 이런 방식은 자주 사용된다.
링크 태그에 태그 선택자 아이디를 지정하여 특정 내용으로 이동하는 것을 북마크라 한다.
링크 태그와 id 선택자 연결
북마크 기능을 사용하기 위해선 기본적으로 html 선택자인 아이디를 사용한다.
이동할 곳에 아이디를 지정하고 링크 태그에 이동할 아이디를 지정하는 것을 의미한다.
아이디를 지정할 때는 #을 이용한다.
아래는 링크 태그를 이용하여 북마크 기능을 사용할 수 있도록 하는 것을 보여준다.
아래 구문은 링크 태그를 클릭하면 링크 태그에 지정된 선택자 아이디가 있는 곳으로 화면이 이동한다.
URL 부분은 넣을 수도 있지만, 생략이 가능하다.
<p><a href="[URL]#타겟id">이동</a></p>
<h2 id="선택자_아이디">내용</h2>샘플코드
위의 방식으로 html 북마크 기능에 대한 예제를 만들어 본다.
코드는 길지만 링크 태그에 있는 선택자 아이디가 있는 부분만 보면 된다.
링크 태그에 지정된 선택자 아이디는 2가지 정도이며, 태그를 클릭하면 새로운 웹페이지가 아닌 문서 내에서 이동할 아이디가 작성된 부분으로 이동한다.
<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>
<!-- html 문서 시작 -->
<html>
<!-- 문서 정보 -->
<head>
<style>
</style>
</head>
<!-- // -->
<!-- 문서 내용 -->
<body>
<div>
<p><a href="#CHAP3">목차 3 으로 이동</a></p>
<p><a href="#CHAP5">목차 5 으로 이동</a></p>
<h2>목차 1</h2>
<p>목차 1의 내용은 이런저런 블라블라 입니다</p>
<h2>목차 2</h2>
<p>목차 2의 내용은 이런저런 블라블라 입니다</p>
<h2 id="CHAP3">목차 3</h2>
<p>목차 3의 내용은 이런저런 블라블라 입니다</p>
<h2>목차 4</h2>
<p>목차 4의 내용은 이런저런 블라블라 입니다</p>
<h2 id="CHAP5">목차 5</h2>
<p>목차 5의 내용은 이런저런 블라블라 입니다</p>
<h2>목차 6</h2>
<p>목차 6의 내용은 이런저런 블라블라 입니다</p>
<h2>목차 7</h2>
<p>목차 7의 내용은 이런저런 블라블라 입니다</p>
</div>
</body>
<!-- // -->
</html>
<!-- // -->쓸데없이 코드가 길지만 링크 태그에 작성된 아이디만 보면 된다.
목차 3을 클릭하면 #CHAP3 아이디가 있는 부분으로 이동할 것이고 목차 5를 클릭하면 #CHAP5 아이디가 있는 부분으로 화면이 이동할 것이다.
결과 화면을 보자.
'programming > web' 카테고리의 다른 글
| html 이미지 크기 조절 하기 changing image size in html (0) | 2022.05.27 |
|---|---|
| html img 태그 사용 화면에 이미지 표시 using html image tag (0) | 2022.05.23 |
| html 링크 태그 버튼 모양 스타일 적용하기 using html link tag button style (0) | 2022.05.14 |
| html 링크태그 색깔 종류 using html hyper link tag colors (0) | 2022.05.10 |
| html 하이퍼링크 a tag 4가지 속성 특징 using html hyperlink a tag arrtibutes (0) | 2022.05.02 |
댓글