□ 키즈가오 실습 2편 - html과 css 기준

※ 사이트 – http://sisikiller.dothome.co.kr/

작성코드

Git 링크.KidsGao

1.night2

● <img> 태그는 mobile.css에서 width값만 수정해도 비율에 맞춰 height값이 조정됨
● bottom: initial은 bottom값을 적용하지 않은 상태(초기화)로 만듬

● PC버전 결과

● 모바일버전 결과

2. morning

● Sun은 Moon과 애니메이션이 동시에 움직이지 않도록 delay를 둠

● PC버전 결과

● 모바일버전 결과

3. kitchen

● CSS에서 steamWrap 코드를 작성하기 전에 앞의 leftPan과 rightPot에서 float를 사용했기에 steamWrap이 leftPan의 뒤에 배치되게 됨 → 이를 막기 위해 .steamWrap { clear: both; }를 입력하여, float 기능을 정지시킴

● Bubble의 포물선 애니메이션은 현재 하드코딩할 스킬이 안되기에, 사이트를 이용하여 작성함
※ 사이트 - https://jeremyckahn.github.io/stylie/

.bubble1 {
  animation-name: bubble1-keyframes;
  animation-duration: 1000ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin: 0 0;
}

@keyframes bubble1-keyframes {
  0% {transform:translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  100% {transform:translate(-100px, -200px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
}

● PC버전 결과

● 모바일버전 결과

4. color1

● PC버전 결과

● 모바일버전 결과

5. color2

● PC버전 결과

● 모바일버전 결과

6. color3

● PC버전 결과

● 모바일버전 결과

※ id나 class명을 작성할 때, 규칙성 있게 작성해야 함
→ 가독성이나 다른 사람이 유지보수하기에 편리함

예시)

<div class="color1Wrap"></div>
<div class="color2Wrap"></div>

<div class="kitchenWrap"></div>

<div class=“btnWrap></div>

□ 어려웠던 점

전체적으로 코드량이 너무 많아지다보니 (style.css는 800줄이 넘는 양) 앞에서 실수했을 경우, 수습하고자 찾는데 시간이 많이 걸렸습니다.

□ 해결방법

결국 차분하게 코드를 작성하는 것이 가장 오류가 적게 발생하게 되는 것을 알았습니다. 혹시라도 오류가 있을 때는 검사 기능을 사용하여 어디서부터 정상적 실행이 되지 않는지 확인하고 수정을 하였습니다.

□ 학습 소감

이제 KidsGao 사이트의 전체적인 모습을 완성했는데 강의를 따라서 작성한 코드의 양이 정말 많았습니다. 모르고 보면 단순해 보였던 사이트의 모습과 기능들이 엄청난 수의 코드를 통해 작동하고 있다는 점을 새삼 깨닫게 됬습니다.