HTML 코드
<!DOCTYPE html>
<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="index.css">
</head>
<body>
<div class="calculator">
<div class="display">
<span>0</span>
</div>
<div class="button_container">
<div class="button_content">
<button class="button_reset">CE</button>
<button class="button_reset">C</button>
</div>
<div class="button_content">
<button class="button_number">7</button>
<button class="button_number">8</button>
<button class="button_number">9</button>
<button class="button_operator">÷</button>
</div>
<div class="button_content">
<button class="button_number">4</button>
<button class="button_number">5</button>
<button class="button_number">6</button>
<button class="button_operator">x</button>
</div>
<div class="button_content">
<button class="button_number">1</button>
<button class="button_number">2</button>
<button class="button_number">3</button>
<button class="button_operator">-</button>
</div>
<div class="button_content">
<button class="button_number">0</button>
<button class="button_number">.</button>
<button class="button_operator">=</button>
<button class="button_operator">+</button>
</div>
</div>
</div>
</body>
> </html> CSS코드
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
@font-face {
font-family: 'EliceDigitalBaeum_Bold';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_220508@1.0/EliceDigitalBaeum_Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
.calculator {
width: 300px;
height: 520px;
border: 3px solid rgba(255, 218, 185, 0.807);
border-radius: 15px;
background-color: rgb(255, 218, 185);
flex-direction: column;
justify-content: space-evenly;
border-radius: 15px;
}
body {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
height: 100vh;
background-image: url("back.jpeg");
background-size: contain;
}
.display{ /* 계산기 결과값 나오는 부분 */
display: flex;
justify-content: right;
align-items: center;
height: 70px;
color: white;
background-color: rgb(255, 140, 0);
border: 1px solid ivory;
font-size: 30px;
margin: 20px;
margin-left: 2%;
margin-right: 2%;
font-family: 'EliceDigitalBaeum_Bold';
border-radius: 15px;
}
.display span{ /* 숫자값 */
margin-right: 10px;
}
.button_container{ /* 버튼들의 큰 틀 */
display: flex;
flex-direction: column;
height: 70%;
background-color:rgb(255, 218, 185);
border-radius: 15px;
}
.button_content{ /* 버튼들의 콘텐츠 */
display: flex;
flex-direction: row;
flex: 1 0 20%;
border-radius: 15px;
margin: 3px 3px 3px 3px;
}
.button_reset{ /* 버튼들중 리셋버튼 첫번째 줄 */
flex: 1 0 25%;
background-color: rgba(244, 138, 0, 0.949);
border-radius: 15px;
font-family: 'EliceDigitalBaeum_Bold';
color: white;
font-size: 25px;
margin: 3px;
}
.button_number { /* 2,3,4,5 번째 줄 중 숫자들 */
flex: 1 0 20%;
border-radius: 30px;
background-color: Coral;
font-size: 20px;
font-family: 'EliceDigitalBaeum_Bold';
color: white;
margin: 5px;
}
.button_operator{ /* 2,3,4,5 번째 줄 중 기호들 */
flex: 1 0 20%;
border-radius: 30px;
font-size: 25px;
background-color: Darksalmon;
font-family: 'EliceDigitalBaeum_Bold';
color: white;
margin: 5px;
} 결과
코드스테이츠 블로그