17일차!! (로그인 페이지 꾸미기)

 오늘은 로그인 페이지 꾸미기를 했다. 저번 CSS때 동기분들께 엄청난 히트를 쳤기 때문에 약간.... 아니! 많이 부담이 되었다...ㅋㅋ이번에도 육각형으로 꾸며야하나....? 하다 했던걸 또하면 분명 질릴거다 해서 새롭게 해보기로 했다. 이미 이벤트핸들러를 배웠겠다 클릭시 모든 속성들이 날아오게 하자! 라는 상상을 하고 시작을 했다. 

 

 '첫 난관은 어떻게 클릭하면 날아오게 하지?'였다. 당시 onkeyup만 배운 상태였다. 아! onclick을 써볼까? 해서 onkeyup랑 비슷하게 코드를 짜서 넣었더니 실행이 안됐다....그래서 찾아봤다. 어떻게 쓰는거냐 너!

 

 누군가의 블로그 중 HTML에 사용한는 것을 배웠다. 막 setAttribute를 검색해봤어서 '음 ~ 다른 속성이구나?' 생각했다.

<div onclick="function()"></div>

 사용 방법은 위와 같았으며 클릭하면 function이 실행된다는 것이다. function은 자바스크립트에 써준 함수이다. 함수에는 CSS셀렉터를 바꿔주는 내용을 적어서 박스가 살짝 올라가게 만들었다.

 

 여기서 두번째 난관에 부딪혔다. 박스가 부드럽게 올라가는 것이 아니라 순간이동을 하는 것이었다. 그래서 CSS 속성 중 transition을 사용했고 이것만으로는 순간이동을 벗어나지 못했다. 그래서 여러가지 시도를 해본 결과 부드럽게 움직이려면 원래 적용되어있던 CSS에도 변화시키려는 기본 값이 있어야 하는 것을 알아냈다. (연습할 때는 됐는데 실전에서는 안돼서 둘 차이를 비교해봄.) 결국 부드럽게 날아오게 성공했고 회전을 주고 싶어서! transform을 이용하여 하나는 x축으로 회전 하나는 y축으로 마지막 하나는 두개의 축으로 회전시켜 날아오게 만들었다. 회원가입 버튼을 누른 후 회원가입 내용있는 박스가 전부 화면 밖으로 나가게 만들었다.

 

 뭔가 부족함을 느낀 나는 onclick을 찾아보며 발견한 내용 하나를 사용하기로 했다.

 http://jsfiddle.net/RwtHn/5/

Edit fiddle - JSFiddle - Code Playground

 이곳에 있는걸 사용했는데 보면 클릭한 곳으로 공이 따라오는 내용이었다. 이걸 로고에 적용시켰는데 문제가 있었다. 위치를 조정할 때 아래와 오른쪽으로 가면 화면 스크롤이 생겨서 전부 위와 왼쪽에다가 안 보이게 해놓았는데 위 사이트에서는 위치조정 기준을 아래로 해놓았다. 그래서 나는 위로 적용시켜 해봤더니 커서의 반대로 갔다. 그래서 전체 내용에 -를 붙여 보완했다.

 

 따라오는 로고를 클릭하게되면 42's가 된신것을 환영한다는 문구가 나오게 했다. 이것도 회원가입시 안나오게 하기위해 함수 안에 조건문을 두어 회원가입 창이 사라지고나서 나오게 하였다.

 

 내일은 신나는 주말의 시작이다! 하지만 계속 놀수만은 없다 복습하면서 나의 실력을 길러한다. 화이팅!