코드스테이츠_2주차_화

윤뿔소·2022년 8월 30일
0

CodeStates

목록 보기
7/47

오늘은 어제 했던 내용 가지고 계산기의 목업을 따로 만드는 과제를 수행했다.

조건

  • 계산기의 내부에는 계산 과정과 결과가 출력되는 display와 입력을 위한 button container가 있어야 합니다.
  • display에는 기본값으로 숫자 0이 출력되어야 합니다.
  • 버튼은 <button> 요소로 작성하고, 내용은 텍스트로 작성합니다.
  • 아래 이미지는 Unit7의 <계산기 구현하기> 과제에서 사용할 계산기 목업입니다. 계산기에 필요한 버튼을 참고하여 계산기를 구성하세요. 또는 구글에서 이미지 검색을 통해 찾은 계산기를 참고하여 자유롭게 구성해도 괜찮습니다.
  • 부모 자식 관계에 유의해서 계산기의 와이어프레임부터 작성해보세요.
    + 프로토 타이핑 툴(파워포인트, figma 등)을 이용하면 좋습니다. 그림판도 괜찮아요.
  • 버튼 요소를 정렬할 때 Flexbox 속성 사용을 권장합니다. 학습한 내용을 바탕으로 부모 요소에 적용해야 하는 속성과 자식 요소에 적용해야 하는 속성을 구분해서 사용해주세요.
  • Flexbox는 처음부터 잘 다루기는 매우 어렵습니다. 포기하지 말고 여러 가지 시도를 하면서 익혀보세요.

만들기

HTML 및 구상

  • 먼저 무엇을 구상할 건지 그림 그려서 보면서 하면 훨씬 좋음
  • 나는 맥 계산기를 기준으로 만듦, 그래서 페어 분과 함께 맥을 보면서 와이어프레임을 만듦, 메인 div 1개 / 결괏값, 입력창 구역 2개 / 숫자와 공식 4줄 이렇게 썼음, +/-는 ^제곱으로 바꿨음
<div class="calculator_container">
  <div class="sec_result">0</div>
  <div class="cont_input">
    <div class="item_input1">
      <button class="element">AC</button>
      <button class="element">+/-</button>
      <button class="element">^</button>
      <button class="element">÷</button>
    </div>
    <div class="item_input2">
      <button class="element">7</button>
      <button class="element">8</button>
      <button class="element">9</button>
      <button class="element">×</button>
    </div>
    <div class="item_input3">
      <button class="element">4</button>
      <button class="element">5</button>
      <button class="element">6</button>
      <button class="element">-</button>
    </div>
    <div class="item_input4">
      <button class="element">1</button>
      <button class="element">2</button>
      <button class="element">3</button>
      <button class="element">+</button>
    </div>
    <div class="item_input5">
      <button class="element">0</button>
      <button class="element">.</button>
      <button class="element">=</button>
    </div>
  </div>
</div>

CSS

  • 먼저 flex로 위치 선정한 다음 꾸며줬음
  1. 부모에 높이, 폭 지정 및 display:flex; 선언 후 입력창은 수직으로 쌓아야하니 flex-direction로 (flex-wrap도 됨!)
  2. 자식에 알맞는 위치 비율 설정(width(height):~ or flex:~ / justify-content, align-item)
  • 그 다음 맞는 디자인 설정
  1. border로 선을 긋는데 안된다면 outline으로 해보기
  2. 맞는 색을 맥의 '컬러 추출기'를 통해 추출한 후 색 입히기
    + nth-child을 이용해 색 구별화
  3. 디테일 - border-radius를 적용: 입력창의 요소에 하면 둥글한 디자인, 아니면 전체 박스에 적용해 포인트로 둥글만 해도 됨
  4. 디테일 - box-shadow를 통해 자연스럽게 만들기(inset이나 shadow 설정으로 입체감 있게 만들 수도 있음)
  5. 폰트 사이즈•패밀리•위치 설정!
  6. :hover,active를 통해 커서를 올리고 누르는 애니메이션 추가
.calculator_container {
  display: flex;
  flex-direction: column;
  width: 350px;
  height: 500px;
  border: 1.5px solid rgb(86, 85, 86);
  border-radius: 21.9px;
  color: white;
  box-shadow: 0 0 30px grey;
  font-family: "nanumgothic", serif;
}
button {
  color: #fff;
  font-family: "nanumgothic", serif;
}
.sec_result {
  display: flex;
  height: 25%;
  justify-content: end;
  align-items: center;
  font-size: 50px;
  background-color: gray;
  border-radius: 20px 20px 0 0;
  padding-right: 5px;
}
.cont_input {
  display: flex;
  flex-direction: column;
  height: 75%;
}
.cont_input > div {
  display: flex;
  height: 100%;
}
.item_input1 > .element {
  background-color: rgb(103, 103, 103);
}
.element {
  display: flex;
  width: 25%;
  border: 0.7px solid black;
  background-color: rgb(128, 128, 128);
  font-size: 30px;
  align-items: center;
  justify-content: center;
}
.element:active {
  background-color: rgb(179, 179, 179);
}
.element:last-child {
  background-color: orange;
}
.element:last-child:active {
  background-color: rgb(192, 129, 45);
}
.item_input5 .element:nth-child(1) {
  width: 50%;
  border-radius: 0 0 0 20px;
}
.item_input5 .element:last-child {
  border-radius: 0 0 20px 0;
}

결과물

profile
코뿔소처럼 저돌적으로

0개의 댓글