웹개발 일지 9일차 (20.06.15)

거의 한 달 만에 다시 웹 개발 일지를 쓰는 것 같다. 사실 시험기간이기도 했고 막상 개발을 하려고 하니 이것저것 찾아보면서 해야 하더라.

구글링 한 시간을 합치면 몇십 시간은 될 것 같다. 아무튼, 지금까지 완성한 사이트의 모습을 한번 끄적여보겠다.

 

일단, 8일차에 github student pack과 개인 도메인을 구입한 것을 바탕으로 꾸준히 github에 commit 과정을 거쳐 사이트를 만드는 중에 있다. 지금까지 구현한 화면의 파일은 index.html, login.html, 각종 css, js (and jquery)까지 포함해서 유기적으로 돌아가도록 작성하였다.

 

github에다가는 총 26번의 commit(그날그날 한 내용을 github에 적용시켜 나의 사이트에도 적용될 수 있도록 하는 것)을 하였으며, 메인 화면을 통해 어떻게 관심을 모을까 생각하다 aos_animate css 파일을 활용하여 원하는 애니메이션을 지정하였다. 다음은 애니메이션을 지정한 모습이다.

 

아래에 INFO 버튼을 누르면 id=info인 곳을 찾아 그쪽으로 부드럽게 스크롤이 되도록 "#info"로 링크를 걸어 놓았다.

 

그리고 응프화 시간에 배운 이미지 태그와 멀티미디어 태그를 활용하여 로고 사진을 띄우고, 유튜브 영상을 재생하는 등의 성과를 얻었다.

 

이번엔 로그인 창을 어떻게 만들었는지 보겠다.

로그인 창은 직접 나의 힘으로는 만들기가 까다로워 영상이나 블로그를 참고하여 나의 스타일대로 만들었다. 한번 보자.

 

로그인 창은 특별한 구성이 필요 없기 때문에 맨 처음의 content와 username, password, LOGIN 버튼, Forgot Password? (구현중)을 표현하였다. 각 폼은 깔끔하게 css 애니메이션으로 구현하였으며, 적어야 할 폼이 빈칸일 때 LOGIN을 누르게 되면 빨간색으로 글씨를 바꾸고 일정 시간이 지나게 되면 파란색으로 바뀐다.

 

만약에 틀리게 된다면 저 글씨가 진동하면서 빨간색으로 변하게 된다.

 

아직은 로그인 폼을 간단하게 완성한 것뿐이라 get 방식으로 받아들이는 것이며, 나중에 백앤드를 구현한다면 DB에 post 방식으로 전달하도록 만들 것이다. 오늘은 여기까지.

 

지금까지 내가 작성한 코드를 보기 위해서는 http://github.com/bww9641/SDP_Project로 접속하면 된다.