오늘은 지난 시간에 이어 키즈가오 사이트를 제작하였다. 기존에 있는 사이트를 카피캣하는 것으로 애니메이션 효과와 pc와 모바일 버전으로 각각 나누어 파일을 제작하였다. 이번 시간에는 토끼와 나무가 있는 영역, 기계와 창문과 말풍선이 있는 영역, 나무에 새가 있는 영역, 효능이 나와있는 사이언스 영역, 부엉이와 별과 달이 있는 영역 총 5가지 영역을 나누어 진행하였다.
먼저 토끼와 나무가 있는 forest1영역을 지정했다. html에서 왼쪽과 오른쪽, 그리고 오른쪽 나무에 위치한 동물을 입력하고, 스타일.css에서 배경과 각각의 이미지를 등록한 뒤에 왼쪽과 오른쪽에 위치할 나무에 각각 left와 right를 적용해 주었다. 두 마리의 토끼의 이미지와 위치를 지정하고 나무 뒤에 위치하게 하기 위해 z인덱스로 나무의 위치를 위로 지정했다. 모바일에도 동일하게 지정하되 토끼가 움직이지 않으므로 디스플레이:none;처리를 한다. 애니메이션은 rotate로 지정했다.
다음으로 기계와 말풍선 영역이 있는 forest2영역을 지정했다. 마찬가지로 html에서 개구리가 있는 영역, 기계가 있는 영역, 말풍선 영역을 지정하고 스타일.css에서 위치와 이미지를 지정했다. 머신의 좌, 우, 밑 영역의 이미지의 위치를 각각 지정하고 z인덱스로 위치를 높였다. 모바일 버전에서는 동일하게 제작하되 말풍선과 나무의 크기와 위치가 달라 위치를 다시 조정해 주었다. 애니메이션은 머신의 양옆이 안쪽으로 들어오는 방향으로 설정되도록 지정했다.
그리고 나무 위에 새가 있는 forest3영역을 지정했다. html에서 나무와 새 두 마리를 지정하고 css에서 위치와 이미지를 지정했다. 모바일에서는 새가 움직이지 않으므로 display:none; 처리해 준다. 작은 새와 큰 새에 각각 rotate로 애니메이션을 지정해 주었다.
그다음으로 다소 복잡한 science 영역을 지정했다. html에서는 왼쪽과 중앙, 오른쪽 세 영역으로 나누어 각각의 내용을 작성했다. 여기서 줄바꿈은 br 태그를 사용했다. 센터 영역은 스팀이 나오는 부분과 앞뒤로 적용되는 이미지를 각각 넣어줄 것이다. 다음은 css에서 각각의 위치와 이미지를 지정해 준다. 글의 내용의 폰트까지 지정해 주고 마진과 패딩 탑으로 위치를 맞춘다. 중복으로 지정하는 태그는 쉼표를 사용하여 한 번에 지정한다. 모바일 버전에서 설명하는 글은 표출되지 않으므로 display:none;을 시킨다. 마찬가지로 마진, 마진 레프트 등을 이용하여 위치를 지정한다. 애니메이션은 양옆에 gly와 water 영역에 rotate를 적용했다.
마지막으로 밤하늘 모양의 night1영역을 지정했다. 위치는 부엉이가 있는 왼쪽 별이 있는 부분을 구분했다. 부엉이와 별 3개와 백그라운드 이미지를 삽입하고 위치를 지정한다. 각각 마진레프트와 마진 탑을 이용했다. 이전에도 마찬가지지만 별이 들어가는 영역처럼 div태그로 묶어진 한 공간을 먼저 세팅하고 그 안에서 나눈 것이다. 모바일에서도 동일하게 하되 별이 움직이지 않으므로 display:none;을 적용한다. 애니메이션에는 스케일이라는 속성값을 활용하여 별의 크기가 늘었다 줄어드는 효과를 만들었다.
