Page 21 -

4.1

실습 내용 소개

이번 실습에서는 사용자 인터페이스에 표시된 숫자를 클릭하면 간단한 사칙연산을 하는 계산기
애플리케이션을 만들어 봅니다. 실습에서 만들 계산기의 UI는 그림 4-1과 같습니다. 해당 디자

인이 적용된 HTML 파일과 CSS 파일은 따로 제공합니다.
TIP 계산기 UI의 HTML/CSS 파일은 예제 파일의
그림 4-1 계산기 UI
ch04/calculator_html 폴더에서 확인할 수 있습니다.

그림 4-2 숫자 1과 2를 연속으로
클릭한 경우

계산기의 작동 과정은 다음과 같습니다.

1 숫자를 클릭하면 클릭한 숫자를 출력칸에 표시합니다. 예를 들
어, 1을 클릭하면 1이 출력되고, 1과 2를 연속해서 클릭하면 두
숫자를 조합해 12가 출력됩니다. 6과 8과 7처럼 숫자 3개를 연

속해서 클릭하면 세 자리 숫자 687이 출력됩니다.

152