<a href>에 history.back() 넣기

<a href>에 history.back() 넣기: 웹 개발 꿀팁

웹 개발을 하다 보면 사용자를 이전 페이지로 돌려보내야 할 때가 있습니다. 이럴 때 <a href> 태그와 history.back()을 활용하면 간단하게 구현할 수 있습니다. 오늘은 이 방법을 몇 가지 예시와 함께 알아보겠습니다.

1. JavaScript href 활용

가장 직관적인 방법은 <a> 태그의 href 속성에 자바스크립트 코드를 직접 넣는 것입니다.

<a href="javascript:history.back()">이전 페이지로 이동</a>

2. onclick 속성 활용

<a> 태그의 onclick 속성에 자바스크립트 함수를 호출하여 이전 페이지로 이동하는 기능을 구현할 수도 있습니다.

<a href="#" onclick="history.back(); return false;">이전 페이지로 이동</a>

return false;는 링크의 기본 동작(페이지 이동)을 막아주는 역할을 합니다.

3. JavaScript 함수 분리

자바스크립트 코드를 별도의 함수로 분리하여 사용할 수도 있습니다. 코드의 가독성과 재사용성을 높이는 데 도움이 됩니다.

<a href="#" onclick="goBack()">이전 페이지로 이동</a>

<script>
function goBack() {
  history.back();
  return false;
}
</script>

주의 사항

• 접근성: 시각 장애인이나 스크린 리더 사용자를 위해 링크 텍스트를 명확하게 작성해야 합니다. "이전 페이지로 이동"과 같이 구체적인 텍스트를 사용하는 것이 좋습니다.
• 브라우저 호환성: history.back()은 대부분의 최신 브라우저에서 잘 작동하지만, 아주 오래된 브라우저에서는 지원되지 않을 수 있습니다.

마무리

<a href>에 history.back()을 넣는 방법은 웹 개발에서 자주 사용되는 간단하지만 유용한 기술입니다. 사용자 경험을 향상시키고 웹 페이지의 흐름을 자연스럽게 만들어주는 데 도움이 될 것입니다.

더 알아보기

• history.go(-1): history.back()과 동일한 기능을 합니다.
• 뒤로 가기 버튼 이미지 넣기: <img> 태그와 onclick 속성을 활용하여 커스텀 뒤로 가기 버튼을 만들 수 있습니다.