"여기로 이동해볼까요?"
블로그 글 작성할 때 원하는 위치로 한번에 이동하는 버튼 생각해보신적 있죠?
오늘 그걸 알아볼건데요,
생각보다 쉽습니다.
잘 따라오시길 바랍니다...
1. 버튼이 될 문장 생성 !
원하는 위치에 버튼으로 사용될 문장을 만들어줍니다.
저는 이 게시글의 처음과 마지막에
(아래로) <- 이거랑
(위로) <- 이거를 버튼으로 만들어줄겁니다.
2. HTML 코드 추가
이제 html로 변경해서 몇가지 코드를 추가해주면 됩니다.
티스토리는 우측 상단에서 html 보기 기능을 제공합니다!
그리고 버튼이 될 문장 또는 문구를 검색해서 앞 뒤로 몇가지 글자를 추가해줍니다.
기존
<p data-ke-size="size16">(아래로)</p>
변경 후
<p data-ke-size="size16"><a href="#아래"> (아래로) </a></p>
<a href="#아래"> 기존 문구 </a>
요런 식으로 추가해줬는데, 이건 기존 문구를 하이퍼링크로 만들어주는겁니다.
여기서 #을 쓰는데 꼭 놓치지 말구 써주셔야 합니다.
그리고 저는 이 게시물 제일 하단에 있는 (위로) 라는 버튼으로 이동시켜줄겁니다.
다시 html편집기로 가서..
기존
<p style="text-align: left;" data-ke-size="size16">(위로)</p>
변경 후
<p style="text-align: left;" data-ke-size="size16" id="아래">(위로)</p>
id="아래" 라는 위치를 넣어줬습니다.
위로 올라오는 버튼도 동일한 방식으로 만들어 줬습니다.
잘 이해가 안가시면 아래 코드를 HTML 편집기에서 복사해서 써보세요!
아래로 가는 버튼, 그리고 여기까지 올라오는 좌표
<p data-ke-size="size16"><a id="위" href="#아래"> (아래로) </a></p>
위로 올라가는 버튼, 그리고 여기까지 내려오는 좌표
<p id="아래" style="text-align: left;" data-ke-size="size16"><a href="#위">(위로)</a></p>3. 여기부턴 광활한 공백입니다.
그럼 20,000..
'해야하는거 > 평범한거' 카테고리의 다른 글
| 2023년 한국사 시험 일정 정리 (0) | 2023.07.12 |
|---|---|
| 출생년도별 띠(12지)를 알아보자 (0) | 2023.04.26 |
| 편지나 메일에서 마침 인사말을 알아보자 (배상, 올림, 드림) (0) | 2023.04.04 |
| Reverb.com 휴대폰 인증 오류와 관련하여 (Sorry, that phone number is not supported.) (0) | 2023.01.26 |
| 성공적인 T 주차를 자축하기 위한 글 (0) | 2023.01.25 |
댓글