프로그래밍을 배우면서 가장 많이 만들어보는 프로젝트 중 하나가 계산기 프로그램입니다.
이 글에서는 HTML, CSS, JavaScript를 사용하여 간단한 계산기 프로그램을 만드는 방법을 설명합니다.
이번 예제에서는 인라인 스타일과 스크립트를 사용하여 숫자와 연산자가 모두 화면에 표시되는 계산기를 구현해 보겠습니다.
0
기본 구조 만들기
먼저 HTML을 사용하여 계산기의 기본 구조를 만듭니다. 계산기는 디스플레이 영역과 버튼들로 구성됩니다. 디스플레이 영역은 계산 결과와 입력된 숫자 및 연산자를 표시하고, 버튼들은 숫자와 연산자 입력, 계산 수행 등을 담당합니다.
스타일 적용하기
계산기의 스타일을 지정하기 위해 인라인 CSS를 사용합니다. 이렇게 하면 코드가 깔끔하고 간결해집니다. 각 버튼과 디스플레이 영역에 스타일을 적용하여 보기 좋은 계산기를 만들 수 있습니다. 버튼에 대한 스타일은 다음과 같습니다:
padding: 버튼의 내부 여백을 설정합니다.font-size: 버튼의 글자 크기를 설정합니다.border: 버튼의 테두리를 설정합니다.background-color: 버튼의 배경색을 설정합니다.border-radius: 버튼의 모서리를 둥글게 설정합니다.-
cursor: 버튼 위에 마우스를 올렸을 때 포인터로 변경합니다. -
transition: 배경색 변경 시 부드러운 전환 효과를 줍니다.
기능 구현하기
JavaScript를 사용하여 계산기의 기능을 구현합니다. 각 버튼 클릭 시 해당 숫자나 연산자가 디스플레이에 표시되고, 계산 결과를 출력할 수 있도록 합니다. 이를 위해 다음과 같은 함수를 작성합니다.
주요 함수 설명
-
clearDisplay: 디스플레이를 초기화합니다. 모든 입력을 지우고 초기 상태로 되돌립니다. -
deleteLast: 입력된 마지막 문자를 삭제합니다. 입력 중에 실수로 잘못 입력한 경우 사용할 수 있습니다. -
appendNumber: 숫자를 입력합니다. 각 숫자 버튼 클릭 시 호출되어 디스플레이에 숫자를 추가합니다. -
appendDot: 소수점을 입력합니다. 소수점을 한 번만 입력할 수 있도록 합니다. -
appendOperator: 연산자를 입력합니다. 현재 입력된 숫자와 연산자를 디스플레이에 표시합니다. -
calculate: 계산을 수행합니다. 입력된 두 숫자와 연산자를 사용하여 결과를 계산하고 디스플레이에 표시합니다. -
updateDisplay: 디스플레이를 업데이트합니다. 입력된 숫자와 연산자, 결과 등을 디스플레이에 표시합니다.
