도입
안녕하세요! 이번에는 간단한 사칙연산이 가능한 웹에서 동작하는 계산기를 만들려고 합니다
HTML, CSS, JS를 이용하여 만들었고 동작 방식은 Mac용 계산기를 참고하여 만들었습니다!
소수점을 포함한 간단한 사칙연산이 가능하고 초기화, 끝 자리 지우기 기능이 있습니다!
아래는 최종 형태 작동 영상이며,
이번 포스트에서는 HTML, CSS을 이용한 디자인만 다루고, 다음 편에서 JS를 이용한 기능을 다루도록 하겠습니다.
완성된 형태
HTML
<div class="wrapper">
<div class="calculator">
<div class="display">
<input type="text" id="display" value="0" disabled="true">
</div>
<div>
<input type="button" value="AC">
<input type="button" value="DE">
<input type="button" value=".">
<input type="button" id="operator" value="/">
</div>
<div>
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<input type="button" id="operator" value="*">
</div>
<div>
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" id="operator" value="-">
</div>
<div>
<input type="button" value="3">
<input type="button" value="2">
<input type="button" value="1">
<input type="button" id="operator" value="+">
</div>
<div>
<input type="button" value="00">
<input type="button" value="0">
<input type="button" id="operator" value="=" class="equal">
</div>
</div>
</div>
HTML 구조입니다.
<input type="text" id="display" value="0" disabled="true">해당 input은식이나 결괏값을 보여주는 용도이므로 사용자가 입력할 필요 없요가 없습니다.
그러므로 disabled="true"속성을 적용하여 비활성화시켰습니다.
div.wrapper: 화면 전체를 감싸는 배경
div.calculator: 계산기를 감싸는 박스
div.display: 결괏값을 보여주는 박스
id="operator"를 적용시킨 input은 js 단계에서 설명하겠습니다.
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}먼저 전체 선택자 *를 이용하여 모든 요소의 margin, padding을 없애고 시작하였습니다.
box-sizing: border-box를 주어 테두리를 기준으로 박스의 크기를 계산하겠습니다.
user-select: none을 주어 텍스트를 드래그나 더블클릭으로 지정할 수 없도록 하였습니다.
.wrapper {
width: 100vw;
height: 100vh;
background-color: #6a718d;
display: flex;
align-items: center;
justify-content: center;
}width: 100vw, height: 100vh로 설정하여 현재 브라우저 창에 맞춰 요소의 크기를 100%로 설정하였습니다.
background-color: #6a718d를 주어 구현 영상에서 보인 남색 계열로 배경색을 지정하였습니다.
display: flex를 주고 align-items(세로): center, justify-content(가로): center로 계산기를 중앙에 배치시켰습니다.
.calculator {
background-color: #374259;
padding: 20px;
border-radius: 10px;
}background-color: #374259를 주어 계산기와 배경을 구분하였습니다.
padding, border-radius 속성으로 계산기 박스를 디자인하였습니다.
.calculator input {
border: 0;
outline: 0;
width: 60px;
height: 60px;
border-radius: 10px;
box-shadow: -8px -8px 20px rgba(255, 255, 255, 0.1), 5px 5px 10px rgba(255, 255, 255, 0.2);
background: transparent;
font-size: 20px;
cursor: pointer;
margin: 10px;
color: white;
}border: 0, outline: 0으로 테두리를 없앴습니다.
width: 60px, height: 60px로 버튼을 적당한 크기로 설정하였습니다.
border-radius, box-shadow, background, font-size, color 속성으로 버튼을 디자인하였습니다.
background: transaprenr는 배경을 투명하게 설정하는 속성입니다.
cursor: pointer는 마우스를 올릴 시 커서를 pointer 모양으로 바뀌도록 하였습니다.
margin으로 버튼마다 적당한 간격을 두었습니다
.calculator input:active {
background-color: #4f5664;;
}~:active는 활성화된 요소를 가리킵니다. `활성`이란 보통 마우스 버튼을 누르는 순간부터 떼는 순간까지를 말합니다.
.calculator input 즉 버튼을 눌렸을 때에 다른 색의 background-color를 주어 클릭 효과를 주었습니다.
.calculator .display {
display: flex;
margin: 20px 0;
}display: flex를 주었고
margin: 20px 0으로 위, 아래에 20px만큼 간격을 두었습니다.
.calculator .display input {
text-align: right;
flex: 1;
font-size: 45px;
box-shadow: none;
color: rgba(255, 255, 255, 0.8);
}text-algin: right으로 input내의 value를 오른쪽으로 정렬시켰습니다.
flex: 1로 input이 가질 수 있는 크기를 모두 가지도록 하였습니다.
box-shadow, color로 위에서 정의한 input의 디자인을 재정의 하여 디자인하였습니다.
.calculator input.equal {
width: 140px;
}구현 영상처럼 `=` 버튼은 버튼 2개만큼의 너비를 가져야 하므로
60 + 60 + 10(버튼 사이마진) x 2 = 160px만큼의 너비를 지정해주었습니다.
.calculator input.active {
box-shadow: 0px 0px 10px black;
}구현 영상에서 볼 수 있듯이 사칙연산 기호를 활성화시킬 때 검은색 그림자가 생깁니다.
이에 해당하는 css이며, 현재는 쓰지 않고 JS 단계에서 쓸 것입니다.
전체 css 코드
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}
.wrapper {
width: 100vw;
height: 100vh;
background-color: #6a718d;
display: flex;
align-items: center;
justify-content: center;
}
.calculator {
background-color: #374259;
padding: 20px;
border-radius: 10px;
}
.calculator input {
border: 0;
outline: 0;
width: 60px;
height: 60px;
border-radius: 10px;
box-shadow: -8px -8px 20px rgba(255, 255, 255, 0.1), 5px 5px 10px rgba(255, 255, 255, 0.2);
background: transparent;
font-size: 20px;
cursor: pointer;
margin: 10px;
color: white;
}
.calculator input:active {
background-color: #4f5664;;
}
.calculator .display {
display: flex;
margin: 20px 0;
}
.calculator .display input {
text-align: right;
flex: 1;
font-size: 45px;
box-shadow: none;
color: rgba(255, 255, 255, 0.8);
}
.calculator input.equal {
width: 140px;
}
.calculator input.active {
box-shadow: 0px 0px 10px black;
}완성된 모습
마침
지금까지 계산기의 디자인을 완성시켜 보았습니다.
오늘 한 것을 토대로 취향대로 계산기 디자인을 꾸며보면 실력에 많은 도움이 될 겁니다 !
다음 포스트에서는 JS로 계산기의 기능을 완성시키겠습니다.
글에 오타나 잘못된 부분이 있다면 언제든 댓글로 알려주세요!
또한 궁금한 점이 있거나 추가로 궁금한 내용이 있다면 언제든 질문해주세요 !_!
댓글