[HTML] 개념 정리 4 :: 하이퍼링크 <a> 태그와 속성

HTML 하이퍼링크: <a> 태그와 속성 사용법

HTML에서 <a> 태그는 하이퍼링크(링크)를 생성하는 데 사용됨. 웹페이지를 연결하거나 외부 리소스를 참조할 때 필수적으로 활용됨.

---

1. <a> 태그 기본 사용법

<a> 태그는 href 속성을 통해 링크를 지정함.

기본 구조

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

예제

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

• href 속성: 연결하고자 하는 URL 또는 파일 경로를 지정.

---

2. target 속성: 새 창, 현재 창, 프레임 설정

target 속성은 링크 클릭 시 페이지가 열리는 방식을 정의함.

(1) _blank

새 탭 또는 새 창에서 링크를 열 때 사용.

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

(2) _self (기본값)

현재 탭에서 링크를 열 때 사용.

<a href="https://www.google.com" target="_self">현재 창에서 열기</a>

(3) _parent

현재 프레임의 부모 프레임에서 링크를 열 때 사용. (프레임 구조에서 사용)

<a href="https://www.google.com" target="_parent">부모 프레임에서 열기</a>

(4) _top

프레임 구조를 무시하고 전체 창에서 링크를 열 때 사용.

<a href="https://www.google.com" target="_top">전체 창에서 열기</a>

---

3. 텍스트 링크와 이미지 링크

(1) 텍스트 링크

텍스트를 클릭하여 링크로 이동.

<a href="https://www.google.com">구글 방문하기</a>

(2) 이미지 링크

이미지를 클릭하여 링크로 이동.

<a href="https://www.google.com">
  <img src="example.jpg" alt="이미지 링크" style="width:100px; height:auto;">
</a>

• src: 링크에 사용할 이미지의 경로.
• alt: 이미지가 로드되지 않을 경우 표시될 텍스트.

---

4. 속성 조합: 스타일과 추가 기능

(1) 링크 색상 변경

CSS를 사용하여 링크의 기본 색상을 변경.

<a href="https://www.google.com" style="color:blue; text-decoration:none;">
  구글 방문하기
</a>

• color: 링크 색상 지정.
• text-decoration:none: 밑줄 제거.

(2) 다운로드 링크

특정 파일을 클릭 시 다운로드하도록 설정.

<a href="example.pdf" download>PDF 파일 다운로드</a>

---

결론

<a> 태그는 웹의 핵심 기능인 하이퍼링크를 생성하는 데 사용됨. target 속성을 통해 링크 열리는 방식을 제어하고, 텍스트나 이미지를 링크로 활용할 수 있음. 이러한 기능을 잘 활용하면 사용자 경험을 향상시키는 웹페이지를 만들 수 있음.