DNF LOVEProgramming/Web [PHP HTML JS] HTML 에서 페이지 이동하는 방법, 새 창으로 페이지를 새로 띄우는 방법, GET과 POST의 차이botho 2020. 9. 24. 15:30 [HTML에서 페이지 이동하기] 우리가 인터넷을 하다보면 버튼을 누를 때, 데이터를 입력할 때 페이지가 이동하는 것을 쉽게 볼 수 있다. HTML로 웹 개발을 할 때, 페이지를 이동시키는 방법은 무엇일까? 방법은 여러가지 있다. ● 방법 1> a href 사용하기
- a 태그를 사용해서 href(하이퍼링크)를 거는 방법이다. - html이 저장되어 있는 php, html 파일을 링크로 걸어도 되고 http://naver.com 등의 하이퍼링크를 걸어도 된다. ● 방법 2> HTML 태그
- 위 meta 태그를 사용하면 0초만에 해당 URL로 넘어간다는 뜻이다. - 0초가 아닌 5초로 하고 싶으면 0대신 5를 입력하면 된다. ● 방법 3> onClick 사용하기(javascript 사용하기)
- javascript의 document.location.href 혹은 window.location.href 를 사용해서 사용할 수 있다. - 이것 역시 php, html 파일을 링크로 걸어도 되고, 도메인 주소를 사용할 수 있다.
- 위에처럼 onclick에서 js 함수를 불러와서 필요한 대로 코드를 수행하여 링크를 변경할 수도 있다. ● 방법 4> submit/form 사용하기
- form 태그 안에 submit을 비롯하여 넘기고 싶은 데이터들을 input 태그를 사용해야 한다 - form은 form 태그 안에 존재하는 input들만 페이지 변경 시 데이터를 가져갈 수 있다. - type이 submit인 버튼을 누르면 form 이 실행되어 페이지가 변경된다. - 입력하지 않아도 데이터를 넘기고싶다면 value = '넣고싶은 데이터'로 사용할 수 있다. placeholder 는 value로 인지하지는 못하지만 입력하지 않아도 유저에게 보여줄 수 있는 데이터이다. - form에서 method로 GET 형식인지, POST 형식인지 결정할 수 있다. 또, action으로 어떤 페이지로 옮길지 정할 수 있다. - GET과 POST 방식의 차이는 아래와 같다.
- input으로 입력받지 않아도 데이터를 넘기고 싶으면 아래와 같이 hidden 키워드를 사용하면 된다.
● 번외> HTML에서 새 창으로 페이지 열기
- JS의 window.open 키워드를 사용하면 새 창으로 페이지를 열 수 있다. - JS함수를 사용해야 하기 때문에 href를 걸지 말고 onClick 에서 JS 함수를 사용해야 한다. 퍼블리싱 & 프론트엔드/html & CSS by ♥︎해이나♥︎ 2021. 4. 7. 반응형 버튼을 구현할 때 <button> 안에 <a href="#"> 태그를 사용하면 일부 브라우저에서 클릭이 되지 않는 문제가 있다. 이러한 경우 <a>태그가 <button> 태그를 감싸는 형태로 순서를 바꾸어 사용해도 되지만 자바스크립트의 onclick 을 이용하여 구현하는 간단한 방법도 있다.
현재 페이지에서 이동 혹은 새 창으로 이동하는 버튼을 만들고 싶을 때 위의 코드에 링크 주소만 바꾸어 사용하면 된다. 반응형
저작자표시 비영리 변경금지 '퍼블리싱 & 프론트엔드 > html & CSS' 카테고리의 다른 글
태그Button, buttononclick, button링크, button링크걸기, HTML, htmlbutton, onclick, onclick링크걸기, 버튼a태그오류, 버튼onclick링크 관련글
댓글0비밀글 |