티스토리 페이지 내에서 바로가기 만들기(네비게이션 만들기) / Tistory 네비게이션

✏️ 티스토리 페이지 내에서 바로가기 만들기

링크를 누르면 같은 페이지 내에 있는 특정 글의 위치로 이동하는걸 보신적 있으실 겁니다.

이 링크를 네비게이션이라고 부릅니다.

😏 네비게이션 생성하기

네비게이션을 만들기 위해서는 HTML을 수정해야 합니다.

HTML을 모르시는 분들을 위해서 간단히 말하면 모든 웹 페이지를 구성하는 뼈대입니다.

일단 눈으로 보면서 확인해 봅시다.

티스토리는 글을 작성할 때, 기본모드 이 외에서 HTML을 직접 수정할 수 있게도 제공됩니다. 일단 HTML을 눌러봅니다.

HTML 작성 모드

 

알수 없는 글자 사이에 우리가 작성한 글자가 있는걸 볼 수 있습니다.

실제 웹 페이지는 이렇게 HTML 코드로 구성되어있습니다. 그리고 <>를 우리는 태그라고 부릅니다.

 

다양한 태그는 여러 의미가 있지만, 간단하게 글자 크기에 맞춰서 다르다고 이해해주시면 될 것 같습니다.

(실제론 아닙니다... 우린 네비게이션 만드는법만 알면 되니까...)

태그를 결정하는 요소

우리가 링크(네비게이션)으로 만들 문장 양끝에 <a href="# + 아무거나 입력"></a> 태그를 추가해 줍니다.

a는 링크를 만들어주는 태그라고 생각해주시면 됩니다.

사용할 이름 앞에는 #을 붙여주세요. 페이지 내에서 이동한다는 의미로 생각해주시면 됩니다.

// 기존 코드
<p data-ke-size="size16">여길 누르면 이동해요</p>

// 수정 후 코드
<p data-ke-size="size16"><a href="#nav">여길 누르면 이동해요</a></p>

nav라는 이름으로 네비게이션 만들기 후

<<< 여길 누르면 이동해요 >>>

🤗 목적지 만들기

예시는 nav라는 이름으로 만들었습니다.

 

목적지는 새로운 태그를 만들지는 않고 가장 앞에 있는 태그에 id="아까 만든 이름"을 추가해주시면 됩니다.

도착지 설정하기

>>> 여기로 도착합니다. <<<

 

이렇게 간단하게 네비게이션은 만들어 봤습니다.

 

티스토리는 이렇게 HTML을 직접 수정할 수 있는 기능을 제공해주기 때문에 에디터가 마음대로 잘 되지 않다고 손쉽게 수정할 수 있습니다.

만약 웹 개발 지식이 없으시더라도 뭔가 필요한 부분이 있으시다면 HTML기능을 검색해서 수정하시면 훨씬 편하게 수정 가능합니다.