728x90
간단하게 만들어 볼 수 있는 계산기를 만들어보기 ~~~~ 🤩
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<form name="forms">
<input type="text" name="output" readonly />
<input type="button" class="clear" value="C" 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>
</body>
</html>
폰트는 내가 자주 사용하는 눈누 사이트에서 가져와서 사용하였다.
상업용 무료 폰트 사이트 !!!!!
눈누
상업용 무료한글폰트 사이트
noonnu.cc
@font-face {
font-family: 'LINESeedKR-Bd';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/LINESeedKR-Bd.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
* {
font-family: 'LINESeedKR-Bd';
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: wheat;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.calculator {
width: 287px;
border: 1px solid #333;
background-color: #ccc;
padding: 5px;
}
.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;
font-size: 19px;
}
.calculator form input:hover {
box-shadow: 1px 1px 2px #333;
}
.calculator form .clear {
background-color: red;
}
.calculator form .operator {
background-color: yellow;
}
.calculator form .dot {
background-color: skyblue;
}
.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;
}
'Study' 카테고리의 다른 글
| 웹 접근성 간단 정리 (0) | 2024.05.14 |
|---|---|
| 웹 표준 간단 정리 (0) | 2024.05.13 |
| [REACT] 리액트 쿼리 (0) | 2024.05.02 |
| [JS] ES5와 ES6 차이 (0) | 2024.05.01 |
| [CSS] 애니메이션 사이트 (0) | 2024.05.01 |