오늘은 지난 시간에 이어 키즈가오 홈페이지를 완성했다. 오늘 작업한 구역은 달이 지나가고 나무와 말풍선이 있는 night2 영역과, 해가 지나가는 영역인 morning 영역, 주방 컨셉의 kitchen영역, 펭귄과 키즈가오 완성 문구가 새겨진 color1영역, 목마가 있는 배경에 버튼 영역이 있는 color2영역, 그리고 마지막으로 로고와 주사위, 책장이 있는 color3영역이다.
먼저 night2영역을 작업했다. html에서 달과 말풍선 영역과 나무영역을 좌우 중심에 배치하기 위해 입력하고 style.css에서 부모태그는 포지션 렐러티브, 자식영역은 앱솔루트로 감싸게 된다. 각각의 이미지와 위치를 지정해 주고 나무는 오른쪽 하단에 위치하기 위해 값을 0으로 적는다. 애니메이션은 이전에 잠자리가 지나가는 효과와 동일하게 하되 마진레프트 값을 적용하여 효과를 준다. 모바일에서는 물풍선이 중앙 하단에 위치하므로 위치를 변경해 주었다.
다음으로 해가 뜨는 영역인 morning영역을 진행했다. 이 영역은 해와 양쪽의 나무를 각각 나누어 div태그로 묶었다. 마찬가지로 각각의 이미지와 위치를 지정하고 나무를 오른쪽으로 위치시키기 위해 right태그를 적용시켰다. 애니메이션 효과는 위의 달과 동일하게 적용하되 같은 시간에 움직이게 되면 어색하니 마진 레프트값에 약간의 변동을 주었다. 모바일 버전도 pc와 동일하게 작업했다.
그리고 주방 영역을 작업했다. html에서는 왼쪽과 오른쪽에 각각 팬과 팟 영역을, 중앙에는 스팀이 나오는 기기 영역과 이미지 태그로 따로 말풍선 영역을 지정하고 css에서 위치와 공간을 지정했다. 왼쪽과 오른쪽은 float태그를 적용시켜 위치시키고 기계 부분을 z인덱스로 높였다. 스팀 기계에도 float이 적용되지 않게 하기 위해 clear:both;태그를 넣었다. 애니메이션 효과로 스팀이 포물선으로 나가는 효과를 넣기 위해 stylie사이트에서 태그를 그대로 복사해서 사용했다. 모바일에서는 스팀효과가 일어나지 않기 때문에 display:none;처리를 해주고 말풍선의 위치를 오른쪽에서 중앙 위쪽으로 올려 주었다.
다음으로 펭귄이 있는 color1영역을 구성해보았다. 펭귄이 있는 영역과 글귀가 있는 부분을 각각 div태그로 묶고 css에서 위치와 이미지를 지정했다. 글귀는 플롯태그로 띄워주고 마진으로 위치를 잡는다. 모바일 버전에서는 펭귄을 display:none;으로 표시하고 글귀를 중앙으로 하기 위해 레프트와 마진 태그를 사용하여 위치를 조정했다.
color2영역에서는 목마가 있는 부분과 말풍선, 버튼 부분을 분리해서 각각 div태그로 묶었다. 버튼 밑에 설명은 p태그를 사용했다. 마찬가지로 css에서 위치와 이미지를 지정하고 말풍선 이후 영역에는 목마 부분에 플롯 태그가 적용되지 않도록 clear:both;를 사용했다. 각각의 버튼에 크기와 색상을 설정했다. 모바일에서는 보이지 않는 목마를 디스플레이 none처리하고, pc에서 왼쪽 아래에 있던 버튼과 말풍선을 중앙으로 가져왔다. 버튼 사이에 공백은 중앙 옐로우 버튼에 마진을 사용했다.
마지막으로 color3영역을 구성했다. 플래그와 로고, 책장과 주사위 부분을 각각 div태그로 묶고 로고와 플래그는 마진레프트와 레프트를 사용해 중앙으로 위치시켰다. 책장은 float을 사용해서 오른쪽으로 조정하고 주사위는 레프트와 바텀태그를 사용하여 왼쪽 아래로 위치시켰다. 모바일 버전도 동일하게 위치와 이미지를 넣고 로고는 기존에 pc로고의 크기를 조정시켰다.
