[Web] Anchor (a 태그)

Anchor의 개념 및 사용법에 대해 간단히 정리한다.

📎 Anchor

Anchor의 특징

<a> 태그를 사용하며, 하나의 문서에서 다른 문서로 연결하기 위해 사용한다.
태그를 서로 중첩해서 사용할 수 없다.

Anchor 속성 및 사용법

href
하이퍼링크를 클릭했을 때 이동할 문서의 URL이나 문서의 책갈피를 지정한다.
target
하이퍼링크를 클릭했을 때 현재 윈도우 또는 새로운 윈도우에서 이동할지 지정한다. (default는 _self)
title
하이퍼링크에 마우스 오버 시 설명을 출력한다.

<a href="http://www.naver.com" title="네이버로 이동">네이버</a>
<a href="http://www.google.com" target="_self">구글</a>
<a href="http://www.daum.com" target="_blank">다음</a>
<!--target 속성은 이 외에도 _parent, _top도 존재, 하지만 잘 사용x-->

같은 페이지 안에서 이동

같은 페이지 안에서도 특정 요소 클릭 시 그 위치로 이동하는 것이 가능하다.

<body>
	<h3>목차</h3>
	<ul>
		<li><a href="#content1">내용1</a></li>
		<li><a href="#content2">내용2</a></li>
		<li><a href="#content3">내용3</a></li>
	</ul>
	
	<h3 id="content1">[내용1]</h3>
	<p>긴 내용 ...</p>
	<h3 id="content2">[내용2]</h3>
	<p>긴 내용 ...</p>
	<h3 id="content3">[내용3]</h3>
	<p>긴 내용 ...</p>
</body>

저작자표시

'1️⃣ Web > 기타' 카테고리의 다른 글

[Web] Chrome Cross-Origin 정책 변경에 따른 iframe 활용 방안 (feat. PostMessage) (1)	2023.10.14
[Web] ElasticSearch nori & Bulk API 활용 (0)	2023.04.02
[Web] ElasticSearch 적용 방안 탐색 (0)	2023.04.02
[Web] input 태그의 id와 name 차이점 (0)	2022.09.18
[Web] Form Tag와 이벤트, 이벤트 핸들러 (2)	2022.09.18

Seol-Hee! 💫

[Web] Anchor (a 태그)

📎 Anchor

'1️⃣ Web > 기타' 카테고리의 다른 글

댓글

티스토리툴바

[Web] Anchor (a 태그)

📎 Anchor

'1️⃣ Web > 기타' 카테고리의 다른 글

관련글

댓글

티스토리툴바