오늘 배운 내용
- HTML/CSS 활용
- 계산기 목업 만들기
오늘의 과제
<!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="calculator.css">
</head>
<body>
<div class="container">
<div class="number">0</div>
<div class="cal">
<div class="button grey">AC</div>
<div class="button grey">+/-</div>
<div class="button grey">%</div>
<div class="button orange">/</div>
</div>
<div class="cal">
<div class="button">7</div>
<div class="button">8</div>
<div class="button">9</div>
<div class="button orange">X</div>
</div>
<div class="cal">
<div class="button">4</div>
<div class="button">5</div>
<div class="button">6</div>
<div class="button orange">-</div>
</div>
<div class="cal">
<div class="button">1</div>
<div class="button">2</div>
<div class="button">3</div>
<div class="button orange">+</div>
</div>
<div class="cal">
<div class="big button">0</div>
<div class="button">.</div>
<div class="button orange">=</div>
</div>
</div>
</body>
</html>body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: black;
width: 300px;
height: 500px;
color: white;
border-radius: 50px;
}
.number {
width: 260px;
height: 110px;
display: flex;
justify-content: flex-end;
align-items: flex-end;
padding: 20px;
font-size: 50px;
}
.cal {
background-color: black;
display: flex;
justify-content: space-around;
width: 95%;
margin-left: 10px;
border-radius: 10px;
}
.button {
font-size: 23px;
width: 55px;
height: 55px;
margin: 5px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: RGB(49, 49, 49);
}
.orange {
background-color: orange;
}
.grey {
background-color: grey;
}
.big {
border-radius: 43px;;
width: 130px;
}결과물
내 과제는 너무 초라하지만 잘하시는 분들이 많아서 놀랐다!
열심히 공부해서 나도 잘해야지
프론트엔드 개발자 준비 중