[TIL]계산기 목업 만들기

뒤늦게나마 작성해보는 계산기 목업 만들어봤던 회고..! 🙂

---

계산기 목업 만들기 1

• HTML과 CSS를 이용하여 페어와 함께 계산기 목업을 만드는 과제를 진행했다.
  와이어프레이밍이라는 것을 배우고 혼자 노트에 끄적여본 와린이(?)의 계산기

• 입체적으로 보이기 위한 border-bottom 속성이 한 몫했다 🤣

• flexbox를 실습해보기 위한 시간이었기때문에 버튼들에 display:flex 를 적용해주어 정렬을 맞춰주고, AC,Enter, 0 등의 버튼들에 flex-grow 속성을 적용해보았다.
  - 버튼들 사이의 간격에는 gap을 이용해 간격을 맞춰보았다! (정말 신기했다🤩)

• 페어 분을 통해 calc()라는 계산식을 알게되었다.

  

  width값을 구할 때 부모로 부터 계승된 width 값 100% 에서 특정 값(컨텐츠 외의 지정되는 width에 영향이가는 크기들)을 제외한 값을 width값으로 가져간다는 계산으로 이해했다.

  ✨아주 멋진 계산식이군..
  

---

계산기 목업 만들기 2

• 뭔가 아쉽고 다시 만들어보고싶어서 계산기 하나 더 만들어보았다!
  사실 거의 비슷하지만 쪼금의 기능이 더해진~

  

• 둥근 operator 버튼들과 마우스(커서)를 올렸을 때의 hover 기능을 이용해보았다!
  폰트 색상 및 border-bottom 색 변경을 통해 눈에 보이는 변화를 심어보았다.
  꽤나 재밌는 기능이지 않은가?!

---

내가 잘해오고 있는 점

• 매일같이 블로그 작성을 하고있지는 못하나 나름 내 페이스대로 진행되어가고있어 만족스럽다
• 포기하지 않고 결과물을 내보겠다는 열정!
• 힘들지만 긍정적인 마음 잃지 않기