Cursor와 VS Code, Go Live 환경을 준비하고 강의 자료 다운로드 방법을 확인합니다. 앞으로 만들 HTML, CSS, JavaScript 파일이 어떻게 실행되는지 미리 확인합니다.

완성된 계산기 UI 화면을 다시 확인하고, 디스플레이 영역, 숫자 버튼, 연산자 버튼, 결과 계산, 초기화 기능이 어떤 순서로 만들어지는지 살펴봅니다. 이번 장에서 만들 기능의 전체 흐름을 이해합니다.

계산기 카드, 디스플레이 영역, 버튼 영역이 들어갈 기본 화면을 만듭니다. 브라우저에서 계산기 모양의 틀이 제대로 보이는지 확인하며 UI의 뼈대를 준비합니다.

계산기 상단에 입력값과 결과가 표시될 디스플레이 영역을 만듭니다. 처음에는 0이 보이도록 설정하고, 사용자가 어떤 값을 입력했는지 확인할 공간을 준비합니다.

0부터 9까지의 숫자 버튼을 계산기 아래쪽에 보기 좋게 배치합니다. 버튼 크기와 간격을 맞춰 실제 계산기처럼 누르기 쉬운 화면을 만듭니다.

더하기, 빼기, 곱하기, 나누기, 결과 확인 버튼을 배치합니다. 숫자 버튼과 구분되도록 정리해 사용자가 어떤 버튼으로 계산을 진행하는지 쉽게 알 수 있게 만듭니다.

숫자 버튼을 클릭하면 디스플레이에 선택한 숫자가 차례대로 나타나도록 만듭니다. 여러 자리 숫자를 입력할 수 있게 연결하고, 화면에 입력값이 제대로 이어지는지 확인합니다.

숫자를 입력한 뒤 연산자 버튼을 누르면 첫 번째 숫자와 계산 종류를 기억하도록 만듭니다. 다음 숫자를 입력할 준비를 하면서 계산 과정이 자연스럽게 이어지도록 구성합니다.

결과 버튼을 누르면 앞에서 입력한 숫자와 선택한 연산자를 이용해 계산 결과를 보여줍니다. 더하기, 빼기, 곱하기, 나누기가 정상적으로 동작하는지 확인합니다.

C 버튼을 누르면 입력값, 선택한 연산자, 계산 결과가 모두 처음 상태로 돌아가도록 만듭니다. 사용자가 실수했을 때 계산기를 다시 깨끗하게 시작할 수 있게 합니다.

마우스로 버튼을 누르지 않아도 키보드 숫자와 연산자 키로 계산기를 사용할 수 있게 만듭니다. Enter와 Escape 같은 키도 연결해 더 편리한 계산기 사용 흐름을 완성합니다.

이미지와 사운드 리소스를 활용해 계산기 화면을 더 보기 좋게 꾸밉니다. 버튼을 누를 때 반응이 느껴지도록 스타일과 효과를 추가해 완성도를 높입니다.