-
결과 화면 <!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>Document</title> <link href="./style.css" rel="stylesheet"> </head> <body> <div class="calculater"> <form name="forms"> <input type="text" name="output" readonly> <input type="button" class="clear" value="C" onclick="document.forms.output.value=''"> <input type="button" 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>NEW
onclick=" document.forms.output.value+='.' "
클릭하면 실행됨.
onclick=" document.forms.output.value = eval (document.forms.output.value) "
결과 값이 나온다.
value 값을 넣어두면 그대로 기능 활용이 가능하다
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ background-color: #1f1f1f; display: flex; justify-content: center; align-items: center; height: 100vh; } .calculater{ width: 287px; border: 1px solid #000; background-color: #ccc; padding: 5px; border-radius: 10px; } .calculater form{ display: grid; grid-template-columns: repeat(4, 65px); grid-auto-rows: 65px; grid-gap: 5px; } .calculater form input{ border: 1px solid #000; cursor: pointer; font-size: 19px; border-radius: 7px; } .calculater form input:hover{ box-shadow: 1px 1px 2px #3d3d3d; } .calculater form .clear{ background-color: rgb(255, 111, 111); } .calculater form .operator{ background-color: rgb(180, 255, 137); } .calculater form .dot{ background-color: rgb(160, 190, 255); } .calculater form input[type='text']{ grid-column: span 4; text-align: right; padding: 0 10px; } .calculater form .clear{ grid-column: span 3; } .calculater form .result{ grid-column: span 2; }NEW
.calculater form{
display: grid;
grid-template-columns: repeat(4, 65px); // 65px * 4열
grid-auto-rows: 65px;
grid-gap: 5px;
}
.calculater form .clear{
grid-column: span 3;
}
grid-column: span 3; <- 3칸을 차지한다. 3열이지만 보이는 건 가로 3칸으로도 이해 0
'프로그래밍 > TOY' 카테고리의 다른 글
호그와트 마법사 적성 검사 (2) 2021.06.13 댓글
