[HTML] HTML의 link

웹페이지 연결

1) 다른 페이지로 연결

<a href="경로명+파일명 or URL주소">문자열</a>

 

ex)

<a href="http://www.naver.com">네이버</a>
<a href="http://www.daum.net">다음</a>

네이버 다음

 

ex)

<a href="04_색상.html">색상</a>
<a href="05_이미지.html">이미지</a>

색상 이미지

---

2) 같은 페이지 내에서 문서 연결 (북마크)

ex) 위로, 아래로

 

<h1 id="아이디명">서울</h1>
<a href="#아이디명">여기</a>

-> id를 가리키는 단축키 = #

 

ex)

<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

---

3) 다른 페이지로 이동하면서 북마크한 곳으로 이동

<a href="html_demo.html#C4">Jump to Chapter 4</a>

---

단락

<p>송은이는 지난 1월 31일 유튜브 채널 비보티비에 업로드된 영상에서 직원들에게 코스요리를 대접했다. 송은이는 MBC ‘전지적 참견 시점’에서 소개된 레시피로 메뉴를 만들었다.
    </p> 
<p>송은이는 이번 요리를 하게 된 이유로 “직원들한테 가장 많이 듣는 질문 중 하나가 방송에서 먹었던 그거 맛있는지 묻는다”며 “직원들의 궁금증 해결을 위해 연예인 대표라서 가능한 복지”라고 자신감을 드러냈다.
</p> 
<p>회사 직원들 중 20대로 구성된 3명의 시식단이 송은이와 마주했다. 송은이는 바질 김치, 한우구이, 동치미 감태 국수, 과일 크림치즈 식빵말이를 준비했다.
</p>