//js
<div className="wrapper">
      <div className="calc-result-display"></div>
      <div className="calc">
        <button className="calc-oper-btn" ={() => setOperBtn("÷")}>
          ÷
        </button>
        <button className="calc-oper-btn" ={() => setOperBtn("X")}>
          X
        </button>
        <button className="calc-oper-btn" ={() => setOperBtn("-")}>
          -
        </button>
        <button className="calc-oper-btn" ={() => setOperBtn("+")}>
          +
        </button>
        <button className="calc-oper-btn" ={allClear}>
          AC
        </button>
        <button className="calc-oper-btn" ={() => setOperBtn("")}>
          empty
        </button>
        <button className="calc-num-btn" ={() => setNumBtn("7")}>
          7
        </button>
        <button className="calc-num-btn" ={() => setNumBtn("8")}>
          8
        </button>
        <button className="calc-num-btn" ={() => setNumBtn("9")}>
          9
        </button>
        <button className="calc-oper-btn" ={() => setOperBtn("")}>
          empty
        </button>
        <button className="calc-oper-btn" ={() => setOperBtn("")}>
          empty
        </button>
        <button className="calc-num-btn" ={() => setNumBtn("4")}>
          4
        </button>
        <button className="calc-num-btn" ={() => setNumBtn("5")}>
          5
        </button>
        <button className="calc-num-btn" ={() => setNumBtn("6")}>
          6
        </button>
        <button className="calc-oper-btn" ={() => setOperBtn("")}>
          empty
        </button>
        <button className="calc-oper-btn" ={() => setOperBtn("")}>
          empty
        </button>
        <button className="calc-num-btn" ={() => setNumBtn("1")}>
          1
        </button>
        <button className="calc-num-btn" ={() => setNumBtn("2")}>
          2
        </button>
        <button className="calc-num-btn" ={() => setNumBtn("3")}>
          3
        </button>
        <button className="calc-oper-btn" ={() => setOperBtn("")}>
          empty
        </button>
        <button className="calc-oper-btn" ={() => setOperBtn("")}>
          empty
        </button>
        <button className="calc-num-btn" ={() => setNumBtn(".")}>
          .
        </button>
        <button className="calc-num-btn" ={() => setNumBtn("0")}>
          0
        </button>
        <button className="calc-oper-btn" ={() => setOperBtn("")}>
          &lt;
        </button>
        <button className="calc-result-btn" ={() => setOperBtn("=")}>
          =
        </button>
      </div>
    </div>

//scss

@mixin calc-btn-layout($bg-color:#7A8180, $color:white) {
  height:20vw;
  margin:0.1em;
  border-radius: 10%;
  border:none;
  background-color:$bg-color;
  color:$color;

}
.wrapper {
  width:100vw;
  height:100vh;
}
.calc-result-display{
 
  top:10vh;
  width:100%;
  height:20vh;
  background-color:#dbe1dc;
}
.calc {
 
  bottom:0;
  width: 100%;
  height: 100vw;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1f);

    .calc-num-btn {
      @include calc-btn-layout($bg-color:#A5CBAA, $color:black);

    }
    .calc-oper-btn {
      @include calc-btn-layout();
    }

    .calc-result-btn{
      @include calc-btn-layout();
    }
  }

5X5 계산기가 있을때
버튼 하나의 너비를 20vw 먹이면
어떤 폰이든 정사각형 유지되는데

계산기를 랜드스케이프처럼 쓸 것도 아니면

미디어쿼리 안 쓰고 이렇게 해도 되나

7cea8372b1826bf13aed81e7459f3433b9070546d2f31b5042b05c18