vanillaJS를 활용한 계산기 - part2

각 버튼에 대한 핸들러 구현

각 버튼에 대한 핸들러를 구현할 때 생각보다 고려할점이 많았다.

  • 연산자를 연속으로 클릭할 경우를 고려

  • decimal을 연속으로 클릭할 경우 고려

  • 아이폰 계산기 방식이기 때문에 처음으로 오는 연산자 이후의 연산자 입력시 계산하는 경우 고려

  • 숫자 연산자 숫자 순서로 오게끔 고려

css 적용

grid, button 가상요소, shadow를 해보고 싶어 학습 후 적용해보았다.

결과물

새로 알게된 내용

HTML, BODY 100%

  <head>
    <style>
      .container {
        width: 100%;
        height: 100%;
        background: red;
      }
    </style>
  </head>
  <body>
    <div class="container">Hello</div>
  </body>

위와 같이 height: 100%는 생각처럼 동작하지 않는다.
이럴 경우 body, html에 height: 100%를 주면 해결된다. body만 하지않는 이유는 body 또한 부모의 html 기준으로 100%를 하기 때문에 html까지 적용시켜줘야한다.

  <head>
    <style>
       html, body {
        height: 100%;
       }
      .container {
        width: 100%;
        height: 100%;
        background: red;
      }
    </style>
  </head>
  <body>
    <div class="container">Hello</div>
  </body>

하지만 html과 body에 height: 100%를 적용하여도 가로, 세로에 여백이 생긴다.
이는 body 태그의 기본 margin 때문이다. body 뿐만 아니라 몇몇의 태그에는 기본적인 default값이 적용되어 있기 때문에 태그의 기본값을 초기화 해주는 css reset이 존재한다.

우리는 이 문제를 해결하기 위해 아래 코드를 추가해주면 된다.

body {
	margin: 0;
}

height: 100%이외에도 100vh를 이용해서 해결할 수 있는 방법이 존재한다.

  • %는 부모 요소의 길이에 영향
  • vw, vh는 뷰포트의 길이에 영향

:active, :focus

:active는 사용자가 활성화한 요소(버튼 etc.)를 나타낸다.
(즉, 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미)
:focus는 사용자가 양식의 입력 칸 등 포커스를 받은 요소를 나타낸다.(

아래코드를 통해 계산기에서 버튼을 포커스 시 또는 active시에 애니메이션을 주기위해 사용하였다.

button {
  transition: filter .3s;
}

button:active,
button:focus {
  filter: brightness(140%);
}

table요소가 아닌 grid속성 이용


6 x 4 grid를 만든 후 equal sign(result) 셀과 0 button에 대한 셀을 다음과 같은 코드를 통해 병합하였다.

.calcalator-buttons {
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
}


.result {
    grid-row: 3 / span 3;
    grid-column: 4 / 5;
}

button[value="0"] {
    grid-row: 5 / 6;
    grid-column: 1 / span 2;
}

equal sign(result)를 예시로 설명해보면
grid-row: 3 / span 3는 row를 기준으로 3번째 부터 3개의 셀을 병합한다는 의미고 이는 곧 grid-row: 3 / 6으로도 쓸 수 있다.
그리고 grid-column: 4 / 5는 column을 기준으로 4번째 부터 5번째까지의 셀을 병합한다는 의미이다. (여기서 column은 기존의 한칸이랑 같다고 생각하며 생략해주면 의도와 다른 방향으로 셀이 이동한다.)


🎈 해당 관련 코드는 github에서 참조할 수 있다.

Reference

사내 도구로 milkcoa로 메모 앱을 제작한 후 원격으로 사용할 수 있는 조직이 되었다(전편)
[BZOJ3531] [Sdoi 2014] 여행 나무 사슬 분할.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage