자바스크립트로 계산기 만들기 1편 : HTML & CSS

자바스크립트를 이론 위주로 공부하여 조금씩 흥미를 잃고 있던 무렵, 뭔가를 만들어 보기로 결심했다. 기본적인 것 같으면서도 배울 게 많을 거라 생각해서 계산기를 만들어 보기로 했다.

백지에서 만들기는 어려울 것 같아 유튜브에 검색을 했고, 정말 많은 튜토리얼들이 있었지만 그중 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

Jaypedia