검색
검색
공개 노트 검색
회원가입로그인

글에서 원하는 위치로 스크롤 이동하는 링크 만들기

예시 사이트 보기

위 예시 사이트를 보면 목차가 있다. 목차에서 1~4번 링크를 누를 수 있는데 이 링크를 누르면 해당 스크롤 위치로 이동하게 된다. 내용이 긴 콘텐츠들의 가독성을 향상시키기 매우 좋은 기능이다. 예를 들어 내용이 많은 나무위키에서 이런 기능을 많이 사용한다. html 수정 기능과 하이퍼링크 태그만 외우고 있으면 언제든지 사용할 수 있다.

글에서 원하는 위치로 스크롤 이동하는 링크 만들기 image 1

  • 위 기능을 사용하려면 html로 태그를 작성해야 해서 에디터에 html 수정 기능이 있어야 한다. 티스토리 블로그를 기준으로 설명하니 참고.

기능 사용 방법

  1. 링크를 추가할 문장을 찾는다. 문장을 “나는 할 수 있다”로 가정하겠다.


  2. 문장을 사이에 두고 하이퍼링크 태그를 입력한다.

    <a href=”no1”>나는 할 수 있다</a>

    • 여기서 no1은 ID로 생각하면 된다. 본인이 알기 쉬운 단어 아무거나 정하면 된다.


  3. 이동할 문장을 찾으면 맨 앞에 <h2 data-ke-size="size26"> 이런 형식의 태그가 있을 것이다. 그곳 h2 태그 앞에 id=”no1”을 입력하면 된다.

    <h2 id="no1" data-ke-size="size26">


  4. 예시 사이트처럼 여러 개의 링크를 걸 것이라면 ID를 각각 따로 지정하여 1~3번을 반복하면 된다.

글에서 원하는 위치로 스크롤 이동하는 링크 만들기 image 2

글에서 원하는 위치로 스크롤 이동하는 링크 만들기 image 3

  • 필자는 ID를 1번으로 사용하였다.

조회수 : 1080
공유하기
카카오로 공유하기
페이스북 공유하기
트위터로 공유하기
url 복사하기