계산기 만들기 HTML/CSS

계산기 목업 만들기

우선 페어와 함께 와이어 프레임을 사용했다.

계산기 와이어프레임

제일 먼저 Figma로 와이어프레임을 만들었다. 내가 네비게이터, 페어분이 드라이버를 맡으셔서 내가 제안하는대로 페어분이 그려주셨다.

상단의 이미지는 페어분이 조금더 보완해서 정성껏 만들어와주신 프레임.

 

HTML

이후, HTML로 구조를 짰다.

계산기 레퍼런스를 찾아봤을때, 다른분들이 ul로 짜시는분, button으로 짜시는 분 등 다양해서 어떤 식으로 해야할 지 고민을 많이 했다.

계산기는 button을 눌러서 하는 것이기 때문에, button이 맞다고 생각해서 button으로 구현.

밑에 버튼들은 button wrap으로 감쌀지 아니면 한번에 할지 여러 시도를 해보다가 wrap으로 감싸는 것이 가장 깔끔하게 코드가 짜여져서 감싸서 마무리했다.

display는 처음에는 div만 넣었다가, 1차 수정으로 input 을 넣었고 최종안으로는 input type = "text"를 number로 바꾸어 마무리했다.

<div class="display"><input type="number" id="text" placeholder="0"></div>

 

CSS

생각보다 css에서 많이 애먹었다.

앞으로도 공부해 가면서 더 완성된 계산기로 고쳐나갈 생각이다.

css의 버튼 레퍼런스는 페어분이 찾아주셨다.

https://inpa.tistory.com/entry/CSS-%F0%9F%92%8D-%EB%B2%84%ED%8A%BC-%EB%94%94%EC%9E%90%EC%9D%B8-%EB%AA%A8%EC%9D%8C

 

다양한 css버튼들이 있으니, 참고해서 변경해도 될 듯하다.

현재는 box-shadow와 border-radius정도만 들어가있는 상태.

 

그런데 아무리 해도 현재 calculator의 box-shadow가 먹지를 않는다. 이 이유에 대해서 저번주 금요일부터 4일간 고민해봤지만, 풀리지않는 상태.. 어떤 원리인건지 더 찾아봐야할 듯 싶다.

//페어분과의 코드교류 이후

.calculator{
	justify-content: center;
    align-items: center;
    border: 1px solid #494949; //이전에는 1px solid none;이었다. 이문제였나!!
    box-shadow: 0 0 0 1px #cccccc inset,
            0 0 0 2px rgba(204, 204, 204, 0.15) inset,
            0 8px 0 0 rgba(202, 202, 202, 0.7),
            0 8px 0 1px rgba(0,0,0,.4),
            0 8px 8px 1px rgba(0,0,0,0.5);
}

기존에 위의 코드를 추가하니 먹었다. 아무래도 border-color를 설정해두고 놓친것이 문제였던 것 같다....ㅠㅠ

이 쉬운걸...더 꼼꼼하게 살펴보는게 필요할 듯 싶다. 역시 페어와 함께하니 혼자서는 절대 보이지 않던 것들이 보인다!!

 

숫자 버튼을 제외한 버튼들은 class 로 operator를 넣어 색변경을 줘봤다. 훨씬 보기 편한듯하다.

 

현재 계산기 상태(수정전)

페어분과의 코드교류 이후 상태

현재 계산기 상태(수정 후)

기술스택: Figma, HTML, CSS