HTML로 로그인 창 뼈대 만들어보기

웹 사이트에 로그인 할 때 우리가 자주 마주하는 로그인 창을

지금까지 익힌 html로 만들어보기 도저어언!

​

완성한 코딩 !

-다른 웹사이트 계정으로 연동할 수 있는 소셜로그인 창도 만들어주고,

sign in with google 이미지도 가져와서

★<hr href="웹 주소"> <img scr="" alt="">로 바로 연결 될 수 있게 넣어주었다.

​

★password는 입력할 때 'for 속성값'과 'id 속성값' 이 같아야한다. (입력 시 ·······라고 입력됨)

​

- 최종 저장하기 전에 수정을 했었나보다,,ㅎ누락된 태그를 여기에 적어보면

​

<p>or<p>

<a href="#"> Forgot your password?</a>

​

이렇게 적으면 로그인 창 아래에 id/pw를 잊어버렸을 때 찾을 수 있는 링크로 연결되는 버튼을 만들 수 있다.!

(아직 id/pw를 찾을 수 있는 웹은 존재하지 않으니 #으로 표기.)

​

​

​

​

완성된 로그인 창 (by html)

 

 

완성된 로그인 웹 화면 !

​

​

​

​

​

​

정성들여(?) 가져온 'sign in with google' 이미지 버튼을 클릭하면

구글 로그인 페이지로 넘어가도록 해놓았다.ㅎㅎ.

​

​

그리고 실제로 구글 로그인 웹으로 이동한 모습 !

​

아직 html을 익히고 있어 css와 js가 빠져서 디자인과 구체성이 빠진 뼈대 그 자체의 결과물이지만 

빨리 색도 입히고 디자인적인 부분도 꾸며보고 싶다.

​