앵커(<a> ) HTML의 링크를 사용하여 다른 페이지나 다른 웹사이트로 연결합니다. 하지만 어떻게 웹페이지의 특정 부분에 연결할 수 있습니까?
답은 링크 점프입니다. .
점프 링크는 페이지를 로드할 뿐만 아니라 웹 페이지의 특정 부분으로 "점프"하는 링크입니다. 내부적으로 사용하여 웹사이트의 다른 페이지에 연결할 수 있으며 링크를 외부에 공유할 수도 있습니다.
이 링크는 사용자가 어디에서 왔는지에 관계없이 작동하며 작동하는 데 기본 HTML 외에는 다른 것이 필요하지 않습니다.
앵커 점프 링크 만들기
HTML에서는 <a> 집합을 사용하여 앵커 링크를 만들 수 있습니다. 내부에 텍스트가 있는 태그. 다음은 예입니다.
<a>Here is a link that doesn't go anywhere!</a>링크 대상에 id 속성 사용
이제 점프 링크를 생성하려면 링크와 대상이 필요합니다. 대상은 "id" 속성이 있는 웹 페이지의 모든 요소일 수 있습니다.
정말 일반적인 타겟은 <h1>와 같은 H 태그를 사용하는 헤드라인 또는 부제입니다. , <h2> , <h3> , 등등. 일반적으로 이러한 목적을 위해 H 태그에 id를 추가하는 것이 좋습니다.
매우 긴 웹 페이지가 있고 다음과 같은 페이지 섹션에 링크하려고 한다고 가정해 보겠습니다.
<h2 id="extra_content">Extra content we don't want to link to</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed porta est, nec pretium lectus. Quisque sit amet porta risus, sed faucibus magna.
</p>
<h2 id="linked_content">Subheadline of a section to link to</h2>
<p>
Vivamus orci erat, sagittis vitae aliquam at, pretium sagittis neque. Curabitur vel eros in turpis elementum sollicitudin.
</p>URL의 요소에 대한 링크
이제 대상 요소가 있으므로 #linked_content를 추가하여 이에 대한 점프 링크를 만들 수 있습니다. 페이지 URL의 끝에 대상의 ID가 무엇이든 # 뒤에 추가하십시오. (파운드/해시태그) 기호.
페이지에 있고 같은 페이지의 섹션으로 이동하려는 경우 내부 링크를 만들 수 있습니다. 내부 링크에는 https://www.WebsiteName.com이 필요하지 않습니다. 링크의 href 속성.
내부 점프 링크의 예는 다음과 같습니다.
<a href="#linked_content">Link to the subheadline on the same page</a>
다른 웹사이트에 링크를 추가하거나 소셜 미디어나 이메일을 통해 다른 사람들과 공유하는 경우 어떻게 됩니까? #linked_content를 추가하여 동일한 작업을 수행할 수 있습니다. 다음과 같이 전체 URL의 끝에:
<a href="https://www.WebsiteName.com/PageName/#linked_content">Link to the subheadline on the same page</a>"이름" 속성 참고
과거에는 이러한 유형의 점프 링크가 빈 앵커 링크의 "이름" 속성을 사용하여 대상이 되었습니다. Mozilla 개발자 네트워크에 따르면 이 관행은 HTML5 이후로 더 이상 사용되지 않습니다. 일부 브라우저에서는 여전히 작동할 수 있지만 최신 연결 방법을 사용하는 것이 좋습니다.
이것이 웹페이지의 특정 부분에 대한 점프 링크를 만드는 데 도움이 되기를 바랍니다!