HTML 하이퍼링크
웹 페이지 간의 연결을 만드는 데 사용되는 요소입니다. 주로 사용자가 클릭할 수 있는 텍스트, 이미지 또는 기타 요소를 제공하여 다른 웹 페이지로 이동하거나 현재 페이지의 다른 부분으로 스크롤할 수 있도록 합니다. 하이퍼링크는 웹의 기본적인 네비게이션 메커니즘을 제공하며, 웹 문서들 사이의 관계를 정의하는 데 중요한 역할을 합니다.
하이퍼링크 속성
href속성
href 속성은 <a> 태그에서 가장 중요한 속성으로, 하이퍼링크의 대상이 되는 URL을 지정합니다. 이 속성은 절대 URL(https://www.example.com)이나 상대 URL(../index.html)을 포함할 수 있습니다. 또한 href 속성의 값으로 이메일 주소나 페이지 내부의 특정 위치를 가리키는 앵커(#section1) 등을 지정할 수도 있습니다.
title속성
title 속성은 링크에 마우스를 올렸을 때 툴팁으로 보여질 텍스트를 지정합니다. 이 속성은 접근성을 높이고 사용자가 링크의 목적을 더 잘 이해할 수 있도록 도와줍니다.
<a href="https://www.google.com" title="Go to Google website">Visit Google</a>
type속성
type 속성은 링크된 문서의 MIME 타입을 지정합니다. 주로 다운로드 링크에서 사용되며, 브라우저가 어떤 종류의 파일을 다운로드할 지 결정하는 데 도움을 줍니다.
<a href="files/document.pdf" download type="application/pdf">Download PDF</a>
target 속성
target속성은 링크된 문서를 어떻게 열지를 지정할 수 있는 속성입니다.
<a href="https://www.example.com" target="_blank">Visit Example</a>
_self: 링크를 클릭한 현재 창에서 엽니다 (기본값)._blank: 새 탭이나 새 창에서 엽니다._parent: 현재 프레임의 상위 프레임에서 엽니다._top: 현재 프레임의 최상위 프레임에서 엽니다.
download속성
download 속성은 웹 개발자가 사용자에게 파일을 다운로드할 수 있는 링크를 제공하는 데 유용한 도구입니다. 이를 통해 사용자는 웹 페이지에서 파일을 직접 다운로드할 수 있으며, 특히 문서, 이미지, 비디오 등의 다양한 형식의 파일을 쉽게 제공할 수 있습니다.
<a href="path/to/your/file.pdf" download="filename.pdf">Download PDF</a>
주의사항
- 크로스 오리진 리소스 다운로드: 브라우저 보안 정책으로 인해 일부 브라우저는 다른 도메인의 파일에 대해
download속성을 허용하지 않을 수 있습니다. 이 경우, 동일한 도메인에서 제공되는 파일에 대해서만download속성이 작동합니다. - 브라우저 호환성:
download속성은 HTML5에서 추가되었으며, 대부분의 현대 브라우저에서 지원됩니다. 오래된 브라우저나 일부 특정 환경에서는 지원되지 않을 수 있으니, 사용 시 이를 고려해야 합니다. - 파일 타입: 일반적으로 다운로드 속성은 파일 다운로드에 사용되지만, 일부 브라우저는 이미지나 일반적인 링크에도 적용할 수 있습니다. 그러나 보통 이 속성은 주로 파일 다운로드에 사용됩니다.
rel속성
rel 속성은 링크된 리소스와 현재 문서와의 관계를 정의합니다. 주로 SEO와 보안 관련 목적으로 사용됩니다. 예를 들어, rel="noopener noreferrer"는 보안상의 이유로 새 창에서 열 때 사용될 수 있습니다.
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example in a new tab</a>
하이퍼링크 사용하기
하이퍼링크는 블럭레벨 요소나 인라인 레벨 요소에 관계없이 어떤 내용이든지 상관없이 만들수 있습니다.
<a> 태그로 하이퍼링크 생성하기
HTML에서 하이퍼링크를 생성하는 주된 방법은 <a>(anchor) 태그를 사용하는 것입니다. <a> 태그는 href 속성을 사용하여 링크할 URL을 지정합니다.
기본적인 사용 방법
<a href="https://www.naver.com">Naver</a>
이미지를 링크로 사용하는 방법
<a href="https://www.tistory.com">
<img src="tistory.jpg" alt="Tistory Site">
</a>
예제 html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<a href="https://www.tistory.com" title="tistory">TISTORY</a>
</div>
<div>
<a href="https://www.google.com" title="google">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google"
style="width: 100px;">
</a>
</div>
</body>
</html>
URL, Path 개념
위에서 설명한 google, tistory 사이트는 외부 사이트이므로 현재 html의 위치에서 접속할 URL의 상대적인 경로를 신경쓸 필요가 없습니다.
하지만 내가 만든 사이트 내부에서 html간에 이동해야하고 각 html이 하위 또는 상위의 디렉토리에 위치한다면 접속중인 html의 경로에 따라 상대적인 URL를 사용해야 합니다.
상위 경로, 하위경로 링크
index.html 이 루트경로에 위치하고 해당경로에 Product 디렉토리가 있고 그 안에는 Toy 디렉토리가 있을때 각각의 디렉토리에 존재하는 html간에 이동하는 예제를 만들어 보겠습니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p><a href="product/product.html">Product Page</a></p>
</body>
</html>
product.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p><a href="../index.html">Main Page</a></p>
<p><a href="toy/toy.html">Toy Page</a></p>
</body>
</html>
toy.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p><a href="../../index.html">Main Page</a></p>
<p><a href="../product.html">Product Page</a></p>
</body>
</html>
문서내부 링크
동일한 html에서도 특정위치로 링크를 걸어 이동할수 있습니다. 이동할 위치의 요소에 id 속성을 입력해야 합니다.
예를들어 내용이 많은 페이지 상단에 목차가 있고 특정 목차를 누르면 해당 문단으로 바로 이동할수 있습니다.
<h2 id="favoriteFood">맛집 목록</h2>
example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/style.css">
<link>
<title>Title</title>
</head>
<body>
<h1>Fruit Wiki</h1>
<ul>
<li><a href="#appleWiki">Apple</a></li>
<li><a href="#bananaWiki">Banana</a></li>
<li><a href="#cherryWiki">Cherry</a></li>
</ul>
<h2 id="appleWiki">Apple Wiki</h2>
<p>....................(대충 긴 내용).....................</p>
<h2 id="bananaWiki">Banana Wiki</h2>
<p>....................(대충 긴 내용).....................</p>
<h2 id="cherryWiki">Cherry Wiki</h2>
<p>....................(대충 긴 내용).....................</p>
</body>
</html>
링크 사용시 팁
명확하고 유의미한 링크 텍스트 사용하기
링크 텍스트는 링크가 이동할 페이지의 내용을 명확하게 설명해야 합니다. 사용자가 링크를 클릭하기 전에 어떤 페이지로 이동할 지 이해할 수 있어야 합니다. "자세히 알아보기", "클릭", "여기"와 같은 모호한 링크 텍스트보다는 "자세한 설명 읽기", "회사 소개 페이지로 이동" 등 구체적이고 명확한 텍스트를 사용하는 것이 좋습니다.
링크의 목적을 설명하는 툴팁 제공하기
링크에는 title 속성을 이용하여 마우스를 올렸을 때 나타나는 툴팁을 제공할 수 있습니다. 이를 통해 사용자가 링크를 클릭하기 전에 추가적인 정보를 제공할 수 있습니다.
<a href="https://www.example.com" title="Visit Example website">Visit Example</a>
링크가 새 창에서 열리는 경우 명시하기
링크가 새 탭이나 새 창에서 열릴 때는 target="_blank" 속성을 명시적으로 지정하는 것이 좋습니다. 이렇게 하면 사용자가 링크를 클릭할 때 새 창이 열리는 것을 예상할 수 있습니다.
<a href="https://www.example.com" target="_blank">Visit Example (opens in new tab)</a>
논리적인 링크 순서 및 구조 유지하기
문서나 웹 페이지에서 링크의 순서와 구조를 논리적으로 유지하는 것이 중요합니다. 사용자가 예상하는 위치에 링크를 제공하고, 페이지의 흐름에 따라 링크를 배치하는 것이 좋습니다.
접근성을 고려하여 디자인하기
모든 사용자가 링크를 이해하고 접근할 수 있도록 접근성을 고려하여 디자인해야 합니다. 적절한 색상 대비, 충분한 크기의 클릭 영역, 스크린 리더 사용자를 위한 명확한 링크 텍스트 등을 고려해야 합니다.
링크에 보안 및 개인 정보 보호 고려하기
링크가 외부 사이트로 이동하거나 사용자의 개인 정보를 요청할 경우, 보안을 고려해야 합니다. rel="noopener noreferrer" 속성을 추가하여 보안 취약점을 방지하고, 개인 정보가 포함된 링크의 경우 HTTPS를 사용하는 것이 좋습니다.
디자인적으로 링크를 잘 구별할 수 있도록 하기
링크가 페이지에서 명확히 구별될 수 있도록 디자인하는 것이 중요합니다. 일반적으로 밑줄, 색상, 글자 스타일 등을 사용하여 링크를 시각적으로 강조합니다.
<a href="https://www.example.com" target="_blank" title="Visit Example website" rel="noopener noreferrer" style="text-decoration: underline; color: blue;">Visit Example website</a>
'WEB > HTML' 카테고리의 다른 글
| CSS FlexBox 사용법: 컨테이너와 아이템 속성 알아보기 (1) | 2024.07.07 |
|---|---|
| HTML 구조, 시멘틱(Simentic) 요소 알아보기 (header nav section...) (0) | 2024.06.28 |
| HTML 문서의 구조, 요소(Element) 개념과 CSS/JS 스크립트 적용 방법 (0) | 2024.06.28 |
댓글