오늘은 지난주에 한 내용들을 복습하는 시간이 주어졌다. 지난주 금요일에 페어와 함께 계산기를 만들었는데, 내가 모르는 부분은 페어가 알려주고, 페어가 모르는 부분은 내가 알려주며 만들어서 끝낼 수 있었는데, 혼자 해도 비슷한 시간 안에 비슷한 퀄리티로 만들 수 있는지가 궁금해져서 기본 계산기보다 버튼이 많은 공학용 계산기를 만들어 보았다. 공학용 계산기중 가장 무난하게 생긴 구글의 공학용 계산기를 가지고와 비슷하게 만들어보는 시도를 하였다.
*구글 계산기
*내가 만든 계산기
공학용 계산기 html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>공학용 계산기 만들기</title> <link rel="stylesheet" href="cal_index.css"> <body> <div class="calculator"> <header> <img src="return.png"> <div id="result">0</div> </header> <main> <div class="row"> <button id="Rad" class="function">Rad</button> <button id="Deg" class="function">Deg</button> <button class="function">x!</button> <button class="function">(</button> <button class="function">)</button> <button class="function">%</button> <button class="function">AC</button> </div> <div class="row"> <button class="function">Inv</button> <button class="function">sin</button> <button class="function">In</button> <button class="nums">7</button> <button class="nums">8</button> <button class="nums">9</button> <button class="function">+</button> </div> <div class="row"> <button class="function">π</button> <button class="function">cos</button> <button class="function">log</button> <button class="nums">4</button> <button class="nums">5</button> <button class="nums">6</button> <button class="function">x</button> </div> <div class="row"> <button class="function">e</button> <button class="function">tan</button> <button class="function">√</button> <button class="nums">1</button> <button class="nums">2</button> <button class="nums">3</button> <button class="function">-</button> </div> <div class="row"> <button class="function">Ans</button> <button class="function">EXP</button> <button class="function">x<span id="small">y</span></button> <button class="nums">0</button> <button class="nums">.</button> <button id="equal">=</button> <button class="function">+</button> </div> </main> </div> </body>
공학용 계산기 css
* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; } .calculator { width: 661px; height: 314px; display: flex; flex-direction: column; } header { flex-grow: 1; display: flex; justify-content: space-between; border: 1px solid gray; border-radius: 10px; font-size: 50px; text-align: right; padding: 10px; } img { width: 40px; height: 40px; padding: 10px; } main{ display: flex; flex-direction: column; flex-wrap: wrap; align-items: stretch; flex-grow: 2.5; } .row { display: flex; flex-grow: 1; flex-basis: 0; } button { flex-grow: 1; flex-basis: 0; margin: 5px; border: none; border-radius: 5px; } .function { background-color: #d5d7db; } .nums { background-color: #EFF1F2; } #equal { background-color: #367DEF; color: white; } #Rad { margin-right: 0; padding-right:5px; border-right: 1px #9DA0A4 solid; border-collapse: collapse; border-top-right-radius: 0; border-bottom-right-radius: 0; } #Deg { margin-left: 0; padding-left:5px; border-left: 1px #9DA0A4 solid; border-top-left-radius: 0; border-bottom-left-radius: 0; } #small { vertical-align: super; font-size: smaller; }
생각보다 혼자서 하니 막히는 부분이 있었지만, 이전에 만든 코드들을 확인해가며 차근차근 만들었다. 몇 부분 수정해야할 부분들도 있지만 지금 만든것이 그거대로 예쁘다고 생각해 고치지 않을 것이다.
이제야 뭔가 display:flex를 이용하는 방법을 알 것 같다. 역시 답은 계속해서 해보는 것 뿐이다.
오늘 추가적으로 동기부여 세션이 줌을 통해 진행되었다. 계속해서 다짐하며 내가 끝까지 부트캠프를 완주할 수 있게 노력하는 것이 중요하고, 내가 할 수 있다고 믿는 것이 중요하다고 생각한다.
css 박스 설명 https://css-tricks.com/snippets/css/a-guide-to-flexbox/
backdrop fillter https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
