버튼 클릭 시 회원가입/로그인 창을 띄우는 방법

  아임웹 연구소 소장 해준  |  2017 . 09 . 10

시작에 앞서
오늘은 버튼 클릭 시 회원가입 또는 로그인 창을 띄우는 '숨겨진 방법'을 여러분과 공유하고자 합니다.



1단계, 버튼 설정 메뉴로 들어가기
1) 먼저 페이지에 삽입한 버튼 위에 마우스 커서를 대고, 마우스 오른쪽 버튼을 클릭을 하면 보조 메뉴가 뜹니다.
2) 보조 메뉴에서 '버튼 설정'을 눌러 설정 창을 켭니다.



2단계, 버튼에 코드 삽입하기
버튼 설정 메뉴가 나타나면, 해당 버튼과 관련된 여러 가지 옵션을 설정할 수 있습니다. 그중 아래 그림의 빨간 네모 친 부분을 확인해주세요.

이 링크 작성란에 간단한 코드를 삽입함으로써, 버튼 클릭 시 회원가입 또는 로그인 창을 띄우도록 설정할 수 있습니다.


1) 회원가입 코드 삽입하기
버튼을 클릭했을 때 회원가입하도록 만들려면, 아래 그림처럼 /?mode=join 이라고 코드를 작성해주시면 됩니다.



2) 로그인 코드 삽입하기
로그인의 경우 회원가입 코드와 상당 부분이 같은데, 끝에 join을 login으로 바꿔주시면 되겠습니다. 그럼 /?mode=login 이 되겠죠?



3단계, 편집한 내용 게시하기
버튼 설정을 마쳤다고 이게 끝이 아닙니다. 아래 그림처럼 우측 상단에 위치한 게시하기 버튼을 눌러 꼭 업데이트를 해주셔야 편집한 내용이 적용됩니다.




마무리, 회원가입/로그인 테스트
자, 편집을 마쳤다면 테스트를 해야겠죠? 브라우저를 하나 더 켜서, 웹사이트에 접속합니다.



1) 회원가입 창 띄우기
/?mode=join 이라고 작성한 버튼을 클릭하니, 회원가입 창이 제대로 뜨는 것을 확인할 수 있습니다.



2) 로그인 창 띄우기
이번에는 버튼 설정 링크란에 /?mode=login 이라고 작성하였습니다. 다시 사이트에 접속해 버튼을 클릭하니 로그인 창이 잘 뜨네요. :D



해준
배우고 익히고 나누는 | 해준씨 | 유용한 콘텐츠 마케팅 | 네이버 카페 '아임웹 연구소' 소장
jin@haejoon.com

아임웹 공식제휴사

아임웹은 페이팔, 네이버 페이, KCP 공식파트너입니다.