[HTML / CSS] 버튼태그, a태그로 페이지 이동하기

이번 시간에는 사이트에서 다른 페이지로 이동하는 기능을 구현해보겠습니다.

 

페이지 이동을 하기 위해서 html의 2가지 코드를 간단히 진행해보겠습니다.

 

 

아직 스틱코드에 즐겨찾기가 안 되어 있으시면 아래 링크에서 즐겨찾기를 해주세요

 

https://stickode.com/detail.html?no=2229

 

 

---

1. 버튼 태그

 

1) 현재 창에서 이동하기

 

 

결과 화면

 

버튼을 클릭하면 현재 페이지에서 다른 페이지로 이동하게 됩니다.

 

스틱코드로 단번에 불러와 보겠습니다.

 

<button onclick="location.href='test.html'">Button</button >

 

2) 새 창으로 열기

 

버튼을 클릭하면 새 창을 열어 다른 페이지로 이동하게 됩니다.

결과 화면

스틱코드로 단번에 불러오겠습니다.

 

 

 <button onclick="window.open('test.html')">text</button >

 

 

---

2. a태그

  a태그는 왜 하필 a일까요? a는 ahchor를 뜻합니다. 닻을 내린다. 즉, 어딘가에 정박한다는 뜻이지요. 웹서핑을 하다가 어떤 페이지에 닻을 내린다고 생각하면 페이지 이동 기능이 자연스럽게 느껴지실 겁니다.

 

1) 현재 창에서 이동하기

 

텍스트에 마우스를 올려놓으면 포인터가 손가락 모양으로 변합니다.

클릭하면 현재 페이지에서 다른 페이지로 이동하게 됩니다.

 

결과 화면

 

스틱코드로 단번에 불러오겠습니다.

 

 

<a href="#" onclick="location.href='test.html'">클릭</a>

 

2) 새 창으로 열기

 

텍스트에 마우스를 올려놓으면 포인터가 손가락 모양으로 변합니다.

클릭하면 새 창을 열어 다른 페이지로 이동하게 됩니다.

 

결과 화면

스틱코드로 단번에 불러오겠습니다.

 

 

 <a href="#" onclick="window.open('test.html')">text</a>

 

그런데 href는 무슨 뜻일까요?

hypertext reference 의 줄임말입니다.

참조할 문서를 지정해주겠구나 정도로 해석하면 됩니다.

 

포스팅 된 예제에서 href="#" 이 보이실 겁니다. '이동할 경로'가 아니라 '#'을 쓴 이유는

아직 경로를 정하지 않고 ‘무엇인가를 참조할 형태’를 만들어 놓았다고 보면 됩니다.