HTML5와 CSS3를 사용하여 간단한 일반 계산기를 만들어보겠습니다.
아래는 간단한 HTML 및 CSS 코드 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>간단한 계산기</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f2f2f2;
}
.calculator {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
text-align: center;
width: 300px;
}
#display {
width: 100%;
margin-bottom: 10px;
padding: 10px;
font-size: 24px;
}
.buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
}
.buttons button {
width: 100%;
height: 50px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" readonly>
<div class="buttons">
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button style="visibility: hidden;"></button> <!-- 빈 버튼 -->
<button onclick="appendToDisplay('0')">0</button>
<button onclick="appendToDisplay('+')">+</button>
<button onclick="appendToDisplay('-')">-</button>
<button onclick="appendToDisplay('*')">*</button>
<button onclick="appendToDisplay('/')">/</button>
<button onclick="clearDisplay()">C</button>
<button onclick="appendToDisplay('.')">.</button>
<button onclick="calculateResult()">=</button>
</div>
</div>
<script>
function clearDisplay() {
document.getElementById("display").value = "";
}
function appendToDisplay(value) {
document.getElementById("display").value += value;
}
function calculateResult() {
try {
document.getElementById("display").value = eval(document.getElementById("display").value);
} catch (error) {
document.getElementById("display").value = "오류";
}
}
</script>
</body>
</html>
이 HTML은 AI를 통해 코딩한 것입니다.
이 코드를 실행하면 다음과 같은 결과가 나옵니다.
'AI웹페이지코딩' 카테고리의 다른 글
| readdy ai 홈페이지 AI 코딩 (0) | 2025.03.14 |
|---|---|
| url만 입력하면 동영상 만들어 주는 사이트 (1) | 2025.02.22 |
| Framer.com AI가 만들어 주는 홈페이지 (0) | 2024.03.05 |
| 스톱워치 HTML 코드 (0) | 2023.11.05 |
| 2023년 11월 달력 코드 (0) | 2023.11.05 |
