HTML에서 링크를 클릭했을 때 이동할 페이지의 URL을 지정하려면 앵커 태그(<a>)의 href 속성을 사용합니다. href는 'hypertext reference'의 약자로, 연결하고자 하는 문서나 리소스의 주소를 값으로 받습니다.
기본 문법
<a href="URL">링크 텍스트</a>
<a> 태그 사이에 작성한 텍스트가 화면에 표시되며, 사용자가 이 텍스트를 클릭하면 href 속성에 지정된 URL로 이동합니다.
예제
아래 코드를 실행하면 href 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML href 속성 예제</title> </head> <body> <p><a href="https://www.tutorialspoint.com/index.htm">Tutorials Point 홈페이지 방문하기</a></p> <p><a href="about.html">소개 페이지로 이동</a></p> </body> </html>
첫 번째 링크는 외부 사이트로, 두 번째 링크는 같은 프로젝트 내의 다른 문서로 각각 이동합니다.
절대 경로와 상대 경로
href 속성에는 두 가지 방식의 URL을 사용할 수 있습니다.
- 절대 URL: 'https://'로 시작하는 전체 주소를 입력합니다. 외부 웹사이트로 연결할 때 사용합니다.
- 상대 URL: 현재 문서의 위치를 기준으로 한 경로를 입력합니다. 같은 사이트 내부의 페이지를 연결할 때 유용합니다.
새 탭에서 열기
링크를 클릭했을 때 현재 창이 아닌 새 탭에서 열리도록 하려면 target 속성과 함께 사용합니다.
<a href="https://www.example.com" target="_blank">새 탭에서 열기</a>
이처럼 href 속성만 제대로 활용해도 웹페이지 어디서든 원하는 문서로 자유롭게 이동하는 링크를 만들 수 있습니다.