100일 CSS #2 : 메뉴 아이콘

문제

https://100dayscss.com/days/2/

 

Menu Icon: Used on almost every website by now, simple but impressively animated it becomes a real eye-catcher
메뉴 아이콘 : 현재 거의 모든 웹사이트에서 사용됨, 간단하지만 인상적인 애니메이션으로 시선을 사로잡어보자 

클릭하면 애니메이션이 나와 X자가 되는 메뉴 아이콘. 다시 한번 클릭하면 원래의 ☰ 형태로 되돌아온다.

 

내 풀이

See the Pen 100 DAYS CSS CHALLENGE : Day #2 by dobbyjang0 (@dobbyjang0) on CodePen.

두 번째 문제부터 바로 어려워서 죽는줄 알았다...

 

SCSS

• BEM 명명법이 SCSS에서 엄청 편하다는 사실을 알게 되었다! 부모 선택자 & 뒤에 붙여주기만 하면 되는거였다
• 변수 정의를 사용해보았다.
• 반복문을 사용해보았다. 편했다.

 

애니메이션

@keyframes animation-1 {
  50%{
    transform : translateY($translate-length);
  }
  100% {
    transform : translateY($translate-length) rotate(45deg);
  }
}

@keyframes animation-1-rev {
  50%{
    transform : translateY($translate-length);
  }
  0% {
    transform : translateY($translate-length) rotate(45deg);
  }
}

 단순히 뒤로 갈 때는 animation-direction 만 reverse로 하면 될 줄 알았는데, 그렇진 않았다. 아마 애니매이션을 바꿔야 다시 시작하나 보다. 그래서 반대로 가는 애니메이션 키프래임을 하나 더 만들어주어 해결하였다. 이를 응용하여 계속 애니매이션을 불러와야 할 때 같은 애니매이션 키프래임을 2개 만들어 번갈아와서 불러와도 될 것 같다.

ChatGPT

SCSS에서 변수 넣는 법(보간법)을 {..}로 잘못 알고 있었는데 얘가 #{..}라고 재대로 알려줬다. 착하다. 앞으로도 계속 유용하게 쓸 방법을 구상해보자.

 

예시 모범답안

See the Pen 002 - Menu Icon by Matthias Martin (@roydigerhund) on CodePen.