계산기 목업 만들기

계산기 목업 만들기

주어진 예시

계산기 목업 만들기 과제에서 주어진 예시는 위의 Mac용 계산기이다.

따라서, 기본적인 버튼 구성은 예시외 같으면서 전체적인 디자인은 다르게 하는 것을 목표로 하였다.

 

대략적인 와이어프레임

크게 숫자가 나오는 스크린 부분(scree)과 버튼들이 있는 부분(btns)로 나누었다.

그리고 screen에는 숫자가 표시될 부분을 따로 number-screen이라는 아이디의 div로 주었으며, btns라는 id를 같는 div는 'AC', '=' 버튼을 갖는 div와 그 외의 숫자, 연산자를 갖는 div로 나누었다.

html 작성

HTML 작성은 수월하였는데, 복잡하지 않은 저 와이어프레임을 그대로 옮기기만 하면 되기 때문이다. 옮기는 과정에서 id와 class를 서로 잘못 작성하거나 태그 등에서 오타가 발생하지 않도록 유의하였다.

 

CSS 코드 작성

기본적으로 깔끔하면서도 칙칙하지 않은 느낌을 주고 싶어 위의 색상을 주었다. 또한, 숫자가 표시될 부분은 계산기와 비슷하면서도 계산기 색의 느낌을 크게 벗어나지 않는 색으로 선정하였다. 또한, 계산기와 숫자 스크린에 입체감을 주기 위해 box-shadow를 설정하였으며 숫자 스크린에는 왼쪽과 윗 부분에 회색으로 설정하였다.

또한 각 버튼들 또한 입체감을 주기 위해 box-shadow를 주었으며 버튼을 누를 때, 눌린 느낌을 표현하고 싶어 box-shadow를 none으로 설정하였다. 이를 통해 버튼이 눌려 계산기와의 높이가 같아지는 것을 표현할 수 있었으며, transition-duration을 통해 버튼이 눌리는 느낌을 보다 극대화시켰다.