HTML <a> 태그 사용법, 링크 생성과 속성 활용

HTML <a> 태그 사용법, 링크 생성과 속성 활용

HTML의 <a> 태그는 웹 페이지에서 링크를 생성하는 데 사용됩니다. 이 태그는 간단하지만 강력한 기능을 제공하여 사용자들이 다른 페이지나 리소스로 쉽게 이동할 수 있게 합니다. 이 글에서는 <a> 태그의 기본 사용법부터 다양한 속성을 활용하는 방법까지 자세히 알아보겠습니다.

 

 

목차

1. HTML <a> 태그란?
2. 기본 링크 생성
3. 다양한 속성 활용
4. 내부 링크와 외부 링크
5. mailto 링크 생성
6. 전화 걸기 링크 생성

 

1. HTML <a> 태그란?

<a> 태그는 'anchor'의 약자로, HTML에서 링크를 생성하는 데 사용됩니다. 이 태그는 href 속성을 사용하여 링크의 목적지를 지정합니다.

 

 

2. 기본 링크 생성

<a> 태그의 기본 문법은 다음과 같습니다:

<a href="링크주소">링크텍스트</a>

예를 들어, 구글로 가는 링크는 다음과 같이 작성할 수 있습니다:

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

 

 

3. 다양한 속성 활용

<a> 태그는 href 외에도 다양한 속성을 활용할 수 있습니다:

• target: 링크를 클릭했을 때 열릴 위치를 지정합니다. 예: _blank (새 창에서 열기), _self (현재 창에서 열기)
• title: 링크에 마우스를 올렸을 때 나타나는 툴팁을 설정합니다.
• rel: 링크와 관련된 관계를 명시합니다. 예: nofollow, noopener

<a href="https://www.example.com" target="_blank" title="Example Site" rel="noopener">예제 사이트</a>

 

 

 

 

4. 내부 링크와 외부 링크

내부 링크는 동일한 사이트 내의 다른 페이지로 연결되는 링크를 말하며, 외부 링크는 다른 사이트로 연결되는 링크를 말합니다.

내부 링크

<a href="/about.html">About Us</a>

외부 링크

<a href="https://www.example.com">Example</a>

 

 

5. mailto 링크 생성

<a> 태그를 사용하여 이메일 링크를 생성할 수 있습니다. 이 링크를 클릭하면 사용자의 이메일 클라이언트가 열립니다.

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

 

 

6. 전화 걸기 링크 생성

<a> 태그를 사용하여 전화 걸기 링크를 생성할 수 있습니다. 이 링크를 클릭하면 사용자의 전화 앱이 열립니다.

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