[HTML]03. 목차 클릭 시 해당 라인으로 이동하기(내부 링크), <a> 태그

목차 클릭 시 해당 라인으로 이동하는 HTML작성 방법!

 

내부 링크를 이용하면 된다.

 

아래는 구현하고 싶었던 내부 링크의 사용 예시이다.

 

01. 목차 테스트

 

---

<a>태그

 

 

내부 링크는 <a>태그의 응용으로, 다른 페이지로 이동하는 것이 아닌 내부의 특정 태그로 이동하는 것이다.

 

우선 <a>태그의 사용 방법을 간단하게 설명하고 넘어가겠다.

 

<!-- 새 탭을 열지 않고 현재 페이지에서 "이동하고자 하는 링크"로 이동 -->
<a href="이동하고자 하는 링크"> a태그 </a>

<!-- 새 탭을 열어 "이동하고자 하는 링크"로 이동 -->
<a href="이동하고자 하는 링크" target="_blank"> a태그 </a>

 

---

내부 링크 사용 방법

 

 

1. <a>태그 작성

<a>테스트</a>

테스트

 

위의 코드라인과 같이 빈 <a>태그를 작성하면 링크가 연결되어 있지 않기 때문에 클릭해도 이동하지 않는다.

그렇기 때문에 링크를 작성해야 한다.

 

---

2. <a>태그에 링크 연결: herf

<a herf="#여기로">테스트</a>

테스트

 

참고로 HTML링크에서 "#"은 현재 페이지라는 뜻이다.

"#여기로"는 현재 페이지에서 id가 "여기로"인 태그를 뜻한다.

 

그렇기 때문에 그냥 <a>태그에 "#여기로"를 달아봤자 아무 의미가 없다.

이동하고자 하는 태그에 해당하는 id를 추가해줘야 한다.

 

---

3. 이동하고자 하는 태그에 id 추가

<p id="여기로">여기로<p>

여기로

 

그냥 보면 일반 글과 다를 게 없어 보이는 코드이지만 위의 <p>태그에는 "여기로"라는 id가 추가되어 있다.

만약 구글 크롬을 사용한다면 개발자 도구를 들어가서 태그의 내용을 볼 수 있다.

* (구글 크롬에서) F12 혹은 Ctrl+Shift+I 를 누르면 개발자 도구가 켜진다.

* 개발자 도구 왼쪽 위에 있는 버튼(붉은 원으로 강조된 부분)을 클릭하면 웹페이지에서 태그를 선택할 수 있고, 선택한 태그를 개발자 도구에서 확인할 수 있다. (글로 설명하기 너무 어렵네요. 해보세요!)

 

* 크롬의 개발자 도구는 현 페이지에서만 작동하고 변경한 내용이 저장되지 않는 도구이기 때문에 겁먹지 말고 코드의 이것저것을 건드려 봐도 상관없다. 제가 엄청 좋아하는 기능입니다 :)

 

 

여기까지 다 했다면 내부 링크 사용방법은 끝!

 

 

 

 

 

 

예시

 

돌아가기