HTML A tag: name=" " 같은 페이지(문서) 또는 다른 페이지의 특정 위치로 이동하기

블로그나 웹페이의 특정한 위치로 이동하는 링크를 넣는 방법은, 이동하고자 하는 위치에 이름을 붙여 지정하는 일과 그 지정한 이름이 있는 위치로 가는 링크를 거는 일 두 가지로 나누어 생각할 수 있다.

1) 위치 지정하기
HTML 편집창에서, 아래와 같이 이름(name)을 붙인 <a>태그를 원하는 위치에 넣어 주면 된다.
"~~"부분은 이동할 목표지점에 붙인 임의의 이름이며, 숫자와 알파벳으로 적어 주면 된다. 여기서는 장미꽃 그림으로 가도록 하려고 이름을 쉽게 "jangmi"라고 붙였다.

2) 지정한 위치로 가는 링커 걸기
지정한 위치로 가는 링크는 두 가지를 생각할 수 있다. 하나는 링크와 같은 페이지 안의 특정한 위치로 가는 것이고, 둘은 다른 페이지 또는 다른 사이트의 특정한 페이지의 특정한 위치로 가는 것이다.

(1) 같은 페이지 안에서 이동할 때
같은 페이지 안의 특정한 위치로 가고자 할 때는 아래와 같이 <a> 태그의 이동할 위치 참조(href)에 #과 위치를 지정한 이름을 붙여 쓰면 된다.
아래는 같은 페이지 안에서 이름(name)이 jangmi로 붙여진 위치로 이동하는 태그 모양이다.

<a href="#jangmi">장미 구경하세요</a>

(2) 다른 페이지 또는 다른 사이트의 특정 페이지의 특정 위치로 이동할 때
위의 같은 페이지 안에서 이동할 때와 다른 점은 사이트나 페이지의 주소(URL)를 함께 적어 주는 것 뿐이다.

<a href="이동할 페이지의 주소(URL)#jangmi">장미 구경하세요</a>

실제 적용한 모습

구글 블로그의 다이나믹 템플릿에서는 이 기능이 제대로 작동하지 않는다.
구글 블로그의 다른 템플릿에서는 아래의 참고1과 같은 문제점과 해결방법이 있으므로 가능하다.
실제 적용한 예제 페이지 보기 >>

참고1: 구글블로그에서의 주의 사항

구글블로그에서는 <a>태그를 넣으면, 자동으로 href="~~~" 인자가 추가 되어, 이 기능이 제대로 작동하지 않는다. 아래의 보기에서 빨강색 부분이 자동으로 추가된 부분이다.

HTML 모드와 Compose 모드 사이를 이동을 하면 자동으로 주소 인자가 들어가서 오류가 생긴다.
해결 방법은, HTML 편집모드에서 태그를 넣은 다음, Compose 모드로 창을 바꾸지 말고, 그 상태에서 바로 저장후 발행을 하면 정상 작동한다.
이렇게 하더라도 다이나믹뷰에서는 되지 않는다.

그리고, 위치를 지정할 때 <a name="이름"> 다음에 </a>를 붙여서 마무리 해 주어야 한다.
즉, <a name="이름"></a> 와 같이 해야 한다.

<a name="jangmi"> 태그가 아래와 같이 바뀐다.

<a href="#jangmi">장미를 보세요</a> 태그가 아래와 같이 바뀐다

<a href="https://www.blogger.com/blogger.g?blogID=1234567890123#jangmi">장미 구경하세요</a>

참고 2: 구글 안내 페이지의 실제 태그 모양
아래는 구글의 블로그 안내 페이지에서 특정 위치로 이동하는 코드부분만 뽑은 예이니 참고 하면 도움이 되겠다.

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

Search This Blog

사용법어찌?

HTML A tag: name=" " 같은 페이지(문서) 또는 다른 페이지의 특정 위치로 이동하기