🖱️ 클릭 한 번으로 이동! a 태그로 링크 만들기 🖱️

웹 페이지를 서핑하다 보면 밑줄이 그어진 텍스트나 이미지를 클릭하여 다른 페이지로 이동하는 경험을 하게 됩니다. 

이렇게 페이지 이동을 가능하게 해주는 것이 바로 <a> 태그입니다.

 

<a> 태그는 앵커(anchor)의 약자로, 마치 닻을 내려 다른 곳에 연결하듯, 웹 페이지를 연결하는 역할을 합니다.

 

이번 포스팅에서는 <a> 태그를 이용하여 링크를 생성하는 방법과 함께, 링크의 목적지를 설정하는 href 속성, 링크를 여는 방식을 지정하는 target 속성에 대해 자세히 알아보겠습니다.

a 태그 예시

 

---

 

핵심 속성 1. href: 어디로 연결할까요? 🧭

<a> 태그에서 가장 중요한 속성은 바로 href입니다. href는 Hypertext Reference의 약자로, 링크를 클릭했을 때 이동할 페이지의 URL 주소를 지정합니다.

 

 

예시:

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

 

결과

 

구글

 

위 코드를 실행하면 "구글"이라는 텍스트가 링크로 표시되고, 이를 클릭하면 구글 웹사이트로 이동합니다.

href 속성에는 웹 페이지 주소뿐만 아니라, 이메일 주소, 전화번호, 파일 경로 등 다양한 값을 지정할 수 있습니다.

 

• 이메일 주소: <a href="mailto:example@example.com">문의하기</a>
• 전화번호: <a href="tel:010-1234-5678">전화하기</a>
• 파일 다운로드: <a href="download.zip">파일 다운로드</a>

 

---

 

 

핵심 속성 2. target: 어떻게 열까요? 🖼️

target 속성은 링크를 클릭했을 때, 새로운 창에서 열지, 현재 창에서 열지 등 링크를 여는 방식을 지정합니다.

가장 자주 사용되는 target 속성 값은 다음과 같습니다.

 

• _self: 현재 창에서 링크를 엽니다. (기본값)
• _blank: 새로운 창 또는 탭에서 링크를 엽니다.
• _parent: 부모 프레임에서 링크를 엽니다.
• _top: 최상위 프레임에서 링크를 엽니다.

예시:

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

 

결과

 

네이버 (새 창)

 

위 코드를 실행하면 "네이버 (새 창)"이라는 링크를 클릭했을 때, 네이버 웹사이트가 새로운 창에서 열립니다.

 

---

 

 

꿀팁! 🍯 페이지 내 이동하기

href 속성에 # 기호와 함께 id 값을 지정하면, 현재 페이지 내 특정 위치로 이동하는 링크를 만들 수 있습니다.

예시:

<a href="#top">맨 위로 이동</a> 

<h2 id="top">상단 제목</h2> 

위 코드에서 "맨 위로 이동" 링크를 클릭하면, id="top"으로 지정된 "상단 제목" 위치로 이동합니다.

 

---

 

 

마무리

<a> 태그를 이용하면 웹 페이지에 다양한 링크를 추가하여 사용자 경험을 향상시킬 수 있습니다. href 속성과 target 속성을 적절히 활용하여 원하는 방식으로 링크를 생성해 보세요! 😊

 

HTML 순서대로 배우기