✍ 계산기 목업 1차 결과물
1차 결과물은 그냥 넣고 싶은 색 위주로 막 넣었다. 버튼별로 한 줄씩 박스 단위로 묶어서 각각의 flexbox를 이용하여 크기를 조정했다.
🎯 계산기 목업 최종 결과물
배경사진을 넣어보고 싶어서 찾아보다가 라이젠 CPU 이미지가 마음에 들어서 선택했다. 그리고 그에 맞는 색으로 계산기를 변경했다. 그리고 hover, active를 이용하여 버튼을 클릭하면 누르는 느낌이 나도록 설정했다.
📝 Quiz
flex-grow의 값이 0이 아니라면, flex-basis에서 설정한 값보다 커질 수 있다.
flex-shrink의 값이 0이 아니라면, flex-basis에서 설정한 값보다 작아질 수 있다.※ 요소의 크기는 flex-basis의 값으로 항상 유지된다 (X)
👀 Tip
브라우저에서 빈공간이 있을 경우
=> 초기셋팅
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div.container => <div class="container"></div>
div*3 => <div></div> 3개가 생김
똑같은거 선택하고 싶을때 => Ctrl + D🏁 회고
최종 결과물에서 더 발전시키고 싶은 부분이 있다면 border animation을 적용시켜보고 싶다. CSS는 하면 할수록 끝이 없다는 느낌을 받는다... 다음주에는 JavaScript를 배우는데, 이제부터 복습하는 시간을 좀 더 늘리고 모르는 것을 만나더라도 두려워 하지 말자!!
