HTML - anchor 태그

yeong ·2022년 11월 9일

a 태그의 href 속성값으로 URL 주소를 설정하면 클릭 이벤트에 의해 페이지 이동

URL 주소 뒤에 기호를 사용하여 태그 식별자를 설정하면 해당 식별자의 태그로 출력위치 이동 - 앵커
앵커(Anchor) : 출력 페이지에서 특정 위치로 스크롤을 이동하는 기능
형식) URL#ID - 동일한 웹문서에서 위치만 이동할 경우 URL 주소 생략 가능

	<h1 id="top">a 태그</h1>

<!-- href의 속성값에 #id값으로 원하는 스크롤 위치 표시. -->
	<a href="/web/html/08_anchor.html#product">제품소개	   </a>&nbsp;&nbsp;&nbsp;
	<a href="08_anchor.html#review">구매후기</a>&nbsp;&nbsp;&nbsp;
	<a href="#message">주의사항</a>&nbsp;&nbsp;&nbsp;

	<!-- 우선 URL접속시 원하는 스크롤위치에 해당하는 태그에 id설정해준다. -->
	<h3 id="product">제품소개</h3>
	<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>
	<h3 id="review">구매후기</h3>
	<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>
	<h3 id="message">주의사항</h3>
	<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>

0개의 댓글