html 간 페이지 이동

문제

팀 소개페이지를 만드는 프로젝트를 시행중에,

메인 화면에서 팀의 개인카드가 표시되고 카드를 눌렀을 때 

개인 화면이 나오는 기능을 구현 할려고 했다.

그러기 위해선 메인페이지(index.html)에서 개인카드 페이지(card.html)로

이동하는 버튼과 기능이 필요했다.

 

시도해 본것

버튼은 쉽게 <button></button> 으로 구현이 되었으나

 부트스트랩 https://getbootstrap.kr/docs/5.2/components/buttons/

버튼

에서 좀 더 디자인 적으로 예쁜 것을 가져 왔다.

 

남은 것은 페이지 간의 이동이다.

간단 하게 a 태그를 이용하여 시도해보았다.

ex) index.html에서 card.html로 이동하는 버튼

 

<button a href='/card.html'><button>

으로 시도하였다.

 

하지만 open with live sevrer에선 작동되었으나

로컬로 연결하였을 땐 404에러가 발생하여 실패하였다.

https://www.whatap.io/ko/blog/40/

HTTP 상태 코드 정리 | 와탭 블로그

참조하여 404 에러가 요정받은 리소스를 찾을 수 없어 발생한다는 것을 알게되었고

 

a 태그가 나의 로컬에서만 작동하는 것인가 싶어 다른 방법을 찾아보았다.

 

해결

location.href 를 사용하였다.

href는 location 객체에 속해있는 프로퍼티로 현재 접속중인 페이지의 정보를 가지고 있으며

값을 변경할 수 있는 프로퍼터임으로 다른 페이지로 이동하는데도 사용된다.

라는 정보를 얻어 시도해 보게 되었다.

 

html

<button onclick="location.href='/gocard'"><button>

 

app.py.

@app.route('/gocard')

def gocard():

      return render_template('card.html')

라는 방법으로 시도 하였고 성공했다.

 

이때, card페이지에서 메인 페이지로의 이동 버튼을 생각했는데

메인페이지는

@app.route('/')

def home():

      return render_template('index.html')

으로 설정이 되어있음으로

html

<button onclick="location.href='/'"><button>

만으로 쉽게 구현이 가능했다.