02.17 TIL 계산기 목업 만들기

😎계산기를 만들자

 

컨셉은 블루아카이브의 몰?루로 해봤어요

원래는 평범하게 윈도우 계산기를 카피해보려고 했는데

잘만드는 사람이 너무 많아서 그냥 킹받는 걸 컨셉으로

숫자패드를 헷갈리는 연산으로 대체해봤습니다.

1,2,3,4,5,6,7,8,9,0 모두 잘 들어가있습니다.

아로나는 몰?루니까 계산기를 쓰시는 분들이 직접 계산하셔서 버튼을 찾으셔야합니다.

---

😎Animate.css

애니메이션 효과를 주면 재밌을 것 같아서 혹시 그런 라이브러리가 없을까 하고 찾아보다가

발견한 라이브러리입니다. 사용법이 아주 간단해서 마음에 드는데 

https://animate.style/

Animate.css | A cross-browser library of CSS animations.

위 사이트에서 받을 수 있습니다.

사용법은 진짜 너무 간단해요

사용법도 아주 친절하게 영어로 설명되어있는데

영어라고 무서워하지말고 읽어보면 전혀 어렵지 않다

npm이나 yarn을 이용해서 디렉토리에 설치해주는 방법과

그냥 html문서에 link태그로 갖다붙여주는 방식 두가지를 선택할 수 있다는 뜻

 

npm은 node.js를 설치할때 같이 딸려오니까 상관없지만

yarn은 따로 yarn을 설치해줘야한다.

어렵지않으니 구글링 해보면 쉽게 할 수 있을 것이다.

난 둘다 해봤는데 그냥 link태그 붙여주는게 더 편한 것 같아서 그렇게 사용하고있다.

 

문법은 더욱 간단하다.

<h1 class="animate__animated animate__bounce">An animated element</h1>

애니메이션 효과를 적용시키고 싶은 html 요소의 클래스명으로

animate__animated 클래스와 원하는 애니메이션의 클래스이름을 넣어주면 끝이다.

animate__animated 클래스가 없으면 동작하지 않으니

이해가 가지 않더라도 반드시 넣을것!

 

아마 무수하게 많이 재사용되는 코드라서 일일히 다 넣어주면

너무 무거워져서 한개로 독립시켜놓은거 아닌가... 예상해봅니다

---

😎자바스크립트랑 연계해보자

클래스이름만 지정되어있으면 동작한다
그렇다면 자바스크립트에 특정 클래스이름만 추가해주면
이벤트와 연계해서 애니메이션을 사용할 수 있을 것이다.

근데 작은 문제가 있었다.
난 버튼을 누를 때마다 애니메이션이 나왔으면 좋겠는데
이벤트가 일어나서 클래스를 추가해준다음
제거해주지않으면 다시 애니메이션이 나오지않는다.

당연함. 이미 있는 클래스를 추가해봐야 똑같음

즉 애니메이션이 다 동작한 다음 클래스를 제거해줘야했다.
근데 이것도 임시방편인거같은데.. 음...

사실 정말 원하는 건 누를때마다 이벤트가 처음부터 시작하는 거긴하다.

하지만 일단은 클래스를 추가해주고
setTimeout 메서드를 통해 애니메이션이 끝난 후 클래스를 제거해주는 방법을 사용했다.

---

😎다른 사람들 왜케 잘함?

자기가 만든 계산기를 줌으로 자랑하는 시간이 있었는데
다들 참...잘하신다
코드를 보면서 많이 배운 것 같다.

기억나는 부분을 적어보자면

1. 존재만 기억하고 실제로 사용하지 않았던 미디어쿼리를 이용한 다크모드 구현 등
2. vh 단위를 사용해 디자인하면 브라우저 크기에 따라 변하는 요소를 만들 수 있다.
3. clip-path 속성을 통해 다양한 도형을 구현할 수 있다(타원형같은..)
4. input의 checkbox 타입을 이용해 toggle 구현
5. inset 속성이 뭐임..?
6. flex grow는 남은 영역을 어떻게 가져갈것인가를 뜻한다.
7. flex basis에 기본 영역을 %로 설정해주면 직관적인것같음
8. space-evenly < between주고 패딩값 넣어주는것보다 더 효율적인듯?

rem 단위를 적극 사용해서 디자인 했는데
다음엔 vh를 이용해보는것도 재밌을 것 같다.

---

😎 CSS는 정말 깊다..

정말 너무 내용이 방대해서 오히려 자바스크립트보다 어렵게 느껴지는듯
다들 참 잘하시고... 나는 그냥 라이브러리나 가져다 쓰고 싶어지고..

위에 새로 알게된 것들을 좀 더 찾아보고
애니메이션 기능을 그냥 복붙하는게 아니라 좀 더 공부해봐야겠다.

---