여기는 페이지 처음
포스팅을 하다 보면 목차를 만들고 목차에서 해당 내용으로 이동 시키는 페이지 내부 이동 링크를 만들어야 하는 경우가 생긴다.
외부 url로 이동하는 연결 링크도 anchor 태그를 쓰지만 페이지 내 링크도 anchor 태그를 쓴다. 그래서 페이지 점프를 앵커 링크라고 부르기도 한다. 예전에 나모 웹에디터1라는 곳에선 ‘책갈피’라고 불렀던 거 같기도 하다.
워드프레스에서는 페이지 점프를 아래와 같이 설명하고 있다.
앵커 링크라고도 하는 페이지 점프는 링크를 클릭하면 즉시 페이지 위나 아래로 이동하는 것입니다. 이는 긴 페이지에 특히 유용할 수 있습니다.
이를 활성화하는 한 가지 방법은 페이지의 제목 블록에 HTML 앵커를 설정하고 앵커로 이동하는 링크를 만드는 것입니다. 다른 페이지의 앵커로 이동할 수도 있습니다 .
위 설명대로 한 페이지 내에서 이동도 가능하지만 다른 페이지의 특정 부분으로 이동도 가능하다. 그러면 페이지 점프는 어떻게 만드는지 알아 보자.
예를 들어 아래와 같이 목차를 만들었다고 했을 때
1. 개요
2. 본문
3. 마치는 글
개요를 클릭 했을 때 포스트 내의 개요 부분으로 바로 이동을 시키고 싶다면
우선 내가 이동하고 싶은 개요 단락(paragraph)에 id name을 정한 다음 (name, class를 써도 된다)
<p id="개요">개요</p>목차 개요에 anchor 태그를 써주면 된다.
href에는 위 코드에 나와 있는 id name을 입력하면 되는데 앞에 샵(#)만 하나 붙여주면 된다.
<a href="#개요">1. 개요</p>그러면 실제로 동작을 하는지 보자.
위 anchor 태그의 소스는 아래와 같다
<p><a href="#페이지끝">페이지 끝으로 가기</a></p>여기는 페이지 끝
여기는 페이지 끝 | 다시 페이지 처음으로 가기
위 heading 태그 (여기는 페이지 끝)의 소스는 아래와 같다
<h2 class="페이지끝">여기는 페이지 끝</h2>다른 페이지 앵커로 점프 하기
a 태그에 url을 입력하고 마지막에 #과 함께 id name을 입력하면 된다.
<p><a href="otherPage.html#다른페이지앵커">다른 페이지 앵커로 가기</a></p>- 나모 인터랙티브[2]에서 만든 위지윅(WYSIWYG) 기반의 웹 에디터 HTML 편집기다. 보통 웹 전문 편집, 웹사이트 제작 및 HTML 실습을 할 때 사용되었으며, 기본적인 양식과 태그, 프레임을 갖추고 있어서 유용하게 쓰이는 편이었다. 라이센스는 개인/기업 모두 유료로 서비스되고 있었으나, 2008년 ‘나모 웹에디터 8’ 버전을 마지막으로 개발이 중단되었다. 이후 9년만에 2017년 7월 1일에 선보일 예정으로 나모 웹에디터 10을 개발중이라고 2016년 10월 24일 밝혔다. 그리고 2017년 8월 29일 ‘나모 웹에디터 원’이 출시되었다.(#) 경쟁 상품으로는 드림위버가 있다. ↩︎