2025. 4. 1. 23:57
프로젝트를 진행하는 도중 급하게 버튼을 만들고 다른 페이지로 이동을 시켜야 하는 일이 있었는데 지금 진행하는 프로젝트는 PHP를 이용하고 있으므로 대개는 버튼 등은 HTML 태그를 이용해서 만드는 편이어서 간편하게 input 태그에서 button 입력 시에(클릭) 외부 링크나 자신이 원하는 페이지 파일로 이동하는 방법을 간단하게 정리합니다.
현재 탭에서 다른 페이지로 이동하는 방법은 아래와 같습니다.
<input type="button" onClick="window.location='이동경로(링크) 혹은 파일경로'">
<input type="button" onClick="location.href='이동경로(링크) 혹은 파일경로'">
예시
<input type="button" name="test" id="test" value="현재탭" onClick="window.location='test.php'">
<input type="button" name="test2" id="test2" value="현재탭2" onClick="location.href='test2.php'">
큰 문제까지는 아니지만 가끔씩 location.href가 제대로 작동하지 않는 경우가 있어 저는 주로 window.location을 사용합니다.
그리고 현재 탭의 정보는 그대로 두고 새 탭에서 열려야 하는 경우가 있는데(설정을 누르고 새탭에서 설정하고 돌아온다거나) 그 경우는 간단하게 아래와 같이 코드를 작성합니다.
<input type="button" onClick="window.open('이동경로 혹은 파일경로')">
예시
<input type="button" name="test3" id="test3" value="새탭" onClick="window.open('test3.php')">
혹은 팝업이 필요한 경우도 있는데(대부분은 새탭보다는 이걸 선호할 수 있겠네요) 이 경우는 window.open에 옵션으로 팝업의 이름과 크기 등을 지정해서 사용하면 간단하게 팝업 출력이 가능합니다. 아래의 코드의 옵션 외에도 스크롤 여부 등의 추가 옵션이 있기 때문에 세세한 사항을 설정하고 싶으시면 그 옵션들을 찾아보시면 될 것 같네요.
<input type="button" onClick="window.open('이동경로 혹은 파일경로', '팝업이름', 'width=가로크기, height=세로크기')">
예시
<input type="button" name="test4" id="test4" value="팝업" onClick="window.open('test4.php', 'POPUP', 'width=300, height=400')">
이렇게 팝업 출력을 할수는 있지만 매번 입력하기도 번거로운 측면이 있고 해서 자바 스크립트로 스크립트를 만들어서 적용하는 경우가 대부분이라고 생각이 되네요. 버튼을 이용해서 링크 이동은 이정도만 알고 있어도 충분히 활용할 수 있을 것 같습니다.