반응형
⚫앵커(Anchor) : 페이지에서 특정 태그로 위치(스크롤)를 이동하는 기능
=> href 속성값으로 설정된 URL 주소 뒤에 # 기호를 사용하여 태그 식별자(id 속성값)를
설정하면 해당 식별자의 태그로 위치가 이동 - 앵커 기능
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1 id="top">a 태그</h1>
<hr>
<!-- a 태그를 사용하여 클릭 이벤트가 발생되면 href 속성값으로 설정된 URL 주소의 웹문서
(웹프로그램)을 요청하여 HTML 문서로 응답받아 출력 처리 -->
<!-- => href 속성값으로 설정된 URL 주소 뒤에 # 기호를 사용하여 태그 식별자(id 속성값)를
설정하면 해당 식별자의 태그로 위치가 이동 - 앵커 기능 -->
<a href="/web/html/08_anchor.html#product">제품소개</a>
<a href="08_anchor.html#review">구매후기</a>
<!-- 동일한 HTML 문서에서 출력 태그의 위치만 변경할 경우 요청 웹문서의 URL 주소 생략 가능 -->
<a href="#message">주의사항</a>
<hr>
<!-- id 속성 : 태그를 구분하기 위한 식별자(고유값)를 속성값으로 설정 -->
<h2 id="product">제품소개</h2>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<a href="#top">[처음으로]</a>
<hr>
<h2 id="review">구매후기</h2>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<p>아직 사용해 보진 않았지만 좋은것 같습니다.</p>
<a href="#top">[처음으로]</a>
<hr>
<h2 id="message">주의사항</h2>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<a href="#top">[처음으로]</a>
</body>
</html>
실행결과⬇️
위의 화면에서 [구매후기] 버튼을 클릭하면 앵커 기능을 통해 아래와 같이 구매후기 부분으로 바로 이동함⬇️
반응형
'Frontend > HTML' 카테고리의 다른 글
| [HTML]10_iframe 태그 (0) | 2023.12.25 |
|---|---|
| [HTML]09_map 태그 (0) | 2023.12.25 |
| [HTML]07_a 태그 (0) | 2023.12.25 |
| [HTML]06_tbody 태그 & style 태그 & caption 태그 (0) | 2023.12.25 |
| [HTML]05_table 태그 (0) | 2023.12.25 |
