<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>calculator</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
function display(value) {
document.getElementById("result").value += value;
}
function clearDisplay() {
document.getElementById("result").value = "";
}
</script>
<style>
#result {
text-align: right;
font-size: 1.5rem;
}
</style>
</head>
<body>
<p><br/></p>
<div class = "container bg-dark p-3 my-3">
<h1 class="display-5 text-white">계산기</h1>
<form name = "calculator">
<table class = "table table-borderless">
<tr>
<td colspan="4">
<input type = "text" class="form-control card card-block p-3 bg-dark text-white border-0" id="result" readonly/>
</td>
</tr>
<tr>
<td>
<input type = "button" class="btn btn-light btn-block" value = "AC" xxonclick="clearDisplay()" id = "AC"/>
</td>
<td>
<input type = "button" class="btn btn-light btn-block" value = "+/-" xxonclick="display('')"/>
</td>
<td>
<input type = "button" class="btn btn-light btn-block" value = "%" xxonclick="display('')"/>
</td>
<td>
<input type = "button" class="btn btn-warning btn-block" value = "÷" xxonclick="display('÷')"/>
</td>
</tr>
<tr>
<td>
<input type = "button" class="btn btn-secondary btn-block" value = "7" xxonclick="display('7')"/>
</td>
<td>
<input type = "button" class="btn btn-secondary btn-block" value = "8" xxonclick="display('8')"/>
</td>
<td>
<input type = "button" class="btn btn-secondary btn-block" value = "9" xxonclick="display('9')"/>
</td>
<td>
<input type = "button" class="btn btn-warning btn-block" value = "X" xxonclick="display('X')"/>
</td>
</tr>
<tr>
<td>
<input type = "button" class="btn btn-secondary btn-block" value = "4" xxonclick="display('4')"/>
</td>
<td>
<input type = "button" class="btn btn-secondary btn-block" value = "5" xxonclick="display('5')"/>
</td>
<td>
<input type = "button" class="btn btn-secondary btn-block" value = "6" xxonclick="display('6')"/>
</td>
<td>
<input type = "button" class="btn btn-warning btn-block" value = "-" xxonclick="display('-')"/>
</td>
</tr>
<tr>
<td>
<input type = "button" class="btn btn-secondary btn-block" value = "1" xxonclick="display('1')"/>
</td>
<td>
<input type = "button" class="btn btn-secondary btn-block" value = "2" xxonclick="display('2')"/>
</td>
<td>
<input type = "button" class="btn btn-secondary btn-block" value = "3" xxonclick="display('3')"/>
</td>
<td>
<input type = "button" class="btn btn-warning btn-block" value = "+" xxonclick="display('+')"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type = "button" class="btn btn-secondary btn-block" value = "0" xxonclick="display('0')"/>
</td>
<td>
<input type = "button" class="btn btn-secondary btn-block" value = "." xxonclick="display('.')"/>
</td>
<td>
<input type = "button" class="btn btn-warning btn-block" value = "=" xxonclick = "calculate()" id = "calculate"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
첫댓글 잘 보았습니다. 완성하지 않은 나머지 버튼들도 잘 완성해 보세요. 수고하셨습니다.