[1주차] 💻🏃‍♂️ - 계산기 목업

어제와 오늘 2일에 걸쳐 첫 Pair과제를 통해 계산기 목업을 만드는 수업을 하였다. 

어제는 졸업식때문에 Pair와의 만남을 못가지고 오늘 2시까지 Pair와 함께 많은 정보를

나누며 계산기 목업을 만들어나갔다. 처음이여서 그런지 많이 서툴고 많이 어려운부분이였다. 

---

내가 목표로한 계산기는 아이폰 계산기를 생각을 하였다. 

 

⭐️ 와이어프레임

⭐️ 결과물

 

css 

*{

padding: 0;

margin: 0;

box-sizing: border-box;

 

}

body{

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

.calculator{

display: flex;

flex-direction: column;

width: 270px;

height: 500px;

background-color: gray;

 

 

}

#calculator-text{

height: 250px;

color: white;

display: flex;

justify-content: flex-end;

align-items: flex-end;

font-size: 50px;

padding-right: 27px;

}

#calculator-area{

height: 350px;

display: flex;

flex-direction: column;

 

}

.button-area{

flex-grow: 1;

display: flex;

justify-content: center;

align-items: center;

}

button{

appearance: none;

border: none;

width: 70px;

height: 70px;

font-weight: 100;

margin: 0;

}

button:hover{

cursor: pointer;

}

.extra-operator{

font-size: 25px;

background-color: #d1d1d1;

}

.extra-operator:hover{

background-color: #ececec;

}

.operator{

font-size: 35px;

background-color: #f69906;

color: white;

}

.operator:hover{

background-color: #f3c274;

}

.num{

 

font-size: 30px;

background-color: gray;

color: white;

 

}

.num:hover{

background-color: #ececec ;

}

#zero{

width: 140px;

text-align: center;

}

 

---

이미 완성된 결과물을 정확히 따라한다는 것이 정말 어렵다는 것을 느꼈다.  많은 정보들을 찾아가며 공부를 해야겠다.