일반
간단한 계산기
알 수 없는 사용자
2022. 1. 3. 18:43
SMALL
* {
font-size: 40px;
}
h1 {
color: #ffffff;
}
body {
background-color: #000000;
}
article {
display: flex;
flex-direction: column;
}
.center {
text-align: center;
}
.calculator {
width: 287px;
border: 6px solid rgb(33, 182, 58);
background-color: #ffffff;
padding: 6px;
display: inline-block;
}
.calculator form {
display: grid;
grid-template-columns: repeat(4, 65px);
grid-auto-rows: 65px;
grid-gap: 5px;
}
.calculator form input {
border: 2px solid #333;
cursor: pointer;
}
.calculator form input:hover {
box-shadow: 1px 1px 2px #333;
}
.calculator form .clear {
background-color: #ed8848;
}
.calculator form .operator {
background-color: #f65;
}
.calculator form .dot {
background-color: lightgreen;
}
.calculator form input[type="text"] {
grid-column: span 4;
text-align: right;
padding: 0 10px;
}
.calculator form .clear {
grid-column: span 3;
}
.calculator form .result {
grid-column: span 2;
}<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>계산기</title>
<meta name="description" content="간단한 계산을 위한 웹 계산기입니다." />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="center">
<h1>계산기</h1>
<div class="calculator">
<form name="forms">
<input type="text" name="output" readonly />
<input
type="button"
class="clear"
value="지우기"
onclick="document.forms.output.value=''"
/>
<input type=button class=operator value=/
onclick="document.forms.output.value+='/'">
<input
type="button"
value="1"
onclick="document.forms.output.value+='1'"
/>
<input
type="button"
value="2"
onclick="document.forms.output.value+='2'"
/>
<input
type="button"
value="3"
onclick="document.forms.output.value+='3'"
/>
<input
type="button"
class="operator"
value="*"
onclick="document.forms.output.value+='*'"
/>
<input
type="button"
value="4"
onclick="document.forms.output.value+='4'"
/>
<input
type="button"
value="5"
onclick="document.forms.output.value+='5'"
/>
<input
type="button"
value="6"
onclick="document.forms.output.value+='6'"
/>
<input
type="button"
class="operator"
value="+"
onclick="document.forms.output.value+='+'"
/>
<input
type="button"
value="7"
onclick="document.forms.output.value+='7'"
/>
<input
type="button"
value="8"
onclick="document.forms.output.value+='8'"
/>
<input
type="button"
value="9"
onclick="document.forms.output.value+='9'"
/>
<input
type="button"
class="operator"
value="-"
onclick="document.forms.output.value+='-'"
/>
<input
type="button"
class="dot"
value="."
onclick="document.forms.output.value+='.'"
/>
<input
type="button"
value="0"
onclick="document.forms.output.value+='0'"
/>
<input
type="button"
class="operator_result"
value="="
onclick="document.forms.output.value=eval(document.forms.output.value)"
/>
</form>
</div>
</div>
</body>
</html>
LIST