코드스테이츠

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

2023. 2. 17. 23:33
목차
  1. ⭐️ 와이어프레임
  2. ⭐️ 결과물

어제와 오늘 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;
}

 


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

'코드스테이츠' 카테고리의 다른 글

[2주차] 💻🏃‍♂️ - 조건문 코플렛 풀이  (0) 2023.02.22
[2주차] 💻🏃‍♂️ - 조건문, 반복문  (0) 2023.02.21
[1주차] 💻🏃‍♂️ - Flexbox (자식요소 속성)  (0) 2023.02.17
[1주차] 💻🏃‍♂️ - Flexbox (부모요소 속성)  (0) 2023.02.17
[1주차] 💻🏃‍♂️ - 와이어프레임, Flexbox  (0) 2023.02.16
  1. ⭐️ 와이어프레임
  2. ⭐️ 결과물
'코드스테이츠' 카테고리의 다른 글
  • [2주차] 💻🏃‍♂️ - 조건문 코플렛 풀이
  • [2주차] 💻🏃‍♂️ - 조건문, 반복문
  • [1주차] 💻🏃‍♂️ - Flexbox (자식요소 속성)
  • [1주차] 💻🏃‍♂️ - Flexbox (부모요소 속성)
형일
형일
코딩일지형일 님의 블로그입니다.
형일
코딩일지
형일
전체
오늘
어제
  • 분류 전체보기 (53)
    • 코드스테이츠 (20)
    • JavaScript (8)
    • React (10)
    • WEB (5)
    • Git (3)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

최근 댓글

최근 글

hELLO · Designed By 정상우.
형일
[1주차] 💻🏃‍♂️ - 계산기 목업
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.