HTML 본문 안에서 링크로 이동하는 법 한 눈에 정리 (티스토리 목차 만드는 방법)

글을 보다 깔끔하게 쓰기 위해서, 그리고 서치에 최적화 하기 위해서는 제목과 소제목들을 활용하는 것이 좋다고 한다. 이렇게 포스트 안에 소제목들이 있을 경우, 상단에 하이퍼링크 처리된 목차를 만들면 독자가 보다 쉽게 원하는 부분으로 이동할 수 있다. 사실 매번 방법을 까먹어서 포스트를 쓸 때 마다 인터넷에 검색해서 복붙해서 썼는데, 포스트 마다 방법이 조금씩 달라서 뭐가 맞는 것인지, 어떤 차이가 있는 것인지 너무 헷갈리더라. 그래서 내가 볼 겸 티스토리 글 안에서 링크로 이동하는 법(목차 만드는 법)을 한눈에 볼 수 있게 정리해보려고 한다.

 

바쁘면 5번으로 바로 가는 것을 추천. 

 

목차

1. 하이퍼링크 만들기 (출발점)

2. 도착 위치 id 만들기 및 도착 위치에 따른 태그 방법

1. 제목/소제목
2. 새로운 문단의 시작
3. 문단 안의 문장이나 단어

3. 이동 위치에 관계 없이 쓰는 방법

4. 주의할 점

5. 간단 요약 (바쁘면 여기만 봐도 됨) 

---

우선 모든 것에 앞서, 가장 중요한 것은 지금 부터 우리가 활용할 에디터는 "HTML" 모드라는 것이다. 글쓰기 모드에 들어가서, 위의 메뉴 오른쪽 끝에 "기본모드" 라고 적힌 부분을 눌러 드롭바에서 "HTML"을 찾아서 눌러준다. 여기서만 편집할 수 있으며, 하이퍼링크가 제대로 작동하는지 확인하기 위해서는 글을 발행해야 한다는 단점이 있다. 아쉽지만 미리보기로도 안되더라. 

HTML에디터로 바꾸는 법

728x90

1. 하이퍼링크 만들기 (출발점)

먼저 이동을 하기 위해서 누를 곳, 즉 출발점에 하이퍼링크를 만들어준다. 목차를 만드는 중이라면 목차 안의 제목 리스트가 되겠다. 간단하게 결론부터 말하면, 아래의 코드 형태로 하이퍼링크를 생성할 수 있다. 

<a href="#[이동위치의 id]">[소제목]</a>

• 이동위치의 id: 내가 부여한 이동 위치의 아이디 또는 주소. 원하는 대로 이름 붙일 수 있지만 다른 장소라면 아이디가 중복되면 안된다. 하이퍼링크를 만들 때는 위의 코드처럼 이동위치 앞에 #을 꼭 붙여줘야 한다.
• 소제목: 목차의 경우 내가 누를 소제목의 전체 텍스트. 예를 들어 이 글의 경우, "1. 하이퍼링크 만들기 (출발점)" 이 부분이 전부 저 [소제목] 구간에 들어가야 한다. 

 

아래는 이 글의 목차다. 

목차 예시

일부러 두 가지 타입을 모두 보여주려고 목차를 이렇게 만들었는데, 큰 제목 (하이퍼링크 만들기 ~ 주의할점) 네 개는 그냥 일반 문장이고, 2. 이동위치에 따른 태그 방법 아래의 세 개의 소제목(1. 제목/소제목 ~ 3. 문단안의 문장이나 단어)은 리스트 기능을 활용한 것이다. 이렇게 두 개를 나눈 이유는 html에서는 다르게 보이기 때문이다. 

 

위의 목차를 HTML 편집기에서 보면 이런 느낌이다. 

HTML 편집기에서 보는 목차(하이퍼링크 적용하기 전)

 

자세히 보면, 일반 문장은 앞뒤에 <p></p>로 둘러쌓여 있지만, 리스트를 활용한 문장은 <li></li>안에 둘러쌓여 있다. 사실 어떤 태그(p, li등을 태그라고 한다)에 쌓여 있든 상관 없이 저 태그 안쪽에 <a href="#[이동위치의 id]">[소제목]</a>를 넣어주면 된다. 같은 알파벳 태그를 괄호라고 생각하고 괄호 열기 닫기를 잘 해줘야 한다. 

 

다음은 하이퍼링크를 모두 생성 완료한 모습이다. 

목차에 하이퍼링크 생성한 모습

 

 

2. 도착 위치 id 생성 및 위치에 따른 태그 방법

하이퍼링크에서 href="#[이동위치의 id]" 로 이동할 곳의 id를 가리켰다. 이제 그 해당 위치에 id를 생성해서 누르면 그 위치로 향하도록 한다. 하이퍼링크는 필요한 태그가 <a> 태그 하나인데, 도착지점은 도착지점 타입에 따라 앞에 붙는 태그가 다르다고 한다. 그래서 여기서는 세 가지 경우로 나눠서 살펴보려고 한다. 

 

제목 또는 소제목으로 이동하는 경우

내가 제목이나 소제목이라고 이야기하는 경우는 위의 메뉴 폰트 설정에서 "제목1, 제목2, 제목3" 중에 하나를 선택해서 작성하는 경우를 이야기 한다. 이렇게 제목 폰트를 선택해서 적용하는 경우, 아래와 같이 <h> 태그가 붙는 것을 볼 수 있다. 

h태그

 

h 뒤에 붙는 숫자는 크기를 생각하면 된다. 숫자가 작을 수록 큰 제목이고 클 수록 작은 제목이다. 이런 경우, <h>태그 안에 id를 넣어주면 된다. 이 때, id는 하이퍼링크에서 사용한 아이디와 일치해야 하며, 해시태그는 사용하지 않는다. 

<h2 id="제목1" data-ke-size="size26">1. 하이퍼링크 만들기 (출발점)</h2>

 

새로운 문단의 시작으로 이동하는 경우

새로운 문단의 시작으로 이동하는 경우는 <div> 태그 안에 id를 적어준다. <div> 태그는 새로운 문단을 나눌때 사용하는 태그이다. 문장 중간에 <div>태그를 활용하면 발행 시 새로운 문단으로 나뉘어지는 것을 볼 수 있다. 

 

아래의 예시를 보자: 

 

이 것은 하나의 문단이다. 이 것은 하나의 문단이다. 이 것은 하나의 문단이다. 이 것은 하나의 문단이다. 이 것은 하나의 문단이다. 이 것은 하나의 문단이다. 여기서부터는 새로운 문단이다. 새로운 문단을 이어서 써보겠다. 새로운 문단을 이어서 써보겠다.새로운 문단을 이어서 써보겠다. 

 

"여기서부터 새로운 문단이다"라는 문단을 기준으로 새로운 문단을 시작하려고 한다면: 

<p data-ke-size="size16">이 것은 하나의 문단이다. 이 것은 하나의 문단이다. 이 것은 하나의 문단이다. 이 것은 하나의 문단이다. 이 것은 하나의 문단이다. 이 것은 하나의 문단이다. <div id= "새문단"> 여기서부터는 새로운 문단이다. 새로운 문단을 이어서 써보겠다. 새로운 문단을 이어서 써보겠다.새로운 문단을 이어서 써보겠다.&nbsp;</div></p>

 

이렇게 <div id="id">를 넣어주면 된다. 그러면 위와 같던 문단이 아래처럼 새로 구분 된다: 

이 것은 하나의 문단이다. 이 것은 하나의 문단이다. 이 것은 하나의 문단이다. 이 것은 하나의 문단이다. 이 것은 하나의 문단이다. 이 것은 하나의 문단이다.

여기서부터는 새로운 문단이다. 새로운 문단을 이어서 써보겠다. 새로운 문단을 이어서 써보겠다.새로운 문단을 이어서 써보겠다. 

 

 

근데 나는 주로 이렇게 문단 안으로 이동하는 경우를 잘 쓰지 않고 문단 안의 문장이나 단어로 이동하거나 아니면 소제목으로 이동하는게 일반적이다. 

 

문단 안의 문장이나 단어로 이동하는 경우

새로운 문단 구분 없이 문단 안의 특정부분으로 이동할 경우, <span> 태그를 활용해주면 된다. 

<span id="inlineSection">특정 부분</span>

이러면 문단 안의 특정 부분으로 이동할 수 있다. 목차로 이동

 

3. 이동 위치와 관계없이 사용하는 방법 (비추)

내부 링크를 만드는 또 다른 방법은 id 대신 <a> 태그의 name 속성을 사용하는 것이다. 이 방법은 현재는 구식으로 간주되며 id로 대체되었지만, 호환성을 위해 여전히 사용될 수 있다. 

<a name="이동위치의 id">이동위치의 전 줄</a>

 

위의 코드를 사용하면 <a name=""> 다음 줄로 이동한다. 주의 사항으로는, 현대적인 브라우저는 id 속성을 선호하므로, id를 사용할 수 없는 경우에만 이 방법을 사용해야 한다는 것이다. 막상 사용해보면 다음줄로 이동되는 등 불편함이 많기 때문에 이 방법은 추천하지 않는다! 위에서 알려준 방법을 사용하는 것을 강력히 추천한다. 

 

4. 주의할 점

1. 유효한 타겟 ID 사용하기:
   • href 속성(예: #section1)이 대상 요소의 id와 정확히 일치해야 한다.

   <a href="#section1">섹션 1</a>
   <h2 id="section1">섹션 1</h2>

2. ID 중복 피하기:
   • 문서 내에서 id는 고유해야 한다. 두 개 이상의 요소가 같은 id를 가지면 브라우저가 올바르게 이동하지 않을 수 있다.
3. 타겟 요소의 가시성:
   • 고정 헤더(예: 스티키 네비게이션 바) 때문에 타겟 요소가 가려지지 않도록 하라. CSS를 사용하여 위치를 조정할 수 있다:
   • h2 { scroll-margin-top: 50px; /* 고정 헤더를 고려한 스크롤 위치 조정 */ }
4. 링크 텍스트의 접근성:
   • 링크 텍스트를 명확하고 설명적으로 작성하라(예: "여기를 클릭" 대신 "섹션 1 보기").
5. 탑으로 이동 링크 추가:
   • 멀리 아래로 이동하는 링크를 만드는 경우, "맨 위로 이동" 링크를 추가하는 것을 고려하라.

 

5. 간단 요약

1. HTML 편집 모드로 변경
2. 이동 시작 위치에 <a href="#id">[누르면 이동]</a>
3. 도착 위치에 따라 다음과 같이 id 생성
   1. 소제목: <h2 id="id"></h2> (h태그는 제목 폰트 쓰면 자동 생성. id="id" 부분만 넣어주면 됨)
   2. 새로운 문단 시작: <div id="id"></div>
   3. 문단 중간 또는 특정 부분: <span id="id"></span> 
4. 도착 위치 관계 없이 이동방법(비추): 원하는 이동위치 전 줄에 <a name="id"></a> 입력
5. 발행 완료 후 링크가 제대로 작동하는지 확인

 

이제 이 글을 보면 목차를 만드는 일을 다시 검색하는 일은 없을 것 같다. 이 글을 읽는 여러분께도 도움이 되었으면 좋겠다. 

누르면 목차로 다시 이동