웹페이지에서 하이퍼링크는 사용자가 다른 페이지로 이동하거나, 특정 문서나 외부 웹사이트에 접속할 수 있도록 도와주는 핵심적인 기능입니다. 하이퍼링크는 텍스트, 이미지, 그리고 페이지 내의 특정 위치로 연결할 수 있습니다.
기본 HTML 구조
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>하이퍼링크 관련태그</title> </head> <body>
하이퍼링크의 기본 개념
<!-- 하이퍼링크 기능은 웹문서의 가장 핵심적인 기능입니다. 사용자가 클릭을 통해 링크된 페이지로 이동하여, 사용성을 높입니다. 텍스트나 이미지를 클릭하여 링크를 통해 이동할 수 있으며, 페이지 내에서도 링크를 통해 특정 위치로 이동할 수 있습니다. -->
- 하이퍼링크는 웹 문서의 중요한 기능으로, 다른 웹 페이지나 문서로의 이동을 지원합니다.
- 텍스트나 이미지를 클릭하여 다른 페이지로 넘어가는 링크를 만들 수 있습니다.
a 태그와 href 속성
<h1>하이퍼링크 관련태그</h1> <ul> <li><a href="01_글자관련태그.html"> 글자관련태그 </a></li> <li><a href="02_목록관련태그.html"> 목록관련태그 </a></li> <li><a href="https://www.naver.com"> 네이버로 </a></li> </ul>
a태그는 하이퍼링크를 생성하는 데 사용됩니다.href속성에 연결할 페이지의 URL을 입력하여 링크를 설정합니다.- 내부 페이지와 외부 페이지로 연결할 수 있습니다.
target 속성: 새로운 탭에서 열기
<h3>target 속성 : 연결된 페이지를 새로운 탭에서 열지 지정 (_self(기본값), _blank)</h3> <a href="https://www.naver.com" target="_blank"> 네이버로 </a>
target속성을 사용하여 링크를 클릭했을 때의 동작을 지정할 수 있습니다._self는 기본값으로, 현재 창에서 열기를 의미합니다._blank를 사용하면 새로운 탭에서 링크를 열기가 가능합니다.
이미지 링크 만들기
<h3>img태그 이용해서 링크 만들기</h3> <a href="https://www.naver.com" target="_blank"> 네이버로 <img src="./img/BlueArchive.jpg" alt=""> </a>
a태그 내부에img태그를 포함하여, 이미지를 클릭했을 때 링크로 이동할 수 있습니다.- 이미지에 링크를 적용하면, 사용자는 이미지를 클릭하여 다른 페이지로 이동할 수 있습니다.
페이지 내에서의 링크 이동
<h3 id="main">한 페이지 내에서 id 속성은 1개만 존재한다. -> 식별자로 사용된다.</h3> <a href="#main">메인으로가기</a>
- 페이지 내에서 특정 위치로 이동하기 위해
id속성을 사용합니다. href속성에#id명을 입력하여, 해당 id가 적용된 위치로 이동할 수 있습니다.- 이 기능은 긴 페이지 내에서 특정 섹션으로 빠르게 이동할 때 유용합니다.
본문 내용
<h4>본문내용</h4> <p>한 페이지 내에서 id 속성은 1개만 존재하며, 이를 식별자로 사용할 수 있습니다.</p>
- id 속성은 한 페이지 내에서 유일하게 사용되어야 하며, 특정 요소를 식별하는 데 사용됩니다.
초보부터 시작하는 개발자 생활