[HTML] 버튼 클릭 시 다른 페이지로 이동하는 법 (a 태그 vs window.location)

---

💡 버튼을 눌렀을 때 다른 페이지로 이동시키고 싶다면?

웹페이지에서 버튼을 클릭하면 다른 페이지로 이동하는 기능이 필요한 경우가 많아요.
<a> 태그를 써도 되고, JavaScript의 window.location을 써도 가능해요.
이 글에서는 두 가지 방법의 차이점과 사용 예제를 알려드립니다.

---

🛠️ 방법 1. a 태그 사용하기 (HTML만으로 이동)

가장 간단한 이동 방법입니다.

<a href="https://example.com">
  <button>이동하기</button>
</a>

✅ 장점:

• HTML만으로 구현 가능
• 새 탭에서 열고 싶으면 target="_blank" 추가

<a href="https://example.com" target="_blank">
  <button>새 탭에서 이동</button>
</a>

---

🛠️ 방법 2. JavaScript window.location 사용하기

JS로 제어하고 싶을 때 사용하는 방법입니다.

<button onclick="window.location.href='https://example.com'">
  이동하기
</button>

✅ 장점:

• 이동 시점이나 조건을 JS 코드로 더 세밀하게 제어 가능
• 예: 로그인 확인 후 이동, 확인창 띄우기 등

---

🧩 예시: 이동 전에 확인창 띄우기

<button onclick="goPage()">이동하기</button>

<script>
  function goPage() {
    if (confirm('이동하시겠습니까?')) {
      window.location.href = 'https://example.com';
    }
  }
</script>

---

⚡ a 태그 vs window.location 비교

방법	장점	단점
<a href="">	간단, HTML만 사용 가능	JS 조건 제어 어려움
window.location	조건 제어, 동적 처리 가능	JS가 필요한 환경

---

🏁 마무리 요약

목표	방법
단순 페이지 이동	<a href="URL">
이동 전 확인, 조건 처리 필요	window.location.href = 'URL'
새 탭에서 열기	<a href="URL" target="_blank">

---

👉 다음 글 예고

[HTML] 버튼 클릭 시 특정 영역을 보여주거나 숨기는 방법 (display 속성 활용)
이어서 알아볼게요! 놓치지 않으려면 "좋아요" 눌러주시고 "구독" 해주세요 😊