HTML/CSS 실습으로 계산기를 목업(Mock-up, 작동을 제외한 부분을 구현) 해보았다.
윈도우 계산기를 모티브로 작성했으며, ul/li의 리스트 구조에 css를 덧씌워서 구현했다.
<calculator.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">
<link rel="stylesheet" href="calculator.css">
<title>Calculator</title>
</head>
<body>
<!--계산기-->
<div class="calculator">
<!--결과출력창-->
<ul>
<li> <p class='result'> 0 </p> </li>
</ul>
<!--버튼-->
<ul>
<li class='numberli'> <button class='numberac'>AC</button> </li>
<li class='numberli'> <button class='numberac'>+/-</button> </li>
<li class='numberli'> <button class='numberac'>%</button> </li>
<li class='numberli'> <button class='operator'>/</button> </li>
</ul>
<ul>
<li class='numberli'> <button class='number'>7</button> </li>
<li class='numberli'> <button class='number'>8</button> </li>
<li class='numberli'> <button class='number'>9</button> </li>
<li class='numberli'> <button class='operator'>*</button> </li>
</ul>
<ul>
<li class='numberli'> <button class='number'>4</button> </li>
<li class='numberli'> <button class='number'>5</button> </li>
<li class='numberli'> <button class='number'>6</button> </li>
<li class='numberli'> <button class='operator'>-</button> </li>
</ul>
<ul>
<li class='numberli'> <button class='number'>1</button> </li>
<li class='numberli'> <button class='number'>2</button> </li>
<li class='numberli'> <button class='number'>3</button> </li>
<li class='numberli'> <button class='operator'>+</button> </li>
</ul>
<ul>
<li class='number0li'> <button class='number'>0</button> </li>
<li class='numberli'> <button class='number'>.</button> </li>
<li class='numberli'> <button class='operator'>=</button> </li>
</ul>
</div>
</body>
</html><calculator.css>
/*레이아웃 리셋*/
* {
box-sizing: border-box;
}
body {
/*레이아웃 리셋*/
margin: 0;
padding: 0;
/*계산기 정중앙에 위치*/
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/*계산기 테두리*/
.calculator {
width: 350px;
height: 500px;
/*border: 1px solid blue;*/
display: flex;
flex-direction : column;
background-color: #5c5959;
padding-bottom : 4px
}
.result{
display: flex;
overflow: hidden;
justify-content: flex-end;
align-items: flex-end;
font-size : 40px;
width : 300px;
height : 50px;
line-height : 50px;
padding : 5px;
margin : 15px 5px;
background-color: #5c5959;
color : white;
}
ul{
display: flex;
justify-content: center;
align-items: center;
list-style: none;
padding: 0;
margin : 2px;
flex : 1 1 auto;
/* border: 1px solid red;*/
flex-direction : row;
}
.numberli{
list-style: none;
display: flex;
flex : 1 1 auto;
width : 100%;
height : 100%;
}
.number0li{
width : 43rem;
height : 100%;
list-style: none;
display: flex;
flex : 2 1 auto;
}
.number{
width : 100%;
height : 100%;
background-color: #808080;
border-radius : 1px;
border : #424242;
color : white;
margin : 2px;
font-size: 18px;
}
.operator{
width : 100%;
height : 100%;
background-color: #da9409;
border-radius : 1px;
border : #424242;
color : white;
margin : 2px;
font-size: 18px;
}
.numberac{
width : 100%;
height : 100%;
background-color: #3b3a36;
border-radius : 1px;
border : #424242;
color : white;
margin : 2px;
font-size: 18px;
}