본문 바로가기

개발자의 logs

웹_공부 - 플라스크 여러 페이지 연결하기 본문

개발 공부지식/*개발 공부*

웹_공부 - 플라스크 여러 페이지 연결하기

주인장v 2022. 4. 27. 20:15

 

 

웹_공부 - 플라스크 여러 페이지 연결하기

 

 

 

오늘은 플라스크에서 하나의 페이지가 아닌 여러 페이지를 연결하는 작업을 했다.

 

아래는 메인 페이지 !

 

 

 

 

팀원들의 여러 페이지를 연결하면서 여러 문제를 해결했고, 위 캐릭터를 클릭하는 순간 각자의 페이지로 가는 것을 목적으로 두고 작업했다.

 

아래는 hy.html (여러 html 중 하나.)를 연결시킨 코드다.

 

메인 페이지에 삽입하면 된다.

 

참고한 페이지 : https://designalen.tistory.com/22

 

a 대신 onclick=location.href 활용하기

   링크값을 생각하면 보통 a 태그를 많이 사용하지만 이걸 javascript로 사용하면 좀더 자유롭게 링크값을 줄수 있습니다. 일반적인 a 태그 알렌브라운 javascript를 이용한 태그 알렌브라운 알렌브

designalen.tistory.com

 

 

<div class="col">
    <div class="card1" onclick="location.href='/hy'">
        <img src="/static/id2.png" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title1">이름</h5>
        </div>
    </div>
</div>

 

 

 

중요한 부분은 '/hy' 라고 쓴 부분은 hy.html처럼 파일이름과 일치 시켜줘야한다.

 

 

 

이 부분이 다르다면 오류가 뜰 수 있다.

 

아래는 app.py (서버) 파일 중 '/hy' 페이지를 열기위해 작업한 부분이다.

 

 

@app.route('/hy')
def getTicket_hy():
   return render_template('hy.html')

 

 

이 두 부분만 잘 써져있다면 여러 페이지가 연결 가능하다!

Comments