html 과 css를 사용해서 간단한 계산기 만들기
1. html markup을 먼저 해보겠습니다.
모든 버튼을 input tag 또는 button tag 를 사용하는게 적절해보이는데,
사용자와 상호작용을 하는 의미가 더 강하다는 느낌이여서 input tag를 사용하겠습니다.
2. form tag
input tag는 form tag와 함께 사용하기 떄문에 form tag를 만들어줍니다.
<form name="forms"></form>3. 계산기 요소를 하나씩 markup 해보기
타입요소가 text인 input 요소부터 타입요소가 button인 input요소를 순차적으로 만들어줍니다.
<input type="text" name="output">
<input type="button" value="C">
<input type="button" value="/">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3"> ...4. class 만들어주기
스타일을 위해서 클래스를 적용시켜 줍니다.
clear를 뜻하는 c, 연산자는 operator, 소수점은 dot 등등 클래스를 만들어줍니다.
<input type="button" class="clear" value="C">
<input type="button" class="operator" value="/">
<input type="button" class="dot" value="."> ...operator class중 "="는 크기가 다르므로 class명에 reult라는 클래스를 하나 더 추가 해줍니다.
<input type="button" class="operator result" value="=">마지막으로 계산기라는 하나의 UI를 구분하기위해 div tag로 전체를 감싸줍니다.
<div class="calculator">
<form name="forms">
<input type="text" name="output" readonly>
<input type="button" class="clear" value="C"> ...
</form>
</div>5. css 만들기
간단하게 기본 스타일시트를 초기화 하겠습니다.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}다음은 배경색상을 지정해줍니다.
body {
background-color: #1f1f1f;
}계산기의 테두리, 배경색, 버튼사이 여백, 크기를 지정합니다.
.calculator {
width: 287px;
border: 1px solid #333;
background-color: #ccc;
padding: 5px;
}계산기를 그리드 방식으로 만들껀데요 레이아웃을 4열로 구성하고 버튼은 가로 세로 65px의 정사각형으로 만들어봅니다.
.calculator form {
display: grid;
grid-template-columns: repeat(4, 65px);
grid-auto-rows: 65px;
grid-gap: 5px;
}계산기의 width를 지정해주면 되는데, 너비를 계산하여 width를 지정해주면 됩니다.
.calculaor에 width 추가!
쪽 테두리 1px + 왼쪽 패딩 5px + 버튼 65px + 그리드갭 5px + 버튼 65px + 그리드갭 5px + 버튼 65px + 그리드갭 5px + 버튼 65px + 오른쪽 패딩 5px + 오른쪽 테두리 1px = 총 287 px
모든 버튼에 테두리, 커서, 폰트크기를 지정 합니다.
.calculator form input {
border: 2px solid #333;
cursor: pointer;
font-size: 19px;
}마우스를 올렸을때 음영이 생기게 합니다.
.calculator form input:hover {
box-shadow: 1px 1px 2px #333;
}클래스별로 색상을 적용합니다.
.calculator form .clear {
background-color: #ed4848;
}
.calculator form .operator {
background-color: orange;
}
.calculator form .dot {
background-color: green;
}크기가 다른 input 박스는 grid coulumn을 이용해서 레이아웃을 배치합니다.
결과창에 text는 오른쪽으로 배치를 시켜주고 여백을 줍니다.
.calculator form input[type="text"] {
grid-column: span 4;
text-align: right;
padding: 0 10px;
}
.calculator form .clear {
grid-column: span 3;
}
.calculator form .result {
grid-column: span 2;
}계산기를 수평, 수직, 중앙에 오도록 지정합니다.
body {
background-color: #1f1f1f;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}여기까지 계산기 퍼블리싱이 완료됐다고 볼수있습니다.
결과창이 input text이므로 입력 또는 수정할수 없게 readonly속성을 추가해줍니다.
마지막으로 버튼을 눌렀을때 output에 보여지도록 속성을 추가하면되는데요,
onclick 속성을 사용해서 만들어보겠습니다.
6. onclick
<input type="button" class="clear" value="C" onclick="document.forms.output.value=''">
<input type="button" class="operator" value="/" onclick="document.forms.output.value+='/'">
<input type="button" value="1" onclick="document.forms.output.value+='1'"> ...
모든 버튼에 onclick 속성을 작성하면되는데 result "="는 클릭하면 결과를 보여줘야하므로 eval() 이라는 함수를 사용합니다.
document.forms.output.value를 실제 수식처럼 계산이 되게해주는 메소드라고 생각하면 됩니다.
<input type="button" class="operator result" value="=" onclick="document.forms.output.value=eval(document.forms.output.value)">여기까지 하면 계산기가 완성이 됩니다!
css로 디자인과 색상 등등 원하시는 스타일링을 해보면 좋을거같습니다.
소감
코딩공부를 하며 이리 저리 헤매고 학원도 다녀보고 인터넷도 뒤져보며 조금씩 하고자하는 방향이 정해진듯합니다. 빙빙돌아 시간도 많이 낭비했고, 그와중 이것저것 배우며 나도모르게 습득한 이론과 실력 도움 될거라 믿습니다.
프론트엔드 개발자를 목표로 공부하고있으며, 기초부터 다지면 좋을거같단 생각에 계산기 만들기를 해보았습니다. 유튜브에 수코딩 강의를 들으며 똑같이 3번을 만들어보았고, 또 다시 헷갈릴수있겠지만 정리하며 공부하니 내것이 된거같습니다. html과 css 뿐만아니라 javascript, react 등등 앞으로 더 배울게 많지만 한스텝 한스텝 나아가며 실력있는 웹개발자가 되겠습니다.
