HTML 페이지 섹션에 링크
이 문서에서는 HTML에서 페이지의 특정 부분에 연결하는 방법을 소개합니다.
HTML에서 내부 페이지 섹션에 대한 링크 만들기
앵커 태그 <a>를 사용하여 HTML에서 하이퍼링크를 만들 수 있습니다. <a> 태그의 href 속성은 대상 URL을 포함합니다.
예제 코드:
Welcome to <a href="https://www.delftstack.com/">DelftStack</a>
위의 코드에서 웹페이지에 대한 외부 링크를 연결했습니다. 간단한 접근 방식입니다.
경우에 따라 페이지 내에 내부 링크를 만들어야 할 수도 있습니다. 이를 위해 id 속성을 사용하여 책갈피를 만듭니다.
앵커 태그의 href 속성에 특정 요소의 id를 작성하여 HTML에서 내부 링크를 생성할 수 있습니다. 따라서 링크를 클릭하면 특정 id와 일치하는 섹션으로 연결됩니다.
다음 예를 들어 보겠습니다. 제목과 일부 내용이 있는 8권의 해리포터 책이 있으며 페이지 하단에 있는 8장을 읽어야 한다고 가정합니다.
사용자가 매번 위아래로 스크롤할 필요가 없도록 특정 섹션(제목)에 대한 링크를 만들 수 있습니다. 각 제목에 id를 제공하고 페이지 상단에 해당 id에 대한 링크를 만들 수 있습니다.
예를 들어 T1을 Chapter 1의 <h2>의 id로 설정합니다. 마찬가지로 다른 제목의 id를 T2 …T8로 설정합니다.
이제 각 제목에 대한 id를 생성했으므로 하이퍼링크를 생성할 차례입니다. HTML 문서 상단에 각 장에 대한 앵커 태그를 생성하고 href 속성에 #T1, #T2에서 #T8까지 값을 설정합니다.
코드 - HTML:
<h1 id="top">Harry Potter Books</h1>
<p><a href = "#T1">Chapter 1</a></p>
<p><a href = "#T2">Chapter 2</a></p>
<p><a href = "#T3">Chapter 3</a></p>
<p><a href = "#T4">Chapter 4</a></p>
<p><a href = "#T5">Chapter 5</a></p>
<p><a href = "#T6">Chapter 6</a></p>
<p><a href = "#T7">Chapter 7</a></p>
<p><a href = "#T8">Chapter 8</a></p>
<div class="chapter">
<h2 id="T1">Chapter 1</h2>
<p>The Philosopher's Stone</p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="chapter">
<h2 id="T2">Chapter 2</h2>
<p>The Chamber of Secrets</p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="chapter">
<h2 id="T3">Chapter 3</h2>
<p>The Prisoner of Azkaban</p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="chapter">
<h2 id="T4">Chapter 4</h2>
<p>In The Goblet of Fire</p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="chapter">
<h2 id="T5">Chapter 5</h2>
<p>In The Order of Phoenix</p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="chapter">
<h2 id="T6">Chapter 6</h2>
<p>In The Half-Blood Prince</p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="chapter">
<h2 id="T7">Chapter 7</h2>
<p>The Deathly Hallows</p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="chapter">
<h2 id="T8">Chapter 8</h2>
<p>The Cursed Child</p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<a href="#top"> Top </a>
코드 - CSS:
.chapter {
margin-bottom: 50px;
}
이제 상단에서 챕터를 클릭할 수 있습니다. 링크는 특정 장으로 안내합니다. 이것은 HTML로 웹 페이지 내에서 내부 링크를 만드는 방법입니다.
HTML에서 외부 페이지 섹션에 대한 링크 만들기
유사한 방법을 사용하여 다른 페이지의 섹션이나 콘텐츠에 연결할 수 있습니다.
예제 코드:
<a href="another_page.html#C4">Jump to Chapter 4 of another_page</a>
외부 페이지 섹션으로 연결되는 하이퍼링크가 생성됩니다. 외부 페이지에 id가 C4인 요소가 포함되어 있습니다.
<!--Inside another_page.html-->
<h1 id="C4">
This is Chapter 4.
</h1>
이 메서드를 구현하고 Wikipedia 페이지의 섹션에 연결되는 HTML 문서를 만들어 봅시다.
예를 들어 HTML에 관한 다음 Wikipedia 페이지 https://en.wikipedia.org/wiki/HTML가 있다고 가정해 보겠습니다. 우리의 목표는 이 페이지의 배달 섹션에 대한 외부 링크를 만드는 것입니다.
먼저 웹페이지를 검사하고 배송 섹션을 찾습니다.
Inspector에 표시된 대로 Delivery 섹션의 id는 Delivery입니다. HTML에서 다음과 같이 href의 페이지 URL 끝에 id를 추가합니다.
예제 코드:
<a href="https://en.wikipedia.org/wiki/HTML#Delivery"> HTML Delivery</a>
링크를 클릭하면 Wikipedia의 HTML 전달 섹션이 열립니다. 따라서 HTML에서 외부 링크를 만들 수 있습니다.
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn