2021.06.01. 개발일지

◼︎ 오늘 학습한 내용

7. 키즈가오 1편 실습

1) intro

파란 배경 이미지에 키즈가오 로고를 넣고, 사자/토끼/곰/원숭이 이미지를 z-index를 이용해 앞뒤로 알맞게 배치한 뒤 애니메이션 rotate 효과를 적용하였다. 잠자리 그림은 왼쪽에서 오른쪽으로 이동하는 애니메이션 효과를 주고, 오른쪽에서 사라질 때 스크롤바가 생기지 않도록 overflow-x: hidden; 처리하였다. 모바일 버전에서는 로고와 구름이 더 작게 보이도록 조절했다.

[기억해두면 좋을 포인트]
 - 하단의 구름 오른쪽/왼쪽으로 배치하기 left:0; right:0;
 - 상단의 로고 위에 여백을 두되, 배경 이미지까지 같이 이동하지 않게끔 하기
 	top: 100px;
 - 보여지는 공간을 넘어갈 때 스크롤바가 생기지 않게 하기
 	overflow-x: hidden;

2) farm1

- 양쪽 끝에 벼 이미지를 넣고 가운데에 농부 이미지를 넣었다.
- 텍스트의 위치는 모바일 버전에서 농부 왼편이 아닌 하단으로 가도록 위치를 조정해주었다.

3) farm2

양쪽에 벼 그림과 중앙 부분에 허수아비 이미지를 넣어주었다.
모바일버전에서 축소한 허수아비 그림 외에 허수아비 그림이 크게 들어가있는 것을 방지하기 위해 display:none;

4) farm3

- 기계 + 그림자 + 회전하는 바퀴 모두 따로 넣어주어야 일부는 애니메이션 효과로 회전하고 일부는 그대로 있는 효과를 낼 수 있다.
- 모바일 버전에서 기계 밑으로 말풍선이 가도록 위치를 조정해주었다.

◼︎ 어려웠던 점 & 해결못한 것들

- 다양한 이미지가 들어가기 시작하니까 위치 이동이라던지 미디어쿼리 적용이 점점 어려워지는 것 같다....ㅠㅠㅠㅠㅠㅠ 해결하지 못한것은 farm1에서의 폰트 문제. 강의에서는 전부 산세리프체로 보여주시는데 나는 디폴트 폰트가 세리프인듯. 근데 또 farm3에서는 산세리프다..? 왜 때문인지 명확한 이유를 찾지 못했다. 폰트 관련하여 나중에 강의에서 다뤄주시는지 질의사항을 올렸으나 아직 답변을 해주시지 않으셨다.

◼︎ 해결방법

- 폰트 부분을 커리큘럼에서 다루시지 않는다면 따로 공부를 해보아야겠다.

◼︎ 소감

- 실제 사이트 카피 제작으로 실습을 하니까 재미있긴 한데 너무 어렵당,,, 시간도 훨씬 많이 걸리고! 레이아웃 위주의 원 페이지 사이트보다 기능이 여럿 들어간 사이트도 얼른 만들어보고 싶다.