API tools faq
paste
William_Riker

웹 보안 - 계산기 버튼 만들기

William_Riker
Oct 27th, 2025
1,749
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.28 KB | None | 0 0
raw download clone embed print report
  1. HTML 패널
  2.  
  3. <h2>간단한 계산기</h2>
  4.  
  5. <input type="number" id="num1" placeholder="첫 번째 숫자">
  6. <input type="number" id="num2" placeholder="두 번째 숫자">
  7.  
  8. <button id="addBtn">더하기</button>
  9. <button id="subtractBtn">빼기</button>
  10. <button id="multiplyBtn">곱하기</button>
  11.  
  12. <div id="result"></div>
  13.  
  14. JavaScript 패널
  15.  
  16. document.getElementById('addBtn').addEventListener('click', function() {
  17.     // 여기에 코드를 작성하세요
  18.     let num1 = document.getElementById('num1').value;
  19.     let num2 = document.getElementById('num2').value;
  20.    
  21.     // 숫자로 변환
  22.     let result = Number(num1) + Number(num2);
  23.    
  24.     // 결과 표시
  25.     document.getElementById('result').textContent = '결과: ' + result;
  26. });
  27.  
  28. // 빼기와 곱하기 버튼도 구현해보세요!
  29.  
  30. CSS 패널
  31.  
  32. body {
  33.     font-family: Arial, sans-serif;
  34.     padding: 20px;
  35. }
  36.  
  37. input {
  38.     padding: 10px;
  39.     margin: 5px;
  40.     font-size: 16px;
  41. }
  42.  
  43. button {
  44.     padding: 10px 20px;
  45.     margin: 5px;
  46.     background-color: #3498db;
  47.     color: white;
  48.     border: none;
  49.     cursor: pointer;
  50.     font-size: 16px;
  51. }
  52.  
  53. button:hover {
  54.     background-color: #2980b9;
  55. }
  56.  
  57. #result {
  58.     margin-top: 20px;
  59.     font-size: 24px;
  60.     font-weight: bold;
  61.     color: #27ae60;
  62. }
Advertisement
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!