<a>로 앵커가 적용되는 방식 설명

👉적용 예시

• HTML 파일에 밑의 코드와 같이 <a> 태그 추가

  (... 생략 ...)
  <!-- 답변의 갯수 표시 -->
  <h5 class="border-bottom my-3 py-2" 
      th:text="|${#lists.size(question.answerList)}개의 답변이 있습니다.|"></h5>
  <!-- 답변 반복 시작 -->
  <div class="card my-3" th:each="answer : ${question.answerList}">
      **<a th:id="|answer_${answer.id}|"></a>**
      <div class="card-body">
  (... 생략 ...)

  • 여기서 <a th:id="|answer_${answer.id}|"></a> 부분을 추가해서 각 답변마다 answer의 id에 해당하는 값을 동적으로 적용
    
    

• Controller의 return에 #answer_%s 추가

  return String.format("redirect:/question/detail/%s#answer_%s", 
      answer.getQuestion().getId(), answer.getId());

  
  
  

❓질문

• HTML 파일에 #을 붙인 것도 아닌데 왜 URL에는 #answer_%s를 넣고, 그게 어떻게 작동하는지 이해가 안 됨
  
  
  
  

❗답변

• #answer_${answer.id}에서 "#"는 프래그먼트 식별자(fragment identifier)로, 특정 웹 페이지 내의 특정 위치를 가리킴
  • ➡️ 웹 브라우저는 이 정보를 사용하여 페이지가 로드되면 해당 섹션으로 자동 스크롤
• 가능한 이유는 HTML의 <a> 태그에 id 속성이 있는데, 이 id 속성은 페이지 내의 특정 위치를 식별하기 위해 사용됨
  • 브라우저는 이 id를 이용해 해당 위치로 이동하는 것
  • 따라서 a 태그에서 "#" 기호를 따로 넣어줄 필요가 없습니다. URL의 끝에 프래그먼트를 붙이면 브라우저는 알아서 해당 위치로 이동하게 됨
  • 해당 기능은 웹 표준에 따른 것이므로 프레임워크와는 무관

💻 코드 출처 : 점프 투 스프링부트