[HTML/CSS] 활용-2(계산기)

8.VScode의 레이아웃을 Flexbox를 이용하여 구현할 수 있다.
10.숫자 버튼, 기능 버튼을 Flexbox로 각각 배치할 수 있다.
11.검색을 통해 다양한 CSS 속성을 적용할 수 있다.

 

8.구현할 수 있다!

10.원하는 위치로 배치할 수 있다

11.다양한 css를 알고 있으며 시간이 조금 걸릴지라도 원하는 기능을 적용할 수 있다!

 

듀토리얼 베이스를 따라 핵심 키워드들을 지정하고 만든 새로운 계산기

 

듀토리얼에 맞춰서 제작을 하고 radius를 입히고 간격에 flex를 입혀서 비율대로 나뉘게 하고 색감은 색갈배치페이지에서 연분홍을 입력 후 추천되는 색들로 배치를 했으며 원하는 기능들을 추가로(듀토리얼은 기능이 더 적었고 색 배합도 달랐다.)추가해줬다.

 

https://app.haikei.app/ 배경도 사실은 그라데이션 이미지를 넣은 것이고 저 위에 숫자부분은 a+b=c형태의 2차 display :none상태인 계산입력부분도 따로 있는 상태이다.

 

어느정도 만족스러운 결과라고 생각했지만 동기분들의 과제를 보니 음성인식, 버튼클릭, 호버, 야간모드교체, 엄청난 디자인(쉐도우깍기, 색감배합 등).. 진짜 css를 단순하게 입힌 정도는 많치 않았다.

동기님이 알려주신 네트리파이, 깃, 배포 등을 추가적으로 학습하여 배포또한 했지만 다른 분들의 작품을 보면 조금 더 css에 창의력을 발휘했어야 했나..? 하는 아쉬움이 남는다.

 

추가적으로

아이콘은 frontawesome.com 

색 추출은  ColorZilla 확장프로그램 

예쁜 위치선정은 css-position

안티앨리어싱?은 transform : rotate(0.04deg) 

호버, 쉐도우 등이 있다.