SEB_FE 블로깅 챌린지 _ 5일차 (CSS와 HTML을 이용한 계산기 만들기)

<느낀 점> 

어제 과제 2에 이어서 계산기를 꾸며 보았다. 

이론으로 배우던 hover도 사용해 보고, active 등도 사용해 보았다!

 

pair 활동을 하면서 서로 코드를 보는 시간도 가졌는데, 코드가 완성되더라도

"중복된 코드를 줄이는 것" 과 "다른 사람이 보기 쉽게" 하기 위해 코드를 정리하게 되었다.

 

중복된 내용은 class와 id를 이용해 정리해 주었고,

같은 요소에 들어간 코드더라도 각  폰트, 색상, 배치(flex) 등 기능별로 코드 문단을 나눠주니 나중에 코드를 수정할 때에도 굉장히 편리했다. 추가하고 싶은 기능이 있을때 추가하기도 간편했다.

 

id와 class는 같이 사용하면 안되는 줄 알았는데 같이 사용해도 된단다!

이렇게 pair가 코드를 줄이는 팁을 주어서 복붙한 코드를 한 문단으로 줄일 수 있었다.

 

과제 중 문제 :

1. 문제 : hover와 active에서 backgroundcolor를 사용해서 마우스를 올리면 무지개색, 클릭시에는 어두운 색으로 하고 싶었는데 원하는 대로 되지 않았다.

 

문제의 원인 : 자료를 찾았을때는 위 기능이 동작 할 거 같았는데 아마 클릭시에도 마우스가 올라가있는 hover  상태라 원하는 결과가 나오지 않는다는 결론을 내렸다.

 

결론 이유 :각 hover와 active 중 한가지만 사용했을때는 동작이 됐기 때문이다!

 

대체 해결 방안 :그래서 같은 속성을 사용하기 보다 active 에서는 position을 이용해 버튼이 눌리는듯 한 효과를 주었다.

 

다음과 같은 계산기 껍데기를 완성하게 되었다~

 

cf 1 . 다른사람들이 과제를 제출할 때 움짤? 로 내는 것을 보았다. 

역시 캡쳐로는  내가 얼만큼 했는지 알기 힘들기 때문에 움짤을 따는 법을 배웠다.!

참고로 윈도우의 화면녹화기능 (윈도우+G)를 이용해도 좋지만~~ 동영상으로 찍히고 원하는 화면 부분만 딸 수 없기에 불편한 점이 있다 ㅜ

ScreenToGif 라는 무료 gif 녹화 어플을 다운 받아서 사용하고 있다.

 

cf 2 . 과제를 서로 발표하는 시간을 가졌다.

  기본 계산기만 만들었을 줄 알았는데 의외로 계산기의 컨셉을 잡아서 기능을 구현하기 위해 써치 해본 사람들이 많았다.

 인상 깊었던 부분은 중간 버튼의 크기 한개가  계산기였는데.. 버튼을 좀더 세부하게 많이 만들어서 큰 버튼인 곳은 보이지 않게 숨긴거라고 한다!

hover기능으로 이미지를 바꾼다거나, 야간모드, 낮모드 창인지에 따라 계산기 디자인이 변한다든가 등  좋은 아이디어를 들을 수 있는 시간이었다.

 

cf3. 영역을 나누는 flex 속성의 grow shrink basis 에서 grow로 영역의 비율을 줬었는데 준 값대로 나눠지지 않았다.

     여기서 기본값은 basis 라는 것이다. basis 로 영역의 %를 먼저 가져가고,   남은 비율에서 grow로 비율을 준다.

    영역을 나눌 때 grow로만 하고 싶다면, basis의 값을 0을 주도록 하자!

    그 후 justify-content 와 align-items 를 통해 요소들을 정렬해주면된다.