[SEB_FE] 계산기 목업 만들기

 

❓ 고려한 점

 

먼저 계산기를 크게 3가지 영역으로 나누었습니다.

• 닫기, 최소화, 최대화 버튼 영역
• 계산되는 숫자가 보일 영역
• 숫자와 기호 버튼들 영역
  이 3가지 영역을 display: flex를 사용하고 direction을 column으로 변경해 세로 축으로 정렬되게 했습니다.
  그리고 flex: grow로 일정 비율로 나누어지게 설정했습니다.

숫자와 계산 기호 영역도 flex: grow를 사용하여 일정 비율로 나누어지게 설정했습니다.
또한 hover와 active를 활용하여 hover일 경우 색이 변하고, 누르면 누른 효과가 나오게 설정했습니다.

기본
box-shadow: 2px 2px 6px #3c3c3dc0;

:active

box-shadow: 1px 1px 2px #4d515988;
position: relative;
top: 1px;

 

position: relative

• 요소 자기 자신의 원래 위치를 기준으로 배치
• 위치를 이동하면서 다른 요소에 영향을 주지 않음
• 문서 상 원래 위치가 그대로 유지
• top 1px으로 눌리는 느낌나게

 

가장 위의 버튼들은 내부 텍스트가 안보이다가 마우스가 hover되면 보이게 됩니다.

처음에 display: none으로 했었는데 이러면 버튼들도 전부 사라지게 되었었습니다.
그래서 font-size를 0으로 주고 hover일 경우 font-size를 줬습니다.

 

---

❗️ 문제점

 

❗️ 계산기가 정중앙에 위치하지 않는 현상

✅ height: 100vh로 계산기를 정가운데로 맞추기

 

❗️ 계산기 모서리를 border-radius를 줘서 동그랗게 만들면 버튼 영역이 튀어나오는 현상

✅ 계산기 영역에 overflow: hidden을 줘서 튀어나오는 부분 가리기

 

❗️ 각 버튼이 비율이 맞지 않아서 흐트러져 보이는 현상

✅ flex-shrink를 0으로 설정하여 자동으로 너비가 축소되지 않게 설정하고, flex-basis를 0으로 설정하여 내부 컨텐츠 크기 무시하고 일정 비율로 설정되게 하기