개발자의 logs
웹_공부 - 플라스크 여러 페이지 연결하기 본문
웹_공부 - 플라스크 여러 페이지 연결하기
오늘은 플라스크에서 하나의 페이지가 아닌 여러 페이지를 연결하는 작업을 했다.
아래는 메인 페이지 !
팀원들의 여러 페이지를 연결하면서 여러 문제를 해결했고, 위 캐릭터를 클릭하는 순간 각자의 페이지로 가는 것을 목적으로 두고 작업했다.
아래는 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')
이 두 부분만 잘 써져있다면 여러 페이지가 연결 가능하다!
'개발 공부지식 > *개발 공부*' 카테고리의 다른 글
항해99 C반 6조 - S.A(Starting Assignment) (0) | 2022.05.09 |
---|---|
백엔드 입문자에게 Spring 과 Node.js 무엇을 배워야할까? (4) | 2022.05.04 |
제이쿼리(JQuery)란 무엇인가. 초보자의 눈으로 이해한 JQuery. (0) | 2022.05.03 |
성질 급한 개발자/편집자를 위한 맥북 단축키 모음집 (0) | 2022.04.27 |
국비 인공지능 부트캠프 합격후기 (10) | 2021.05.13 |
Comments