이 가이드는 블로그 등 페이지의 특정 위치로 이동하는 HTML 앵커 링크 생성 방법에 대해 설명합니다.
게시물이나 페이지에 앵커 태그를 포함하면 게시물 본문에 링크를 배치할 수 있으며, 이를 클릭하면 동일한 페이지 또는 다른 페이지의 특정 위치로 이동할 수 있습니다.
예를 들어 A 페이지에 단순히 B 페이지 주소 링크를 삽입한 경우 연결된 대상 페이지에서 직접 관련 내용을 찾아야 합니다.
그러나 앵커 태그를 포함할 경우 B 페이지로 연결된 다음 해당 섹션에 바로 이동할 수 있습니다.
블로그 등 웹 페이지의 특정 위치로 이동하는 HTML 앵커 사용 방법
블로그나 웹 페이지에서 다른 페이지로 이동한 후 새로 연결된 페이지의 원하는 특정 위치로 이동하는 기능이 필요한 경우 두 가지 방법을 사용할 수 있습니다.
워드프레스와 같이 ‘HTML 앵커’ 태그를 지원하는 에디터는 간단히 특정 블록에 태그 지정 후 사용할 수 있지만, 이를 지원하지 않을 경우 직접 앵커 태그 코드를 설정할 수 있습니다.
01 앵커 태그 코드 수동 사용
앵커 태그 코드는 두 개의 요소로 구성됩니다. 동일한 페이지의 특정 위치에 연결하는 방식과 유사하며, HTML 편집 모드에서 직접 앵커 태그 코드를 입력합니다.
예를 들어 다른 페이지에 있는 ‘Windows 개발자 모드 활성화’ 섹션에 연결하는 경우 호출하려는 줄의 시작 부분에 다음과 같이 앵커를 배치해야 합니다.
<span id="devmode"></span>또는 다음과 같이 지정할 수도 있습니다.
<a name="devmode"></a>
호출하려는 위치에 앵커 배치가 끝났다면, 해당 페이지의 특정 지점에 연결하는 링크를 생성합니다.
<a href="https://geekorea.com/how-to.....magiskonwsalocal/#devmode>Link Text</a>
해당 링크를 클릭하면 연결된 다른 페이지가 열리며 사용자가 지정한 앵커 태그 위치로 이동합니다.
02 앵커 태그 에디터 사용
워드프레스 등 HTML 태그를 지원하는 에디터가 있는 경우 보다 간편하게 앵커 태그 코드를 사용할 수 있습니다. 방법은 다음과 같습니다.
먼저 링크를 통해 다른 페이지의 특정 위치로 이동하려는 곳에 앵커 배치를 합니다.
위 예시 이미지는 워드프레스 에디터 기준이며, 관련 기능을 지원하는 경우 다른 에디터 또한 어렵지 않게 사용할 수 있습니다.
먼저 호출하려는 위치의 ‘블록’을 선택하고 ‘HTML 앵커’ 필드에 설정한 주소를 입력합니다.
링크를 삽입할 때 주소 끝 부분에 동일한 방법으로 앵커 코드를 입력하시면 됩니다.
https://geekorea.com/how-to.....magiskonwsalocal/#dev-mode마치며
동일한 페이지의 특정 지점에 연결하는 방법과 크게 다르지 않습니다. 연결된 앵커(#Anchor) 주소를 페이지의 전체 URL을 포함하는 앵커 주소로 변경하시면 됩니다.
