인터넷에서 글을 읽을 때 특정 항목만 바로 확인하고 싶을 때가 있습니다.
그럴 때 제목을 클릭하면 해당 위치로 스크롤이 내려가서 확인할 수 있는데 이는 HTML을 이용한 것입니다.
티스토리에서 글을 쓸 때도 쉽고 간편하게 이런 방법을 적용할 수 있으며, 아래에서 자세하게 설명해 드리겠습니다.
설명을 위해 세 가지 목록을 작성해 보았습니다.
1. 클릭 한 번으로 특정 위치로 이동하기
가장 일반적이고 간단한 방법부터 설명드리겠습니다.
1. 블로그를 켜서 글을 쓸 때 두 가지를 기억해 주세요.
목차가 될 부분(파란색)과 목차를 누르면 도착할 부분(보라색)의 제목을 써주세요.
둘은 반드시 같은 내용일 필요는 없습니다.
지금 작성 중인 글을 예시로 들어 설명드리겠습니다.
2. 목차가 되는 부분과 내용이 되는 부분을 확인하신 후에는 우측 상단의 [기본모드]를 [HTML]로 전환해 주세요.
[작성모드를 변경하시겠습니까? 현재 서식이 유지되지 않을 수 있습니다.]라는 안내문이 뜰 텐데 진행해 주세요.
3. 아래와 같은 검은 화면이 뜹니다. 어렵지 않습니다. 당황하지 마시고 두 가지만 기억해 주세요.
[목차가 될 부분-흰색], [목차 부분을 클릭했을 때 실제로 이동할 부분-노란색] 둘을 구분하기 위해 아래와 같이 표시해 두었습니다.
4. 두 가지만 기억하세요. 1) 노란색 부분에 "이름"을 하나 지어주고, 2) 목차 부분에서 그 "이름"으로 이동할 수 있게 표시를 해주면 끝납니다.
1) 노란색 부분에 "이름"지어주기부터 설명드리겠습니다. 어렵지 않아요.
위의 사진을 보시면
<p data-ke-size="size16"><b>1. 클릭 한 번으로 특정 위치로 이동하기 </b></p>
라고 적혀있는데, 앞부분인 <p data-ke-size="size16"><b> 여기에 한 가지만 추가해 주세요.
추가할 내용은 id="영문, 숫자이름"입니다. 편의를 위해 저는 id="click"으로 임의로 지정해 보겠습니다. (원하시는 영문 뭐든 상관없고, 숫자를 넣으셔도 되고 빼셔도 됩니다. 예를 들어, id="d123"이라고 하셔도 상관없습니다. 따옴표 안에 넣어서 작성만 해주세요.)
변경한 부분을 아래와 같이 보여드리겠습니다.
[기존]
<p data-ke-size="size16"><b>1. 클릭 한 번으로 특정 위치로 이동하기 </b></p>
[수정 후]
<p id="click" data-ke-size="size16"><b>1. 클릭 한 번으로 특정 위치로 이동하기 </b></p>
p 뒤에 한 칸 띄우고 id="click" 글자를 써주시고 한 칸 띄우면 1단계는 완료입니다.
1단계 완료한 사진을 아래와 같이 보여드립니다.
5. 다음으로 이것만 수정하면 끝입니다.
2) 목차 부분에서 그 "이름"으로 이동할 수 있게 표시해주기
제 설명을 잘 따라오셨다면 현재는 이런 상황일 겁니다.
이번에는 빨간색으로 표시된 상단의 [목차 부분]을 수정해 주겠습니다.
목차가 될 부분으로
<p data-ke-size="size16"><b>1. 클릭 한 번으로 특정 위치로 이동하기 </b></p>
라고 적혀있는 부분에서 우리가 지어놓은 이름으로 이동할 수 있게 바꿀 겁니다.
아래의 순서를 따라주시면 됩니다.
1) <p 괄호 닫아주세요. <p>
2) 새 괄호를 바로 열어주시고. <p><a href="#click"을 적은 후 한 칸 띄어주세요.
주의할 점은 #이 반드시 들어가야 하는 것이고, 아까 위에서 지정한 것과 같은 이름(click)을 써야 한다는 점입니다.
3) 문장 제일 끝에 있는 </p> 앞에 </a>를 넣어 </a></p>로 만들어 주세요.
기존과 수정 후의 차이를 보여드리겠습니다.
[기존]
<p data-ke-size="size16"><b>1. 클릭 한 번으로 특정 위치로 이동하기 </b></p>
[수정 후]
<p><a href="#click" data-ke-size="size16"><b>1. 클릭 한 번으로 특정 위치로 이동하기 </b></a></p>
아래의 상태처럼 변경이 되었다면 완료입니다.
6. 우측 상단의 [HTML] 모드를 [기본모드]로 변경해 줍니다.
그러면 제 목차는 아래의 사진과 같이 파란색으로 변하고 밑줄이 그어진 상태로 나타납니다.
이 파란색이 의미하는 바는 글 작성 완료 및 게시 후에 파란색 밑줄 부분을 클릭하면 바로 스크롤이 내려가며 우리가 지정한 곳으로 이동할 준비가 완료되었다는 의미입니다.
고생 많으셨습니다. 여기까지가 기본적인 단계입니다.
다음으로는 제목에 강조효과를 넣은 경우를 살펴보겠습니다.
2. 제목에 강조효과를 넣은 경우
우리가 블로그에 글을 작성할 때 제목은 돋보이게 하기 위해 강조효과를 주기도 하고, 글씨를 크게 하거나 색을 바꾸는 경우도 있습니다. 그럴 경우에 위의 매뉴얼만 따라 하다가는 당황스러울 수도 있어 따로 항목을 만들었습니다. 참고하실 분들은 참고해 주세요.
절차는 같지만 나오는 부분이 조금 다릅니다. 한 번 살펴보겠습니다.
1. 두 가지를 기억해 주세요.
목차가 될 부분(파란색)과 목차를 누르면 도착할 부분(보라색)의 제목을 써주세요.
둘은 반드시 같은 내용일 필요는 없습니다.
지금 작성 중인 글을 예시로 들어 설명드리겠습니다.
2. 목차가 되는 부분과 내용이 되는 부분을 확인하신 후에는 우측 상단의 [기본모드]를 [HTML]로 전환해 주세요.
[작성모드를 변경하시겠습니까? 현재 서식이 유지되지 않을 수 있습니다.]라는 안내문이 뜰 텐데 진행해 주세요.
3. 아래와 같은 검은 화면이 뜹니다. 첫 번째 유형과는 조금 다른 형태가 나타났지만 어렵지 않습니다.
당황하지 마시고 두 가지만 기억해 주세요.
[목차가 될 부분-흰색], [목차 부분을 클릭했을 때 실제로 이동할 부분-노란색] 둘을 구분하기 위해 아래와 같이 표시해 두었습니다.
옆의 숫자를 보시면 아시겠지만, 글의 길이가 길어질수록 [클릭하면 이동할 대상이 되는 부분]도 아래로 내려가게 됩니다. 대상을 확인하셨다면 다음으로 넘어가겠습니다.
4. 두 가지만 기억하세요. 1) 노란색 부분에 "이름"을 하나 지어주고, 2) 목차 부분에서 그 "이름"으로 이동할 수 있게 표시를 해주면 끝납니다.
1) 노란색 부분에 "이름"지어주기부터 설명드리겠습니다. 어렵지 않아요.
위의 사진을 보시면
<h4 data-ke-size="size20"><b><span style="background-color: #f6e199;">2. 제목에 강조효과를 넣은 경우 </span></b></h4>
라고 적혀있는데, 앞부분인 <h4 data-ke-size="size20"><b> 여기에 한 가지만 추가해 주세요.
추가할 내용은 id="영문, 숫자이름"입니다. 편의를 위해 이번에는 id="d123"으로 임의로 지정해 보겠습니다.
변경한 부분을 아래와 같이 보여드리겠습니다.
[기존]
<h4 data-ke-size="size20"><b><span style="background-color: #f6e199;">2. 제목에 강조효과를 넣은 경우</span></b></h4>
[수정 후]
<h4 id="d123" data-ke-size="size20"><b><span style="background-color: #f6 e199;">2. 제목에 강조효과를 넣은 경우</span></b></h4>
h4 뒤에 한 칸 띄우고 id="d123" 글자를 써주시고 한 칸 띄우면 1단계는 완료입니다.
1단계 완료한 사진을 아래와 같이 보여드립니다.
5. 다음으로 이것만 수정하면 끝입니다.
2) 목차 부분에서 그 "이름"으로 이동할 수 있게 표시해주기
제 설명을 잘 따라오셨다면 현재는 이런 상황일 겁니다.
이번에는 흰색으로 표시된 상단의 [목차가 될 부분]을 수정하겠습니다.
목차가 될 부분으로
<p data-ke-size="size16"><b>2. 제목에 강조효과를 넣은 경우</b></p>
라고 적혀있는 부분에서 우리가 지어놓은 이름(d123)으로 이동할 수 있게 바꿀 겁니다.
아래의 순서를 따라주시면 됩니다.
1) <p 괄호 닫아주세요. <p>
2) 새 괄호를 바로 열어주시고. <p><a href="#d123" 을 적은 후 한 칸 띄어주세요.
주의할 점은 #이 반드시 들어가야 하는 것이고, 아까 위에서 지정한 것과 같은 이름(d123)을 써야 한다는 점입니다.
3) 문장 제일 끝에 있는 </p> 앞에 </a>를 넣어 </a></p>로 만들어 주세요.
기존과 수정 후의 차이를 보여드리겠습니다.
[기존]
<p data-ke-size="size16"><b>1. 클릭 한 번으로 특정 위치로 이동하기</b></p>
[수정 후]
<p><a href="#d123" data-ke-size="size16"><b>1. 클릭 한 번으로 특정 위치로 이동하기</b></a></p>
아래의 상태처럼 변경이 되었다면 완료입니다.
6. 우측 상단의 [HTML] 모드를 [기본모드]로 변경해 줍니다.
그러면 제 목차는 아래의 사진과 같이 파란색으로 변하고 밑줄이 그어진 상태로 나타납니다.
이 파란색이 의미하는 바는 글 작성 완료 및 게시 후에 파란색 밑줄 부분을 클릭하면 바로 스크롤이 내려가며 우리가 지정한 곳으로 이동할 준비가 완료되었다는 의미입니다.
3. 목차에 생긴 밑줄 지우기
마지막으로, 목차에 생긴 밑줄을 지우고 싶은 분들께 드리는 꿀팁입니다.
[1. 클릭 한 번으로 특정 위치로 이동하기]에 해당하는 부분의 파란 밑줄을 지워보겠습니다.
1번의 안내를 따라 수정하신 분들은 목차가 아래와 같이 변경되어 있는 것을 확인할 수 있으실 텐데요.
여기에서 흰색 부분의 내용을 조금 바꿔보겠습니다.
<a href="#click" 뒤에 style="text-decoration:none" style="text-decoration:none"이라는 부분을 앞 뒤 한 칸 띄우고 채워 넣으면 됩니다.
복사하기 쉬우시라고 따로 적어두겠습니다.
style="text-decoration:none"
그렇다면 아래와 같이 변하게 됩니다.
[기존]
<p><a href="#click" data-ke-size="size16"><b>1. 클릭 한 번으로 특정 위치로 이동하기</b></a></p>
[수정 후]
<p><a href="#click" style="text-decoration:none" data-ke-size="size16"><b>1. 클릭 한 번으로 특정 위치로 이동하기 </b></a></p>
여기까지 수정이 완료되었다면, 우측 상단의 [HTML] 모드를 [기본모드]로 변경해 줍니다.
그러면 제 목차는 아래의 사진과 같이 파란색으로 변하고 밑줄이 사라진 상태로 나타납니다.
1번에 대해서만 적용했기 때문에 1번만 삭제된 것을 확인할 수 있고, 2번에도 적용하시기를 원하면 같은 방법을 사용하면 됩니다.
정보가 도움이 되셨다면 공감(♥) 부탁드립니다.
감사합니다.
'꿀팁' 카테고리의 다른 글
| 구글 애드센스 승인 무한준비중 해결방법! (10) | 2024.08.16 |
|---|---|
| Chat GPT 사용법. 이렇게 쉽다구요? (0) | 2024.08.16 |
| 구글 애드센스 승인 받는 법. 수익화 이렇게 쉽고 빠르게 가능한거였다니! (2) | 2024.08.16 |
| 행운의 숫자 비법 노트. 안맞는 수, 방치하면 생명까지도 위험합니다. 전화번호, 비밀번호, 자동차번호, 통장번호 등을 살펴보세요. (0) | 2024.08.16 |
| 그냥 공부만하면 돈 못벌어요! '이것'을 알면 공부하면서 돈도 벌고 순공시간도 확보해요~ 파트타임스터디(part time study) (0) | 2024.08.15 |
