HTML로 계산기를 만들어 보았습니다.

계산기를 만들어 보았습니다.

아니 정확히 이야기하면 계산기 만들기를 공부해 보았습니다.

 

계산기를 블로그에서 구현하기 위해서는 아래 4가지 과정이 필요합니다.

 

1. 화면 디자인

2. 마우스로 숫자와 사칙연산 부호 입력

3. 연산

4. 연산 결과의 출력

 

이를 위해서 HTML, CSS, JavaScript의 세가지 언어가 필요합니다.
하나의 기능을 구현하는데 이 세가지 언어가 유기적으로 연결되는 것을 차례로 이해해보는 과정이 재미있더군요. 

 

아래 계산기 코드는 온라인에 소스가 공개되어 있는 것입니다. 한번 만들어 보고 기회가 되면 계속 업그레이드해 보고 싶어서 이렇게 포스팅에 올려 둡니다.

 

숫자판을 눌러서 실제 한번 이용해 보세요 ^^.

 

-Updated on 5/21/2020 : 계산기에 색상을 한번 입혀 봤습니다. 예쁘네요.

-Updated on 5/24/2020 : 계산기 외곽에 그림자를 추가해 봤습니다.

---

 

 

AC			/
7	8	9	*
4	5	6	-
1	2	3	+
0		.	=