3. HTML_하이퍼링크 정리 <a>태그

🔗 외부 사이트/다른 문서로 이동

<ul>
    <!-- a 태그: href는 반드시 필요 -->
    <li><a href="https://www.naver.com">네이버</a></li>
    <li><a href="https://www.metabuild.co.kr/">메타빌드</a></li>
    <li><a href="Ex02.html">Ex02.html</a></li>
</ul>

<!-- 이미지를 클릭했을 때 링크로 이동 -->
<a href="https://www.daum.net">
    <img src="./images/cafe3.jpg" height="100" width="100">
</a>

 

• a href="URL" : 링크 지정 (텍스트 또는 이미지 클릭 시 이동)
• 다른 HTML 파일(Ex02.html)로도 이동 가능
• 이미지를 <a>로 감싸면 클릭 시 링크 이동

---

🔗 같은 페이지 내에서 이동 (앵커 링크)

<ul>
    <li><a href="#one">네이버</a></li>
    <li><a href="#two">메타빌드</a></li>
    <li><a href="#three">Ex02.html</a></li>
</ul>

<!-- 이미지를 클릭하면 외부 페이지로 이동 -->
<a href="https://www.daum.net">
    <img src="./images/cafe3.jpg" height="800" width="200">
</a>
<br>

<!-- 앵커 대상 -->
<h1 id="one">apple</h1>   <!-- 클릭 시 apple 위치로 이동 -->
<h2 id="two">grape</h2>
<h3 id="three">banana</h3>

<!-- 맨 위로 이동 -->
<a href="#">맨 위로 이동하기</a>

 

• id 속성과 href="#id명"을 연결하면 같은 문서 안에서 이동 가능
• href="#" 는 페이지 맨 위로 이동

 

 

---

✅ 정리

1. 외부 링크: href="http://..."
2. 내부 문서 링크: href="파일명.html"
3. 앵커 링크(같은 페이지 이동): id와 href="#id명" 연결
4. 맨 위로 이동: href="#"