HTML 링크(하이퍼링크)는 웹 문서를 서로 연결하는 핵심 요소입니다. 사용자가 링크를 클릭하면 현재 페이지에서 다른 문서나 웹사이트로 이동할 수 있습니다.
기본 문법
HTML 링크는 <a> 태그(anchor)를 사용하여 만들며, 기본 문법은 다음과 같습니다.
<a href="URL" target="value">링크 텍스트</a>
여기서 href 속성은 이동할 목적지 주소(URL)를 지정합니다. URL은 같은 사이트 내의 로컬 경로일 수도 있고, 외부 웹사이트의 전체 주소일 수도 있습니다.
target 속성은 연결된 문서가 어디에서 열릴지를 결정합니다. 지정하지 않으면 기본값인 _self로 동작합니다. 사용 가능한 값은 아래와 같습니다.
| 값 | 설명 |
|---|---|
| _blank | 새 탭 또는 새 창에서 링크된 문서를 엽니다. |
| _parent | 부모 프레임(parent frame)에서 링크된 문서를 엽니다. |
| _self | 현재 창(같은 프레임)에서 링크된 문서를 엽니다. |
| _top | 창 전체 영역에서 링크된 문서를 열어 프레임 구조를 해제합니다. |
예제 코드
다음은 HTML 링크를 실제로 사용하는 예제입니다. 버튼 스타일의 배경과 함께 새 창으로 구글 페이지를 여는 링크를 만들어 보겠습니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
</style>
<body>
<h1>HTML Links Demo</h1>
<a href="https://google.com" target="_blank">Go To Google</a>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 그라데이션 배경 위에 "Go To Google"이라는 링크가 표시됩니다. 이 링크를 클릭하면 target="_blank" 속성에 의해 구글 페이지가 새 탭에서 열리는 것을 확인할 수 있습니다.
추가 팁
target="_blank"를 사용해 외부 사이트를 새 탭으로 열 때는 보안을 위해 rel="noopener noreferrer" 속성을 함께 추가하는 것이 좋습니다. 이렇게 하면 링크된 페이지가 원본 페이지의 window.opener 객체에 접근하는 것을 차단하여 탭내빙(tabnabbing)과 같은 보안 취약점을 예방할 수 있습니다.