구글 블로그 페이지 내 이동하는 링크 만들기

목차

• 1단계. 페이지 내 링크 이해하기
• 2단계. 페이지 내 링크 만들기

링크를 클릭하면 다른 페이지로 이동하는 것이 아니라, 현재 페이지 안에서 특정한 위치로 이동하는 링크를 어떻게 만드는지 설명할게요.

하나의 페이지 안에서 이동하는 이런 링크는 스크롤하는 불편함을 줄이고 특정한 부분을 정확하게 가리키고 싶을 경우에 사용하는데 예를 들면 주로 목차, '맨 위로 가기 버튼' 등을 만들 때 사용합니다.

참고로 이 페이지의 내용은 과거에 몇 번 부분적으로 수정되었는데, 이 번에는 기존 내용을 싹 지우고 코딩을 전혀 모르는 사람도 쉽게 이해할 수 있도록 새로 작성했습니다. 내용이 이해하기 어렵다면 댓글을 남겨 주세요.

1단계. 페이지 내 링크 이해하기

일단 ①~④를 따라해 보세요.

① 글 작성에서 일반 모드가 아닌 HTML 모드로 전환한다.
② 아래 코드를 모두 그대로 복사해서 붙여넣는다.
③ 게시하고, 해당 글을 열어 본다.
④ '여기에서'를 클릭하면 어떤 동작을 하는지 확인한다.

<div><a href="#test">여기에서</a></div>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<div id="test">여기로</div>

코드 설명

• <br />은 줄 바꿈을 의미합니다.
• <div></div>는 콘텐츠를 담을 수 있는 그릇입니다.
• 빨간색 부분 모두가 하나의 조합으로 페이지 내 이동을 가능하게 합니다.
• 빨간색 부분 중에서 test는 아이디명으로 실전에서는 test 대신에 다른 이름을 적당히 지어주면 되는데, 중복되지 않도록 하고 영문 또는 '영문 + 숫자'로 하세요.
• 빨간색이 아닌 부분은 사용자가 글의 내용을 어떻게 작성하느냐에 따라 달라집니다.

전부는 아니더라도 어느 정도 이해가 되었다면, 2단계로

2단계. 페이지 내 링크 만들기

예를 들어 우리가 일반 모드에서 글을 작성하다가, HTML 모드로 전환했더니 아래와 같이 되어 있다고 가정하면

<p>여기에서</p>

...(생략)

<h2>여기로</h2>

↓↓↓

<p><a href="#test">여기에서</a></p>

...(생략)

<h2 id="test">여기로</h2>

위와 같이 빨간색 부분을 넣으면 페이지 내 링크가 만들어집니다. 링크를 어떻게 만드는 지만 알면 됩니다.