개발일지_0601

Jurang Lee·2021년 6월 1일
0

오늘은 키즈가 오 사이트를 직접 카피캣 해 보았다. 기존에 있던 사이트의 이미지를 사용하여 자바스크립트 기능을 제외한 디자인과 애니메이션 작업을 했다. 오늘 진행한 부분은 상단부터 로고를 시작하여 농부가 있는 부분, 벼가 들어간 부분 그리고 기계가 작동하는 부분까지이다. 기존에는 html과 css 폴더 안에 파일 하나를 가지고 한 번에 파일을 다뤘는데, 오늘은 html과 pc버전 css, 모바일 버전 css 그리고 애니메이션 파일을 따로 나누어 작성하였다.
먼저 html에서 메타태그부터 작성했다. 메타태그에는 네임과 콘텐츠를 작성했다. 다음으로 html에서 css 파일을 link 태그를 통해 연동시켰다. 폴더 바깥으로 나간다는 표시로 ../를 표기했다. 보디 태그로 들어가 상단 영역에 로고와 구름이 있는 곳을 div 태그로 각각 나누어 작성했다. 인트로 부분을 구성하면서 로고에는 동물이 들어가므로 각각의 동물의 이름을 지정하고 구름은 양쪽으로 나뉘므로 각각 레프트와 라이트 구름으로 지정했다. 다음으로 style.css로 들어가 레이어 작업을 하기 전에 디폴트 값으로 넣을 마진과 패딩 0을 지정하고 추가로 오버플로 x 히든과 버튼 태그를 지정했다. 좌우 배치를 위한 클리어 보스 코드도 작성했다.
각각의 인트로 백그라운드와 로고, 로고 주변에 동물들의 위치 작업을 하였다. 이미지 파일은 백그라운드 이미지로 지정하여 사용하였다. 로고를 기준으로 z인덱스를 통해 동물을 로고의 위쪽과 아래쪽으로 z축 지정하였다. 인트로랩에 포지션 렐러티브를 넣어 중앙 정렬을 할 수 있도록 했다. 공간의 크기와 이미지의 크기는 동일하게 설정하는 것이 좋다. 그리고 구름은 포지션 앱솔루트를 이용하여 레프트와 라이트의 값이 0이 되게 설정하여 좌우정렬을 했다. 잠자리도 마찬가지로 포지션 앱솔루트를 사용하고 top으로 위치를 조정해 준다.
모바일 화면에서는 미디어로 공간의 크기를 먼저 한정해 준 다음, pc의 레이아웃과 동일한 방식으로 이미지와 레이아웃을 설정한다. 단, 모바일 버전에서 동물들이 움직이지 않으므로 display:none;처리를 해준다. 애니메이션은 키 프레임에서 트랜스폼을 이용해 동물들은 회전 효과, 잠자리는 프롬 투를 이용하여 효과를 적용한다. 잠자리의 경우 왼쪽 끝에서 오른쪽 끝으로 이동해야 하므로 left 속성을 이용하되 오른쪽 끝으로 사라졌다가 다시 나타나므로 100%로 설정한다.
다음으로 farm1영역을 구성했다. farm의 왼쪽과 오른쪽에 벼가 있고 중앙에는 농부가 있어 위치를 지정하고, 또 다른 서랍장인 div로 글이 들어간 공간을 구성했다. 인트로와 마찬가지로 css에서 부모의 태그에는 포지션:relative를 적용하고 이미지를 넣었다. 벼의 좌우 배치를 위해 이번에도 right와 left를 지정했다. 농부의 위치를 중앙으로 하기 위해 레프트와 마진 레프트를 사용했다. 또한 글이 들어간 공간의 색과 위치를 지정했다. 팜원의 모바일에서도 동일하게 이미지와 공간의 크기를 지정해 주었다.
farm2영역은 벼와 허수아비만 있으면 되었기에 코드 명이 간단했다. 마찬가지로 div서랍으로 묶어주고, css에서 위치와 이미지를 지정해 준 다음, 벼의 위치를 양옆으로 하기 위하여 float태그를 사용하였다. 허수아비는 포지션 앱솔루트를 지정하여 중앙으로 위치해 준다. 모바일버전도 마찬가지로 작업하고 허수아비만 display:none;으로 작업한다.
마지막으로 farm3영역을 작업했다. div태그로 창문과 기계, 말풍선 영역을 지정하고 css에서 크기와 이미지를 지정한다. 창문은 마진으로 위치를 조정한다. 기계는 레프트와 마진 레프트, 탑으로 공간을 지정했다. 기계는 z인덱스로 가장 위에 위치하게 한다. 기계에 들어가는 톱니바퀴 2개와 그림자, 새와 타이머를 각각 지정했다. 모바일도 마찬가지로 지정하고 톱니를 제외한 나머지를 display:none;처리한다. 애니메이션 효과를 타이머와 톱니에 각각 지정했다.





profile
웹프로그래밍

0개의 댓글