🏁 계산기 만들기(1/3)

🏁 계산기 만들기(1)-목업

• HTML 과 CSS로 계산기 레이아웃을 구성
• flex 이용해서 만들기

와이어프레임

와이어프레임을 짜는데 예시에 나와있는건 row 형태로 그룹이 지어져있었는데
(ex. AC, <-, , 7, 8, 9, + , 4, 5, 6 -, ...)

페어분이랑 나는 뭔가 성격에 맞게 그룹을 짓고싶었다.
그래서 생각한 그룹이 보여주는 영역과 버튼영역을 나누고
버튼 영역에 지우는 영역 , 숫자 영역 , 연산자 영역 이렇게 나눴다.

그런데 flex 로 1안처럼 정렬이 가능할까..? 하는 생각이 들어서
2안에 div 를 한번 더 묶는 버전을 생각해둠
최선을 다해보고 안되면 2안으로 가자... 라는 생각이였는데

---

flex 사용해보기

와이어프레임때 미리 class 이름과 div 그룹을 정했더니
HTML은 뚝딱이였다.
우선 계산기가 화면에서 가운데 배치되게
body 에 display:flex 와 justify-content, align-items:center 를 주고, height에 100vh 주기
이제 찐계산기 시작이다.

• .calculator
display 와 btn 의 부모인 calculator 에 display:flex 를 주고 고정값을 가지게 height 와 width 를 지정, 세로 정렬이라 direction:column 으로 주고 align-items: stretch 넣어서 길게 늘어지게 설정.
• .display
  처음에는 0만 보이게 하려다 과정과 결과를 넣으면 좋을 것 같아서 <p> 추가
  그래서 얘도 p 들의 부모니까 display:flex 넣어주고
  p 들이 세로정렬에 아래에서 부터 보여질거니까 flex-direction:column; justify-content:flex-end;
  그리고 밑에 배치된 btn 의 grow값을 1로 정할 계획이기 때문에
  얘의 flex-basis는 기본값인 35%를 잡았다.(위에 .calculator에서 column으로 설정했기때문에 basis가 width 가 아닌 height로 적용되는 것 같다)
• .btn
  얘의 높이값은 나머지공간을 다 먹게 flex-grow:1 을 넣어주고 자식요소에 clear 와 number, symbol 이 들어가기때문에 display:flex 를 넣어준다.
  자식요소들을 세로 정렬하기 위해 flex-direction:colum 과 줄바꿈 되게 하기 위해 wrap 도 추가 (📍여기서 시행착오 있음-1)
  
  
• .clear, .number 의 width 는 75%
  이렇게 width 를 지정해 줘야 symbol 이 옆에 나란히 붙을 수 있다.
• .clear의 자식 요소인 AC 와 ← 버튼을 정렬 해주기 위해 display:flex 를 넣고, .btn 영역의 높이를 100으로 봤을때 .clear 영역은 20만 먹기 때문에 flex-basis:20% 를 기본값으로 추가해준다.(버튼의 row 는 총 5줄이니까 100/5=20))
• .number 의 자식 요소들을 정렬하기 위해 display:flex 를, 밑에서부터 시작하기 위해 flex-wrap: wrap-reverse 를 추가해주고 남은 공간을 .number 가 다 먹게 하기 위해 flex-grow:1 을 추가해준다.
  (📍여기서 시행착오 있음-2)
• .symbol 의 width: 25% 를 추가 (.clear, .number 가 차지하고 남은)
  height는 전체를 다 먹게하기 위해 100%를 넣어준다. 자식요소의 button 들의 정렬을 위해 display:flex 와 세로 정렬을 위해 flex-direction: colum 을 추가한다.
• .number 의 자식인 div 들을 전부 선택하기 위해 .number > div 를 적고 (어차피 다른 애들은 button 으로 처리 되어 있어서 상관 없음ㅎ) 각 div 들이 full 로 차게하기 위해 width: 100%를 적어주고, div 안의 자식 요소들의 정렬을 위해 display:flex 를 추가
  
  
• button 들이 남은 공간을 1씩 가지게 하기 위해 flex-grow:1 을 추가 (📍여기서 시행착오 있음-3) button 의 텍스트들이 가로 세로 센터에 배치되게 하기 위해 display:flex 를 추가해주고 align-items: center; justify-content: center 추가
• AC 와 0 버튼은 다른 버튼들보다 길이가 2배이니 HTML의 해당 button 태그에 grow 라는 클래스를 추가 후 CSS 에 button.grow 로 flex-grow:2 추가
• 그 외에 background 나 font-size , color 등을 정리해주기
  (📍여기서 시행착오 있음-4)
  
  
  

---

시행착오

페어분이랑 HTML을 모두 작성하고, CSS에 flex만 정리 후 실제 코드를 넣어봤는데
웬걸,, flex가 제대로 작동하지 않았따..
우선 시간이 다돼서 각자 좀 더 공부해보고 주말에 만나서 작업하기로 하고
혼자 정말 뻘짓다하면서 이런 저런 시행착오를 겪었다
(중간에 아는 프론트엔드 개발자분께도 여쭤보고ㅠㅡㅠ.. 그런데 flex보다 grid를 추천해주셔서 오 grid도 공부해봐야지 생각함ㅋㅋㅋㅋ갓하은님🧡)

📍 시행착오-01

.btn 에 아무리해도 버튼들이 줄바꿈 하지 않아서 뭐지뭐지 했는데 flex-wrap이 아니라 direction 이였다...ㅎ..또 .btn 안에 clear, number, symbol 을 배치하는데 자꾸 symbol이 옆으로 가지 않고 밑으로 떨어져서 왜 그러지를 반복🥺.. wrap 도 줬는데 하고 생각하다보니 calculator 와 부모 요소인 .btn과 .display 에 높이값 들을 제대로 지정해주지 않았더라.. basis 와 grow , 그리고 .clear, .number, .symbol 에 width % 등을 요목조목 잘 써보니 퍼즐처럼 알맞게 잘 들어갔다.

📍 시행착오-02

.number 안의 button 들의 맨 아래줄에는 0 과 . 만 넣고 싶은데
1 왜 자꾸 눈치없이 옆에 붙니...
그래서 거꾸로 써보니 잘 맞는거 같았는데 숫자 위치가 이상했다ㅋㅋㅋ
결국 .number 안의 button 들을 row별로 묶어줘서 배치 함.. 뭔가 다른 방법이 있을 것 같은데 이건 좀 더 생각해봐야 될 것 같다는 생각이 든다.

📍 시행착오-03

0 과 AC 버튼에 똑같이 grow:2 를 줬는데 width 가 달라서 도대체 뭐가 문제기 했더니 같은 줄에 있는 . 과 ← 얘의 문자 길이가 달라 남는 공간이 달라지면서 사이즈가 달라지더라.. 그래서 button에 flex-basis 값을 0.9 로 하니까 똑같아짐ㅋㅋㅋ

📍 시행착오-04

box-shadow...넘나 어려운 것..
뉴모피즘 버튼을 만드는데 하얀배경에 하얀버튼은 쉽지만 하얀배경에 색깔버튼에 뉴모피즘 적용.. 너무 어렵다😭😭 이거는 hover 를 하면서 더 연습을 해봐야 될 것 같다.
계속 하다보면 x축 y축 blur 에 대해 적응되지 않을까..?

---

결과는 대성공!!!

여러번의 시행착오가 있었지만,,
(.number 영역에 0이 잘 정리되지않아서 결국 row끼리 묶음..🥺)
구 개의 시안을 만드는데 성공했다!
첫번째 계산기는 비핸스에 있는 디자인에서 컬러만 변경한 정도ㅎ
(디자인링크)