피그마 + 바닐라 자바스크립트 계산기

시작하게 된 이유 : 

제로초님의 Next 강의를 보고 있는데, 클론 코딩 하면서 와이어프레임을 짜는 모습이 정말 멋있게 느껴져서, 나도 저렇게 만들고 싶다는 마음이 생겨, 기초부터 하나씩 만들어 보자는 생각으로 시작하게 됐다. 

피그마로 와이어프레임 제작하기 

아래는 피그마에서 제작한 와이어프레임이다. 

 

CSS

디자인은 갤럭시 / 아이폰 계산기 앱을 참고했으며, 이를 기반으로 HTML 구조와 스타일링을 진행했다. 

 

레이아웃은 flexbox , grid를 활용해 레이아웃 설계의 중요성응ㄹ 느꼈다. 특히 grid-template-columns로 버튼을 간단히 정렬할 수 있는것도 알게 됐다.

 

이번 공부를 통해 CSS의 다양한 기능을 활용하며, 레이아웃과 스타일링을 더 깊이 이해할 수 있었고, CSS로 모든 구성을 직접 구현하면서 기본기를 다질 수 있었다. 

 

다음에는 반응형 디자인을 추가하거나 더 복잡한 UI/UX 요소를 도전할꺼다!

 

 

깃허브 전체 코드 확인
아래 링크를 통해 제가 작성한 전체 코드를 확인하실 수 있습니다.
👉 코드 보러 가기