[Flask] 3-12 앵커

몇가지 문제점을 해결해 보려고한다

발견된 문제점은 답글을 작성하거나 수정한 후에 항상 페이지 상단으로 스크롤이

이동되기 때문에 본인이 작성한 답변을 확인하려면

다시 스크롤을 내려서 확인해야 한다는 점이다

 

HTML에는 URL 호출시 원하는 위치로 이동시켜 주는 앵커(anchor) 태그가 있다

HTML 중간에 <a id="flask"></a> 라는 앵커 태그가 있다면

이 HTML을 호출하는 URL 뒤에 #flask 라고 붙여주면 해당 페이지가 호출되면서

해당 앵커로 스크롤이 이동된다

 

답변등록, 답변수정, 답변추천시 앵커 태그를 이용하여

원하는 위치로 이동할 수 있도록 수정해 보자

 

앵커 엘리먼드

먼저 답변 작성, 수정, 추천시에 이동해야할 앵커 엘리먼트를 질문 상세 템플릿에 추가하자

[파일명: projects\myproject\pybo\templates\question\question_detail.html]

답변이 반복되어 표시되는 for 문 바로 다음에

<a id="answer_{{ answer.id }}"></a>와 같이 앵커 엘리먼트를 추가했다

앵커 엘리먼트의 id 속성은 유일해야 하므로

answer_{{ answer.id }}와 같이 답변 id를 사용했다

 

앵커로 이동

이제 답변을 등록하거나 수정할 때 위에서 지정한 앵커 태그로 이동하도록 코드를 수정하자

[파일명: projects\myproject\pybo\views\answer_views.py]

 

수정한 후 답변을 등록할 때 스크롤이 지정한 앵커 엘리먼트로 이동하는지 확인해 보자

 

화면에 표시한 부분을 보면 상세 화면 URL에 #answer_11이 추가되었고 스크롤이 해당 위치로 이동했음을 알 수 있다