[HTML/CSS] 계산기 목업

디딩·2022년 10월 28일
0

Section

목록 보기
8/18
post-thumbnail

🕖 DAY +8 / 2022. 10. 28-31

SEB FE / Section1 / Unit6 / HTML/CSS 활용


📌 Today I Learned

  • HTML로 계산기에 필요한 구조를 짤 수 있다.
  • 숫자 버튼, 기능 버튼을 Flexbox로 각각 배치할 수 있다.
  • 검색을 통해 다양한 CSS 속성을 적용할 수 있다.

💬 HTML로 계산기 구조 짜기

가로로 된 계산기를 만들고 싶었다. 레트로풍의 심플하면서도 간단한... 군더더기 없는 계산기를.

래퍼런스 계산기를 참조하여 만들었다. 어줍잖게나마 여기서 클래스명까지 먹인다면?

와이어프레임을 이렇게 작성하는 것이 맞을지는 모르겠지만, 아무튼. 가로 5배열 세로 4배열로 연산자와 숫자를 넣고 싶었다.

내가 작성한 HTML 

<body>
    <div class="calculator">
        <div class="header">
            <div class="input">0</div>
        </div>

        <div class="number">
            <div class="keys">
                <div class="icon h">/</div>
                <div class="icon h">x</div>
                <div class="icon h">-</div>
                <div class="icon h">=</div>
                <div class="icon h">%</div>
            </div>
            <div class="keys">
                <div class="icon h">1</div>
                <div class="icon h">2</div>
                <div class="icon h">3</div>
                <div class="icon h">4</div>
                <div class="icon h">5</div>
            </div>
            <div class="keys">
                <div class="icon h">6</div>
                <div class="icon h">7</div>
                <div class="icon h">8</div>
                <div class="icon h">9</div>
                <div class="icon h">0</div>
            </div>
            <div class="keys">
                <div class="icon h90">Enter</div>
                <div class="icon h10">.</div>
            </div>            
        </div>
    </div>
</body>

레트로함이 기준이었기 때문에 폰트를 일단 새로 찾아서 적용시켰다. 눈누에 들어가서 픽셀 스타일의 폰트를 찾아 적용시켰다.

...

@font-face {
  font-family: 'DungGeunMo';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/DungGeunMo.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

...

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #48423c75;
  font-family: 'DungGeunMo', Helvetica, sans-serif;
  color: #ffffff;
}
...

레트로함을 살리기 위해 인라인을 주고, 볼륨감을 살리려고 했다.

    button {
    box-sizing: border-box;
    margin: 0.15rem;
    font-size: 0.05rem;
    background: linear-gradient(to top, #857F7F, #9f9a99); /* 라인 그라데이션 사용 방법 */
    box-shadow: 0.5px 0.5px 1px #48423c;
    outline: 0.05rem solid #9f9a99;  /* 이너 라인 넣는 방법 */
    outline-offset: -1px; /* 이너 라인 넣는 방법 */
    border-radius: 1rem;
    flex-grow: 1;
    width: 20%;
    transition: transform .2s ease;  /* 트랜지션을 사용했다 */
    }

    button:hover {
      transform: scale(1.07);  /* 1.07 사이즈 만큼 커지도록 */
      color: rgb(255, 255, 255);
      background: linear-gradient(to top, #857F7F, #c1bcbb);
    }

    button:active {
      color: #bdb9b8;
      transform: scale(1);  /* 원래 사이즈로 돌아오게 */
      background: linear-gradient(to top, #7b7676, #807c7b);
    }

💬 결과물

참조



👀 돌아보기

모자란 점이 많다, 아직까지. flexbox를 사용했지만 제대로 사용한 것인지는 모르겠다. 조금 더 단순하게 만들 수 있을 듯도 하다. flex의 부모 요소와 자식 요소에 쓰이는 정렬 방식을 조금 더 깨달을 필요가 있을 듯 하다. 그러나 css로 이 정도까지 구현할 수 있다니? 새로운 사실을 알았다. 욕심이 나는 분야다. 구글링을 통해 그라데이션과 볼륨감 살리는 방법을 적용할 수 있었다.

profile
디딩
무사와요... 열공햐요...
이전 포스트

[HTML/CSS] Flexbox

다음 포스트

[HTML/CSS] @계산기 구현

0개의 댓글