마지막에 죽는줄 알았습니다.

과제 1일차 2일차 3일차..는 그저 니코쌤의 이야기를 잘 귀담아 듣고서 문제를

풀었기에 어렵지는 않았어요. (물론 엄청 헷갈렸습니다만..)

그렇게 일주일이 지날동안은 어렵다는 느낌은 하나도 없었습니다.

다만, 본보기가 된 다른 분들의 코드를 보면서 '좀 더 효율적인 방법이 있었구나!'

했었습니다.

과제별 느낀점을 우선 적겠습니다.

과제 사진을 첨부하고 싶지만 올리면 안될거 같아서 글로만 적습니다.

첫번째 과제,

Label을 Lable 이라고 써놓고 자동으로 focus가 안된다고 엄청 우울해하다가

나중에 찾았습니다.

까먹었던 Label을 쓰는법을 다시 터득하게 됐습니다.

두번째 과제,

두번째 과제는 솔직하게 쉬웠지만 mdn이 소중하다는걸 느끼게된 계기였습니다.

세밀한 요소까지는 다 기억할 수 없어서 테두리의 모양은 필요할때마다

찾아봐야했습니다.

세번째 과제,

여기서 다른 분의 코드를 보고 '오..' 했었습니다.

테두리가 하얀색인데 저는 테두리를 넣는다는 생각은 안하고

멍충하게 Div를 하나 더 둘러서 배경색을 하얀색으로 했습니다.

마치 테두리인척 하게하려구요.

증거사진입니다. 끌끌.

밖에 너비와 높이를 좌우로 10px씩 더 줘서 마치 하얀테두리인것처럼 하다니.

그냥 테두리 한줄로 퉁칠 수 있는걸..

손발이 고생한다는게 어떤건지 알게되었습니다.

다음 과제 받을때 수강생 priorityMin님의 코드를 보고 배웠습니다.

감사합니다.

네번째 과제,

애니메이션을 배웠습니다.

딜레이와 Pseudo-Selector 를 이용해서 시간차적용까지!

다섯번째 과제,

여기서부터 뭔가 어플스러운 화면을 만들기 시작했습니다.

새로운 기능을 배웠다기보단 디자인을 배운 느낌입니다.

깔끔함!

여섯번째 과제,

스크롤을 배웠습니다!

그런데 스크롤바를 숨기는것까진 제가 찾아보진 않았어요.

검사화면에서 스마트폰 화면처럼 보니까 스크롤바가 없어서 깔끔한줄 알았는데

덕분에 스크롤바의 기능을 어느정도 컨트롤 하게되었습니다.

일곱번째 과제, 제가 아이유씨를 굉장히 좋아해서

아이유씨를 테마로 화면을 비슷하게 만들어봤습니다.

박스에 그림자 효과를 통해 모던한 느낌을 주는 디자인을 배웠고

전에 배워뒀던 스크롤바를 안보이게 하는 기능을 이용했습니다.

참고로 아쉽게도 스크롤바의 위치를 css로 임의 조정하는 기능은 불가능하더라구요.

애니메이션으로 음악이 재생되는것처럼 표현하고자 했지만

저처럼 이 기능을 찾으려다 몇시간 쓸 분이 계실까봐 여기에 남깁니다.

=========================================================

마지막으로 코코아 클론을 한 번 더 만들면서

굉장히 죽는줄 알았습니다. 그간 과제만 제출하면 되는줄 알고

과제만 내고 자바스크립트 배운다고 코코아클론 만든다고 이틀동안

씨름을 했습니다. 새벽까지 하다가 겨우 4시에 제출을 하고,

재미있는 효과를 보여준다고 제가 키우는 애완견 사진을 테마로 해서 만들었습니다.

보아하니 저랑 비슷한 아이디어로 만드신 분들이 있던데,

애완동물을 키우는 사람의 생각은 비슷비슷한가봐요.

사진은 일부만 올려드려요! ㅜㅜ

=========================================================

팁을 남겨드리자면, 화면 구성에서는 가장 큰틀이 될 div와

그 안에 담겨질 내용이 몇개의 row혹은 column 으로 구성될지 많이 생각을 해봐야지

화면을 구성할때 고생을 덜하게 된다는 점입니다.

또, margin이나 width padding 같은 div의 사이즈를 결정하거나 div간의 간격을 조정할때는, 가장 바깥의 div부터 잘 조정해야된다는 점입니다.

그렇지 않으면 영문을 잘 모르게 배치가 꼬이더라구요. 예를 들어, 위로 margin을 준다고

안의 element에게 margin을 줘서 밀다보면 어떤 부분에서 꼬이기 마련이더라구요.

내부의 element가 외부의 element를 뚫고 밀기도 하고 아닌 경우도 있거든요.

==========================================================

제가 드릴 수 있는 팁은 이정도 같아요.

배우고 느낀점이 굉장히 많지만 일일이 다 풀기에는 제가 기억력이 좋은편이 아니고

설명도 잘 못하는터라 글만 장황해지는 터라.. 여기까지로 줄이겠습니다 ㅜㅜ!

==========================================================

끝으로

정말 예쁘게 만드려고 많이 고민했고 시간도 많이 투자했습니다.

제가 만든 결과물이 제 자신에게 너무나 만족스럽고 즐거웠기에

이 Challenge는 정말 성취감도 안겨주었고

css와 html에 대한 이해도도 상당히 올려주었습니다.

다음번에도 또 참가하고 싶네요. :)

감사합니다 니코쌤.