HTML 링크 다는 법 (a 태그로 쉽게 연결하기)

📎 HTML 링크 다는 법 완벽 가이드: a 태그로 쉽게 연결하기

웹사이트를 만들 때 다른 페이지나 외부 사이트로 연결되는 링크는 필수입니다. HTML에서는 a 태그를 사용해서 링크를 쉽게 만들 수 있는데요. 오늘은 HTML에서 링크를 다는 방법을 기초부터 응용까지 정리해보겠습니다.

 

🔗 1. 기본 링크 구조

HTML에서 링크를 다는 기본 문법은 아래와 같습니다:

<a href="https://www.example.com">이동할 텍스트</a>

설명:

• a: anchor(앵커) 태그, 즉 링크를 만드는 태그입니다.
• href: hypertext reference의 줄임말로, 이동할 URL을 적는 속성입니다.
• 태그 사이에 있는 "이동할 텍스트"는 사용자에게 보여지는 링크 문구입니다.

예시:

<a href="https://www.google.com">구글로 이동</a>

결과:
👉 구글로 이동

---

🌐 2. 새 창에서 링크 열기

링크를 클릭했을 때 새 창(또는 새 탭)에서 열리게 하려면 target="_blank" 속성을 추가하세요.

<a href="https://www.naver.com" target="_blank">네이버 새 창 열기</a>

이렇게 하면 사용자가 현재 페이지를 떠나지 않고도 다른 사이트를 열 수 있습니다.

---

📄 3. 같은 사이트 내의 다른 페이지로 이동하기

자신의 웹사이트 내에서 다른 페이지로 이동하고 싶을 때는 상대 경로를 사용할 수 있습니다.

<a href="/about.html">회사 소개 페이지로 이동</a>

혹은 현재 폴더 기준 상대경로도 가능합니다:

<a href="./contact.html">연락처 페이지로 이동</a>

---

📥 4. 파일 다운로드 링크 만들기

PDF, 이미지, 문서 등을 링크로 연결할 수도 있습니다:

<a href="/files/guide.pdf" download>가이드 다운로드</a>

download 속성을 붙이면 클릭 시 바로 다운로드가 시작됩니다.

---

⬇️ 5. 이메일, 전화번호 링크

웹페이지에서 이메일이나 전화번호를 클릭해서 바로 앱을 실행시킬 수도 있어요.

• 이메일 링크:

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

• 전화번호 링크 (모바일에서 유용):

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

---

💡 6. 스타일을 입혀서 버튼처럼 보이게 하기

링크에 CSS를 입히면 버튼처럼 꾸밀 수 있어요:

<a href="/apply.html" class="btn">신청하기</a>

.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #1e90ff;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

---

✅ 마무리 정리

용도	예시 코드
외부 사이트 연결	<a href="https://example.com">텍스트</a>
새 창 열기	<a href="..." target="_blank">텍스트</a>
내부 페이지 이동	<a href="/about.html">회사 소개</a>
파일 다운로드	<a href="/file.pdf" download>다운로드</a>
이메일 링크	<a href="mailto:me@example.com">이메일</a>
전화번호 링크	<a href="tel:01012345678">전화</a>

 

 

✍️ 마치며

HTML의 a 태그는 간단하지만 웹페이지에서 매우 중요한 역할을 합니다. 위의 예시들을 참고해서 여러분의 웹페이지에도 다양한 링크를 활용해보세요. 😊