HTML & CSS & JAVASCRIPT
Calculator 만들기) 1. 기본 html, button 디자인 만들기
dodop
2021. 1. 21. 19:57
javascript 기본 예제로 생각한 calculator 만들기
유튜브의 강의를 보고 따라하기로 했다.
https://www.youtube.com/watch?v=j59qQ7YWLxw
1. index.html
<!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 href="styles.css" rel ="stylesheet">
<script src = "script.js" defer> </script>
</head>
<body>
<div class = "calculator-grid">
<div class = "output">
<div class = "previous-operand"></div>
<div class="current-operand"></div>
</div>
<button class="span-two">AC</button>
<button>DEL</button>
<button>÷</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>*</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>+</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>-</button>
<button>.</button>
<button>0</button>
<button class="span-two">=</button>
</div>
</body>
</html>
2. styles.css
*, *::before, *::after {
box-sizing: border-box;
font-family: Arial, sans-serif ;
font-weight: normal;
}
body {
padding: 0;
margin: 0;
background: linear-gradient(to right,#ffa585,#ffeda0);
}
.calculator-grid {
display: grid;
justify-content: center;
align-content: center;
min-height: 100vh;
grid-template-columns: repeat(4, 100px);
grid-template-rows: minmax(120px,auto) repeat(5,100px);
}
.calculator-grid > button {
cursor: pointer;
font-size: 2rem;
border: 1px solid white;
outline: none;
background-color: rgba(255, 255, 255, .75);
}
.calculator-grid > button:hover {
background-color: rgba(255, 255, 255, .9);
}
사진으로 보면,
