Category/Note

HTML의 앵커(anchor) 태그

Corinee 2024. 9. 14. 17:46
728x90

앵커(anchor) 태그는 HTML에서 하이퍼링크를 정의하는 데 사용됩니다. <a> 태그는 웹 페이지 내에서 다른 페이지로의 링크를 생성하거나, 페이지 내의 특정 위치로 이동할 수 있게 해줍니다.

앵커 태그 기본 사용법

  • 외부 링크: 다른 웹 페이지나 사이트로의 링크를 생성합니다.
<a href="https://www.example.com">Visit Example.com</a>
  • 내부 링크: 같은 웹 페이지 내의 특정 위치로 스크롤을 이동시킵니다.
<a href="#section1">Go to Section 1</a>

앵커 태그로 페이지 내 이동

페이지 내의 특정 위치로 이동하려면, 이동하려는 위치에 id 속성을 추가한 앵커 태그를 사용합니다. 사용자가 링크를 클릭하면, 해당 위치로 스크롤이 자동으로 이동합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anchor Tag Example</title>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p><a href="#section1">Go to Section 1</a></p>
    <p><a href="#section2">Go to Section 2</a></p>

    <div style="height: 800px;">
        <!-- Just to make sure there's enough space to scroll -->
    </div>

    <h2 id="section1">Section 1</h2>
    <p>This is section 1.</p>

    <h2 id="section2">Section 2</h2>
    <p>This is section 2.</p>
</body>
</html>

이 예제에서 <a href="#section1"> 링크를 클릭하면 페이지가 자동으로 스크롤되어 id="section1"이 붙은 위치로 이동합니다.

앵커 태그의 속성

  1. href: 링크의 목적지 URL을 지정합니다. 페이지 내의 특정 위치로 이동할 때는 #id 형식을 사용합니다.
  2. id: 페이지 내의 특정 요소에 고유한 식별자를 부여합니다. 이 식별자는 href 속성의 #id와 매칭됩니다.
  3. name (구식): id 속성이 도입되기 전 사용되었으며, 동일한 역할을 합니다. 현재는 id가 권장됩니다.

사용 예시

  • 내비게이션 메뉴: 웹 페이지의 다른 섹션으로 이동하기 위한 내비게이션 링크를 생성합니다.
  • 문서 내 참조: 긴 문서에서 특정 섹션으로 빠르게 이동할 수 있도록 합니다.
  • FAQ 페이지: 자주 묻는 질문의 목록에서 각 질문으로 바로 이동할 수 있게 합니다.

앵커 태그를 활용하면 사용자에게 더 나은 탐색 경험을 제공할 수 있습니다.

728x90