22.05.04_TIL

📌 처음 페어분과 프로젝트(?)를 하는 날이라 살짝 긴장했다. 단순히 문제 푸는 것이 아닌 계산기의 목업을 제작해야하는 과정을 같이 하는 것이라 방향 잡는 법 부터해서 조금 생각을 해두었다.

 

 

📗 오늘 학습한 내용

CSS

• FlexBox 
  • basis
  • grow

JavaScript 알고리즘 풀이

• [Baekjoon]단어 길이재기

계산기 목업 및 CSS 디자인

 

 

오늘은 계산기를 페어분과 각자 디자인을 하면서 목업을 완성시키는 날이었다. 그런데 나는 keyPad의 크기를 고정시킨 뒤 grow를 사용해 맞게 배치하는 방법을 사용하였는데 이렇게 되면 화면의 크기가 줄어들 때 버튼의 크기는 줄어들지 않았다. 이를 방지하기 위해 라이브세션에서 basis만을 사용하여 버튼의 크기를 지정하는 법을 자세히 알게되었다.

또한, 다른 사람들의 다양한 디자인을 보고 느낀점으로는 나는 너무 틀에 갇혀있는 사람이 아닌가 생각했다. 물론 나랑 비슷하게 나와있는 계산기를 따라 목업을 구현하는 분들도 있었다.

할 수 있으면서도 하지 않는 것은 너무 좋지 않다고 생각이 들어 앞으로는 할 수 있는 것은 틀에 벗어나더라도 본 파일은 백업을 해두고 추가적으로 작업을 해서 완성해 보는 방향으로 가야겠다!!

 

페어분과 처음 작성한 목업

혼자 작성해본 계산기

basis속성만 이용한 계산기

 

📘 추가로 공부할 내용

DOM 조작방법

 

Flexbox 속성

 

JavaScript로 계산기 구현방법

 

 

금요일날 있을 계산기 구현에서 뒤쳐지지 않도록 DOM 조작 방법 및 계산기 구현방법, Flexbox 속성에 대해 다시 한번 공부하는 시간을 가져야 한다고 생각한다.

 

 

 

📝 오늘 느낀점 & 마음 가짐

• 틀에 갇힌 사고방식을 고칠 수 있도록 하자!!
• Flexbox의 basis속성에 대해 더 공부해보자!!