[💻 코드스테이츠 FE 44기] 부트캠프 - 계산기 목업 만들기(마무리)

JiEun·2023년 2월 17일

계산기 목업 만들기 부트캠프 코드스테이츠 프론트엔드

부트캠프[코드스테이츠 FE 44기]

목록 보기

5/81

✔️ 시작

계산기 목업 만들기를 마무리했다.
실력있는 분들이 많으셔서 어떻게 하면 내 계산기에 차별점을 줄 수 있을까?라고 생각하며 작업을 마무리한 거 같다.
애니메이션 효과와 반응형을 추가해 제출했다.

📍 계산기 목업 만들기

💻 HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>계산기 목업</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <section id="container">
    <div class="calculator">
      <!--결과 화면-->
      <div class="result-display">
        <span class="procedure">500 + 50</span>
        <p class="result">500 </p>
      </div>
       <!--buttons-->
      <div class="buttons">
        <div class="btn-row">
          <button class="operator sm-font">AC</button>
          <button class="operator">±</button>
          <button class="operator sm-font">%</button>
          <button class="operator">÷</button>
        </div>
        <div class="btn-row">
          <button class="num">7</button>
          <button class="num">8</button>
          <button class="num">9</button>
          <button class="operator">×</button>
        </div>
        <div class="btn-row">
          <button class="num">4</button>
          <button class="num">5</button>
          <button class="num">6</button>
          <button class="operator">-</button>
        </div>
        <div class="btn-row">
          <button class="num">1</button>
          <button class="num">2</button>
          <button class="num">3</button>
          <button class="operator">+</button>
        </div>
        <div class="btn-row">
          <button class="num">0</button>
          <button class="num">.</button>
          <button class="btn-result">=</button>
        </div>
      </div>
    </div>
  </section>
</body>
</html>

✔️ 종이에 그리면서 컨텐츠를 어떻게 나눌지 구상했다.
✔️ id, class 이름 설정을 잘해야한다고 생각했다.
✔️ div를 많이 쓰고 싶지 않아서 상황에 맞는 태그를 작성했다.(시멘틱은 생각 보다 어렵다..)

💻 CSS

@font-face {
    font-family: 'GmarketSans';
    font-weight: 300;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.eot?#iefix') format('embedded-opentype'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.woff') format('woff'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.ttf') format("truetype");
    font-display: swap;
} 
@font-face {
    font-family: 'GmarketSans';
    font-weight: 500;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.eot?#iefix') format('embedded-opentype'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.woff') format('woff'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.ttf') format("truetype");
    font-display: swap;
} 
@font-face {
    font-family: 'GmarketSans';
    font-weight: 700;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.eot?#iefix') format('embedded-opentype'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.woff') format('woff'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.ttf') format("truetype");
    font-display: swap;
} 
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0px;
    font-family: 'GmarketSans',sans-serif;
    font-size: 16px;
}
body {
    margin: 0;
    padding: 0;
    background-image: linear-gradient(315deg, #060047, #3A328C); 
}
button {
    cursor: pointer;
}
#container {
    display: flex;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.calculator {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 393px;
    height: 698px;
    background-color: #150E60 ;
    border-radius: 30px;   
    padding: 40px;
    box-shadow: 8px 8px 50px 0 rgba(5, 0, 69, 0.8),inset 2px 2px 0 0 #3A328C, inset -2px -2px 0 0 #120c57;
    transition: 0.3s;
    animation-play-state: paused;
}
.calculator:hover {
    animation: line-st ease-in 3s infinite;
}
@keyframes line-st {
    0%{
        box-shadow: 5px 5px 40px 0 rgba(5, 0, 69, 0.8),inset 2px 2px 0 0 #3A328C, inset -2px -2px 0 0 #0e0752;
    }
    25%{
        box-shadow: 5px 5px 40px 0 rgba(5, 0, 69, 0.8),inset -2px 2px 0 0 #3A328C, inset -2px 2px 0 0 #0e0752;
    }
    65%{
        box-shadow: 5px 5px 40px 0 rgba(5, 0, 69, 0.8),inset 2px -2px 0 0 #3A328C, inset 2px -2px 0 0 #0e0752;
    }
    100%{
        box-shadow: 5px 5px 40px 0 rgba(5, 0, 69, 0.8),inset 2px 2px 0 0 #3A328C, inset -2px -2px 0 0 #0e0752;
    }
}
.result-display, .buttons {
    width: 100%;
}
.result-display {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    flex-grow: 1;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 2px solid #3A328C;
}
.result-display .procedure {
    color: #3A328C;
    font-size: 1.15rem;
    padding-bottom: 10px;
}
.result-display .result {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
}
.buttons {
    flex-grow: 3;
    display: flex;
    flex-direction: column;
}
.buttons .btn-row {
    display: flex;
    flex-grow: 1;
    align-items: center;
    gap: 8px;
}
.buttons .btn-row button {
    position: relative;
    flex: 1 70px;
    height: 75px;
    line-height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 1.5rem;
    transition: 0.3s;
    z-index: 1;
    overflow: hidden;
}
.buttons .btn-row button::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 100px;
    transition: 0.3s;
    z-index: -1;
    transform: scale(0);
}
.buttons .btn-row button:hover {
    box-shadow: 0px 10px 20px 0 rgba(5, 0, 69, 0.8);
    transform: translateY(-3px);
}
.buttons .btn-row button:hover::after {
    background-color: rgba(0, 0, 0, 0.11);
    transform: scale(1);
}
.buttons .btn-row button:active {
    border: 2px solid #ffffff08;
    box-shadow: inset 3px 3px 0 0 rgba(0,0,0, 0.3);
    box-shadow: none;
    transform: translateY(0);
}
.buttons .btn-row  .operator { 
 background-color: #3A328C;
}
.buttons .btn-row .num {
    background-color: #060147;
}
.buttons .btn-row  .sm-font {
    font-size: 1rem;
}
.buttons .btn-row:last-child .btn-result { 
    flex-grow: 100;
    border-radius: 50px;
    background-color: #DC005E;
}

@media (max-width:768px) {
    .calculator {
        width: 100%;
        height: 100vh;
        border-radius: 0;
        box-shadow: none;
    }
    .calculator:hover {
        animation-play-state: paused;
        animation: none;
        box-shadow: none;
    }
    .result-display {
        border-bottom: 0;
        margin-bottom: 0;
    }
    .result-display .result {
        font-size: 3.1rem;
    }
    .buttons .btn-row button {
        flex: 1;
        height: 100%;
        border-radius: 0%;
    }
    .buttons .btn-row {
        gap: 0;
    }
    .buttons .btn-row:last-child .btn-result {
        border-radius: 0;
        flex-grow: 0.665;
    }
    .buttons .btn-row button:hover {
        box-shadow: 0;
        transform: translateY(0);
        box-shadow: 0 0 0 0;
    }
    .buttons .btn-row button:hover::after {
        transform: scale(1);
        border-radius: 0;
    }
    .buttons .btn-row button:active {
        transform: translateY(1px);
        border: 0;
        box-shadow: inset 3px 3px 5px 0 rgba(0,0,0, 0.1),inset -3px -3px 5px 0 rgba(0,0,0, 0.1);
    }   
}

✔️ 단색 배경 대신 그라데이션을 넣어주었다.
✔️ 계산기 테두리를 그라데이션으로 주고 싶었는데 이후 padding요소 추가시 문제가 있어 box-shadow로 변경해 주었다.
✔️ 계산기에 마우스 hover 될 경우 테두리에 animation요소를 넣어주었다.
✔️ @media쿼리를 이용해 반응형으로 작업했다.

✔️ 반응형 작업하면서 버튼을 둥글게 표현하고 싶었는데 생각보다 어려워 네모나게 수정했다. (다음에 다시 수정해 보자.)