Animation

Animation

codepen에서 HTML을 Pug로, CSS를 Scss로 변환하여 애니메이션을 만들어 보도록 하겠습니다.

---

HTML --> Pug

Pug는 템플릿 엔진으로 자바스크립트 와 함꼐 사용하여 HTML을 렌더링 할 수 있게 해준다.
때문에 기존 HTML과는 문법이 다르며, 자바스크립트 문법이 들어가기도 한다.

특징은 닫는 태그가 없으며, 들여쓰기한 이후에도 공백까지 태그로 읽는다.
태그 사이가 아닌 태그의 속성으로 넣으려면 ()괄호를 사용해야한다.

    .dog
    .dog-body
      .dog-tail
        .dog-tail
          .dog-tail
            .dog-tail
              .dog-tail
                .dog-tail
                  .dog-tail
                    .dog-tail
    .dog-torso
    .dog-head
      .dog-ears
        .dog-ear
        .dog-ear
      .dog-eyes
        .dog-eye
        .dog-eye
      .dog-muzzle
        .dog-tougue

CSS --> Scss

Scss는 넓은 범용성과 CSS와의 호환성이 장점입니다. 또한 중첩, 변수 선언, 연산자 등 많은 장점을 가지고 있습니다.

해당 Scss는 길이가 길어, 코드펜으로 대체하여 보여드리겠습니다.

See the Pen CSS Dog by KDB6 (@kdb6) on CodePen.