09. HTML-Typing the contents(Hyperlink)

[toc]

4. 웹 문서에 내용 입력하기

4-6. 하이퍼링크 삽입하기

이번 학습에서는 HTML 문서 내에서 하이퍼링크를 삽입하는 방법에 대해 다루었다. 텍스트 또는 이미지를 클릭했을 때 다른 문서나 외부 웹 페이지로 이동하게 만드는 링크는 웹의 핵심 기능 중 하나이다.

---

1. <a> 태그와 href 속성

• 링크를 삽입하려면 <a> 태그를 사용한다.
• href 속성을 통해 연결하고자 하는 문서나 외부 URL을 지정한다.
• 텍스트뿐만 아니라 이미지도 링크로 사용할 수 있다.

<a href="링크 주소">텍스트 또는 이미지</a>

---

📌 텍스트 링크 만들기

<div>
  <a href="/Users/goyeonghun/Desktop/hoon/01.html">여기를 클릭하세요</a>
</div>

• 위 코드는 텍스트 “여기를 클릭하세요”를 클릭하면 지정된 HTML 파일로 이동하는 예이다.
• 링크가 적용된 텍스트는 기본적으로 글자색이 바뀌고 밑줄이 생기는데, 이는 CSS로 스타일을 조절할 수 있다.

---

📌 이미지 링크 만들기

• 이미지도 텍스트와 마찬가지로 <a> 태그 내부에 넣어 링크로 만들 수 있다.

<a href="02.html"><img src="./gyh.png" alt="고영훈"></a>

• 이미지를 클릭하면 해당 링크로 이동한다.

---

2. target 속성 — 새 창에서 링크 열기

• 기본적으로 링크는 같은 브라우저 탭에서 열린다.
• 하지만 다음과 같이 target="_blank" 속성을 사용하면 새로운 창 또는 탭에서 링크가 열리게 할 수 있다.

<div>
  <p>
    <a href="02.html" target="_blank"><img src="./gyh.png" alt="고영훈"></a>
  </p>
</div>

• 이 방법은 사용자가 원래 문서를 유지하면서 새로운 링크를 열고자 할 때 유용하다.
• 예를 들어, 참고자료, 외부 문서, 복사 불가능한 콘텐츠를 동시에 보고자 할 때 자주 사용된다.

---

💡 정리
HTML의 하이퍼링크 기능은 <a> 태그를 중심으로 href, target 등 다양한 속성을 활용하여 구현된다. 텍스트나 이미지를 링크로 만들 수 있으며, 사용자 경험을 고려해 새 창에서 열리는 설정도 선택할 수 있다.

---

End