링크 연결은 a 태그로! 외부, 내부, 새 창 링크 완전 마스터Mastering the HTML & Tag – External, Internal & Targeted Links

링크 연결은 a 태그로! 외부, 내부, 새 창 링크 완전 마스터
Mastering the HTML <a> Tag – External, Internal & Targeted Links

🔗 a 태그란? (What is the <a> tag?)

<a>는 HTML에서 링크를 걸어주는 태그입니다.
The <a> (anchor) tag is used to create hyperlinks in HTML.

웹페이지 간 이동, 파일 열기, 이메일 보내기까지 다양한 연결이 가능해요!

📄 기본 문법

<a href="https://naver.com">네이버로 이동</a>
<a href="https://naver.com">Go to Naver</a>

🪟 새 창에서 열기 (target="_blank")

기존 창을 그대로 두고, 새 창(또는 탭)에서 링크 열기 원하시면 이렇게 쓰세요 👇

<a href="https://kakao.com" target="_blank">카카오 새 창에서 열기</a>

Use target="_blank" to open the link in a new window or tab.

🧭 블로그 내 글 연결 (내부 링크)

<a href="/123">이전 포스트로 이동</a>

Use relative URLs to link to other posts within your blog.

📥 파일 다운로드 링크

<a href="/files/manual.pdf" download>매뉴얼 다운로드</a>

Use the download attribute to link directly to files like PDFs.

💡 꿀팁 & SEO

• title 속성을 함께 사용하면 툴팁이 나와서 사용자에게 친절해요
  Add title="..." for tooltip and accessibility


• 링크 텍스트는 구체적으로!
  Avoid "Click here" – use meaningful link text for SEO

💬 Q&A – 자주 묻는 질문

• Q. 이미지에도 링크 걸 수 있나요?
  A. 물론이죠! <a> 태그 안에 <img>를 넣으면 됩니다.
  Yes! Wrap an image inside <a> to make it clickable.


• Q. target="_blank" 쓰면 SEO에 안 좋다는데?
  A. 무분별한 사용은 좋지 않지만, 필요한 경우엔 오히려 UX 향상에 좋아요.
  Use it wisely – it helps user experience when needed.

✅ 지니의 마무리 요약!

✔️ 외부링크: href="URL"
✔️ 새창열기: target="_blank"
✔️ 파일다운: download 속성
✔️ 내부링크: 블로그 글 주소 또는 앵커 연결 링크 연결은 생각보다 강력한 무기예요!

🔗 참고 자료

• MDN – a 태그 공식 문서

👉 다음 편 예고: 이미지 태그 완전정복! <img>

이미지를 웹에 넣는 가장 기본적인 태그, alt 속성과 접근성까지 함께 챙겨드릴게요 🖼️

---

✨ 오늘의 일상에 작은 플러스가 되셨길 바랍니다 ✨
플러스지기 | Plus Keeper🍀