id 속성으로 앵커 만들기

앵커

​

닻이라는 뜻처럼 문서내의 측정 위치로 이동 할 수 도록 하는 기능이다.

​

위키디피아 등의 페이지를 볼때

웹페이지의 본문을 읽다가 단어의 설명이 필요할때가 있다.

이때 그 단어에 링크를 걸고 페이지의 아래쪽에 앵커를 나둔것을 볼 수 있다.

단어 설명이 앵커가되고 본문의 단어에 링크를 걸어서 단어를 누르면

단어의 설명이 있는 위치로 갈 수 있도록 하는 것이다.

​

이렇게 편리한 앵커! 어떻게 만들까?

​

id 속성을 이용하면 된다.

15번째 줄을 보면 새창에서 띄우기를 클릭하면 네이트 페이지가 새창에서 띄어질 수 있도록 되어있다.

17 <a href="#chap2" id="chap1">chapt1으로 이동</a> 39 <a href="#chap1" id="chap2">chapt2으로 이동</a>

​

17번째줄을 보면 id 속성이 보인다.

id 속성에 앵커의 이름을 지정하면 어떠한 태그던간에 그 위치에 앵커가 만들어진다.

<p><h3> 등등,,,

그리고 id="#앵커이름"을 쓰면 앵커에 연결하는 링크가 만들어진다.

나는 이를 이용하여 위아래 페이지로 왔다갔다 할 수 있는 코드를 써봤다.

학원에서는 아래쪽으로 이동하는 것까지만 연습해서

위로 다시 올라가는 버튼을 만들려고 하였다.

그래서 버튼을 따로 만들어야하나 고민했지만

같은 <a> 태그를 링크로도 쓸 수 있고 id로도 쓸 수있길래

서로 왔다갔다 할 수 있도록 썼다!

중간에 <br>이 많은 이유는 둘이 위치가 가까우니까 이동하는게 티가 안나서 넣었다. ㅎ

지금보니 39줄에 <a> 태그를 </p>로 닫았다. ㅠ

실수 엄지검지 ㅠㅠ

근데 실행은 되네..?

​