<html lang="en">
<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>실습 계산기 만들기</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="calculator">
<div class="button__row">
<div class="screen">0</div>
</div>
<div calss="calcultor-buttons">
<div class="clear-equal">
<button class="clear">c</button>
<button class="equal">=</button>
</div>
<div class="button__row">
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button class="operator">+</button>
</div>
<div class="button__row">
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="operator">-</button>
</div>
<div class="button__row">
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="operator">*</button>
</div>
<div class="button__row">
<button class="point">.</button>
<button class="number-double">0</button>
<button class="operator">/</button>
</div>
</div>
</div>
</div>
</body>
</html>
body {
padding: 16px;
background: #f7f7f7;
box-sizing: border-box;
}
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.calculator {
width: 350px;
height: 500px;
padding: 5px;
border: 1px solid rgb(232, 232, 247);
border-radius: 5px;
background-color: rgb(1, 1, 1);
}
.claculator-screen {
height: 110px;
width: 346px;
border: 1px solid rgb(277, 277, 277);
background-color: rgb(0, 0, 0);
}
.screen {
display: flex;
font-size: 400%;
justify-content: flex-end;
align-items: center;
color: #f7f7f7;
}
.clear {
width: 168px;
height: 70px;
margin:4px 2px;
padding: 5px;
font-size: 200%;
background-color: rgb(203, 231, 255);
border: 3px solid rgb(255, 255, 255);
transition-duration: 0.4s;
cursor: pointer;
}
.equal {
width: 168px;
height: 70px;
margin:4px 2px;
padding: 5px;
font-size: 200%;
background-color: rgb(203, 231, 255);
border: 3px solid rgb(255, 255, 255);
transition-duration: 0.4s;
cursor: pointer;
}
.number {
width: 79px;
height: 70px;
margin:4px 2px;
padding: 5px;
font-size: 200%;
background-color: blanchedalmond;
border: 3px solid rgb(255, 255, 255);
transition-duration: 0.4s;
cursor: pointer;
}
.operator {
width: 79px;
height: 70px;
margin:4px 2px;
padding: 5px;
font-size: 200%;
background-color: rgb(255, 215, 215);
border: 3px solid rgb(255, 255, 255);
transition-duration: 0.4s;
cursor: pointer;
}
.number-double {
width: 168px;
height: 70px;
margin:4px 2px;
padding: 5px;
font-size: 200%;
background-color: blanchedalmond;
border: 3px solid rgb(255, 255, 255);
transition-duration: 0.4s;
cursor: pointer;
}
.point {
width: 79px;
height: 70px;
margin:4px 2px;
padding: 5px;
font-size: 200%;
background-color: rgb(203, 231, 255);
border: 3px solid rgb(255, 255, 255);
transition-duration: 0.4s;
cursor: pointer;
}
.clear:hover {
background-color: cadetblue;
}
.equal:hover {
background-color: cadetblue;
}
.number:hover {
background-color: cadetblue;
}
.operator:hover {
background-color: cadetblue;
}
.number-double:hover {
background-color: cadetblue;
}
.point:hover {
background-color: cadetblue;
}
.clear:active {
box-shadow: 1px 1px 0 rgb(0,0,0,0.5);
position: relative;
top:2px;
}
.equal:active {
box-shadow: 1px 1px 0 rgb(0,0,0,0.5);
position: relative;
top:2px;
}
.number:active {
box-shadow: 1px 1px 0 rgb(0,0,0,0.5);
position: relative;
top:2px;
}
.operator:active {
box-shadow: 1px 1px 0 rgb(0,0,0,0.5);
position: relative;
top:2px;
}
.point:active {
box-shadow: 1px 1px 0 rgb(0,0,0,0.5);
position: relative;
top:2px;
}
.number-double:active {
box-shadow: 1px 1px 0 rgb(0,0,0,0.5);
position: relative;
top:2px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.