HTML 클릭시 특정 위치로 이동

클릭시 특정 위치로 이동 (HTML A tag : name = " " 같은 페이지 또는 다른 페이지)

 

photo로 이동

웹 페이지를 작성하다보면, 클릭했을때 내가 원하는 웹페이지의 특정 위치로  이동시키는 방법이 필요할 때가 있다. 어떻게 하는지 알아보자.

 

블로그나 웹 페이지의 특정한 위치로 이동하는 링크를 넣는 방법

 

1. 이동하고자 하는 위치에 이름을 붙여 지정한다.
2. 그 지정한 이름이 있는 위치로 가는 링크를 만든다.

 

1. 위치 지정하기

HTML 편집창에서 아래와 같이 이름(name)을 붙인 <a> 태그를 원하는 위치에 넣어 주면 됩니다. "~~"부분은 이동할 목표지점에 붙인 임의의 이름이며, 숫자와 알파벳으로 적어주면 됩니다. 여기에서는 사진으로 가도록 만들 예정입니다. "photo"라고 붙이도록 하겠습니다.

<a name = "photo">

2. 지정한 위치로 이동하는 링커 걸기

지정한 위치로 가는 링크는 크게 2가지를 생각할 수 있는데, 하나는 링크와 같은 페이지안에 특정한 위치로 가는것이고, 두번째는 다른 페이지 또는 다른 사이트의 특정한 페이지의 특정한 위치로 이동하는 것이다.

 

2-1. 동일 페이지 내에서 이동하려고 할 때

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

아래는 같은 페이지 안에서 이름(name)이 photo로 붙여진 위치로 이동하는 태그의 예이다.

<a href = "#photo">사진 구경하세요</a>

2-2. 다른 페이지 또는 다른 사이트의 특정 페이지의 특정 위치로 이동하려고 할 때

위와 같은 페이지 안에서 이동할 때와 다른 점은 사이트나 페이지의 주소(URL)을 함께 적어주어야 합니다.

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