자바스크립트를 이론 위주로 공부하여 조금씩 흥미를 잃고 있던 무렵, 뭔가를 만들어 보기로 결심했다. 기본적인 것 같으면서도 배울 게 많을 거라 생각해서 계산기를 만들어 보기로 했다.
백지에서 만들기는 어려울 것 같아 유튜브에 검색을 했고, 정말 많은 튜토리얼들이 있었지만 그중 Web Dev Simplified의 영상으로 골랐다. 예전에 Todo List를 따라 만든 적이 있는데 괜찮았기 때문이다. (이것도 나중에 포스팅으로 다뤄 볼 예정) 카일이 설명을 해 주는데, 차분하면서도 물 흐르는 듯한 막힘없는 설명이 특징이다.
이 포스팅은 한 번에 하려다가, 자바스크립트 부분이 좀 길어질 것 같아서 두 편으로 나누었다.
HTML
<body>
<h1 class="title">JavaScript Calculator</h1>
<div class="calculator-grid">
<div class="output">
<div data-previous-operand class="previous-operand"></div>
<div data-current-operand class="current-operand"></div>
</div>
<button data-all-clear class="span-two">AC</button>
<button data-delete>DEL</button>
<button data-operation>÷</button>
<button data-number>1</button>
<button data-number>2</button>
<button data-number>3</button>
<button data-operation>×</button>
<button data-number>4</button>
<button data-number>5</button>
<button data-number>6</button>
<button data-operation>+</button>
<button data-number>7</button>
<button data-number>8</button>
<button data-number>9</button>
<button data-operation>-</button>
<button data-number>.</button>
<button data-number>0</button>
<button data-equals class="span-two">=</button>
</div>
</body>HTML 부분은 그다지 복잡하지 않다.
1. 먼저 그리드로 전체적인 계산기 모양을 만들 것이기 때문에 calculator-grid라고 클래스 이름을 주어 가장 상위에 놓는다.
2. 출력의 결과가 나올 부분인데, previous-operand 부분엔 과거에 입력한 연산들이, current-operand에는 지금 입력한 연산들이 들어갈 것이다.
3. 그 외에는 숫자, All Clear Button, Delete Button, +, -, *, / = 연산 버튼을 만든다. 이때, 클래스 대신에 data attribute를 부여하였다.
4. 그리드에서 두 칸을 차지해야 하는 요소는 span-two라는 클래스를 추가로 부여하였다.
CSS
.calculator-grid {
display: grid;
justify-content: center;
align-content: center;
min-height: 80vh;
grid-template-columns: repeat(4, 100px);
grid-template-rows: minmax(140px, auto) repeat(5, 100px);
}
.span-two {
grid-column: span 2;
}
.output {
grid-column: 1 / -1;
background-color: rgba(0, 0, 0, 0.75);
display: flex;
align-items: flex-end;
justify-content: space-around;
flex-direction: column;
padding: 10px;
word-wrap: break-word;
word-break: break-all;
}CSS 부분은 전부 다 가져오기엔 불필요하게 길어서 계산기를 만들 때 핵심인 부분만 소개하려고 한다. 아무래도 계산기에서의 CSS는 Grid를 잘 쓰는 것이 가장 중요하다.
1. grid-template-columns로 4열을 만들고, grid-template-rows로 5행을 만들어 준다.
2. 2칸을 차지해야 하는 버튼일 경우 HTML에서 span-two라는 클래스를 부여했는데, 여기서 grid-column: span 2를 주어서 두 칸을 차지할 수 있도록 한다.
3. 또한 결과가 출력되는 부분인 output 부분에는 grid-column: 1 / -1을 해 주어서 4개의 column을 모두 차지할 수 있도록 해 준다.
4. word-wrap: break-word, word-break: break-all을 이용해 숫자들이 많아질 때 overflow를 방지하고, 한 숫자씩 끊어질 수 있도록 한다.
HTML과 CSS의 간단한 핵심만 다루어 보았다. 이제 자바스크립트로 계산기를 계산기답게 만들어 보자!
Reference : https://youtu.be/j59qQ7YWLxw
'Projects' 카테고리의 다른 글
| (약간은 험난했던) Next.js 13에 MSW 도입기 (2) | 2023.08.21 |
|---|---|
| Christmas Hackathon🎄크리스마스에 14시간 동안 해커톤을 한 사람이 있다? (1) | 2022.12.27 |
| [JavaScript30] Day 1 : JavaScript Drum Kit (0) | 2021.10.07 |
| [JavaScript30] 바닐라 자바스크립트 30일 코딩 챌린지 (0) | 2021.10.04 |
| 자바스크립트로 계산기 만들기 2편 : JavaScript (0) | 2021.09.30 |