키즈가오 2일차
전체 코드
원본 html 코드의 가장 상위 div 태그의 id로 목차를 나누자면
intro, farm1, farm2, farm3 까지 1일차,
forest1, forest2, forest3, science, night1까지 2일차,
night2, morning, kitchen, color1, color2, color3까지 3일차로 진행되는 듯 하다.
본문 분석
코드가 너무 길어 상세한 설명은 생략하겠다.
사실 어제와 크게 다를 건 없다.
- 이미지 사이즈에 알맞게 레이아웃 크기를 정하고
- 부모 레이아웃은
relative, 자식 레이아웃은absolute위치속성, 예외적으로float속성만으로 위치를 정하는 경우도 있다. - 모바일 버전에서는 작은 애니메이션은 잘 보이지 않아 움직이지 않는 사진으로 대체되므로
display: none으로 제거를 해준다. - 어쩔 수 없이 전체 레이아웃을 뚫고 나오게 되는 레이아웃은 부모 레이아웃에
overflow: hidden으로 감싸준다.
완성된 html
pc 버전
모바일 버전
어려웠던 점
코드가 길고 비슷하게 다시 쓰이는 경우가 많아 오타가 많고 찾기가 어렵다. 강의 영상에서도 class를 src로 잘못 쓰고 수 분간 못 찾으시는걸 보니 평생 해결하지 못할 숙제일지도 모르겠다.
학습 소감
코더와 프로그래머라는 말이 있다. 프로그래머는 직접 코드를 만들어 사용하고, 코더는 프로그래머가 만든 코드를 그대로 가져와서 쓰거나 조금씩 수정하여 상황에 맞게 쓴다. 프로그래머가 늘면서 오히려 직접 코드를 만드는 상황은 적고, 오픈소스로 풀려있는 유용한 코드를 가져와서 쓰는 경우가 늘어나 많은 프로그래머들이 스스로를 코더라고 인식한다는 글을 본 적 있다. 생각할 시간 없이 코드가 몰아치니 코더가 되가는 느낌이 든다.
진행한 코드 링크
오늘 진행한 자세한 코드는 내 github 링크 에 업로드 되었다.
태훈입니다.