지금까지 우리는 웹사이트의 기본 구성 요소인 HTML, CSS, JavaScript를 하나씩 배워왔습니다.
이번 글에서는 세 가지 기술을 하나로 통합해 ‘계산기 프로젝트’를 직접 만들어보는 시간을 가져보겠습니다.
🧱 우리가 만들 계산기의 기능
✅ 숫자 버튼을 클릭하면 입력란에 표시됨
✅ +, -, *, / 연산이 가능함
✅ = 버튼을 누르면 계산 결과가 출력됨
✅ C 버튼으로 초기화 가능
💻 HTML – 계산기의 구조 만들기
html
복사편집
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>간단한 계산기</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="calculator"> <input type="text" id="display" disabled /> <div class="buttons"> <button onclick="clearDisplay()">C</button> <button onclick="appendValue('7')">7</button> <button onclick="appendValue('8')">8</button> <button onclick="appendValue('9')">9</button> <button onclick="appendValue('/')">/</button> <button onclick="appendValue('4')">4</button> <button onclick="appendValue('5')">5</button> <button onclick="appendValue('6')">6</button> <button onclick="appendValue('*')">*</button> <button onclick="appendValue('1')">1</button> <button onclick="appendValue('2')">2</button> <button onclick="appendValue('3')">3</button> <button onclick="appendValue('-')">-</button> <button onclick="appendValue('0')">0</button> <button onclick="appendValue('.')">.</button> <button onclick="calculate()">=</button> <button onclick="appendValue('+')">+</button> </div> <script src="script.js"></script> </div> </body> </html>
🎨 CSS – 계산기 스타일 만들기
css
복사편집
/* style.css */ body { font-family: 'Arial', sans-serif; background: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; } .calculator { background: #ffffff; padding: 20px; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.1); } #display { width: 100%; height: 40px; font-size: 20px; margin-bottom: 10px; text-align: right; padding: 5px; } .buttons { display: grid; grid-template-columns: repeat(4, 60px); gap: 10px; } button { height: 40px; font-size: 18px; border: none; background-color: #eee; border-radius: 5px; cursor: pointer; transition: background 0.2s; } button:hover { background-color: #ddd; }
⚙️ JavaScript – 계산기 기능 구현
js
복사편집
// script.js let display = document.getElementById('display'); function appendValue(value) { display.value += value; } function clearDisplay() { display.value = ''; } function calculate() { try { display.value = eval(display.value); } catch (error) { display.value = 'Error'; } }
⚠️ eval()은 간단한 예제에는 편리하지만 보안상 취약할 수 있으므로, 상용 프로젝트에서는 다른 방식(예: 파서 작성)을 고려해야 합니다.
📸 결과 화면 미리보기 (설명용)
- ✅ 디자인: 깔끔한 회색 버튼, 흰 배경의 계산기
- ✅ 기능: 클릭 시 숫자/연산 입력 → =로 결과 출력
- ✅ 반응성: 데스크탑에서 사용하기 쉬운 크기
🔍 배운 내용 정리
- HTML로 버튼과 입력창을 구성
- CSS로 버튼과 박스를 스타일링
- JavaScript로 사용자 클릭 이벤트 처리 및 계산 로직 구현
🎯 마무리 – 통합 실습으로 실력을 한 단계 UP!
이제 여러분은 웹페이지에 구조(HTML), 스타일(CSS), 기능(JS)을 모두 구현할 수 있는 능력자입니다!
실제로 작동하는 계산기를 직접 만들어보며 자신감을 키워보세요.
👉 계산기를 확장해서 메모리 기능, 테마 전환, 키보드 입력 지원 등으로 발전시켜 볼 수도 있어요!