링크는 거의 모든 웹 페이지에서 찾을 수 있다.
링크를 통해 사용자는 페이지에서 페이지로 이동하는 길을 클릭할 수 있다.
HTML Links - Syntax
HTML <a> 태그는 하이퍼링크를 정의한다. 구문은 다음과 같다:
| <a href="url">link text</a> |
<a> 요소의 가장 중요한 속성은 링크의 목적지를 나타내는 href 속성이다.
링크 텍스트는 판독기가 볼 수 있는 부분이다.
링크 텍스트를 클릭하면 판독기가 지정된 URL 주소로 전송된다.
| www.naver.com에 에 링크를 어떻게 생성하는지 보여준다. |
| <a href="https://www.naver.com/">네이버로 가자!</a> |
기본적으로 링크는 모든 브라우저에 다음과 같이 나타난다:
- 방문하지 않은 링크는 밑줄이 그어져 있고 파란색이다.
- 방문한 링크는 밑줄이 그어져 있고 보라색이다
- 활성 링크는 밑줄이 그어져 있고 빨간색이다
HTML 링크(Links) - target 속성
기본적으로 연결된 페이지는 현재 브라우저 창에 표시된다.
이 값을 변경하려면 링크에 대해 다른 대상을 지정해야 한다.
대상 특성은 연결된 문서를 열 위치를 지정한다.
대상 특성은 다음 값 중 하나를 가질 수 있습니다:
- _self - 기본값. 클릭한 것과 동일한 창/탭에서 문서를 연다
- _blank - 새 창 또는 탭에서 문서를 연다
- _parent - 상위 프레임의 문서를 연다
- _top - 창의 전체 본문에서 문서를 연다
| target="_blank"를 사용하여 연결된 문서를 새 브라우저 창 또는 탭에서 연다: |
| <!DOCTYPE html> <html> <body> <h2>The target Attribute</h2> <a href="https://www.naver.com/" target="_blank">네이버로 가자!</a> <p>target="_blank"인 경우 링크가 새 브라우저 창 또는 탭에서 열립니다.</p> </body> </html> |
절대URLs vs 상대 URLs
위의 두 예는 모두 href 속성에서 절대 URL(전체 웹 주소)을 사용하는 것이다.
로컬 링크(같은 웹 사이트 내의 페이지에 대한 링크)는 상대 URL("https://www" 부분 제외)로 지정된다:
| <!DOCTYPE html> <html> <body> <h2>절대 URLs</h2> <p><a href="https://www.naver.org/">naver</a></p> <p><a href="https://www.google.com/">Google</a></p> <h2>상대 URLs</h2> <p><a href="html_images.asp">HTML Images</a></p> <p><a href="/css/default.asp">CSS Tutorial</a></p> </body> </html> |
HTML Links - Link로서 이미지를 사용
이미지를 링크로 사용하려면 <img> 태그를 <a> 태그 안에 넣으면 된다:
| <!DOCTYPE html> <html> <body> <h2>링크 이미지</h2> <p>아래 이미지는 링크입니다. 클릭해 보십시오.</p> <a href="default.asp"><img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"></a> </body> </html> |
링크 이메일주소(Link to Email Address)
href 속성 내에서 mailto:를 사용하여 사용자의 전자 메일 프로그램을 여는 링크를 만든다(사용자가 새 전자 메일을 보낼 수 있도록 허용):
| <!DOCTYPE html> <html> <body> <h2>이메일주소 연결</h2> <p>사용자의 전자 메일 프로그램에서 열리는 링크를 만들려면(사용자가 새 전자 메일을 보낼 수 있도록) href 속성 내에서 mailto:를 사용합니다:</p> <p><a href="mailto:someone@example.com">이메일 전송</a></p> </body> </html> |
링크 버튼
HTML 버튼을 링크로 사용하면 자바스크립트 코드를 추가해야 한다.
JavaScript를 사용하면 단추 클릭과 같은 특정 이벤트에서 발생하는 작업을 지정할 수 있다:
| <!DOCTYPE html> <html> <body> <h2>링크 버튼</h2> <p>HTML 튜토리얼로 이동하려면 버튼을 클릭합니다.</p> <button onclick="document.location='default.asp'">HTML 튜토리얼</button> </body> </html> |
링크 제목(Link Titles)
title 특성은 요소에 대한 추가 정보를 지정한다.
이 정보는 마우스가 요소 위로 이동할 때 도구 설명 텍스트로 가장 많이 표시된다.
| <!DOCTYPE html> <html lang="en-US"> <body> <h2>링크 제목</h2> <p>제목 특성은 요소에 대한 추가 정보를 지정합니다. 마우스가 요소 위로 이동할 때 이 정보는 도구 설명 텍스트로 가장 많이 표시됩니다.</p> <a href="https://www.naver.com/html/" title="네이버로가자">네이버로 가자!!!</a> </body> </html> |
절대 URLs과 상대 URLs에 추가정보
| 전체 URL을 사용하여 웹 페이지에 연결한다: |
| <!DOCTYPE html> <html> <body> <h2>외부연결</h2> <p>이 예에서는 전체 URL을 사용하여 웹 페이지에 연결합니다:</p> <p><a href="https://www.naver.com">네이버로 가자!!!</a></p> </body> </html> |
| 현재 웹 사이트의 html 폴더에 있는 페이지에 연결: |
| <!DOCTYPE html> <html> <body> <h2>외부연결</h2> <p>이 예에서는 전체 URL을 사용하여 웹 페이지에 연결합니다:</p> <p><a href="/html/default.asp">HTML tutorial</a></p> </body> </html> |
| 현재 페이지와 동일한 폴더에 있는 페이지에 연결: |
| <!DOCTYPE html> <html> <body> <h2>외부연결</h2> <p>이 예에서는 전체 URL을 사용하여 웹 페이지에 연결합니다:</p> <p><a href="default.asp">HTML tutorial</a></p> </body> </html> |
마무리
이번 글에서는 HTML 링크에 대해서 살펴보았다.
링크는 <a>, href, target, <img>, mailto:와 href 등을 활용하여 외부 문서 혹은 내부 문서를 연결하여 사용자에게 다른 문서를 볼 수 있는 기능을 제공한다.
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 링크-북마크 생성 (0) | 2023.04.28 |
|---|---|
| HTML 링크-다른색상 (0) | 2023.04.27 |
| HTML CSS (0) | 2023.04.25 |
| HTML 색조, 채도, 명도(HSL) 색상 (0) | 2023.04.24 |
| HTML HEX 색상 (0) | 2023.04.23 |
댓글