HTML a 태그 외부 문서 vs 내부 문서 이동 차이

HTML <a> 태그

HTML <a> 태그는 웹문서를 하이퍼링크 시켜주는 문법입니다. HTML의 핵심기능이자 HTML이 개발되었을 때 첫 번째로 탄생한 태그입니다.

외부 문서로 이동

<a> 태그의 기본 사용법은 href 속성과 함께 사용됩니다. href="이동할 주소" 를 기입하면 웹페이지의 링크를 생성할 수 있습니다.

<a href="https://ko.wikipedia.org/wiki/%ED%86%B5%ED%99%94">위키백과 - 통화</a>

예제 ▷

내부 문서로 이동

HTML의 id 속성을 사용하면, <a> 태그에 주소를 id 값을 입력하여 내부 페이지에서 이동을 할 수 있습니다. 목차를 만들 때 사용합니다.

아래 예시는 하단의 <h3> 태그에 babo 라는 이름을 가진 id값 즉 주소를 만들었습니다.

그리고 상단의 <p> 태그의 <a> 태그에서 href 뒤의 주소를 babo 로 적었습니다. 그럼 클릭을 하면, babo의 id값이 있는 곳으로 이동합니다.

<p>원소의 종류</p>
<p><a href="#babo">비활성 기체 원소의 종류</a></p>
<h3>1.원소의 종류</h3>
  <ul>
    <li>수소</li>
    <li>리튬</li>
    <li>베릴륨</li>
    <li>나트륨</li>
    <li>칼륨</li>
    <li>루비듐</li>
    <li>세슘</li>
    <li>프랑슘</li>
    <li>마그네슘</li>
    <li>칼슘</li>
    <li>스트론튬</li>
    <li>바륨</li>
    <li>라듐</li>
    <li>스칸듐</li>
    <li>이트륨</li>
    <li>타이타늄</li>
    <li>지르코늄</li>
    <li>하프늄</li>
    <li>러더포듐</li>
    <li>바나듐</li>
  </ul>
<h3 id="babo">2.비활성 기체 원소의 종류</h3>
  <ul>
    <li>헬륨</li>
    <li>네온</li>
    <li>아르곤</li>
    <li>크립톤</li>
    <li>제논</li>
    </ul>라돈

예제 ▷