[Html] 클릭시 특정 위치로 이동하기 & 예제

 

 

안녕하세요. 키미추입니다.

HTML 첫강좌를 오픈하게 되어 인사드립니다.

첫번째 Html 강좌에서는 현재 페이지에서 클릭시 특정 위치로 이동하기를 소개하는 강좌로 누구나 쉽게 따라할수 있도록 하였으니 쉽고 재밌게 배우시고, 앞으로도 많은 격려 바랍니다.

 

링크 걸기보다 더 섬세하나 간단한 작업입니다.

 

1.서론

기본적으로 다른 페이지로 이동이 가능한 링크 걸기는 아주 많이 쓰이는 태그이다.

대표적으로 <a href="">태그이다.

하지만 a태그에 단순 url만 삽입은 페이지 간의 이동이 될 뿐이고, 같은 페이지 안에서 특정 위치로 이동 또는 다른 페이지의 특정 위치로의 이동은 조금 더 섬세하면서도 세밀한 작업이 필요하다.

 

 

 

2.id를 이용한 방법

첫번째로는 <a href="#id이름"> id이름으로 이동</a>을 html에서 태그를 걸어주고, 이동할 위치에 <div id="#id이름"> 이동할 위치입니다.</div> 태그를 삽입하면 특정 위치로 이동이 된다.

하지만 #id가 낯설고 적용하기가 어렵다면 아래 방법으로 할 수 있으니 걱정하지 않아도 됩니다.

 

<a href="#id이름"> id이름으로 이동</a> <div id="#id이름"> 이동할 위치입니다.</div>

 

 

 

 

 

3.name을 이용한 방법

두번째로는 일반적으로 링크거는 방법에 약간의 살을 덧댄 훨씬 더 쉽게 와닿는 방법이다.

<a href="링크주소#이름"> 지정한 이름으로 이동 </a>처럼 링크주소 바로 뒤에 특정 위치로 이동할 #이름을 붙여준다. 그리고 이동될 위치에 <a name="이름"> 이동할 위치입니다.</a> name태그를 삽입해주면 현재 페이지든 다른페이지든 내가 원하는 특정한 위치로 이동되니 쉽고 편리하게 애용될 수 있는 방법이다.

 

<a href="url#이름"> 지정한 이름으로 이동 </a> <a name="이름"> 이동할 위치입니다.</a>

 

 

 

4.예제

예제적용!! 클릭시 현재 페이지의 특정 위치로 이동됩니다.

글자에 그라데이션 만들기 & 예제(←다른 페이지의 특정 위치로 이동됩니다.)

가끔 이동시 상단이 애매하게 가려져있거나 하는 경우에는 margin,padding 값을 조정하면 됩니다.

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////