Dev.note(web) 21.07.15

김태훈·2021년 7월 15일

목록 보기

14/49

키즈가오 3일차

시작하기 전에

코드가 마찬가지로 길다. 영상을 보면서 코드를 쓰는건 받아쓰기 밖에 되지 않으니 영상을 보면서 유념할 부분만 정리해두고, 전체 코드는 따로 링크해 두었다.

에니메이션 효과

#kitchen .steamWrap .bubble1 {
  animation-name: bubble;
  animation-duration: 1000ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin: 0 0;
}
@keyframes bubble {
  0% {transform:translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  100% {transform:translate(-129px, -208px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
}

에니메이션 궤적을 다채롭게 하려면 직접 짜는 것보다는 여기와 같이 미리 만들어진 사이트에서 가져오는게 편하다. 위와 같이 원하는 궤적과 속도, 세부옵션을 정하면 css코드가 손쉽게 출력된다. 여기서는 바꿀 일이 없으므로 가장 짧게 가져왔지만, 자세하게 모딩할려면 output size를 우측으로 두어 조정할 수 있다. easing 함수는 실제 사물들의 속도와 비슷하게 계산되어 자연스러운 효과를 주며, easeOutSine 함수가 적용된 본문은 다음과 같다.

레이아웃 팁

자식 레이아웃의 위치 속성을 아직 정하지 않았을 땐 부모 레이아웃을 position: relative로 안전장치를 해두는게 좋다.(1일차에서 다룬 것처럼 기존 레이아웃 크기를 넘길 경우나 망가트릴 경우에 알아보기 쉽다)
부모 레이아웃의 위치 속성이 position: relative이면 자식 레이아웃의 높이 값이 부모 레이아웃에 영향을 주기 때문에 자식 레이아웃이 static(기본)일 땐 높이 0으로 결정된다.
class, ID 등을 정할 때는 대소문자/하이픈(-)/언더바(_) 등 일관된 규칙으로 정하는게 좋다.(해당 html도 규칙이 중구난방이라고 좋지 않다고 하셨다)