HTML & CSS
Chapter 1-11. 링크 표시하기(HTML)
Chansman
2025. 3. 28. 16:26
📌 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 태그는 웹 개발에서 페이지 내비게이션, 외부 링크 연결 등 다양한 목적으로 활용됩니다.