Chapter 1-11. 링크 표시하기(HTML)

📌 HTML에서 링크 만들기: a 태그 사용법

🔹 링크란 무엇인가?

링크는 현재 문서에서 다른 문서로 이동할 수 있는 수단입니다. 사용자는 링크를 클릭하여 웹 페이지 내에서 다른 페이지로 빠르게 이동할 수 있습니다.

🔹 a 태그 기본 사용법

• HTML에서 링크를 만들 때 사용하는 태그는 a 태그입니다.
• href 속성은 링크의 목적지 URL을 지정하는 데 사용됩니다.

✅ 기본 구조

<a href="https://www.example.com">여기를 클릭하세요</a>

• href 속성은 링크를 클릭했을 때 이동할 주소를 설정합니다.
• a 태그는 사용자가 클릭할 수 있는 링크를 생성합니다.

---

🌐 1. 링크를 새 탭에서 열기: target 속성

target 속성을 사용하면 링크를 클릭할 때 새로운 탭에서 열리도록 설정할 수 있습니다.

🔹 target="_blank"

• target="_blank"는 링크를 새로운 탭에서 열도록 지정합니다.
• 이는 사용자가 현재 페이지를 떠나지 않고도 다른 페이지를 볼 수 있도록 도와줍니다.

✅ 예시

<a href="https://www.example.com" target="_blank">새 탭에서 열기</a>

• 위 코드에서 링크를 클릭하면 새 탭에서 www.example.com 페이지가 열립니다.

---

📄 2. a 태그로 다양한 콘텐츠 연결하기

• 전화번호 연결: 전화번호를 클릭하면 전화 걸기 앱으로 이동합니다.

✅ 예시 (전화번호 연결)

<a href="tel:+1234567890">전화 걸기</a>

• 이메일 연결: 이메일 주소를 클릭하면 이메일 작성 화면이 열립니다.

✅ 예시 (이메일 연결)

<a href="mailto:someone@example.com">이메일 보내기</a>

• 웹페이지 내 링크: 같은 웹사이트 내에서 다른 페이지로 이동할 때 사용합니다.

✅ 예시 (웹사이트 내 링크)

<a href="/about">About 페이지</a>

• 이 링크는 현재 도메인 내에서 /about 페이지로 이동하게 합니다.

---

💡 3. a 태그와 링크의 다른 활용 방법

• a 태그는 웹 페이지 내에서 다양한 목적지로 연결할 수 있는 강력한 도구입니다. 다른 웹 페이지, 전화번호, 이메일 주소 등 여러 유형의 콘텐츠를 연결할 수 있습니다.
• target="_blank" 속성을 사용하여 링크를 새로운 탭에서 열기 때문에 사용자가 현재 페이지를 벗어나지 않고도 다른 페이지를 탐색할 수 있게 됩니다.

---

🚩 결론

• a 태그는 링크를 만들 때 사용되는 기본적인 HTML 요소입니다.
• href 속성으로 목적지를 지정하고, **target="_blank"**를 추가하여 링크를 새 탭에서 열 수 있습니다.
• tel: 또는 mailto: 링크를 사용하여 전화나 이메일 링크를 만들 수 있습니다.
• a 태그는 웹 개발에서 페이지 내비게이션, 외부 링크 연결 등 다양한 목적으로 활용됩니다.