6.2.1 계산기 화면 만들기
webgame 폴더에 calculator.html 파일을 만듭니다(4.1 HTML 파일 생성하기 참고). 파일에 계산기 화면을 표시하는 코드를 다음과 같이 작성합니다.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>계산기</title>
<style>
* { box-sizing: border-box }
#result { width: 180px; height: 50px; margin: 5px; text-align: right }
#operator { width: 50px; height: 50px; margin: 5px; text-align: center }
button { width: 50px; height: 50px; margin: 5px }
</style>
</head>
<!-- 계산기 버튼 구현 -->
<body>
<input readonly id="operator">
<input readonly type="number" id="result">
<div class="row">
<button id="num-7">7</button>
<button id="num-8">8</button>
<button id="num-9">9</button>
<button id="plus">+</button>