[HTML/CSS] <a> 태그로 페이지 내부 이동

목차 클릭 시 해당 라인으로 이동하는 HTML 작성 방법 
 - "내부 링크"를 이용: <a> 태그 사용 

1. <a> 태크란? 

- "Anchor"의 약자
- 특정 사이트의 이동 (하이퍼 링크)이나 동일 페이지 내의 특정 위치로 이동(앵커)하게 하는 역활을 한다. (링크 기능)
- 링크의 타깃이 되는 역활을 함.

1) <a> 태그 syntax

<a href="#where" name="name"> "string" </a>

필수 속성으로써, href와 name이 필요하다. 
  • herf : Hyperlink Reference (연결 고리 참조)
  • herf 이후에 오는 "#where"는 "string"을 클릭 시 이동하는 목적지를 나타낸다.
          - 반드시 #을 붙여주어야 한다.  
  • name: 해당 <a> 태그의 이름으로써 다른 링커의 목적지의 역활을 한다. 
  • name 대신에 "id" 를 사용해도 되며 두 사이의 차이점은 아래와 같다.
     - name: 목적지의 요소가 <a>인 경우에만 가능 
       ex)  <a name='hz'>목적지</a > 
     - id : 목적지의 요소가 <a>, <div>, <span> 등 모두 가능 
       ex) <div id='hz'>목적지</div>            

2. <a> 태그 사용 방법

(1) name을 이용하는 경우

<a href="#tag1">맨아래 이동</a>		// 클릭할 텍스트
<a name="tag1"></a>			// 이동해서 보여질 위치

 

(2) name 대신에 "id"를 넣어도 동일한 효과를 준다.

<a href="#tag1">맨아래 이동</a>		// 클릭할 텍스트
<a id="tag1"></a>			// 이동해서 보여질 위치

 

예제 - 1) 내부 페이지 이동의 예시로써,  왼쪽의 "example 1"을 누르면 맨 아래의 "-페이지 끝-"으로 이동하는 예제이다:  example 1

아래는 위 <a> 태그에 대해서 티스토리에서 사용한 html 코드이다. 

<p data-ke-size="size14">
    <span style="color: #000000;">
   		예제 - 1) 내부 페이지 이동의 예시로써,&nbsp; 왼쪽의 <b>"example 1"</b>을 누르면 맨 아래의 "-페이지 끝-"으로 이동하는 예제이다: 
    </span>
    <span style="color: #000000;">
    	<b><span style="color: #006dd7;">
        	<a style="color: #006dd7;" href="#page_end">
            		example 1
            	</a>
      	   </span>
        </b>
    </span>
 </p>
<p data-ke-size="size14">
	아래는 위 &lt;a&gt; 태그에 대해서 티스토리에서 사용한 html 코드이다.&nbsp;
</p>
...
...
...
<p data-ke-size="size14">
	<span style="color: #333333;">
    	<b><a name="page_end"></a>-페이지 끝-</b>
    </span>
</p>

여기에서 <a> 태그의 위치와 이름을 주목하자. 

 

 

 

 

-페이지 끝-

 

Reference: 
[1] homzzang.com/b/html-58