Practice/Examples
Calculator(CSS+Script)
by Dev_Mook
2020. 3. 17.
출처 : Youtube > Online Tutorials 채널
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #091921;
}
.calculator{
position: relative;
display: grid;
}
.calculator .value{
grid-column: span 4;
height: 100px;
text-align: right;
border: none;
outline: none;
padding: 10px;
font-size: 18px;
}
.calculator span{
display: grid;
width: 66px;
height: 60px;
color: #fff;
background: #0c2835;
place-items: center;
border: 1px solid rgba(0,0,0,.1);
}
.calculator span:active{
background: #74ff3d;
color: #111;
}
.calculator span.clear{
grid-column : span 2;
width: 132px;
background: #ff3077;
}
.calculator span.plus{
grid-row: span 2;
height: 120px;
}
.calculator span.equal{
background: #03b1ff;
}
#source{
color: gray;
font-size: 13px;
margin-top : 50px;
}
