코코아 클론 챌린지에 이어... 이번 챌린지도 무사 졸업했습니다...!

사실 이번 챌린지에는 우수졸업생으로 뽑힐 수 없을거라는 생각이 많았습니다. 제가 만든걸 제 스스로 봐도 단순히 화면만 보기엔 디자인이 정말 맘에 들지 않았기 때문입니다.ㅠㅠ(단순한 div들의 나열...)

챌린지의 조건은 강의를 들으면서 어느정도 익혔기 때문에 큰 어려움은 없었고 디자인으로 많은 고민을 했었는데 이전 기수분들의 졸업작품을 보면 디자인들이 정말 존경스럽더라구요. 그래서 전 이번 졸업작품을 내면서 디자인엔 자신이 없으니 심플하지만 보기좋게 해보자! 해서 제가 해보고자 했던 것에 도전했던 졸업작품이었습니다.

두가지 힘든 과정이 있었는데 하나는 배경화면이었고 하나는 to-do list를 입력할 때 생성되는 애니메이션 만들기였습니다. 두 과정 다 어찌어찌 해서 그럴싸하게는 만들었지만 완벽히 해결한 것은 아닙니다.

1. 배경화면

배경화면은 사진을 넣었더니 화면에 스크롤이 알아서 생기는 문제가 생겼고 빈 공간도 만들어지는 문제가 생겼었습니다. 큰 사이즈의 사진인데 구글링해서 작성한 코드도 만족스럽지 못한 결과를 보여주어서 끌까지 고민하다 결국 hidden으로 스크롤을 없애버렸습니다.ㅠㅠ(더 공부해야겠다...)

2. 애니메이션

제가 이번 좋업작품을 내면서 해보고싶었던 가장 큰 목적인 애니메이션입니다. to-do를 입력을 하게되면 밑의 공간이 커지면서 박스가 생성되며 아래로 내려가 list가 만들어지는 위치에 자연스럽게 위치할 수 있도록 하는게 제 목적이었습니다. 

결과물을 직접 보면 밑의 리스트가 모여있는 박스 뒤에서 to-do 박스가 밑으로 내려와 자리하는 것을 알 수 있습니다. 원래는 입력을 완료하면 박스가 앞으로 튀어나오는 애니메이션과 함께 내려가서 자리에 내려앉는 모습을 원했었는데, 여기까지 성공을 하긴 했습니다만, 많은 list를 만들수록 list를 absolute로 하고 옮기다보니 리스트를 모아놓은 박스(최대크기를 설정해놓았는데)앞에서 밑으로 내려가기 시작했습니다ㅋㅋㅋㅋ 이거보고 혼자 미쳐가지고...

그러던 중 박스들 블러처리를 하려고 적용을 시켰는데... ?? 갑자기 list가 박스 앞이 아닌 뒤에서 나타나 그대로 내려가기 시작했습니다. 이게 뭐지... 하면서 또 여러가지를 해보고... z-index도 해봤지만 되지 않았고...해서 결국 지금의 상태로 타협하게 되었습니다. 이 애니메이션은 나중에라도 다시 시도해서 제가 추구했던 모습으로 만들어보려 합니다. 

js에서 애니메이션 사용하는 법과 list를 놓을 위치가 필요하기 때문에 위치를 구하는 법. 이벤트가 발생한 위치 구하는 법 등 애니메이션에만 이틀 넘게 소비해버려서 다른건 좀 부족하지만, 지금의 애니메이션도 만족스럽긴 합니다(불만족스러운건 디자인...). 공부하면서 가장 많은 구글링과 가장 많은 정보들을 보게 되었던 과정이었고, 그래도 짧은 시간에 많이 성장할 수 있었던 시간이 아니었나 싶습니다.

몇몇 친구들에게 보여줬었는데 각자 가진 모니터의 크기에 따라 화면이 다르게 보이는걸 알게된 뒤에는 아직 또 배울게 많다고 느낀 챌린지였습니다. 글만보면 css챌린지 완료한것처럼 보이는데..ㅋㅋ 니꼬 쌤 강의덕에 그래도 많은 것을 즐겁게 배웠고, 강의가 재밌는 덕분에(전에 말했던 높은 텐션) 번아웃 되지 않고 즐겁게 코딩하고 있습니다!! 그래도 챌린지 하면서 많은 것을 배웠다고 느끼지만 또 배워야 할게 더 많다는 것도 매번 느끼는 것 같습니다ㅋㅋ 제 긴 푸념! 읽어주셔서 감사합니다(_ _)