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

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

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

<a href="#jangmi">장미를 보세요</a> 태그가 아래와 같이 바뀐다
<a href="https://www.blogger.com/blogger.g?blogID=1234567890123#jangmi">장미 구경하세요</a>



참고 2: 구글 안내 페이지의 실제 태그 모양
아래는 구글의 블로그 안내 페이지에서 특정 위치로 이동하는 코드부분만 뽑은 예이니 참고 하면 도움이 되겠다.
<div class="infoSection">
 <h3>콘텐츠</h3>
   <ul>
    <li><a href="#createblog">블로그 만들기</a></li>
    <li><a href="#dashboard">대시보드</a></li>
    <li><a href="#overview">개요</a></li>
    <li><a href="#write">글쓰기</a></li>
    <li><a href="#addphotos">이미지 추가</a></li>
    <li><a href="#addvideos">동영상 추가</a></li>
    <li><a href="#customizelayout">맞춤설정</a></li>
    <li><a href="#permissions">개인정보 보호 및 사용권한</a></li>
   </ul>
</div>


<h3 class="dashboard"><a id="dashboard" name="dashboard"></a>대시보드</h3>
~~ 내용 ~~
<h3 class="overview"><a id="overview" name="overview"></a>개요</h3>
~~ 내용 ~~
<h3><a id="write" name="write"></a>글쓰기</h3>
~~ 내용 ~~
<h3><a id="addphotos" name="addphotos"></a>이미지 추가</h3>
~~ 내용 ~~
<h3><a id="addvideos" name="addvideos"></a>동영상 추가</h3>
~~ 내용 ~~
<h3><a id="customizelayout" name="customizelayout"></a>맞춤설정</h3>
~~ 내용 ~~
<h3><a id="permissions" name="permissions"></a>개인정보 보호 및 사용권한</h3>
~~ 내용 ~~
<p><a href="#top">맨위로</a></p>


>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...
주인으로 삽시다 !
우리 스스로와 사랑하는 후세대를 위하여 !
사람(人) 민족 조국을 위하여 !!



《조로공동선언 : 2000년 7월 19일 평양》
반제자주 다극세계 창설 - 공정하고 합리적인 국제질서 수립



>> 조선 땅을 점령함 : 점령자(침략자) 미제국 맥아더 포고령

>> 한국인 마루타 : 주한미군 세균전 실체

>> 강제 백신(예방) 접종 : 강제 인구감축 대량학살 무기

>> 끊임없이 전쟁을 부추기는 피아트 머니 - 사기.착취.략탈.강탈 도구

>> 현금금지(캐시리스) 전자화폐(CBDC 씨비디씨) 특별인출권(에스디알)

>> 미국 달러 몰락, IMF SDR 특별인출권 국제기축통화 부상과 금

>> 딮 스테이트 : 그레이트리셋, 유엔 아젠다 2030, 2021, SDG 17, 아이디 2020, 4차산업혁명, 세계경제포럼, 세계화, 신세계질서, 세계단일정부, 세계재편



민족자주 승리에 대한 굳건한 믿음으로, 한미동맹파기! 미군철거!!

주권主權을 제 손에 틀어쥐고, 주인主人으로서 당당하고 재미나게 사는 땅을 만들어, 우리 후세대에게 물려줍시다.