<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="calculator">
<div class="display">
<div class="result">0</div>
</div>
<div class="button-container">
<div class="calculator-btn">
<button class="btn ac">AC</button>
<button class="btn enter">Enter</button>
</div>
<div class="row">
<button class="btn number">7</button>
<button class="btn number">8</button>
<button class="btn number">9</button>
<button class="btn operator">+</button>
</div>
<div class="row">
<button class="btn number">4</button>
<button class="btn number">5</button>
<button class="btn number">6</button>
<button class="btn operator">-</button>
</div>
<div class="row">
<button class="btn number">1</button>
<button class="btn number">2</button>
<button class="btn number">3</button>
<button class="btn operator">*</button>
</div>
<div class="row">
<button class="btn number0">0</button>
<button class="btn decimal">.</button>
<button class="btn operator">/</button>
</div>
</div>
</div>
</div>
</body>
</html>* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-weight: 900;
font-family: sans-serif;
color: #555;
font-size: 18px;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-image: url(./src/보노보노배경.jpeg);
}
.calculator {
width: 350px;
height: 500px;
padding: 10px;
display: flex;
flex-direction: column;
background-color: #c7e8fd;
border-radius: 10px;
box-shadow: 10px 10px 5px rgba(0,0,0,0.5), inset 5px 3px 5px rgba(255, 255, 255, 0.5);
}
.display,
.button-container {
margin: 10px;
padding: 10px;
display: flex;
flex-direction: column;
background-color: #fff;
border-radius: 10px;
box-shadow:
inset 3px 4px rgb(0,0,0,.3),
inset -1px -2px 1px rgb(0,0,0,.3),
3px 4px 4px #fff ;
}
.display {
flex: 1;
justify-content: center;
}
.button-container {
flex: 5;
justify-content: space-around;
background-image: url(./src/보노보노.jpeg);
background-position: 85% 60%;
background-size: cover;
}
.result {
margin-right: 10px;
text-align: right;
font-size: 25px;
}
.calculator-btn {
display: flex;
justify-content: space-around;
align-items: center;
padding: 5px;
}
.row {
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
}
/* Button */
.btn {
margin: 0 5px;
cursor: pointer;
border-radius: 25px;
box-shadow:
1px 4px 0 rgba(0,0,0,0.7),
inset 1px 4px 3px rgba(255, 255, 255, .5);
border: none;
}
.btn:active {
box-shadow: 1px 1px 0 rgba(0,0,0,0.5);
position: relative;
top: 2px;
background-color: rgb(110, 167, 211);
}
.number:active,
.number0:active,
.decimal:active {
background-color: rgb(173, 173, 173);
}
.ac,
.enter {
width: 120px;
height: 50px;
background-color: #c7e8fd;
}
.number,
.operator,
.decimal {
height: 50px;
width: 60px;
background-color: #e7e7e7;
}
.number0 {
height: 50px;
width: 130px;
background-color: #e7e7e7;
}
.operator {
background-color: #c7e8fd;
}
아무것도 모르는 코린이